首页 / JQUERY / JQuery选择器

JQuery选择器

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JQuery选择器，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含13684字，纯文字阅读大概需要20分钟。

内容图文

JQuery选择器

1.基本选择器

和CSS的定义差不多：

标签选择器
id选择器（#）
类选择器（点）
并集选择器（逗号）

        <head>
    <meta charset="UTF-8">
    <title>选择器·基本选择器</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function() {
            //id选择
            $("#divOne").css("color", "red");
            //标签选择
            $("span").css("color", "green");
            //class选择
            $(".clsTwo").css("color", "blue");
            //合并选取
            $("#divOne,span,.clsTwo").css("fontSize", "50px");
        });
    </script>
</head>

<body>
    <div id="divOne">有ID的div</div>
    <span>span</span>
    <div class="clsTwo">有class的div</div>
</body>

技术分享图片

        <head>
    <meta charset="UTF-8">
    <title>并集选择器：3 Click in 1</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function() {
            var count = 0;
            $("body,div#content,input[type='button']").click(function() {
                console.log("单击事件触发" + this)
            });
        });
    </script>
</head>

<body bgcolor="#E1E1E1">
    <div id="content" style="background-color: azure;">
        <input type="button" value="单击" />
    </div>

    <div id="result">

    </div>
</body>

2.层次选择器

名称	语法	功能
后代选择器	selector1 selector2	从selector1的后代元素里选取selector2
子选择器	selector1> selector2	从selector1的子元素里选取selector2
*相邻元素选择器	selector1 +selector2	从selector1后面的第一个兄弟元素里选取selector2
*同辈元素选择器	selector1 ~selector2	从selector1后面的所有兄弟元素里选取selector2

2.1 后代/子选择器

技术分享图片

        <html>

    <head>
        <meta charset="UTF-8">
        <title>后代选择器、子选择器</title>
        <style>
            div {
                border: 1px solid #F00;
                margin: 10px;
            }
        </style>
        <script src="js/jquery-3.3.1.min.js"></script>

    </head>

    <body>
        <div id="div1">1
            <div>2
                <div>3
                    <div>4</div>
                </div>
            </div>

        </div>
        <input type="button" value="后代选择器" onclick="f1()" />
        <input type="button" value="子选择器" onclick="f2()" />
        <script>
            function f1() {
                // 后代选择器(只要是后代都能被选中)
                $("#div1 div").css("border-color", "#0F0");
            }

            function f2() {
                // 子选择器（仅选中子代，孙代不能选择）
                $("#div1>div").css("border-color", "#00F");
            }
        </script>
    </body>

</html>

*2.2 相邻、同辈元素选择器

技术分享图片

        <head>
    <meta charset="UTF-8">
    <title>相邻、同辈元素选择器</title>
    <style>
        div {
            border: 1px solid #F00;
            margin: 10px;
        }
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>

<body>
    <div id="div1">1</div>
    <div id="div2">2
        <div></div>
    </div>
    <div id="div3">3
        <div></div>
    </div>
    <div id="div4">4
        <div></div>
    </div>
    <div id="div5">5
        <div></div>
    </div>
    <input type="button" value="相邻选择器" onclick="f1()" />
    <input type="button" value="同辈选择器" onclick="f2()" />
    <script>
        function f1() {
            // 相邻元素选择器(+)：仅下方相邻的被选中
            $("#div2+div").css("border-color", "#0F0");
        }

        function f2() {
            // 同辈元素选择器(~):下方的同辈全部被选中
            $("#div2~div").css("border-color", "#00F");
        }
    </script>
</body>

3.属性选择器

3.1 属性名称选择器

选择器	说明
$("tag[attribute]")	获取拥有该属性的所有元素

        <head>
    <meta charset="UTF-8">
    <title>属性名称选择器</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function() {
            //只要写了属性就被选中
            $("input[value]").css("background-color", "aqua");
        });
    </script>
</head>

<body>
    <input type="text" value="" />
    <input type="text" />
</body>

3.2 属性attr/prop

