精华内容
下载资源
问答
  • 常见的jquery选择器
    千次阅读 多人点赞
    2021-01-21 21:33:10

    一.jQuery 选择器

    1.基本选择器

    • #ID 选择器:根据 id 查找标签对象

    • .class 选择器:根据 class 查找标签对象

    • element 选择器:根据标签名查找标签对象

    • * 选择器:表示任意的,所有的元素

    • selector1,selector2 组合选择器:合并选择器 1,选择器 2 的结果并返回

    • 还有一种是没有逗号的,如$("div.one")表示选取class="one"的<div>,而$("div,.one")表示的是选取所有<div>和所有class="one"的元素

    示例:

    $("#lastname")  //选取id="lastname" 的元素
    $(".intro") //选取class="intro" 的所有元素
    $("p") //选取所有 <p> 元素
    $("*") //选取所有元素
    $("h1,div,p") //选取所有 <h1>、<div> 和<p> 元素
    $("div.one") //选取class="one"的<div>
    $("div,.one") //选取所有<div>和所有class="one"的元素
    

    2.层级选择器

    • ancestor descendant 后代选择器 :在给定的祖先元素下匹配所有的后代元素,即包括儿子元素,也包括孙子等其他元素
    • parent > child 子元素选择器:在给定的父元素下匹配所有的子元素,只包括儿子元素,不包括孙子等其他元素
    • prev + next 相邻元素选择器:匹配紧接在 prev 元素后的 next 元素 ,如果prev后面紧接者的不是next,则查找失败,如果是next,则只匹配一个紧接在 prev 元素后的 next 元素,而且prev与next之间是兄弟关系。
    • prev ~ sibings prev之后的兄弟元素选择器:匹配 prev 元素之后的所有 siblings 元素 ,而且只匹配prev 元素与 siblings 元素之间是兄弟关系的元素

    示例:

    $("body div") //选择 body 内的所有 div 元素
    $("body > div") //在 body 内, 选择为div的子元素
    $("#one+div") //选择 id 为 one 的下一个 div 元素
    $("#one~div") //选择 id 为 one 的元素后面的所有 div 兄弟元素
    

    3.过滤选择器

    3.1基本过滤选择器

    • :first 获取第一个元素
    • :last 获取最后个元素
    • :not(selector) 去除所有与给定选择器匹配的元素
    • :even 从 0 开始计数,匹配所有索引值为偶数的元素
    • :odd 从 0 开始计数 匹配所有索引值为奇数的元素
    • :eq(index) 匹配一个给定索引值的元素
    • :gt(index) 匹配所有大于给定索引值的元素
    • :lt(index) 匹配所有小于给定索引值的元素
    • :header 匹配如 h1, h2, h3 之类的标题元素
    • :animated 匹配所有正在执行动画效果的元素

    示例:

    $("li:first")    //第一个li
    $("li:last")     //最后一个li
    $("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
    $("li:even")     //挑选下标为偶数的li
    $("li:odd")      //挑选下标为奇数的li
    $("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
    $("li:gt(2)")    //下标大于 2 的li
    $("li:lt(2)")    //下标小于 2 的li
    $(":header")     //选择所有的标题元素
    $(":animated")   //选择当前正在执行动画的所有元素
    

    3.2内容过滤选择器

    • :contains(text) 匹配包含给定文本的元素
    • :empty 匹配所有不包含子元素或者文本的空元素
    • :parent 匹配含有子元素或者文本的元素
    • :has(selector) 匹配含有选择器所匹配的元素

    示例:

    $("div:contains('Runob')")    // 包含 Runob文本的div元素
    $("td:empty")                 //不包含子元素或者文本 的空td元素
    $("td:parent")                //选择含有子元素或者文本 的td元素
    $("div:has(.one)")        //选择含有 class 为 one 元素的 div 元素
    

    3.3属性过滤选择器

    • [attribute] 匹配包含给定属性的元素。
    • [attribute=value] 匹配给定的属性是某个特定值的元素
    • [attribute!=value] 匹配所有属性不等于特定值的元素,或者不含有该属性的元素(没有属性attribute的也将被选中)。
    • [attribute^=value] 匹配给定的属性是以某些值开始的元素
    • [attribute$=value] 匹配给定的属性是以某些值结尾的元素
    • [attribute*=value] 匹配给定的属性是以包含某些值的元素
    • [attrSel1][attrSel2][attrSelN] 复合属性选择器,需要同时满足多个条件时使用

    示例:

    $("div[id]")        //所有含有 id 属性的 div 元素
    $("div[id='123']")        // id属性值为123的div 元素
    $("div[id!='123']")        // id属性值不等于123的div元素,或者不含有id属性的div元素
    $("div[id^='aa']")        // id属性值以aa开头的div 元素
    $("div[id$='zz']")        // id属性值以zz结尾的div 元素
    $("div[id*='bb']")        // id属性值包含bb的div 元素
    $("div[id][title*='es']") //首先选取有属性id的div元素,然后在结果中 选取属性title值 含有'es'的 div 元素
    

    3.4可见性过滤选择器

    • :hidden 匹配所有不可见元素
    • :visible 匹配所有可见元素

    示例:

    $("li:hidden")       //匹配所有不可见的li
    $("li:visible")      //匹配所有可见的li
    

    3.5状态过滤选择器

    • :enabled 匹配所有可用元素
    • :disabled 匹配所有不可用元素
    • :checked 匹配所有选中的单选,复选,和下拉列表中选中的 option 标签对象
    • :selected 匹配所有选中的 option

    示例:

    $("input:enabled")    // 匹配可用的 input
    $("input:disabled")   // 匹配不可用的 input
    $("input:checked")    // 匹配选中的 input
    $("option:selected")  // 匹配选中的 option
    

    4.表单选择器

    • :input 匹配所有 input标签元素
    • :text 匹配所有 文本输入框
    • :password 匹配所有的密码输入框
    • :radio 匹配所有的单选框
    • :checkbox 匹配所有的复选框
    • :submit 匹配所有提交按钮
    • :image 匹配所有 img 标签
    • :reset 匹配所有重置按钮
    • :button 匹配所有 input type=button <button>按钮
    • :file 匹配所有 input type=file 文件上传

    示例:

    $(":input")      //匹配所有 input, textarea, select 和 button 元素
    $(":text")       //所有的单行文本框,$(":text") 等价于$("[type=text]"),推荐使用$("input:text")效率更高,下同
    $(":password")   //所有密码框
    $(":radio")      //所有单选按钮
    $(":checkbox")   //所有复选框
    $(":submit")     //所有提交按钮
    $(":image") 	 //所有带有 type="image" 的 input 元素
    $(":reset")      //所有重置按钮
    $(":button")     //所有button按钮
    $(":file")       //所有文件域
    
    

    二.jQuery元素筛选所用的一些方法

    • eq() 获取给定索引的元素 ;功能跟 :eq() 一样
    • first() 获取第一个元素 ;功能跟 :first 一样
    • last() 获取最后一个元素 ; 功能跟 :last 一样
    • filter(exp) 留下匹配的元素
    • is(exp) 判断是否匹配给定的选择器,只要有一个匹配就返回true
    • has(exp) 返回包含有匹配选择器的元素的元素 ;功能跟 :has 一样
    • not(exp) 删除匹配选择器的元素;功能跟 :not 一样
    • children(exp) 返回匹配给定选择器的子元素 ;功能跟 parent>child 一样
    • find(exp) 返回匹配给定选择器的后代元素 ;功能跟 ancestor descendant 一样
    • next() 返回当前元素的下一个兄弟元素 ;功能跟 prev + next 功能一样
    • nextAll() 返回当前元素后面所有的兄弟元素 ;功能跟 prev ~ siblings 功能一样
    • nextUntil() 返回当前元素到指定匹配的元素为止的后面元素
    • parent() 返回父元素
    • prev(exp) 返回当前元素的上一个兄弟元素
    • prevAll() 返回当前元素前面所有的兄弟元素
    • prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素
    • siblings(exp) 返回所有兄弟元素
    • add() 把 add 匹配的选择器的元素添加到当前 jquery 对象中

    示例:

    $("div").eq(3) //选择索引值为等于 3 的 div 元素
    $("div").first() //选择第一个 div 元素
    $("div").last() //选择最后一个 div 元素
    $("div").filter(":even") //在div中选择索引为偶数的
    $("#one").is(":empty") //判断#one是否为:empty或:paren
    $("div").has(".one") //选择div中包含.one的
    $("div").not('.one') //选择div中class不为one的
    $("body").children("div.one") //在body中选择所有class为one的div子元素
    $("body").find("div.mini") //在body中选择所有class为mini的div元素
    $("#one").next("div") //#one的下一个div
    $("#one").nextAll("span") //#one后面所有的span元素
    $("#one").nextUntil("span") //#one和span之间的元素 
    $(".one").parent() //.one的父元素
    $("#two").prev("div") //#two的上一个div
    $("span").prevAll("div") //span前面所有的div
    $("span").prevUntil("#one") //span向前直到#one的元素
    $("#two").siblings() //#two的所有兄弟元素
    $("span").add("#two").add("#one") //选择所有的 span 元素和id为two的元素
    
    更多相关内容
  • ColorPicker基于强大的jQuery,使用方便、配置简单,同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中,兼容各大浏览器。
  • 主要介绍了jQuery选择器之基本过滤选择器用法,结合实例形式分析了jQuery常见的基本过滤、属性过滤、内容过滤、子元素过滤等相关操作技巧,需要的朋友可以参考下
  • 本文实例讲述了jQuery 选择器用法。分享给大家供大家参考,具体如下: jQuery 选择器 (prev + next) 定义和用法 jQuery的prev + next选择器用于匹配紧接在prev元素后面的同辈next元素,将其封装为jQuery对象并返回。...
  • 复合选择器将多个选择器(可以是ID选择器、元素选择或是类名选择器)组合在一起,两个选择器之间以逗号“,”分隔,只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集,利用jQuery索引...
  • jquery周历选择器

    2018-07-26 15:13:08
    利用jquery实现周历选择器,适用于混合app开发。 功能:展示本周日期;根据点击不同日期进行操作;切换前后周周历。
  • 常用jQuery选择器总结

    2020-12-10 12:35:36
    jQuery 选择器大体上可分为 4 类:基本选择器、层次选择器、过滤选择器、表单选择器。 其中过滤选择器可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象...
  • 主要介绍了jQuery基本选择器和层次选择器的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 四大常见jQuery选择器+案例

    千次阅读 2022-03-16 19:31:22
    常见jQuery选择器前言四大选择器一.jQuery基础选择器1.ID选择器2.全选选择器3.类选择器4.标签选择器5.并集选择器6.交集选择器二、使用步骤1.引入库2.读入数据总结 前言 jQuery唯一个javascrip库,里面封装了...


    前言

    jQuery唯一个javascrip库,里面封装了JavaScript常用的的功能代码,优化了DOM操作,事件处理,动画设计和Ajax交互。但因为jQuery对象有自己的封装,dom对象不能使用,所以需要选择器将对象选取出来使用


    四大选择器

    一.jQuery基础选择器

    1.ID选择器

    ID选择器可以选择指定id的元素

    语法:$("#id")

    案例:

    <body>
        <div id="test">123</div>
    </body>
    <script>
        console.log($("#test"));
    </script>
    
    

    在这里插入图片描述

    2.全选选择器

    匹配所有元素

    语法:$("*")
    案例:

    <body>
        <div>我是div</div>
        <div class="nav">我是nav div</div>
        <p>我是p</p>
        <ol>
            <li>我是ol 的</li>
            <li>我是ol 的</li>
            <li>我是ol 的</li>
            <li>我是ol 的</li>
        </ol>
        <ul>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
        </ul>
        <script>
            $(function() {
                //全部字体变粉色
                $("*").css("color", "pink")
                console.log($('.nav'));
                console.log($('ul li'));
            });
        </script>
    

    在这里插入图片描述

    3.类选择器

    获取同一类class的元素

    语法:$(".class")
    案例:

    <body>
        <div id="test" class="test">123</div>
        <p class="test"></p>
        <span class="no"></span>
    </body>
    <script>
        console.log($(".test"));
    </script>
    

    在这里插入图片描述

    此时同一类的元素被选取出来放在一个伪数组中

    4.标签选择器

    获取同一类标签的所有元素

    语法:$(“div”)
    案例:

    <body>
        <ul>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
        </ul>
        <script>
            $(function() {
                console.log($('ul li'));
            });
        </script>
    </body>
    

    在这里插入图片描述

    5.并集选择器

    同时选取多个元素

    语法:$(“div,p,li”)
    案例:

    <body>
        <div id="test" class="test">123</div>
        <p class="test"></p>
        <span class="no"></span>
    </body>
    <script>
        console.log($("p,span"));
     </script>
    

    在这里插入图片描述

    6.交集选择器

    交集元素

    语法:$(“li.current”)
    案例:

    <body>
        <div id="test" class="test">123</div>
        <p class=""></p>
        <p class="test"></p>
        <span class="no"></span>
    </body>
    <script>
        console.log($("p.test"));
    </script>
    
    

    在这里插入图片描述

    层级选择器

    1.子代选择器

    使用>号,获取亲儿子的层级的元素
    但是并不能获取子孙层级的元素

    语法:$(“ul>li”)
    案例:

    <body>
        <ul>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
        </ul>
        <script>
            $(function() {
                console.log($('ul>li'));
            });
        </script>
    

    在这里插入图片描述


    2.后代选择器

    使用空格表示后代选择器,可以获取包括孙子的元素

    语法:$(“div li”)
    案例:

    <body>
        <div>
            <ul>
                <li>我是ul 的</li>
                <li>我是ul 的</li>
                <li>我是ul 的</li>
                <li>我是ul 的</li>
                <li>我是ul 的</li>
            </ul>
        </div>
        <script>
            $(function() {
                console.log($('div li'));
            });
        </script>
    

    在这里插入图片描述


    筛选选择器

    在这里插入图片描述

    筛选方式

    在这里插入图片描述
    parents():筛选所有上级元素,有参数就是返回指定的上级元素

    :checked选择器

    :checked查找被选中的表单元素

    展开全文
  • 选择器的意义就是将众多html代码中准确的找出我们想找的单元。接下来将常见选择器以及作用列举出来,对jQuery常见选择器及用法感兴趣的朋友一起看看吧
  • jquery 选择器部分整理

    2020-12-04 12:09:37
    但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): $(“标签名”),如$(“p”)是选取了所有的p标签节点 $(“#id名”),如$(“#test”)是选取了id为test的标签节点
  • jquery select日历选择器点击select框弹出日期选择器 jquery select日历选择器点击select框弹出日期选择器 jquery select日历选择器点击select框弹出日期选择器 jquery select日历选择器点击select框弹出日期选择器
  • 主要介绍了jQuery选择器用法,以一个隐藏div元素的实例分析了jQuery选择器的用法技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
  • jQuery选择器总结

    2017-10-26 17:25:29
    jQuery选择器总结,网上下载的,非原创的,仅供参考,学习学习。
  • JQuery选择器超级详细

    万次阅读 多人点赞 2020-08-06 17:54:47
    基本选择器 id选择器:$("#id的属性值") 获取与指定id属性值匹配的元素 单击按钮,将id为myid的元素背景为绿色 ...JQuery选择器</title> <script src="js/jquery-3.3.1.min...

    基本选择器

    id选择器:$("#id的属性值")

    类选择器:$(".class的属性值")

    标签选择器:$("标签名")

    并集选择器:$("选择器1,选择器2")

    层级选择器

    后代选择器:$("选择器1   选择器2")

    子选择器:$("选择器1 > 选择器2")

    属性选择器

    属性名称选择器:$("选择器[属性名]")

    属性选择器:

    $("选择器[属性名='值']")

    $("选择器[属性名!='值']")

    $("选择器[属性名^='值']") 

    $("选择器[属性名$='值']")

    $("选择器[属性名*='值']")

    复合属性选择器:$("选择器[属性名='值'][]...")

    过滤选择器

    首元素选择器:${选择器:first}

    尾元素选择器:${选择器:last}

    非元素选择器:${选择器1:not(选择器2)}

    偶数选择器:${选择器:even}

    奇数选择器:${选择器:odd}

    等于索引选择器:${选择器:eq(index)}

    大于索引选择器:${选择器:gt(index)}

    小于索引选择器:${选择器:lt(index)}

    标题选择器:${:header}

    表单过滤选择器

    可用元素选择器:${:enabled}

    不可用元素选择器:${:disabled}

    选中选择器

    单复选框:${:checked}

    下拉框:${:selected}


     

    基本选择器

    id选择器:$("#id的属性值")

     获取与指定id属性值匹配的元素

    单击按钮,将id为myid的元素背景为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 50px;
            }
            span{
                background-color:pink ;
                width: 100%;
                height: 20px;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $("#mydivid").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
        <input id="id1" type="button" value="改变id为mydivid的元素为绿色">
        <hr><hr>
        <div id="mydivid">
            这是div,id为mydivid
        </div>
        <span id="myspanid">
            这是span,id为myspanid
        </span>
    </body>
    </html>
    

    单击前

    单击后

    类选择器:$(".class的属性值")

     获取与指定的class属性值匹配的元素

    单击按钮,将类名为myClassName的元素背景变为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 50px;
            }
            span{
                background-color:pink ;
                width: 100%;
                height: 20px;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClassName").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
        <input id="id1" type="button" value="改变class为myClassName的元素为绿色">
        <hr><hr>
        <div id="mydivid" class="myClassName">
            这是div,id为mydivid,calss为myClassName
            <span >
            这是span
            </span>
        </div>
        <br>
        <div  class="myClassName">
            这是div,calss为myClassName
        </div>
        <br>
        <span id="myspanid" class="myClassName">
            这是span,id为myspanid,calss为myClassName
        </span>
    </body>
    </html>
    

    单击前

    单击后

    标签选择器:$("标签名")

     获取所有匹配标签名称的元素

    单击按钮,将标签为div的元素背景变为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 50px;
            }
            span{
                background-color:pink ;
                width: 100%;
                height: 20px;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $("div").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
        <input id="id1" type="button" value="改变标签为div的元素为绿色">
        <hr><hr>
        <div id="mydivid" class="myClassName">
            这是div,id为mydivid,calss为myClassName
            <span >
            这是span
            </span>
        </div>
        <br>
        <div  class="myClassName">
            这是div,calss为myClassName
        </div>
        <br>
        <span id="myspanid" class="myClassName">
            这是span,id为myspanid,calss为myClassName
        </span>
    </body>
    </html>
    

    单击前

    单击后

     

    并集选择器:$("选择器1,选择器2")

    获取多个选择器选中的所有元素 

    单击按钮,将标签为span的元素,或者id为myDivId的元素背景变为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 50px;
            }
            span{
                background-color:pink ;
                width: 100%;
                height: 20px;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $("span,#myDivId").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
        <input id="id1" type="button" value="改变标签为span的元素,或者id为myDivId的元素背景变为绿色">
        <hr><hr>
        <div >
            这是div
            <span >
            这是span
            </span>
        </div>
        <br>
        <div id="myDivId">
            这是div,id为myDivId
        </div>
        <br>
        <span id="myspanid">
            这是span,id为myspanid
        </span>
    </body>
    </html>
    

    单击前

    单击后

    层级选择器

    后代选择器:$("选择器1   选择器2")

    选择选择器1内部的所有选择器2

    改变id为myDivId的元素下的,所有span元素背景变为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width: 100px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $("#myDivId   span").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
        <input id="id1" type="button" value="改变id为myDivId的元素下的,所有span元素背景变为绿色">
        <hr><hr>
        <div id="myDivId">
            这是div,id为myDivId
            <br>
            <span >
                这是span
            </span>
            <br>
            <span  style="background-color: pink">
                这是span
                <br>
                <br>
                <span style="background-color: deeppink;height: 20px">
                    这是span
                </span>
                <br>
            </span>
        </div>
        <br>
        <div >
            这是div
            <br>
            <span >
                这是span
            </span>
        </div>
        <br>
        <span id="myspanid">
            这是span,id为myspanid
        </span>
    </body>
    </html>
    

    单击前

    单击后

    子选择器:$("选择器1 > 选择器2")

    选择选择器1内部的所有子选择器2

    改变div元素下的,所有子span元素背景变为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width: 100px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $("div  > span").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
        <input id="id1" type="button" value="改变div元素下的,所有子span元素背景变为绿色">
        <hr><hr>
        <div id="myDivId">
            这是div,id为myDivId
            <br>
            <span >
                这是span
            </span>
            <br>
            <span  style="background-color: pink">
                这是span
                <br>
                <br>
                <span style="background-color: deeppink;height: 20px">
                    这是span
                </span>
                <br>
            </span>
        </div>
        <br>
        <div >
            这是div
            <br>
            <span >
                这是span
            </span>
        </div>
        <br>
        <span id="myspanid">
            这是span,id为myspanid
        </span>
    </body>
    </html>
    

    单击前

    单击后

    属性选择器

    属性名称选择器:$("选择器[属性名]")

    包含指定属性的选择器

    改变类名为myCalss并且含有id属性的元素背景变为绿色 

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass[id]").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
        <input id="id1" type="button" value="改变类名为myCalss并且含有id属性的元素背景变为绿色">
        <hr><hr>
        <div class="myClass" id="divId1">
            这是div,calss为myClass,id为divId1
        </div>
        <br>
        <div class="myClass">
            这是div,calss为myClass
        </div>
        <br>
        <span class="myClass" id="myspanid">
            这是span,calss为myClass,id为myspanid
        </span>
    </body>
    </html>
    

    单击前

    单击后

    属性选择器:

    $("选择器[属性名='值']")

    包含指定属性等于指定值的选择器

    改变类名为myCalss并且含id属性为myDivId1的元素背景变为绿色 

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass[id='myDivId1']").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myCalss并且含id属性为myDivId1的元素背景变为绿色 ">
    <hr><hr>
    <div class="myClass" id="myDivId1">
        这是div,calss为myClass,id为myDivId1
    </div>
    <br>
    <div class="myClass" id="myDivId2">
        这是div,calss为myClass,id为myDivId2
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" id="mySpanId1">
            这是span,calss为myClass,mySpanId1
        </span>
    </body>
    </html>
    

    单击前

    单击后

    $("选择器[属性名!='值']")

    包含指定属性不等于指定值的选择器

    改变类名为myCalss并且含id属性不等于myDivId1的元素背景变为绿色 

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass[id!='myDivId1']").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myCalss并且含id属性不等于myDivId1的元素背景变为绿色">
    <hr><hr>
    <div class="myClass" id="myDivId1">
        这是div,calss为myClass,id为myDivId1
    </div>
    <br>
    <div class="myClass" id="myDivId2">
        这是div,calss为myClass,id为myDivId2
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" id="mySpanId1">
            这是span,calss为myClass,mySpanId1
        </span>
    </body>
    </html>
    

    单击前

    单击后

    $("选择器[属性名^='值']") 

    包含指定属性以指定值开头的选择器 

    改变类名为myCalss并且id属性以my开头的元素背景变为绿色 

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass[id^='my']").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myCalss并且id属性以my开头的元素背景变为绿色">
    <hr><hr>
    <div class="myClass" id="myDivId1">
        这是div,calss为myClass,id为myDivId1
    </div>
    <br>
    <div class="myClass" id="myDivId2">
        这是div,calss为myClass,id为myDivId2
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" id="mySpanId1">
            这是span,calss为myClass,mySpanId1
        </span>
    </body>
    </html>
    

    单击前

    单击后

    $("选择器[属性名$='值']")

    包含指定属性以指定值结尾的选择器 

    改变类名为myCalss并且id属性以Id1的元素背景变为绿色 

     

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass[id$='Id1']").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myCalss并且id属性以Id1的元素背景变为绿色">
    <hr><hr>
    <div class="myClass" id="myDivId1">
        这是div,calss为myClass,id为myDivId1
    </div>
    <br>
    <div class="myClass" id="myDivId2">
        这是div,calss为myClass,id为myDivId2
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" id="mySpanId1">
            这是span,calss为myClass,mySpanId1
        </span>
    </body>
    </html>
    

    单击前

    单击后

    $("选择器[属性名*='值']")

    包含指定属性含有指定值的选择器 

    改变类名为myCalss并且id属性值含有Div的元素背景变为绿色 

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass[id*='Div']").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myCalss并且id属性值含有Div的元素背景变为绿色">
    <hr><hr>
    <div class="myClass" id="myDivId1">
        这是div,calss为myClass,id为myDivId1
    </div>
    <br>
    <div class="myClass" id="myDivId2">
        这是div,calss为myClass,id为myDivId2
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" id="mySpanId1">
            这是span,calss为myClass,mySpanId1
        </span>
    </body>
    </html>
    

    单击前

    单击后

    复合属性选择器:$("选择器[属性名='值'][]...")

    包含多个属性条件的选择器

    改变calss为myClas并且存在属性id的div元素背景变为绿色 

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $("div[class='myClass'][id]").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
        <input id="id1" type="button" value="改变calss为myClas并且存在属性id的div元素背景变为绿色">
        <hr><hr>
        <div class="myClass" id="divId1">
            这是div,calss为myClass,id为divId1
        </div>
        <br>
        <div class="myClass" id="divId2">
            这是div,calss为myClass,id为divId2
        </div>
        <br>
        <span class="myClass" id="myspanid">
            这是span,calss为myClass,id为myspanid
        </span>
    </body>
    </html>
    

    单击前

    单击后

    过滤选择器

    首元素选择器:${选择器:first}

    获得指定选择器的元素中的第一个元素

    改变类名为myClass的第一个元素的背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass:first").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myClass的第一个元素的背景颜色为绿色">
    <hr><hr>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
            这是span,calss为myClass
        </span>
    </body>
    </html>
    

    单击前

    单击后

    尾元素选择器:${选择器:last}

    获得指定选择器的元素中的最后一个元素

    改变类名为myClass的最后一个元素的背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass:last").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myClass的最后一个元素的背景颜色为绿色">
    <hr><hr>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
            这是span,calss为myClass
        </span>
    </body>
    </html>
    

    单击前

    单击后

    非元素选择器:${选择器1:not(选择器2)}

    获得指定选择器1的元素中不包含选择器2的元素

    改变类名为myClass的元素中不包含span元素的背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass:not(span)").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myClass的元素中不包含span元素的背景颜色为绿色">
    <hr><hr>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
            这是span,calss为myClass
        </span>
    </body>
    </html>
    

    单击前

    单击后

    偶数选择器:${选择器:even}

    获得指定选择器的元素中索引为偶数的元素,索引从0开始计数

    改变类名为myClass的元素中索引为偶数的元素的背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass:even").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myClass的元素中索引为偶数的元素的背景颜色为绿色">
    <hr><hr>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
            这是span,calss为myClass
        </span>
    </body>
    </html>
    

    单击前

    单击后

    奇数选择器:${选择器:odd}

    获得指定选择器的元素中索引为奇数的元素,索引从0开始计数

    改变类名为myClass的元素中索引为奇数的元素的背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass:odd").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myClass的元素中索引为奇数的元素的背景颜色为绿色">
    <hr><hr>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
            这是span,calss为myClass
        </span>
    </body>
    </html>
    

    单击前

    单击后

    等于索引选择器:${选择器:eq(index)}

    获得指定选择器的元素中等于指定索引的元素,索引从0开始计数

    改变类名为myClass的元素中索引为2的元素的背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass:eq(2)").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myClass的元素中索引为2的元素的背景颜色为绿色">
    <hr><hr>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
            这是span,calss为myClass
        </span>
    </body>
    </html>
    

    单击前

    单击后

    大于索引选择器:${选择器:gt(index)}

    获得指定选择器的元素中大于指定索引的元素,索引从0开始计数

    改变类名为myClass的元素中索引大于2的元素的背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass:gt(2)").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myClass的元素中索引大于2的元素的背景颜色为绿色">
    <hr><hr>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
            这是span,calss为myClass
        </span>
    </body>
    </html>
    

    单击前

    单击后

    小于索引选择器:${选择器:lt(index)}

    获得指定选择器的元素中小于指定索引的元素,索引从0开始计数

    改变类名为myClass的元素中索引小于2的元素的背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass:lt(2)").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myClass的元素中索引小于2的元素的背景颜色为绿色">
    <hr><hr>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
            这是span,calss为myClass
        </span>
    </body>
    </html>
    

    单击前

    单击后

    标题选择器:${:header}

    获得标题元素,固定写法

    改变所有标题的背景颜色为绿色

     

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(":header").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变所有标题的背景颜色为绿色">
    <hr><hr>
    <h1>标题1</h1>
    <h3>标题3</h3>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        <h2>标题2</h2>
        这是div,calss为myClass
        <h4>标题4</h4>
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
        <h6>标题6</h6>
        这是span,calss为myClass
    </span>
    </body>
    </html>
    

    单击前

    单击后

    改变类名为myClass的元素下所有标题的背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            div{
                background-color:dodgerblue ;
                width: 100%;
                height: 200px;
            }
            span{
                background-color:pink ;
                width:400px;
                height: 70px;
                display: block;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $(".myClass :header").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="改变类名为myClass的元素下所有标题的背景颜色为绿色">
    <hr><hr>
    <h1>标题1</h1>
    <h3>标题3</h3>
    <div class="myClass" >
        这是div,calss为myClass
    </div>
    <br>
    <div class="myClass" >
        <h2>标题2</h2>
        这是div,calss为myClass
        <h4>标题4</h4>
    </div>
    <br>
    <div class="myClass">
        这是div,calss为myClass
    </div>
    <br>
    <span class="myClass" >
        <h6>标题6</h6>
        这是span,calss为myClass
    </span>
    </body>
    </html>
    

    单击前

    单击后

    表单过滤选择器

    可用元素选择器:${:enabled}

    获得满足选择器中可用的元素

    单击改变from表单内可用的input背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            input{
                background-color:dodgerblue ;
                width: 700px;
                height: 50px;
                font-size: 30px;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $("form input:enabled").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="单击改变from表单内可用的input背景颜色为绿色" style="background-color: burlywood"><br><br><br>
    <input value="这是表单外的input,disabled=disabled" type="text" name="oName1" disabled="disabled" width="100px"><br>
    <form>
        <input value="这是表单内的input,disabled=disabled" type="text" name="iName1" disabled="disabled"><br>
        <input value="这是表单内的input" type="text" name="iName2" ><br>
        <input value="这是表单内的input,disabled=disabled" type="text" name="iName3" disabled="disabled"><br>
        <input value="这是表单内的input" type="text" name="iName4" ><br>
    </form>
    </body>
    </html>
    

    单击前

     单击后

    不可用元素选择器:${:disabled}

    获得满足选择器不可用的元素

    单击改变from表单内不可用的input背景颜色为绿色

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            input{
                background-color:dodgerblue ;
                width: 700px;
                height: 50px;
                font-size: 30px;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    $("form input:disabled").css("backgroundColor","green");
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="单击改变from表单不可用的input背景颜色为绿色" style="background-color: burlywood"><br><br><br>
    <input value="这是表单外的input,disabled=disabled" type="text" name="oName1" disabled="disabled" width="100px"><br>
    <form>
        <input value="这是表单内的input,disabled=disabled" type="text" name="iName1" disabled="disabled"><br>
        <input value="这是表单内的input" type="text" name="iName2" ><br>
        <input value="这是表单内的input,disabled=disabled" type="text" name="iName3" disabled="disabled"><br>
        <input value="这是表单内的input" type="text" name="iName4" ><br>
    </form>
    </body>
    </html>
    

    单击前

    单击后

    选中选择器

    单复选框:${:checked}

    获得单选/复选框选中的元素

    单击选中复选框选中的值

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            #id1{
                background-color:dodgerblue ;
                width: 700px;
                height: 50px;
                font-size: 30px;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    var $input = $("input[type='checkbox']:checked");;
                    for(i=0;i<$input.length;i++){
                        console.log($input[i].value)
                    }
    
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="单击输出复选框选中的值" style="background-color: burlywood"><br><br><br>
    
        <form>
            选择性质,单选<br>
            <input type="radio" name="nature" value="渣男">渣男<br>
            <input type="radio" name="nature" value="极品">极品<br><br><br>
            选择爱好,多选<br>
            <input type="checkbox" name="like" value="编程">编程<br>
            <input type="checkbox" name="like" value="打游戏">打游戏<br>
            <input type="checkbox" name="like" value="学习">学习<br>
            <input type="checkbox" name="like" value="游泳">游泳<br>
        </form>
    </body>
    </html>
    

    单击前

     勾选

    单击后,打印了复选框勾选的值

     

    下拉框:${:selected}

    获得下拉框选中的元素

    单击输出复选选择框的选中的值

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JQuery选择器</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <style>
            #id1{
                width: 700px;
                height: 50px;
                font-size: 30px;
            }
            select{
                width: 300px;
                height: 500px;
                font-size: 30px;
            }
        </style>
        <script>
            $(function () {
                $("#id1").click(function () {
                    var $select = $("select > option:selected");
                    for(i=0;i<$select.length;i++){
                       console.log($select[i].value)
                    }
                });
            });
        </script>
    
    </head>
    <body>
    <input id="id1" type="button" value="单击输出复选选择框的选中的值" style="background-color: burlywood"><br><br><br>
        <form>
            <select name="like" multiple="multiple">
                <option >编程</option>
                <option >打游戏</option>
                <option >学习</option>
                <option >游泳</option>
            </select>
        </form>
    </body>
    </html>
    

    单击前

    复选选择框选中值

     单击后

    展开全文
  • 主要介绍了jQuery选择器之层次选择器用法,结合实例形式分析了jQuery后代元素选择器、子元素选择器、相邻元素选择器、兄弟元素选择器等相关使用技巧,需要的朋友可以参考下
  • 主要为大家详细介绍了jQuery选择器之表单元素选择器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 文档总结了几乎所有的jQuery的常用操作; 常见选择器常见的筛选器;常用的事件; 此文档对于当接触jQuery的开发者或者自学者都是很有裨益的; 当然作为复习文档也是很ok的
  • 常用jQuery选择器汇总

    2020-10-20 13:10:45
    元素选择是一切操作的前提,jQuery中$()函数最强大最常用的功能之一就是使用选择器选择DOM元素。这里就汇总一些十分常用的jQuery选择器
  • Jquery选择器

    千次阅读 2022-01-22 11:38:17
    文章目录1. Jquery选择器2. Jquery选择器常用类型2.1 元素 选择器2.2 #id 选择器2.3 .class 选择器2.4 属性选择器2.5 CSS选择器3. 总结规律 1. Jquery选择器 jQuery 选择器允许您对 HTML 元素组或单个HTML元素进行...

    1. Jquery选择器

    jQuery 选择器允许您对 HTML 元素组单个HTML元素进行操作。

    2. Jquery选择器常用类型

    2.1 元素 选择器

    • 基于 HTML元素名 选取元素
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
    <div>
        <p>p1</p>
        <a>a1</a>
        <p>p2</p>
        <a>a2</a>
        <p>p3</p>
        <a>a3</a>
        <p>p4</p>
        <a>a4</a>
    </div>
    <div>
        <button>点击</button>
    </div>
    </body>
    <script>
        $("button").click(function () {
        	//点击按钮 所有的<p>元素隐藏了
            $("p").hide();
        });
    </script>
    </html>
    

    在这里插入图片描述

    2.2 #id 选择器

    • id选择器相当于唯一标识符,通过id可以在html中找到唯一的一个html元素
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
    <div>
        <p id="p1">p1</p>
        <p id="p2">p2</p>
    </div>
    <div>
        <button>点击</button>
    </div>
    </body>
    <script>
        $("button").click(function () {
            $("#p1").hide();
        });
    </script>
    </html>
    

    在这里插入图片描述

    2.3 .class 选择器

    • 类型选择器,在元素中定义 class的值,然后通过元素选择器选择操作。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
    <div>
        <p id="p1" class="txt">p1</p>
        <p id="p2" >p2</p>
        <div class="txt">div</div>
    </div>
    <div>
        <button>点击</button>
    </div>
    </body>
    <script>
        $("button").click(function () {
            $(".txt").hide();
        });
    </script>
    </html>
    

    在这里插入图片描述

    如果想在元素选择器的基础上只隐藏

    元素呢?
    $(".txt").hide(); 可以修改为 $(“p.txt”).hide();
    这句话的意思是:选择 页面所有

    元素中 class属性值为 "txt"的元素隐藏

    2.4 属性选择器

    • 通过某些元素的特有属性或者通用属性进行选择元素
    • 格式 $(“元素名[属性名=属性值]”)
      如:$(“p[name=‘p_name’]”) 选择 name属性值等于 pname的 p元素
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
    <div>
        <p id="p1" class="txt">p1</p>
        <p id="p2" >p2</p>
        <div class="txt">div</div>
        <input name="txtInput"></input>
    </div>
    <div>
        <button>点击</button>
    </div>
    </body>
    <script>
        $("button").click(function () {
            alert($("[name='txtInput']").val());
        });
    </script>
    </html>
    

    在这里插入图片描述

    2.5 元素关系选择器

    • 父子关系 $(“父元素 子元素”)
    <div id="div01">
            <p>父div的第一个p元素</p>
            <p>父元素的第2个p元素</p>
            <div>
                <p>子div的p元素</p>
            </div>
            <p>父div的最后一个p元素</p>
        </div>
    

    2.6 CSS选择器

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("p").css("background-color","red");
      });
    });
    </script>
    </head>
    
    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">Click me</button>
    </body>
    
    </html>
    

    在这里插入图片描述

    3. Jquery选择器的组合使用

    $("#div01")
    $("div")
    $(".divClass")
    $("a[href='xxxxx']")
    

    总结:

    1. 选择器以元素开头表示是该元素类型下的,最后得到的肯定是该元素类型的一个或多个元素组
      2.选择器中不出现元素表示最终得到的跟元素类型无关的一个或多个元素组
      3.选择器的组合思路:
      (1)先选定一个元素作为起点,然后进行各种组合筛选。
      (2) 选中一组元素,再从中筛选。
      (3)把上面两种结合起来,多实践。

    附录:
    在这里插入图片描述

    展开全文
  • jquery颜色选择器设置文字颜色选择器和背景颜色选择器下载
  • jQuery选择器大全总结

    千次阅读 2021-08-11 16:42:30
    jQuery选择器jQuery的选择器基本选择器基本过滤选择器属性过滤选择器表单选择器子元素选择器操作元素属性操作样式操作样式类获取或设置元素高度和宽度操作HTML代码操作text代码 jQuery的选择器 基本选择器 id选择器...
  • jQuery日期选择器DCalendar插件是一款可以用于制作日历和日期选择器,兼容IE8浏览器。
  • Jquery选择器; 基本选择器;jQuery选择器;jQuery选择器; 层级选择器;jQuery选择器;;; 筛选选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器; 排他思想;jQuery选择器;jQuery...
  • 主要介绍了JQuery中属性过滤选择器用法,实例分析了jQuery属性过滤选择器的相关使用技巧,需要的朋友可以参考下
  • 代码简介:jQuery日期时间选择器插件是一款高端漂亮的jQuery日期选择控件,可设置小时分钟。
  • Jquery颜色选择器

    2015-04-21 21:19:23
    Jquery颜色选择器插件,通过Jquery模拟实现颜色选择器,便于网页中设置颜色
  • jQuery选择器(元素,ID,类,并列,层次选择器)

    千次阅读 多人点赞 2022-05-20 23:27:58
    写在前面 jQuery是一个快速、简洁的 JavaScript 框架,是继Prototype之后又一个优秀的 JavaScript 代码库。jQuery的设计宗旨是“WriteLess,Do...jQuery选择器 基本选择器 1.元素选择器 2.ID选择器 3.类选择器...
  • 锋利的jQuery 要点归纳(一) jQuery选择器,学习jquery的朋友可以参考下。
  • 主要介绍了jQuery内容选择器与表单选择器,结合实例形式分析了jQuery内容选择器与表单选择器的功能、用法及相关操作注意事项,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 172,312
精华内容 68,924
关键字:

常见的jquery选择器