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

一、jQuery简介

 　　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实例

原文地址：https://www.cnblogs.com/angle6-liu/p/10179473.html

时间： 2024-08-04 16:05:18

jquery 选择器、筛选器、事件绑定与事件委派的相关文章

jQuery选择器,筛选器,属性选择器

jQuery jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互,能够极大地简化JavaScript编程.它的宗旨就是:“Write less, do more.“ jQuery的优势一款轻量级的JS框架.jQuery核心js文件才几十kb,不会影响页面加载速度. 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法一丶什么是JQuery JQuery: ???????JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 ??????js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: ???????链式编程:可以.的形式实现多个功能 ?

JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段: 事件捕获 --> 事件目标 --> 事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover--)首先发生在document上,然后依次传递给body.……最后到达目的节点(即事件目标). ● 事件冒泡:事件到达事件目标之后不会结束,会逐层向上冒泡,直至document对象,跟事件捕获相反 1.onlick -->事件冒泡,

理解Javascript中的事件绑定与事件委托

最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定最直接的事件绑定:HTML事件处理程序如下示例代码,通过节点属性显式声明,直接在HTML中,显式地为按钮绑定了click事件,当该按钮有用户点击行为时,便会触发myClickFunc方法. /* html */ <button id="btn" onclick="myCl

事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

● 事件分为三个阶段: 事件捕获 --> 事件目标 --> 事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover--)首先发生在document上,然后依次传递给body.……最后到达目的节点(即事件目标). ● 事件冒泡:事件到达事件目标之后不会结束,会逐层向上冒泡,直至document对象,跟事件捕获相反 1.onlick -->事件冒泡,重写onlick会覆盖之前属性,没有兼容性问题 ele.onclik = null; //解绑单击事件,将onlic

jquery 通配符筛选器事件工具函数

(1)通配符 $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']");//id属性以code结束的所有input标签 $("input[id*='code']");//id属性包含code的所有input标签 [属性名称] 匹配包含给定属性的元素 [att=value] 匹配包含给定属性的元素 (大小写区分) [att*=value] 模糊匹配 [att!=val

jQuery 判断元素上是否绑定了事件

我研究了一下之后发现,jQuery都将事件缓存起来了,其实也是为了防止内存溢出以及页面unload的时候的速度,也包括多函数触发,方便管理等诸多好处,具体可以参考此文. jQuery会在window.unload的时候卸载所有绑定过的事件,释放内存的. OK,言归正传.判断元素上是否绑定过事件用如下语句 jQuery.data(elem,"events")[type] //老版本也能用 $(elem).data("events")[type] //1.2.3以后才能

jQuery查看dom元素上绑定的事件列表

作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的.比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台... 好,不扯远,说说当你想看到网站上某个元素绑定的事件函数的代码时应该怎么做吧. 查看原生绑定的事件函数代码所谓原生就是通过addEventListener方法绑定到dom元素上.这个好办: 审查绑定事件的元素(对着它右键->审查元素) 在弹出的Elements视图的控制台,右侧点击“Event Listeners”页签然后

JQuery事件——绑定多事件.on()和卸载事件.off()

绑定多事件.on()和卸载事件.off() 1 .on()绑定事件,通过空格分离传递不同的事件名,可以同时绑定多个事件,每一个事件执行自己的回调方法,可以通过第二对象或参数,当一个事件被触发时,要传递给事件处理函数 2 .on()绑定2个事件 $("elem").on("mousedown mouseup",fn) 3 快捷方式与on的不同 on可以自定义事件名多个事件绑定同一个函数多个事件绑定不同函数将数据传递到处理程序 4 事件