都是属性，有一点细微区别，下面的代码展示了它们的区别。

        <head>
    <meta charset="UTF-8">
    <title>随机IMG(刷新着看)</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        // 获取随机图片
        var imgs = new Array();
        imgs[0] = "img/img1.jpg";
        imgs[1] = "img/img2.jpg";
        imgs[2] = "img/img3.jpg";

        function getSrc() {
            var i = Math.floor(Math.random() * 3);
            console.log(i)
            return imgs[i];
        }
        $(function() {
            // 属性设置（attr/prop都行）
            $("img").prop("src", getSrc());
            // 打印输出attr和prop(一般是一样的，src有区别)
            console.log("attr:" + $("img").attr("src")); // 相对
            console.log("prop:" + $("img").prop("src")); // 绝对
        });
    </script>
</head>

<body>
    <img height="200" />
    <br />
    <input id="checkBox" type="checkbox" checked="checked" />
    <input type="button" value="checked属性" onclick="f1()" />
    <script>
        function f1() {
            var v = $("#checkBox");
            // attr只能获取到代码中定义的checked值，如果没有定义则为undefined
            console.log("attr:" + v.attr("checked"));
            console.log("prop:" + v.prop("checked"));
        }
    </script>
</body>

使用时一般有如下讲究：

obj.prop(name,value) ：固有属性建议使用prop。
obj.attr(name,value)：自定义属性建议使用attr。

3.3 属性过滤选择器

选择器	说明
[attribute=value]	获取某属性值为value的所有元素
[attribute!=value]	获取某属性值不等于value的所有元素
[attribute^=value]	选取属性值以value开头的所有元素
[attribute$=value]	选取属性值以value结束的所有元素
[attribute*=value]	选取属性值中包含value的所有元素
[selector1][selector2]…[selectorN]	合并多个选择器，满足多个条件，每选择一次将缩小一次范围，如$(‘li[id][title^=test]’)选取所有拥有属性id且属性title以test开头的元素

全选

        <html>

    <head>
        <meta charset="UTF-8">
        <title>属性过滤选择器1全选</title>
        <script src="js/jquery-3.3.1.min.js"></script>
    </head>

    <body>
        <script>
            $(function() {
                $("input[value='全选']").click(function() {
                    // 选择所有属性name等于'goblin妖孽'的元素
                    $("input[name='goblin']").prop("checked", true);
                });
                $("input[value='取消全选']").click(function() {
                    $("input[name='goblin']").prop("checked", false);
                });
            });
        </script>

        <br>
        <input type="checkbox" name="goblin" />孙行者
        <input type="checkbox" name="goblin" />猪八戒
        <input type="checkbox" name="goblin" />熬烈
        <input type="checkbox" name="goblin" />沙悟净

        <input type="button" value="全选" />
        <input type="button" value="取消全选" />
    </body>

</html>

更多属性过滤

        <head>
    <meta charset="UTF-8">
    <title>属性过滤选择器2</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>

<body>
    <script>
        $(function() {
            $("input[value='name!=HNTV']").click(function() {
                // 属性值不等于HNTV的所有元素
                $("input[name!='HNTV']").prop("checked", true);
            });
            $("input[value='name^=CCTV']").click(function() {
                //属性值以CCTV开头的所有元素
                $("input[name^='CCTV']").prop("checked", true);
            });
            $("input[value='name$=2']").click(function() {
                //属性值以2结尾的所有元素
                $("input[name$='2']").prop("checked", true);
            });
            $("input[value='name*=N']").click(function() {
                // 属性值中包含N的所有元素
                $("input[name*='N']").prop("checked", true);
            });
            $("input[value='选择南电视2台']").click(function() {
                // 合并多个选择器，满足多个条件
                $("input[name*='N'][name$='2']").prop("checked", true);
            });
        });
    </script>
    请选择喜欢的电视台：
    <br />
    <input type="checkbox" name="CCTV1" />CCTV1
    <br>
    <input type="checkbox" name="CCTV2" />CCTV2
    <br>
    <input type="checkbox" name="CCTV3" />CCTV3
    <br>
    <input type="checkbox" name="HNTV" />马桶台HNTV
    <br>
    <input type="checkbox" name="HNTV2" />马桶2台HNTV2
    <br>
    <input type="checkbox" name="DFTV" />番茄台DFTV
    <br>
    <input type="checkbox" name="HNTV" />屁股台HNTV
    <br>

    <input type="button" value="name!=HNTV" />
    <input type="button" value="name^=CCTV" />
    <input type="button" value="name$=2" />
    <input type="button" value="name*=N" />
    <input type="button" value="选择南电视2台" />
