jQuery关于过滤器，选择器

最新推荐文章于 2022-05-07 13:08:38 发布

tj111!!!

最新推荐文章于 2022-05-07 13:08:38 发布

阅读量69

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_51330398/article/details/119304311

版权

笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

选择器

就是定位条件；通知jquery函数定位满足条件的DOM对象。

1.1基本选择器
    id 选择器：$("#id")、class选择器：$(".class名称")、标签选择器：("标签名称")

1.2 所有选择器：
    语法：$(“*”) 选取页面中所有DOM对象。

1.3 组合选择器
    组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合id，class，标签名等。
    语法：$(“id,class,标签名”)

1.4 表单选择器
    表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均
    可做出相应选择。
            $(":input") 匹配所有 input, textarea, select 和 button 元素
            $(":text")选取所有的单行文本框
            $(":password")选取所有的密码框
            $(":radio")选取所有的单选框
            $(":checkbox")选取所有的多选框
            $(":file")选取所有的上传按钮
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <style type="text/css">
           div{
               background: gray;
               width: 200px;
               height: 100px;
           }
           .two{
               background: gold;
               font-size: 40px;
           }
       </style>
       <title></title>
       <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
       <script type="text/javascript">
           function fun1(){
               var obj=$("#one");
               obj.css("background","red");
           }
           function fun2(){
               var obj=$(".two");
               obj.css("background","yellow");
           }
           function fun3(){
               var obj=$("div");
               obj.css("background","blue");
           }
           function fun4(){
               var obj=$("*");
               obj.css("background","green");
           }
           function fun5(){
               var obj=$("#one,span");
               obj.css("background","pink")
           }
       </script>
   </head>
   <body>
       <div id="one">
           我是one的div
       </div><br/>
       <div class="two">
           我是样式是two的div
       </div><br/>
       <div>我是没有id/class的div</div>
       <span>我是span标签</span><br/>
       <input type="button" value="获取id是one的dom对象" οnclick="fun1()"/><br/>
       <input type="button" value="使用class样式获取dom对象" οnclick="fun2()"/><br/>
       <input type="button" value="使用标签选择器" οnclick="fun3()"/><br/>
       <input type="button" value="使用所有选择器" οnclick="fun4()"/><br/>
       <input type="button" value="使用所有选择器" οnclick="fun5()"/>
   </body>
</html>

过滤器

例如
2.1选择第一个first, 保留数组中第一个DOM对象
    语法：$(“选择器:first”)

2.2选择最后个last, 保留数组中最后DOM对象
    语法：$("选择器:last")

2.3选择数组中指定对象
    语法：$(“选择器:eq(数组索引)”)

2.4选择数组中小于指定索引的所有DOM对象
    语法：$(“选择器:lt(数组索引)”)

2.5选择数组中大于指定索引的所有DOM对象
    语法：$(“选择器:gt(数组索引)”)

函数

   3.1 第一组
       val
       $(选择器).val() ：无参数调用形式，读取数组中第一个DOM对象的value属性值
       $(选择器).val(值)：有参形式调用;对数组中所有DOM对象的value属性值进行统一赋值

       text
       $(选择器).val() ：无参数调用形式，读取数组中第一个DOM对象的value属性值
       $(选择器).val(值)：有参形式调用;对数组中所有DOM对象的value属性值进行统一赋值

       attr
       $(选择器).attr(“属性名”): 获取DOM数组第一个对象的属性值
       $(选择器).attr(“属性名”,“值”): 对数组中所有DOM对象的属性设为新值

   3.2 第二组
       hide
       $(选择器).hide() :将数组中所有DOM对象隐藏起来

       show
       $(选择器).show():将数组中所有DOM对象在浏览器中显示起来

       remove
       $(选择器).remove() : 将数组中所有DOM对象及其子对象一并删除

       empty
       $(选择器).empty()：将数组中所有DOM对象的子对象删除

       append
       为数组中所有DOM对象添加子对象，$(选择器).append("<div>我动态添加的div</div>")

       html
       设置或返回被选元素的内容（innerHTML）。
       $(选择器).html()：无参数调用方法，获取DOM数组第一个元素的内容。
       $(选择器).html(值)：有参数调用，用于设置DOM数组中所有元素的内容。

       each
       each() ：循环遍历DOM数组中的每个元素，对每个元素调用一个函数。
       语法：jQuery对象.each( function( index, element ) )
       index: 数组的下标
       element: 数组的对象

事件

4.1 定义监听事件
    语法：$(选择器).监听事件名称(处理函数);
    说明：监听事件名称是js事件中去掉on后的内容， js中的onclick的监听事件名称是click

    例如：
    为页面中所有的button绑定onclick,并关联处理函数fun1
    $(":button").click(fun1)

    为页面中所有的tr标签绑定onmouseover，并关联处理函数fun2
    $("tr").mouseover(fun2)

4.2 on()绑定事件
    on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利，推荐使用该方法

    语法：$(选择器).on(event,childSelector,data,function)
        event：事件一个或者多个，多个之间空格分开
        childSelector：可选。规定只能添加到指定的子元素上的事件处理程序
        data：可选。规定传递到函数的额外数据，json格式
        function: 可选。规定当事件发生时运行的函数。

tj111!!!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery关于过滤器，选择器

选择器就是定位条件；通知jquery函数定位满足条件的DOM对象。 1.1基本选择器 id 选择器：$("#id")、class选择器：$(".class名称")、标签选择器：("标签名称") 1.2 所有选择器：语法：$(“*”) 选取页面中所有DOM对象。 1.3 组合选择器组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合id，class，标签名等。语法：$(“id,class,标签名”)...
复制链接

扫一扫