jquery 選擇器、篩選器、事件綁定與事件委派

本文轉載自查看原文 2018-12-26 18:03 699 web學習

一、jQuery簡介

　　1、可用的jQuery服務器網站：https://www.bootcdn.cn/

 　　jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理
HTMLdocuments、events、實現動畫效果，並且方便地為網站提供AJAX交互。

　　jQuery的引入

    <script src='jquery 3.3.1.js'></script>//引入jQuery代碼(模塊)
    <script type="text/javascript">

        //寫自己的js或者jquery代碼
        
    </script>

二、jQuery與dom對象的關系

(1)jQuery是dom對象的集合;
(2)jQuery和dom對象的方法和屬性是隔離的,不能瞎用;
(3)$ <==>jQuery;等價的

兩者之間的轉換關系
$('選擇器')[索引]  ---->  dom對象
$('dom對象')      ---->  jquery對象

三、選擇器

　　1、基礎選擇器

$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

　　2、層級選擇器（>：兒子選擇器；+:毗鄰選擇器；~：弟弟選擇器）

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

　　3、基本篩選器（even：偶數；odd:奇數；lg：小於）

$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

　　4、屬性選擇器

基本語法:$("[屬性1][屬性2]...")

$('[id="div1"]')   $('["alex="sb"][id]')

　　5、表單選擇器

$("[type='text']")----->$(":text")         注意只適用於input標簽  :
$("input:checked")

　　6、表單屬性選擇器

    :enabled
    :disabled
    :checked
    :selected

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
</head>
<body>
    <div class="c1" id="i1">DIV</div>

    <div class="c2">
        <p class="c4">111</p>
        <a href="">click</a>
    </div>
    <div class="p1">
         <p class="c3" id="i3">222</p>
         <p class="c3">333</p>
         <p class="c3" id="i2">444</p>
         <div>
             <p>孫子</p>
         </div>
         <p class="c3">555</p>
         <p class="c3 c8">666</p>
         <p class="c3">777</p>
         <p class="c3">888</p>
    </div>

    <div alex="123" peiqi="678">alex和配齊</div>
    <div alex="123">alex</div>
    <div alex="234">egon</div>
    <div peiqi="678">8888</div>
    <div class="c5">
        <input type="checkbox" name='in' value='456'>111
        <input type="checkbox" name='in' checked="checked">222
        <input type="checkbox" name='in'>333
    </div>
    <select>
      <option value="1">Flowers</option>
      <option value="2" selected="selected">Gardens</option>
      <option value="3" selected="selected">Trees</option>
     </select>

    <hr>

    <div class="c6" yuan="123">123</div>
    <div class="c7" yuan="234">234</div>


    <div class="c9">
        <p>111</p>
        <p>222</p>
        <div class="c10">
            <p>333</p>
        </div>
        <a href="">click</a>
    </div>
    



    <script src='jquery 3.3.1.js'></script>//引入jQuery代碼(模塊)
    <script type="text/javascript">
        //寫自己的js或者jquery代碼
        // 基本選擇器      
        // $('*').css('color','red');//通用選擇器,選擇所有
        // $('p').css('color','green');//元素選擇器
        // $('#i1').css('color','red');//ID選擇器
        // $('.c3').css('color','red');//類選擇器
        
        //層級選擇器
        // $('.p1 p').css('color','red');//子孫選擇器
        // $('.p1>p').css('color','red');//兒子選擇器
        // $('.c8+p').css('color','red');//毗鄰選擇器,只選擇挨着的第一個指定標簽
        // $('.c8~p').css('color','red');//弟弟選擇器

        //基本篩選器
        // $('.p1 p:eq(3)').css('color','red');//選擇索引為3的那個標簽,返回值為dom對象
        // $('.p1 p:first').css('color','red');//第一個
        // $('.p1 p:last').css('color','red');//最后一個
        // $('.p1 p:even').css('color','red'); //偶數
        // $('.p1 p:lt(2)').css('color','red'); //小於
        // $('.p1 p:gt(2)').css('color','red'); //大於

        // 屬性選擇器
        // $('[alex]').css('color','red'); //屬性名查找
        // $('[alex="123"]').css('color','red');//key=value查找
        // $("[alex='123'][peiqi='678']").css('color','red');//注意引號區分,多屬性之間用[]區分,屬性之間不能用空格


        //表單選擇器
        // $(':checkbox');//獲取到復選框的輸入標簽jquery對象
        // $('[type="checkbox"]');

    </script>
</body>
</html>

選擇器演示示例代碼

　　注意:jquery下載好,並加載好,再交給瀏覽器解析.

四、篩選器進階

　　1、取文本方法

