JQuery的元素选择器

小蓝 • 2025-01-04 19:31 • 编程

一、基本选择器

JQuery的基本选择器可以根据元素标签名、class、id等属性选取元素。下面是一些常用的例子：

$("p")                          //选取所有的元素$(".myclass")                   //选取所有class为myclass的元素$("#myid")                      //选取id为myid的元素$("input[name='firstname']")    //选取名字属性值为firstname的input元素

这些选择器可以单独使用，也可以组合使用。下面是一些组合使用的例子：

$("p.myclass")             //选取所有同时拥有p标签和myclass类名的元素
$(".myclass:first")             //选取所有myclass类名中第一个元素
$(".myclass:last")              //选取所有myclass类名中最后一个元素
$("tr:even")                    //选取表格中偶数行

二、层级选择器

层级选择器可以选取指定元素的子元素、后代元素、同级元素等。下面是一些常用的例子：

$("#myform input")                      //选取id为myform的元素下所有的input元素
$("#myform > input")                     //选取id为myform的直接子元素input元素
$("#myform + p")                         //选取id为myform紧接着的一个p元素
$("#myform ~ p")                         //选取id为myform后面的所有p元素

三、过滤选择器

过滤选择器用于从选定的元素集合中过滤出符合条件的元素。下面是一些常用的例子：

$( "p" ).first()                       //选取所有p元素中的第一个元素
$( "p" ).last()                        //选取所有p元素中的最后一个元素
$( "p" ).eq( 1 )                        //选取所有p元素中的第二个元素，序号从0开始
$( "p" ).filter(".myclass")                 //选取所有p元素中class为myclass的元素
$( "p" ).not(".myclass")                    //选取所有p元素中非myclass类名的元素

四、表单元素选择器

表单元素选择器可以对表单中的元素进行选择。下面是一些常用的例子：

$(":input")                      //选择所有的input元素
$("input:enabled")                  //选择所有可以用的input元素
$("input:disabled")                 //选择所有禁用的input元素
$("input:checked")                   //选择所有被选中的input元素
$("select>option:selected")           //选择所有被选中的option元素

五、元素状态

元素状态选择器可以选择特定状态的元素，比如focus、hover等。下面是一些常用的例子：

$(":focus")                        //选取当前获得焦点的元素
$(":hidden")                      //选取所有隐藏的元素
$(":visible")                     //选取所有显示的元素
$("tr:has(td:empty)")               //选取有空单元格的表格行

六、总结

JQuery的元素选择器提供了非常强大的功能，不仅支持基本的元素选取，还可以根据属性、层次、状态等多个维度进行选择。选择器的组合以及过滤功能可以帮助开发者快速、精确地选取特定的元素，从而避免了对DOM的繁琐操作。使用JQuery的选择器，可以快速地实现页面的动态交互效果，提高开发效率。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/309335.html