jQuery的选择器分类

港控/mmm° 2022-05-23 12:21 154阅读 0赞

**1.基本选择器**

$("\#id")            //ID选择器

$("div")            //元素选择器

$(".classname")     //类选择器

$(".classname,.classname1,\#id1")     //组合选择器

**2.层次选择器**

$("\#id>.classname ")    //子元素选择器

$("\#id .classname ")    //后代元素选择器

$("\#id + .classname ")    //紧邻下一个元素选择器

$("\#id ~ .classname ")    //兄弟元素选择器

**3.过滤选择器(重点)**

$("li:first")    //第一个li

$("li:last")     //最后一个li

$("li:even")     //挑选下标为偶数的li

$("li:odd")      //挑选下标为奇数的li

$("li:eq(4)")    //下标等于4的li

$("li:gt(2)")    //下标大于2的li

$("li:lt(2)")    //下标小于2的li

$("li:not(\#runoob)") //挑选除 id="runoob" 以外的所有li

**3.2内容过滤选择器**

$("div:contains('Runob')")    // 包含 Runob文本的元素

$("td:empty")                 //不包含子元素或者文本的空元素

$("div:has(selector)")        //含有选择器所匹配的元素

$("td:parent")                //含有子元素或者文本的元素

**3.3可见性过滤选择器**

$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素

$("li:visible")      //匹配所有可见元素

**3.4属性过滤选择器**

$("div\[id\]")        //所有含有 id 属性的 div 元素

$("div\[id='123'\]")        // id属性值为123的div 元素

$("div\[id!='123'\]")        // id属性值不等于123的div 元素

$("div\[id^='qq'\]")        // id属性值以qq开头的div 元素

$("div\[id$='zz'\]")        // id属性值以zz结尾的div 元素

$("div\[id\*='bb'\]")        // id属性值包含bb的div 元素

$("input\[id\]\[name$='man'\]") //多属性选过滤，同时满足两个属性的条件的元素

**3.5状态过滤选择器**

$("input:enabled")    // 匹配可用的 input

$("input:disabled")   // 匹配不可用的 input

$("input:checked")    // 匹配选中的 input

$("option:selected")  // 匹配选中的 option

**4.表单选择器**

$(":input")      //匹配所有 input, textarea, select 和 button 元素

$(":text")       //所有的单行文本框，$(":text") 等价于$("\[type=text\]")，推荐使用$("input:text")效率更高，下同

$(":password")   //所有密码框

$(":radio")      //所有单选按钮

$(":checkbox")   //所有复选框

$(":submit")     //所有提交按钮

$(":reset")      //所有重置按钮

$(":button")     //所有button按钮

$(":file")       //所有文件域

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关选择器的基本分类和扩展选择器

![Center][] div：行级标签 2个div之间会换行 span：块级标签 p:行级标签：2个p之间会换行，且有个空行 [Center

﹏ヽ暗。殇╰゛Y/ 2022年08月08日 19:42/ 0 赞/ 226 阅读

相关 JQuery的选择器

JQuery选择器 JQuery选择器类似于CSS选择(定位元素，施加样式)，能够实现定位元素，施加行为使用JQuery选择器能够将内容与行为分离选择器种类：

水深无声/ 2022年07月16日 02:51/ 0 赞/ 233 阅读

相关 Jquery选择器-基本选择器

jquery作为我们常用前端工具之一，实际项目中常用的的选择器有id选择器(\id)、元素选择器(element)、样式选择器(.class)。 \id 概述:根据给定

秒速五厘米/ 2022年07月10日 05:58/ 0 赞/ 329 阅读

相关 jQuery的选择器分类

1.基本选择器 $("\id") //ID选择器 $("div") //元素选择器 $(".classname") /

港控/mmm°/ 2022年05月23日 12:21/ 0 赞/ 155 阅读

相关 jQuery-jQuery选择器

jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择

雨点打透心脏的1/2处/ 2022年04月17日 07:05/ 0 赞/ 366 阅读

相关 jQuery 的选择器

jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法 $("myELement") 选择id值等于myElement

矫情吗；*/ 2022年04月13日 10:16/ 0 赞/ 210 阅读

相关 jQuery选择器优势和分类

选择器是jQuery的核心之一，jQuery沿用了CSS选择器获取元素的功能，使得开发者能够在DOM中快捷且轻松地获取元素及其集合，并通过所操作的对象与用户或浏览器进行各种信息

╰+哭是因爲堅強的太久メ/ 2022年03月22日 12:13/ 0 赞/ 220 阅读

相关 JQuery选择器

JQuery选择器页面的任何操作都需要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。jQuery提供了一系列的选择器帮助开发者达到这一目的，让

一时失言乱红尘/ 2022年02月13日 14:15/ 0 赞/ 275 阅读

相关 Jquery 选择器

使用特殊操作符或“组合符”可以将简单选择器组合起来，表达文档树中元素之间的关系。下表列举了jQuery支持的组合选择器。这些组合选择器与CSS3支持的组合选择器是一样的。下

╰半橙微兮°/ 2021年10月08日 05:58/ 0 赞/ 439 阅读

相关 jQuery-选择器

[http://www.webhek.com/post/jquery-61-selector.html][http_www.webhek.com_post_jquery-61-

小鱼儿/ 2021年09月28日 10:46/ 0 赞/ 405 阅读