jquery 选择器筛选器事件绑定与事件委派

Posted 柳帅

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 选择器筛选器事件绑定与事件委派相关的知识，希望对你有一定的参考价值。

一、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>
    <前端-jQuery介绍


 jQuery


 Jquery详解


 Jquery  大纲


 前端开发JS框架之jQuery的基础知识分享


 Jquery之事件委派详解