css选择器
Id选择器 class选择器 标签选择器 后代选择器 交级选择器 并级选择器 通配符选择器 结构选择器 伪类选择器 属性选择器 相邻选择器 兄弟选择器
而jQuery完美的兼容了css的选择器 让我们通过更简单的方式,去获取到标签;
https://code.jquery.com/jquery-3.3.1.js
重要的一个:children("div") 父元素的所有子级div
基本:
css选择器 jQuery写法
id获取 $("#id")
class获取 $(".class")
标签获取 $("div")
* $("*")
selector1,selector2,selectorN (将所有选择器合并到一起返回新的结果) $("div,span,p.myClass") 并级和交级的结合,合并成新的结果
层级
后代 $("div p") div下所有的p标签
子代 $("div>p") div的子标签为p的
相邻 $("div+p") div开始的下一个p标签(同一级)
兄弟 $("div~p") div开始后面的p标签 (同一级)
基本:
:first $("li:first") 获取匹配的第一个标签
:not $("div:not") 将匹配的内容 清除
:even $("div:even") 匹配''索引''为偶数的内容
:odd $("div:odd") 匹配''索引''为奇数的内容
:eq() $("div:eq(0)") 匹配指定索引为0的内容
:gt() $("div:gt(0)") 同级 匹配指定索引之后的所有内容
:lang $("div:lang(en)") 将匹配到<div lang="en></div> 他的文本紧跟着~的符号 不常见
:last $("div:last") 匹配到最后的内容
:lt() $("div:lt(2)") 匹配索引小于2的所有内容
:header $(":header") 获取h1到h6的内容
:animated $("div:not(animated)") 指对没有执行动画的效果,执行一次动画的效果
:focus $(":focus") 指匹配到获取焦点的内容
:root $(":root") 匹配到当前的根节点 跟HTML一样的效果
:target $("p:target") 将匹配到 给定的URI http://example.com/#foo <p id="foo"></p>
内容:
:contains(text) $("div;contains(111)") 匹配包含给定文本的元素
:empty $("div:empty") 匹配所有不包含子元素或者文本的空元素 返回的结果<div><div>
:has(selector) $("div:has(p)") 匹配div中含p标签的div(用于过滤)
:parent $("p:parent") 匹配所有的p元素包括p的文本
可见:
:hidden $("div:hidden") 匹配所有看不见的元素 或者type为hidden的元素
:visible $("div:visible") 匹配所有可见的元素
属性: 返回的结果
[attribute] $("div[id]") <div id="a"></div>
[attribute=value] $("div[id='b']") <div id="b"></div>
[attribute!=value] $("div[id!='a']") <div id="c"></div>
[attribute^=value] $("div[id^='a']") <div id="ab"></div> <div id="ac"></div>
[attribute$=value] $("div[id$='a']") <div id="ba"></div> <div id="ca"></div>
[attribute*=value] $("div[id*='a']") <div id="ab"></div> <div id="ba"></div> <div id="bac"></div>
[attrSel1][attrSel2][attrSelN] $("div[id][name$='man']") <div id="xman" name="xman"><div>
子元素:
:first-child $("ul li:first-child") ul下第一个子元素li
:first-of-type $("ul li:first-of-type") ul下所有li中的第一个li
:last-child $("ul li:last-child") ul下最后一个元素li
:last-of-type $("ul li:last-of-type") ul下所有li中的最后一个li
:nth-child $("ul li:nth-child(2)") ul下第二个元素li
:nth-last-child $("ul li:nth-last-child(2)") ul下倒数第二个元素li
:nth-last-of-type $("ul li:nth-last-of-type(2)") ul下所有li中第二个li
:nth-of-type $("ul li:nth-of-type(2)") ul下所有li中第二个li
:only-child $("ul li:only-child") ul下只能有一个li
:only-of-type $("ul li:only-of-type") ul下唯一的标签li
表单:
:input $(":input") 查找所有的input元素 像textarea(文本域) button(按钮) 都会被匹配到
:text $(":text") 匹配单行文本框
:password $(":password") 匹配所有的密码框
:radio $(":radio") 匹配所有的单选框
:checkbox $(":checkbox") 匹配所有的复选框
:submit $(":submit") 匹配所有的提交按钮
:image $(":image") 匹配所有的图像域
:reset $(":reset") 匹配所有的重置按钮
:button $(":button") 匹配所有按钮
:file $(":file") 匹配所有的文件域
:hidden $(":hidden") 匹配所有不可见元素或type为hidden
表单对象属性:
:enabled $(":enabled") 匹配所有可用元素
:disabled $(":disabled") 匹配所有不可用元素
:checked $(":checked") 匹配所有选中的元素(复选框,单选框,不包括selected的option)
:selected $(":selected") 匹配所有option