jQuery选择器总结
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法
$(\”#myELement\”) 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$(\”div\”) 选择所有的div标签元素,返回div元素数组
$(\”.myClass\”) 选择使用myClass类的css的所有元素
$(\”*\”) 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$(\”#myELement,div,.myclass\”)
层叠选择器:
$(\”form input\”) 选择所有的form元素中的input元素
$(\”#main > *\”) 选择id值为main的所有的子元素
$(\”label + input\”) 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$(\”#prev ~ div\”) 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
基本过滤选择器:
$(\”tr:first\”) 选择所有tr元素的第一个
$(\”tr:last\”) 选择所有tr元素的最后一个
$(\”input:not(:checked) + span\”)
过滤掉:checked的选择器的所有的input元素
$(\”tr:even\”) 选择所有的tr元素的第0,2,4… …个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
$(\”tr:odd\”) 选择所有的tr元素的第1,3,5… …个元素
$(\”td:eq(2)\”) 选择所有的td元素中序号为2的那个td元素
$(\”td:gt(4)\”) 选择td元素中序号大于4的所有td元素
$(\”td:ll(4)\”) 选择td元素中序号小于4的所有的td元素
$(\”:header\”)
$(\”div:animated\”)
内容过滤选择器:
$(\”div:contains(\’John\’)\”) 选择所有div中含有John文本的元素
$(\”td:empty\”) 选择所有的为空(也不包括文本节点)的td元素的数组
$(\”div:has(p)\”) 选择所有含有p标签的div元素
$(\”td:parent\”) 选择所有的以td为父节点的元素数组
可视化过滤选择器:
$(\”div:hidden\”) 选择所有的被hidden的div元素
$(\”div:visible\”) 选择所有的可视化的div元素
属性过滤选择器:
$(\”div[id]\”) 选择所有含有id属性的div元素
$(\”input[name=\’newsletter\’]\”) 选择所有的name属性等于\’newsletter\’的input元素
$(\”input[name!=\’newsletter\’]\”) 选择所有的name属性不等于\’newsletter\’的input元素
$(\”input[name^=\’news\’]\”) 选择所有的name属性以\’news\’开头的input元素
$(\”input[name$=\’news\’]\”) 选择所有的name属性以\’news\’结尾的input元素
$(\”input[name*=\’man\’]\”) 选择所有的name属性包含\’news\’的input元素
$(\”input[id][name$=\’man\’]\”) 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
子元素过滤选择器:
$(\”ul li:nth-child(2)\”),$(\”ul li:nth-child(odd)\”),$(\”ul li:nth-child(3n + 1)\”)
$(\”div span:first-child\”) 返回所有的div元素的第一个子节点的数组
$(\”div span:last-child\”) 返回所有的div元素的最后一个节点的数组
$(\”div button:only-child\”) 返回所有的div中只有唯一一个子节点的所有子节点的数组
表单元素选择器:
$(\”:input\”) 选择所有的表单输入元素,包括input, textarea, select 和 button
$(\”:text\”) 选择所有的text input元素
$(\”:password\”) 选择所有的password input元素
$(\”:radio\”) 选择所有的radio input元素
$(\”:checkbox\”) 选择所有的checkbox input元素
$(\”:submit\”) 选择所有的submit input元素
$(\”:image\”) 选择所有的image input元素
$(\”:reset\”) 选择所有的reset input元素
$(\”:button\”) 选择所有的button input元素
$(\”:file\”) 选择所有的file input元素
$(\”:hidden\”) 选择所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器:
$(\”:enabled\”) 选择所有的可操作的表单元素
$(\”:disabled\”) 选择所有的不可操作的表单元素
$(\”:checked\”) 选择所有的被checked的表单元素
$(\”select option:selected\”) 选择所有的select 的子元素中被selected的元素
选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input[@ name =S_03_22]“).parent().prev().text()
名字以”S_”开始,并且不是以”_R”结尾的
$(”input[@ name ^=\’S_\’]“).not(”[@ name $=\’_R\’]“)
一个名为 radio_01的radio所选的值
$(”input[@ name =radio_01][@checked]“).val();
$(\”A B\”) 查找A元素下面的所有子节点,包括非直接子节点
$(\”A>B\”) 查找A元素下面的直接子节点
$(\”A+B\”) 查找A元素后面的兄弟节点,包括非直接子节点
$(\”A~B\”) 查找A元素后面的兄弟节点,不包括非直接子节点
1. $(\”A B\”) 查找A元素下面的所有子节点,包括非直接子节点
例子:找到表单中所有的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name=\”name\” />
<fieldset>
<label>Newsletter:</label>
<input name=\”newsletter\” />
</fieldset>
</form>
<input name=\”none\” />
jQuery 代码:
$(\”form input\”)
结果:
[ <input name=\”name\” />, <input name=\”newsletter\” /> ]
2. $(\”A>B\”) 查找A元素下面的直接子节点
例子:匹配表单中所有的子级input元素。
HTML 代码:
<form>
<label>Name:</label>
<input name=\”name\” />
<fieldset>
<label>Newsletter:</label>
<input name=\”newsletter\” />
</fieldset>
</form>
<input name=\”none\” />
jQuery 代码:
$(\”form > input\”)
结果:
[ <input name=\”name\” /> ]
3. $(\”A+B\”) 查找A元素后面的兄弟节点,包括非直接子节点
例子:匹配所有跟在 label 后面的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name=\”name\” />
<fieldset>
<label>Newsletter:</label>
<input name=\”newsletter\” />
</fieldset>
</form>
<input name=\”none\” />
jQuery 代码:
$(\”label + input\”)
结果:
[ <input name=\”name\” />, <input name=\”newsletter\” /> ]
4. $(\”A~B\”) 查找A元素后面的兄弟节点,不包括非直接子节点
例子:找到所有与表单同辈的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name=\”name\” />
<fieldset>
<label>Newsletter:</label>
<input name=\”newsletter\” />
</fieldset>
</form>
<input name=\”none\” />
jQuery 代码:
$(\”form ~ input\”)
结果:
[ <input name=\”none\” /> ]
学前端,这30个CSS选择器,你必须熟记
你学会了基本的id,class类选择器和descendant后代选择器,然后就觉得完事了吗?如果这样,你就会错过许多灵活运用CSS的机会。虽然本文提到的许多选择器都属于CSS3,并且只能在现代的浏览器中使用,但学会这些是大有好处的。
什么是CSS选择器呢?
每一条css样式定义由两部分组成,形式如下:[code]选择器{样式}[/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素
首先我们来认识一些简单的选择器,尤其针对初学者,然后再看其他高级的选择器。
星号可以用来定义页面的所有元素。许多开发者会使用这个技巧来把margin和padding都设为0。在快速开发测试中这种设置固然是好的,但我建议绝对不要在最终的产品代码中使用。因为会给浏览器增加大量不必要的。
星形*也可以用于子元素选择器(child selectors)。
这段代码会定义#container div所有子元素的样式。跟上面一样,如果可以尽量避免使用这个方法。
使用#号作为前缀可以选择该id的元素。这是最常见的用法,但使用id选择器时要谨慎。
问问自己:是否真的需要使用id来定义元素的样式?
id选择器比较局限,不能重用。如果可以的话,先尝试使用标签名称,HTML5的其中一个新元素,或使用伪类。
这是class类选择器。id和class类选择器的区别是,类选择器可以定义多个元素。当你想定义一组元素的样式时可以使用class选择器。另外,可以使用id选择器来定义某一个特定的元素。
下一个最常见的选择器是descendant后代选择器。当你需要更精确的定位时,可以使用后代选择器。例如,假如说你只想选择无序列表里的链接,而不是所有的链接?这种情况下你就应该使用后代选择器。
经验分享 – 如果你的选择器看起来像X Y Z A B.error这样就错了。问问自己是否真的需要加入这么多负荷。
假如你想定义页面里所有type标签类型一样的元素,而不使用id或者class呢?可以简单地使用元素选择器。比如选择所有的无序列表,可以用ul {}。
我们使用:link伪类来定义所有还没点击的链接。
另外还有:visited伪类可以让我们给点击过或者的链接添加样式。
这是邻近元素选择器,只会选中紧接在另一个元素后的元素。这上面的示例中,只有每个ul后面的第一个段落是红色的。
X Y和X > Y的区别是后者只会选中直接后代。例如,看看下面的代码:
#container > ul只会定义id为container的div里的ul元素,而不会定义第一个li里的ul。
因此,使用这种选择器的效果更佳。实际上,在JavaScript中尤其适用。
这种兄弟选择器跟X + Y很像,但没有那么严格。邻近选择器(ul + p)只会选择在前一个元素后的元素,但兄弟选择器更广泛。比如,在上面的例子中,只要在ul后的p兄弟元素都会被选中。
这种是属性选择器,在上面的例子中,带有title属性的链接标签才会被匹配。没有title属性的标签不会受到影响。但如果想更具体地根据属性的值来选择,就继续往下看吧。
上面的代码定义了所以指向http://www.icodingedu.com的链接都是nettuts品牌的绿色。其他的链接不受影响。
注意我们把赋值放在引号里面,在JavaScript中选择元素的时候也要记住这么使用。尽可能地使用CSS3标准的选择器。
这种方法不错,但还是有点局限。万一链接也是指向Nettuts+,但路径是而不是完整的路径呢?这种情况下我们可以使用正则表达式(regular expression)。
解决了上面的问题。星号表示赋值出现在属性的任意处。这样就定义了指向nettuts.com,net.tutsplus.com甚至tutsplus.com的链接。
要记住的是这种表达比较宽泛。假如链接包含tuts但指向了不是Envato旗下的网站呢?如果你想更精确,可以使用^和$来匹配前缀和后缀。
你有想过有些网站是怎么在链接旁边加一个小图标指示这是外部链接吗?我相信你一定有见过这样的小图标,它们标示着链接会导向到另外的网站。
这非常容易做到。通常使用正则表达式来指定字符串的前缀。如果我们想定义所有href属性前缀为http的链接标签,我们可以使用上面代码的选择器。
可以看到我们没有使用http://,因为没有必要,而且这样不能匹配以https://开头的url。
接下来,比如说我们要定义所以指向图片的链接又要怎么办呢?这样可以匹配字符串的后缀。
再来,我们使用正则表达式符号$来表示字符串的后缀。在上面的例子中,我们将匹配所以指向图片或至少以.jpg结尾的url。要记住的是当然这些样式对gif和png是无效的。
就像上面所说的,我们怎么匹配所有的图片,包括png,jpeg,jpg和gif?可以使用多个选择器。
但这样很麻烦,也很没有效率。另一种解决方法是使用自定义属性。比如在图片链接标签中添加data-filetype属性。
这样,我们就可以使用属性选择器来定义链接的样式。
这个技巧将会让小伙伴们对你刮目相看。并没有很多人知道这个技巧。波浪符号(~)可以让你定义取值带有空格的属性。
继续使用前面的自定义属性,创建data-info属性来匹配带有空格的取值。举个例子,这里我们匹配外部链接和图片链接。
使用上面的代码,现在我们可以用波浪号的技巧来定义包含其中一个值的元素。
巧妙吧?
很简单,这个伪类可以用来定义选中(checked)的元素,比如单选按钮(radio)或多选按钮(checkbox)。
伪类before和after属于高级用法。几乎每一天都有人找到高效而有创意的新用法。这两个伪类可以在元素前面和后面添加内容。
许多人认识到这两个伪类是因为这是清除浮动的技巧。
这个例子利用:after在元素后面添加间隔和清除浮动的元素。这是你值得拥有的高级技巧,尤其是当overflow: hidden;不管用的时候。
根据CSS3选择器规范,语法上你应该使用双冒号来::来指定伪类。然而,为了兼容多数浏览器,单冒号也被承认。实际上,在目前的情况下,使用单冒号的选择是明智的。
好吧,这个你一定懂。正式的叫法是用户交互伪类user action pseudo class。听起来有些费解,但实际上并非如此。想给用户鼠标划过的元素添加样式?这就派上用场了!
要记住的是在旧版的IE里,:hover只能用于链接标签。
最常见的用法是,比如,当鼠标划过链接,链接会出现下划线(border-bottom)。
经验分享 – border-bottom: 1px solid black;比text-decoration: underline;的效果更好。
否定伪类特别有用。假设我想选择所有 divs,除了 id 为 的那个 container。上面的代码片段将完美地处理该任务。
或者,如果我想选择除段落标签之外的每个元素(不建议),我们可以这样做:
我们可以使用伪元素(用::表示)来定义某些片段元素,比如第一行或第一个字母。要记住的是这只能用于块状(block)元素。
伪元素使用两个冒号::。
上面的代码会先找到所有的段落,然后匹配元素的第一个字母。
这常用于创建类似报纸文章的样式。
类似地,这里使用::first-line来定义元素的第一行的样式。
“为了兼容现有的样式标准,用户代理必须同时采纳CSS1和CSS2里使用单冒号来表示伪元素的标准(比如:first-line,:first-letter,:before和:after)。但新的伪元素不兼容这种特列。 - 资料来源”
还记得以前我们不可以匹配一组序列元素里的某个元素吗?nth-child伪元素就能解决这个问题!
要注意的是nth-child指序列里的第n个元素,从1数起。如果你想匹配列表里的第二个元素,可以使用li:nth-child(2)。
我们甚至可以使用这种方法来选择一系列的子元素。比如li:nth-child(4n)可以选择排在4的倍数的元素。
假如你有一个无序列表里面有很多子元素,但你只想匹配第三到最后一个元素,那该怎么办?你可以使用伪类nth-last-child。
这个技巧跟上面的一样,但是从集合的最后一个数起。
有时候你可能想通过元素的类型type来选择,而不是子元素child。
假设有5个无序列表。如果你想定义第三个ul的样式,但又没有id来进行匹配,那么可以使用伪类nth-of-type(n)。在上面的代码中,只有第三个ul会有边框。
当然,我们也可以使用nth-last-of-type来选择倒数第n个元素。
这种伪类可以用于选中母元素的第一个子元素,常常用于去掉第一个或最后一个元素的边框。
例如,假设你有一个序列,每一行的元素都有上边框border-top和下边框border-bottom。这样的话第一个和最后一个元素看来起就没有那么整齐。
许多设计师就会通过给第一个和最后一个元素添加样式来解决,但实际上可以使用这里提到的伪类。
last-child是first-child的反面,可以匹配最后一个子元素。
下面的例子展示了怎么使用这些伪类。先创建一个无序列表。
这是一个简单的列表。
这部分代码设置背景颜色,去掉浏览器给ul设置的padding,然后给li加上边框增加深度。
给列表增加深度,可以给每个li添加比背景颜色深一点的下边框border-bottom。然后添加比背景颜色浅一点的上边框border-top。
唯一的问题是,上图中无序列表的顶部和底部也会有边框,看起来有点奇怪。可以用伪类:first-child和:last-child来解决。
这样就好了。
事实上你很少会用到only-child这个伪类,但是当你需要的时候是可以使用的。
only-child可以让你匹配唯一的子元素。例如,在上面的代码中,只有当div只有一个p子元素的时候段落字体才是红色的。
再看下面的代码。
在这种情况下,第二个div里面的段落不会被选中,只有第一个div的段落才被选中。只要母元素含有超过一个子元素,only-child伪类就会失效。
这个伪类有几种不同的用法。only-of-type会匹配母元素里没有邻近兄弟元素的子元素。例如,匹配所有只有一个列表元素的ul。
首先想想要怎么做?你可以使用ul li,但这样会匹配无序列表的元素,这样only-of-type就是唯一的解决方法。
first-of-type可以用来选择该类型的第一个元素。
为了更好地理解,我们来做一个练习。拷贝下面的代码粘贴到你的代码编辑器里:
现在,无需进一步阅读,尝试找出如何仅定位 \”List Item 2\”。当您弄清楚(或放弃)后,请继续阅读。
有多种方法可以解决此测试。我们将审查其中的一些。让我们从使用 first-of-type.
这个片段本质上说,要找到页面上的第一个无序列表,然后只找到直接子项,它们是列表项。接下来,将其过滤到该集合中的第二个列表项。
另一种选择是使用相邻选择器。
在这种情况下,我们找到 ul 立即执行 p 标记的 ,然后找到元素的最后一个子元素。
使用这些选择器,我们可以随心所欲地变得讨厌或好玩。
这一次,我们抓取 ul 页面上的第一个,然后找到第一个列表项,但从底部开始!
如果你想兼容旧的浏览器,比如IE6,在使用这些新的选择器时需要更加注意。但是不要让旧浏览器妨碍你做新的尝试。可以参考浏览器兼容性列表。另外可以使用Dean Edward的E9.js。
另外,当使用JavaScript类库的时候,比如jQuery,尽可能地使用原生的CSS3选择器。这样可以加快代码的运行速度,因为选择器引擎使用浏览器内置的解析器,速度更快。
感谢阅读,希望你能有所收获!如果学习有问题,可以私聊我们!
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场,未经允许不得转载。