jQuery基本操作

1、jQuery選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery選擇器</title>
    <style type="text/css">
        #div1{
            color: red;
        }
        .box{
            color: green;
        }
        .list li{
            margin-bottom: 10px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //選擇元素的規(guī)則和css樣式相同
            $('#div1').css({color: 'pink'});
            $('.box').css({fontSize: '30px'});
            $('.list li').css({
                background: 'green',
                color: '#fff',
                fontSize: '20px',
                marginBottom: '10px'
            });
        })
    </script>
</head>
<body>
    <div id="div1">這是一個div元素</div>
    <div class="box">這是第二個div元素</div>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

2、選擇集轉移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選擇集轉移</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //prev()是同級的上一個元素，prevAll()是同級的上面所有的元素
            //next()是同級的下一個元素，nextAll()是同級的下面所有的元素
            //修改#div1的下一個元素的樣式
            $('#div1').next().css({color: 'red'});
            //修改#div1的下面所有p標簽設置樣式
            $('#div1').nextAll('p').css({color: 'red'});
            //選擇上一級的父元素
            /*$('#span01').parent().css({
                width:'100px',
                height:'100px',
                background:'gold'
            })*/
            //獲取祖級用$('#span02').parent().parent()不可取，可用closest('div')獲取離span02最近的div
            //closest可以選擇離自己最近的元素，元素可以是父級，也可以是子集
            $('#span01').closest('div').css({
                width:'200px',
                height:'200px',
                background:'pink'
            })
            /*
            $('.list li')與$('.list').children()的區(qū)別：
                原始的選擇集不一樣
                $('.list li')不能通過end()回到父級
                $('.list').children()可以通過end()回到父級
            */
            $('.list').children().css({
                background:'gold',
                height:'30px',
                marginBottom:'10px'
            }).end().css({
                background:'green'
            })
            //eq(2)是選擇索引等于2的第三個li，siblings()表示除第三個之外的其它兄弟li
            $('.list2 li:eq(2)').css({background:'gold'}).siblings().css({background:'green'});
            //find()是選擇div內的class等于link1的元素
            $('#div2').find('.link1').css({color:'red'});
        })
    </script>
</head>
<body>
    <div id="div1">這是一個div元素</div>
    <div>這是第二個div元素</div>
    <p>這是一個p元素</p>

    <div>
        <p>
            <a href="#">騰訊網</a>
            <span id="span01">span元素</span>
        </p>
    </div>

    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

    <ul class="list2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <div id="div2">
        <p>
            <a href="#" class="link1">騰訊網</a>
        </p>
    </div>
</body>
</html>

3、jQuery樣式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery樣式操作</title>
    <style type="text/css">
        .div2{
            color: red;
        }
        .big{
            font-size: 30px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*jQuery用同一個函數即可以取值、也可以賦值*/
            //讀取樣式
            alert($('#div1').css('fontSize'));//16px
            //設置（寫入）樣式
            $('#div1').css({background:'gold'});
            //增加行間樣式
            $('#div1').addClass('big');
            //減少行間樣式，多個樣式用空格分開
            $('#div1').removeClass('div2 big');
        })
    </script>
</head>
<body>
    <div id="div1" class="div2">這是一個div元素</div>
</body>
</html>

4、click事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>click事件</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .sty{
            background-color: green;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 給按鈕綁定click事件
            $('#btn').click(function(){
                //重復切換sty樣式
                $('.box').toggleClass('sty');
            })
        })
    </script>
</head>
<body>
    <input type="button" value="切換" id="btn">
    <div class="box"></div>
</body>
</html>

5、jQuery索引值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery索引值</title>
    <style type="text/css">
        .list li{
            height: 30px;
            margin-bottom: 10px;
            background-color: gold;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.list li').click(function(){
                // alert(this.innerHTML);//彈出標簽中的內容
                alert($(this).index());//彈出下標
            })
        })
    </script>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

6、jQuery做選項卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery做選項卡</title>
    <style type="text/css">
        .btns{
            width: 500px;
            height: 50px;
        }
        /*選項卡的樣式*/
        .btns input{
            width: 100px;
            height: 50px;
            background-color: #ddd;/*默認灰色*/
            color: #666;
            border: 0px;
        }
        /*被選中的選項卡的樣式*/
        .btns input.cur{
            background-color: gold;
        }
        /*內容區(qū)的樣式*/
        .contents div{
            width: 500px;
            height: 300px;
            background-color: gold;
            display: none;/*默認隱藏*/
            line-height: 300px;
            text-align: center;
        }
        /*被選中的內容區(qū)的樣式*/
        .contents div.active{
            display: block;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btns input').click(function() {
                //this是原生的對象
                // alert(this);//彈出[object HTMLInputElement]，說明this就是當前點擊的input元素
                //jQuery的this對象使用時要用$()包起來，這樣就可以調用jQuery的方法了
                //給當前元素添加選中樣式，為兄弟元素移除選中樣式
                $(this).addClass('cur').siblings().removeClass('cur');
                //$(this).index()獲取當前按鈕所在層級范圍的索引值
                //顯示對應索引的內容區(qū)，隱藏其它兄弟內容區(qū)
                $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
            });
        })
    </script>
</head>
<body>
    <div class="btns" id="btns">
        <input type="button" value="tab01" class="cur">
        <input type="button" value="tab02">
        <input type="button" value="tab03">
    </div>
    <div class="contents" id="contents">
        <div class="active">tab文字內容一</div>
        <div>tab文字內容二</div>
        <div>tab文字內容三</div>
    </div>
</body>
</html>

7、jQuery屬性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery屬性操作</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*
            alert($('.box').html());//這是一個div元素
            $('.box').html('<a );
            */
            /*
            讀寫值為布爾類型的屬性用prop方法
            讀寫值為非布爾類型的屬性用attr方法
            */
            /*
            $('.box').attr({title:'這是一個div!'});//寫入title屬性，并賦值
            alert($('.box').attr('class'));//讀屬性class的值，彈出box
            */
            /*
            var $src = $('#img1').attr('src');
            alert($src);//img/1.png
            $('#img1').attr({
                src:'img/2.gif',
                alt:'圖片二'
            });
            */
            /*
            alert($('#check').prop('checked'));//選中為true，非選中為false
            $('#check').prop({checked:true});//設置默認勾選
            */
            // alert($('.box2').html());//<span>這是div元素內的span</span>
            alert($('.box2').text());//這是div元素內的span
        })
    </script>
</head>
<body>
    <div class="box">這是一個div元素</div>

    <img id="img1" src="img/1.png" alt="一張圖片">

    <input type="checkbox" id="check">多選

    <div class="box2">
        <span>這是div元素內的span</span>
    </div>
</body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。