</body>

4.过滤选择器

4.1 基本过滤选择器

选择器	功能
:header	标题，h1~h6
:even	索引值为偶数的元素（从0开始）
:odd	索引值为奇数的元素（从0开始）
:first	首元素
:last	获取最后一个元素
:gt(index)	索引值大于index的元素（从0开始）
:lt(index)	索引值小于index的元素（从0开始）
:eq(index)	索引值等于index的元素
:not(selector)	给定选择器之外的所有元素

        <html>

    <head>
        <meta charset="UTF-8">
        <title>选择器2</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                $("#btnTitle").click(function() {
                    $(":header").css("color", "#00f");
                }); //单独使用过滤选择器，等同于附加在基本选择器*的后面
                $("#btnEven").click(function() {
                    $("li:even").css("color", "#00f");
                }); //获取索引值为偶数的li元素
                $("#btnOdd").click(function() {
                    $("li:odd").css("color", "#F93");
                }); //获取索引值为奇数的li元素
                //------------------------------------
                $("#btnNotH4").click(function() {
                    $(":header:not(h4)").css("color", "red");
                });
                $("#btnGreaterThan").click(function() {
                    $("li:gt(2)").css("color", "yellow");
                });
                $("#btnFirst").click(function() {
                    $("li:first").css("color", "aquamarine");
                });
            });
        </script>
    </head>

    <body>
        <h1>北京</h1>
        <h2>南京</h2>
        <h3>杭州</h3>
        <h4>开封</h4>
        <h5>洛阳</h5>
        <h6>西安</h6>

        <ol type="I">
            <li>西府赵王 李元霸</li>
            <li>天宝大将 宇文成都</li>
            <li>银锤太保 裴元庆</li>
            <li>紫面天王 雄阔海</li>
            <li>南阳太守 伍云召</li>
            <li>双镗无敌 伍天锡</li>
            <li>常胜将军 罗成</li>
            <li>靠山王 杨林</li>
            <li>花刀将 魏文通</li>
            <li>双枪将 定延平</li>
            <li>大锤公子 秦用</li>
            <li>武王 杨芳</li>
            <li>秦琼、尉迟恭</li>
        </ol>
        <input type="button" id="btnTitle" value="btn标题" />
        <input type="button" id="btnEven" value="Even偶数" />
        <input type="button" id="btnOdd" value="Odd奇数" />

        <input type="button" id="btnNotH4" value="not H4" />
        <input type="button" id="btnGreaterThan" value="Li index 2 以上" />
        <input type="button" id="btnFirst" value="Li第一个元素" />
    </body>

</html>

4.2 内容过滤选择器

选择器	功能
:contains(text)	获取含有文本内容为text的元素如果text出现在后代元素中，也认为含有文本内容text。如果text使用英文字母，则有大小写的区别。
:empty	获取不包含后代元素或者文本的空元素
:has(selector)	获取含有后代元素为selector的元素
:parent	获取含有后代元素或者文本的非空元素

        <html>

    <head>
        <meta charset="UTF-8">
        <title>内容过滤选择器</title>
        <style>
            div {
                float: left;
                width: 100px;
                height: 100px;
                background-color: dodgerblue;
                border: 1px solid black;
            }
        </style>
        <script src="js/jquery-3.3.1.min.js"></script>
    </head>

    <body>
        <script>
            $(function() {
                $("#btnContain").click(function() {
                    // 有文本内容为A的div（英文大小写有别，后代元素的文本也算）
                    $("div:contains('A')").css('background-color', 'red');
                });
                $("#btnHas").click(function() {
                    // 有后代元素(span)的div
                    $("div:has(span)").css('background-color', 'green');
                });
                // parent VS empty
                $("#btnParent").click(function() {
                    // 有后代元素或文本的div
                    $("div:parent").css('background-color', 'blue');
                });
                $("#btnEmpty").click(function() {
                    // 不包含后代元素或文本的div
                    $("div:empty").css('background-color', 'orange');
                });
            });
        </script>
        <div>BAC</div>
        <div>cab</div>
        <div>bcBC</div>
        <div></div>
        <div>
            <hr>
        </div>
        <div><span>span</span></div>
        <input type="button" value="btnContain" id="btnContain" />
        <input type="button" value="btnEmpty" id="btnEmpty" />
        <input type="button" value="btnHas" id="btnHas" />
        <input type="button" value="btnParent" id="btnParent" />
    </body>