取值------------------------------------------------------------------
$('選擇器')eq(2).html(); 獲取第二個元素內部的html文本(包含標簽);
$('選擇器')eq(2).text();只獲取第二個元素中的文本內容;
賦值------------------------------------------------------------------
$('選擇器')eq(2).html('值'); html文本形式替換標簽中的內容;
$('選擇器')eq(2).text('值'); 字符串形式替換內容;

　　2、過濾篩選器

$("li").eq(2)  //選擇第二個元素
$("li").first()  //獲取到第一個元素
$("ul li").hasclass("test") //判斷是否有class='test'屬性，按照or判斷，有就返回True

$(".c3:"+"eq("+index+")") ;
    1、結果是一個dom對象；
    2、需要做字符串的拼接；
    如：var index=3;
       $(".c3:"+"eq("+index+")").css("color","red"); 

$(".c3").eq(index)
     1、結果是一個$對象;
     2、不需要拼接，比較好用；
     如：var index=3;
       $(".c3").eq(index).css("color","red");

$(' :eq(index)')與$(' ').eq(indext)對比

　　3、查找選擇器（導航選擇器）

        // 子--子孫
        // $('.c9').children('p').css('color','red');//找所有的兒子里面的p標簽
        // $('.c9').find('p').css('color','red');//找子孫后代所有的p標簽
        // $(".p1").children(":first").css("color","red");
        //$(".p1").children().first().css("color","red");
        //兄弟(next)
        // $('#i2').next().css('color','red');//找i2下一個兄弟標簽        
         // $('#i2').nextAll().css('color','red');//找i2下面所有的兄弟標簽
         // $('#i2').nextUntil('.c8').css('color','red');//選擇直到.c8位置的兄弟標簽,去頭去尾取中間
        //兄弟(prev)
        // $('#i2').prev().css('color','red');//找i2先前的一個兄弟標簽     
        // $('#i2').prevAll().css('color','red');//找i2先前所有的兄弟標簽
        // $('#i2').prevUntil('#i3').css('color','red');//選擇直到#i3位置的兄弟標簽,去頭去尾

        //父親(parent)        
        // $('#i2').parent().css('color','red');//找i2的父親標簽
        //$('#i2').parents('可以給定條件').css('color','red');//找i2的祖先標簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
</head>
<body>
    <div class="c1" id="i1">DIV</div>

    <div class="c2">
        <p class="c4">111</p>
        <a href="">click</a>
    </div>
    <div class="p1">
         <p class="c3" id="i3">222</p>
         <p class="c3">333</p>
         <p class="c3" id="i2">444</p>
         <div>
             <p>孫子</p>
         </div>
         <p class="c3">555</p>
         <p class="c3 c8">666</p>
         <p class="c3">777</p>
         <p class="c3">888</p>
    </div>

    <div alex="123" peiqi="678">alex和配齊</div>
    <div alex="123">alex</div>
    <div alex="234">egon</div>
    <div peiqi="678">8888</div>
    <div class="c5">
        <input type="checkbox" name='in' value='456'>111
        <input type="checkbox" name='in' checked="checked">222
        <input type="checkbox" name='in'>333
    </div>
    <select>
      <option value="1">Flowers</option>
      <option value="2" selected="selected">Gardens</option>
      <option value="3" selected="selected">Trees</option>
     </select>

    <hr>

    <div class="c6" yuan="123">123</div>
    <div class="c7" yuan="234">234</div>


    <div class="c9">
        <p>111</p>
        <p>222</p>
        <div class="c10">
            <p>333</p>
        </div>
        <a href="">click</a>
    </div>
    



    <script src='jquery 3.3.1.js'></script>//引入jQuery代碼(模塊)
    <script type="text/javascript">
        //寫自己的js或者jquery代碼
        // 基本選擇器      
        // $('*').css('color','red');//通用選擇器,選擇所有
        // $('p').css('color','green');//元素選擇器
        // $('#i1').css('color','red');//ID選擇器
        // $('.c3').css('color','red');//類選擇器
        
        //層級選擇器
        // $('.p1 p').css('color','red');//子孫選擇器
        // $('.p1>p').css('color','red');//兒子選擇器
        // $('.c8+p').css('color','red');//毗鄰選擇器,只選擇挨着的第一個指定標簽
        // $('.c8~p').css('color','red');//弟弟選擇器

        //基本篩選器
        // $('.p1 p:eq(3)').css('color','red');//選擇索引為3的那個標簽,返回值為dom對象
        // $('.p1 p:first').css('color','red');//第一個
        // $('.p1 p:last').css('color','red');//最后一個
        // $('.p1 p:even').css('color','red'); //偶數
        // $('.p1 p:lt(2)').css('color','red'); //小於
        // $('.p1 p:gt(2)').css('color','red'); //大於

        // 屬性選擇器
        // $('[alex]').css('color','red'); //屬性名查找
        // $('[alex="123"]').css('color','red');//key=value查找
        // $("[alex='123'][peiqi='678']").css('color','red');//注意引號區分,多屬性之間用[]區分,屬性之間不能用空格


        //表單選擇器
        // $(':checkbox');//獲取到復選框的輸入標簽jquery對象
        // $('[type="checkbox"]');


        // 篩選器進階
        // $(".p1 p").eq(1);//獲取到的結果依舊是一個jquery對象
        // $(".p1 p").eq(1).text(); 
        // $('.p1 p').ep(2).html();

        // 以下較為麻煩,需要做字符串的拼接
        // var index=3;
        // $(".c3:"+"eq("+index+")").css("color","red"); 
        // $(".c3").eq(index).css("color","red");
        // console.log($('.c8').hasclass('t1'));//是否存在class='t1',如果存在返回True;

        // 導航查找
        // 子--子孫
        // $('.c9').children('p').css('color','red');//找所有的兒子里面的p標簽
        // $('.c9').find('p').css('color','red');//找子孫后代所有的p標簽
        // $(".p1").children(":first").css("color","red");
        //$(".p1").children().first().css("color","red");
        //兄弟(next)
        // $('#i2').next().css('color','red');//找i2下一個兄弟標簽        
         // $('#i2').nextAll().css('color','red');//找i2下面所有的兄弟標簽
         // $('#i2').nextUntil('.c8').css('color','red');//選擇直到.c8位置的兄弟標簽,去頭去尾取中間
        //兄弟(prev)
        // $('#i2').prev().css('color','red');//找i2先前的一個兄弟標簽     
        // $('#i2').prevAll().css('color','red');//找i2先前所有的兄弟標簽
        // $('#i2').prevUntil('#i3').css('color','red');//選擇直到#i3位置的兄弟標簽,去頭去尾

        //父親(parent)        
        // $('#i2').parent().css('color','red');//找i2的父親標簽
        //$('#i2').parents('可以給定條件').css('color','red');//找i2的祖先標簽

    </script>