</html>

4.3 可见性过滤选择器

选择器	功能
:hidden	选取不可见元素
:visible	选取可见元素

不可见元素
|--display取值为none
|--属性type取值为hidden的<input>
|--宽度和高度设置为0

        <html>

    <head>
        <meta charset="UTF-8">
        <title>可见性过滤选择器</title>

        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                $("#btnShow").click(function() {
                    // :hidden  选取不可见元素
                    $(".pic:hidden").show();
                });
                $("#btnHidden").click(function() {
                    // :visible 选取可见元素
                    $(".pic:visible").hide();
                });
            });
        </script>

    </head>

    <body>
        <img src="img/img3.jpg" class="pic" />
        <hr>
        <input type="button" value="显示" id="btnShow" />
        <input type="button" value="隐藏" id="btnHidden" />
    </body>

</html>

5.表单选择器

选择器	功能
:input	获取<input><textarea><select><button>
:text	获取符合[type=text]的input元素
:password	获取符合[type=password]的input元素
:radio	获取符合[type=radio]的input元素
:checkbox	获取符合[type=checkbox]的input元素
:image	获取符合[type=image]的input元素
:file	获取符合[type=file]的input元素
:hidden	参加“可见性过滤选择器”
:button	获取button元素和符合[type=button]的input元素
:submit	获取符合[type=submit]的input元素
:reset	获取符合[type=text]的input元素

表单过滤选择器

选择器	功能
:enabled	选取可用的表单元素
:disabled	选取不可用的表单元素
:checked	选取被选中的<input>元素
:selected	选取被选中的<option>元素

        <head>
    <meta charset="UTF-8">
    <title>表单过滤选择器</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function() {
            $("#p_1 :button").click(function() {
                //选择可用的text控件
                $("#p_1 :text:enabled").css("border", "1px solid red");
            })
            $("#p_2 :button").click(function() {
                var elm = $("#p_2 :radio:checked");
                alert(elm.val());
            });
            $("#p_3 :button").click(function() {
                var elms = $("#p_3 :checkbox:checked");
                var info = "您的爱好是：";
                for(var i = 0; i < elms.length; i++) {
                    info += elms[i].value;
                }
                alert(info);
            });
            $("#p_4 :button").click(function() {
                var info = "您最喜欢的人是：";
                // 注意：【:selected】针对option
                info += $("#p_4 option:selected").val();
                alert(info);
            });
        });
    </script>
</head>

<body>
    <p id="p_1">
        <input type="text" value="可用文本框" class="txt" />
        <input type="text" value="不可用文本框" disabled="disabled" class="txt" />
        <input type="button" value="选取可用文本框" />
    </p>

    <p id="p_2">
        请问你是否喜欢本届CCTV春节联欢晚会
        <input type="radio" name="like" value="A" />喜欢
        <input type="radio" name="like" value="B" checked="checked" />非常喜欢
        <input type="button" value="选取被算中的单选框" />
    </p>
    <p id="p_3">
        选择你的爱好
        <input type="checkbox" name="like2" value="A" checked="checked" />跑步
        <input type="checkbox" name="like2" value="B" />打球
        <input type="checkbox" name="like2" value="C" checked="checked" />登山
        <input type="checkbox" name="like2" value="D" />重温《CCTV春节联欢晚会》
        <input type="button" value="选取被算中的复选框" />
    </p>
    <p id="p_4">
        你最喜欢的明星是
        <select>
            <option>六爷</option>
            <option>武汉市长江二桥</option>
            <option>我们大学的校长</option>
        </select>
        <input type="button" value="选取" />
    </p>
</body>

原文：https://www.cnblogs.com/tigerlion/p/11178636.html

内容总结

以上是互联网集市为您收集整理的JQuery选择器全部内容，希望文章能够帮你解决JQuery选择器所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1186432.html

来源：【匿名】

【上一篇】jQuery操作json数据【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【JQuery选择器】教程文章相关的互联网学习教程文章

【jQuery】:not选择器的说明和:checked选择器的使用【代码】

1.:not选择器的说明使用先给出一下例子：$(".form1 :not(input[name=‘category‘])")这个能实现获取到from1表单中除了input[name=‘category‘]元素之外的其他元素而$(".form1:not(input[name=‘category‘])")这个却不能实现这个需求为什么呢？:not选择器不空格使用的话，作用的对象就是.form1这一层，也就是from表单这一层，from表单这一层当然没有input这种元素啦，所以写不写根本不起作用。:not选择器空格使用的话，作用的...

jquery选择器的简单使用

1、$()可以是$(expresion)，即css选择器、Xpath或html元素，也就是通过上述表达式来匹配目标元素。比如：$("a")构造的这个对象，是用CSS选择器构建了一个jQuery对象——它选择了所有的这个标签。如： $("a").click(function(){...}) 就是在点击页面上的任何一个链接时的触发事件。确切地说，就是jQuery用这个标签构建了一个对象$("a")，函数 click()是这个jQuery对象的一个（事件）方法。比如有这样一段HTML代码： onetwothre...

jQuery选择器-->过滤选择器之简单过滤器

1.定义和用法　　简单过滤器是指以冒号开头，通常用于实现简单过滤效果的过滤器。　　:first　　　　说明：匹配找到的第一个元素，它是于选择器结合使用的　　　　示例：$("tr:first") //匹配表格的第一行　　:last　　　　说明：匹配找到的最后一个元素，它是与选择器结合使用的　　　　示例：$("tr:last") //匹配表格的最后一行　　:even　　　　说明：匹配所有索引值为偶数的元素，索引值从0开始计数　　　　示例：$("tr:even...

jquery 选择器选择元素名为数组的元素【代码】

$(‘input[name=items\\[\\]]‘) 参考链接：http://stackoverflow.com/questions/2340806/jquery-select-all-checkboxes-with-js-array-name原文：http://www.cnblogs.com/unsea/p/5089343.html

JQuery选择器——可见性筛选选择器

JQuery可见性筛选选择器1 可见性筛选选择器$(":visible") 选择所有显示的元素$(":hidden") 选择所有隐藏的元素，包含display=“none”元素的样式和隐藏表单、visibility等2 隐藏元素的方式 css display的值是none type=“hidden”的表单元素宽度和高度都显示设置为0 祖先元素是隐藏的，该元素不会在页面上显示 css visibility的值是hidden css opacity的值是03 元素占据文档中一定的空间是可见的...

jQuery选择器总结(转)【代码】【图】

jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素，返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,di...

JQuery选择器【代码】【图】

JQuery选择器1.基本选择器和CSS的定义差不多：标签选择器id选择器（#）类选择器（点）并集选择器（逗号）<head><meta charset="UTF-8"><title>选择器·基本选择器</title><script src="js/jquery-3.3.1.min.js"></script><script>$(function() {//id选择$("#divOne").css("color", "red");//标签选择$("span").css("color", "green");//class选择$(".clsTwo").css("color", "blue");//合并选取$("#divOne,span,.clsTwo").css("fontS...

[ jquery 过滤器 parent(expr) ] 此方法用于在选择器的基础之上搜索被选元素中符合表达式的父元素【代码】

此方法用于在选择器的基础之上搜索被选元素中符合表达式的父元素取得一个包含着所有匹配元素的唯一父元素的元素集合,你可以使用可选的表达式来筛选:实例:<html lang=‘zh-cn‘> <head> <title>Insert you title</title> <meta http-equiv=‘description‘ content=‘this is my page‘> <meta http-equiv=‘keywords‘ content=‘keyword1,keyword2,keyword3‘> <meta http-equiv="Content-Type" content="text/html; charset=utf-...

HTML5中类jQuery选择器querySelector的使用【代码】【图】