</body>
</html>

屬性操作與選擇器演示代碼

五、事件綁定

綁定事件的語法:
$('選擇器 ').事件(function()
{
    執行的代碼;
})
注意:內部的this是dom對象;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加一個元素</title>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <button >點擊添加</button>
    <script src='jquery 3.3.1.js'></script>
    <script type="text/javascript">

        //給button添加點擊事件
        $('button').click(function (){
            $('ul').append('<li>444</li>');
        })
        //給li標簽添加點擊事件
        $('li').click(function(){
            //內部的this是一個dom對象            
            alert($(this).text());
        })
    </script>

</body>

</html>

low版事件綁定示例

　　注意:我們這個綁定的示例,新增添的<li>444</li>標簽沒有點擊事件,這不是我們想要的,所以我們需要學習高級一點的綁定事件,事件綁定+事件委派;

六、事件綁定與委派（推薦使用此方法綁定事件）

綁定事件+委派的語法:
父項$.on('事件','需要委派的標簽',function()
{
    執行的代碼;
})
注意:內部的this是dom對象;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加一個元素</title>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <button >點擊添加</button>
    <script src='jquery 3.3.1.js'></script>
    <script type="text/javascript">

        //給button添加點擊事件
        $('button').click(function (){
            $('ul').append('<li>444</li>');
        })
        //通過父項綁定事件並委派事件
        $('ul').on('click','li',function(){
            //內部的this是一個dom對象            
            alert($(this).text());
        })

    </script>

</body>

</html>

升級版事件綁定示例

七、屬性操作（補充）

        1 文本操作
              $("").html()
              $("").text()
              $("").html("參數")
              $("").text("參數")
        2 屬性操作
              $().attr("")
              $().attr("","")
              $("p").attr("alex")
              $("p").attr("alex","dsb")
              $("p").removeAttr("class")

        3 class  操作
              $("p").addClass("c1")
              $("p").removeClass("c1")

八、實例補充

$(function(){
      jquery代碼
    
})  

代碼先把文檔所有的內容加載完;
再執行  $( )  括號里面的代碼

jquery的鏈式結構:表示的是當jquery調用方法時,代碼的返回值還是當前的jquery對象;

 $(this).next().removeClass("hide");