HTML5中类jQuery选择器querySelector的使用简介HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。用法两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。element = document.querySelector(‘selectors‘); elementList = document.querySelectorAll(‘...

jQuery的选择器中的通配符[id^='code']

1.选择器(1)通配符： $("input[id^=‘code‘]");//id属性以code开始的所有input标签 $("input[id$=‘code‘]");//id属性以code结束的所有input标签 $("input[id*=‘code‘]");//id属性包含code的所有input标签(2)根据索引选择 $("tbody tr:even"); //选择索引为偶数的所有tr标签 $("tbody tr:odd"); //选择索引为奇数的所有tr标签(3)获得jqueryObj下一级节点的input个数 jqueryObj.children("input").length;(4)获得class为m...

jQuery学习一（选择器）

一直在学习web前端的知识，学习jQuey也有一段时间了，想总结一下。这一章先来学习jQuery选择器的知识。一、jQuery选择器的介绍 jQuery中的选择器完全继承了css的风格。利用jQuery选择器，可以非常快速和便捷的找出DOM元素，学习jQuery选择器是学习jQuery的基础，因为所有的行为都要在获取元素之后才能生效二、jQuery选择器 1、基本选择器基本选择器是最常用也是最简单的选择器，通过元素的id，class和标签名等来...

jquery选择器之获取父级元素、同级元素、子元素【图】

一、获取父级元素1、 parent([expr]):获取指定元素的所有父级元素<div id="par_div"><a id="href_fir" href="#">href_fir</a><a id="href_sec" href="#">href_sec</a><a id="href_thr" href="#">href_thr</a></div><span id="par_span"><a id="href_fiv" href="#">href_fiv</a></span>$(document).ready(function(){$("a").parent().addClass(‘a_par‘);});二、获取同级元素：1、next([expr])：获取指定元素的下一个同级元素（注意...

Developer Test-Jquery-选择器大全【代码】

没有什么新意，全是从网上摘抄的，如果哪天忘了，就来查查吧。选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery代码的效率。本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍，也列举出了一些需要注意和区分的地方。一、基本选择器1. id选择器（指定id元素）将id="o...

jQuery选择器【代码】

选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery代码的效率。本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍，也列举出了一些需要注意和区分的地方。一、基本选择器1. id选择器（指定id元素）将id="one"的元素背景色设置为黑色。（id选择器返单个元素）$(documen...

jQuery cxCalendar 日期选择器【代码】

简介cxCalendar 是基于 jQuery 的日期选择器插件。它灵活自由，你可以自定义外观，日期的范围，返回的格式等。版本：jQuery v1.7+jQuery cxCalendar v1.5.3下载地址及演示在线演示地址：http://www.jqhtml.com//wp-content/uploads/2017/05/wz/jQuery.cxCalendar-1.5.3/ 下载地址：点击下载GitHub地址：https://github.com/ciaoca/cxCalendar/使用方法载入 CSS 文件<link rel="stylesheet" href="jquery.cxcalendar.css"> 载入 J...

JQUERY - 技术教程分类

jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery 链 jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 祖先 jQuery 后代 jQuery 同胞 jQuery 过滤 jQuery AJAX 简介 jQuery load() 方法 jQuery get()/post() 方法 jQuery noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Cookie jQuery Accordion jQuery Autocomplete jQuery Growl jQuery 密码验证 jQuery Tooltip jQuery Treeview jquery 全部

JQUERY - 最热教程

javascript中html字符串转化为jquerydo...js批量设置元素样式和封装似于jquery的...使用jquery获取url及url参数的方法 jQuery取消ajax请求的方法 jquery中根据获取元素的6种方法总结如何通过jQuery添加新的内容 jQuery和ajax实现鼠标单击修改内容的方...基于JSON格式数据的简单jQuery幻灯片插...jquery设置内联样式css()js调用iframe实现打印页面内容的方法_j...

首页 / JQUERY / JQuery选择器

JQuery选择器

内容导读

内容图文

JQuery选择器

1.基本选择器

2.层次选择器

2.1 后代/子选择器

*2.2 相邻、同辈元素选择器

3.属性选择器

3.1 属性名称选择器

3.2 属性attr/prop

3.3 属性过滤选择器

4.过滤选择器

4.1 基本过滤选择器

4.2 内容过滤选择器

4.3 可见性过滤选择器

5.表单选择器

表单过滤选择器

内容总结

内容备注

内容手机端

【JQuery选择器】教程文章相关的互联网学习教程文章

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程