該代碼返回值是$(this).next();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左側欄</title>
    <style type="text/css">
        body{
            margin:0;
            padding: 0;
        }
        ul{
            margin: 0;
        }
        aside{
            width: 20%;
            height: 800px;
            background-color: #BFA372FF;
        }
        button{
            display: inline-block;
            height: 50px;
            width:100%;
            line-height: 50px;
            background-color: #29C2D0FF;
            color:white;
            font-size: 20px;
            text-align: center;
            margin-top:2px;

        }
        .hide{
            display:none;
        }
    </style>
    <script src='jquery 3.3.1.js'></script>
    <script type="text/javascript">
        $( function(){
            $('button').on('click',function(){
            $(this).next().removeClass('hide');
            $(this).parent().siblings().children('aside .nav').addClass('hide');
            })    

        })
    
    </script>
</head>
<body>
    <aside>
        <div>
            <button class='title'>第一章</button>
            <ul class='nav hide'>
                <li>111</li>
                <li>111</li>
                <li>111</li>
            </ul>
        </div>
        <div>
            <button class='title'>第二章</button>
            <ul class='nav hide'>
                <li>222</li>
                <li>222</li>
                <li>222</li>
            </ul>
        </div>
        <div>
            <button class='title'>第三章</button>
            <ul class='nav hide'>
                <li>333</li>
                <li>333</li>
                <li>333</li>
            </ul>
        </div>
    </aside>
    

    
</body>
</html>

左側菜單欄jquery實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>導航圖</title>
    <style type="text/css">
        div{
            margin-top: 15px;
            width:600px;
            height: 200px;
            line-height: 200px;
            background-color: #32A6CCFF;
            text-align:center;
        
        }
        ul{
            margin: 0;
            padding: 0;
            font-size: 0;

        }
        ul li{
            display: inline-block;
            line-height: 200px;
            font-size: 38px;
            text-align: center;
            width: 200px;
        }
        .c1{
            background-color: #A662D2FF;
        }
        .hide{
            display:none;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script type="text/javascript">

        $(function(){
            $('li').on('click',function(){
                $(this).css('color','white');
                $(this).css('background-color','#E95469FF');
                $(this).siblings().css('background-color',' #32A6CCFF');
                $(this).siblings().css('color','black');

                // alert($(this).val());
                let value=$(this).val()
                let dis_arr=$(this).parents().parent().siblings();
                dis_arr.addClass('hide');
                dis_arr.eq(value).removeClass('hide');

            })
        })
    </script>
</head>
<body>
    <div>
        <ul>
            <li class='nav' value="1">第一章</li>
            <li class='nav' value="2">第二章</li>
            <li class='nav' value='3'>第三章</li>
        </ul>
    </div>
    <div class='hide c1'><h1>123</h1></div>
    <div class='hide c1'><h1>456</h1></div>
    <div class='hide c1'><h1>789</h1></div>

</body>
</html>

tab表單切換jQuery實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

     <button>全選</button>
     <button>取消</button>
     <button>反選</button>
     <hr>
     <table border="1">
         <tr>
             <td><input type="checkbox"></td>
             <td>111</td>
             <td>111</td>
             <td>111</td>
             <td>111</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>222</td>
             <td>222</td>
             <td>222</td>
             <td>222</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>333</td>
             <td>333</td>
             <td>333</td>
             <td>333</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>444</td>
             <td>444</td>
             <td>444</td>
             <td>444</td>
         </tr>
     </table>





<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        $('button').on('click',function(){
            switch($(this).text()){
                case '全選':
                    $('[type="checkbox"]').prop('checked','checked');
                    break;
                case '取消':
                    $('[type="checkbox"]').prop('checked',false);
                    break;
                case '反選':
                    $("table :checkbox").each(function(){
                     $(this).prop("checked",!$(this).prop("checked"));
                 })
                    break;
                default:console.log(123);
                    break;
               
            }
        })
    
     

            // $("button").click(function(){

            //    if($(this).text()=="全選"){    // $(this)代指當前點擊標簽

            //        $("table :checkbox").prop("checked",true)
            //    }
            //     else if($(this).text()=="取消"){
            //        $("table :checkbox").prop("checked",false)
            //    }
            //     else {
            //        $("table :checkbox").each(function(){

            //          $(this).prop("checked",!$(this).prop("checked"));

            //      });
            //    }



            // });

    </script>
</body>
</html>

table反選操作prop的使用

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery選擇器，篩選器，屬性，事件基礎 jQuery事件之on()方法綁定多個選擇器,多個事件 jquery on()方法綁定多個選擇器,多個事件 jquery on()方法綁定多個選擇器,多個事件 jquery on()方法綁定多個選擇器,多個事件 JQuery（選擇器、事件、DOM操作） Jquery 篩選選擇器 jQuery選擇器之基本篩選選擇器 jQuery選擇器之屬性篩選選擇器 select選中的選擇器以及thymeleaf3.0.5 綁定事件