前端学习JQuery篇01——基本语法（选择器）

时间 2019-11-18

标签前端学习 jquery 基本语法选择器栏目 JQuery 繁體版

原文原文链接

基本选择器

#id javascript

.classcss

elementhtml

*java

selector1,selector2,selectorNjquery

层级

selector1 selector2	选择selector1的后代元素中的selector2	$("div #d1")	选择div元素的后代元素中全部id为d1的元素
selector1>selector2	选择selector1的子元素中的selector2	$("div .divC")	选择div元素的子元素中全部class为divC的元素
selector1+selector2	匹配全部紧接在 prev 元素后的 next 元素(PS:必须是紧接在后的同辈元素)
selector1~selector2	匹配 prev 元素以后的全部 siblings 元素(PS:必须为同辈元素)

基本筛选器

:first	获取匹配的第一个元素
:not(selector)	去除全部与selector匹配的元素在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）	$("div:not(#div1,#div4)")	选择全部的div元素除了id为div1和div4的
:even	匹配全部索引值为偶数的元素，从 0 开始计数，查找表格的一、三、5...行（即索引值0、二、4...）
:odd	匹配全部索引值为奇数的元素，从 0 开始计数，查找表格的二、四、6行（即索引值一、三、5...）
:eq(index)	匹配一个给定索引值的元素，从 0 开始计数	$(".divC:eq(0)")	选择class为divC的第一个元素
:gt(index)	匹配全部大于给定索引值的元素，从 0 开始计数
:lang 1.9+	:lang选择器,匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面立刻跟一个“ - ”的元素。	$("div:lang(en)")	匹配<div lang="en"> and <div lang="en-us">（和他们的后代<div>），但不包括<div lang="fr">
:last	获取最后个元素
:lt(index）	匹配全部小于给定索引值的元素，从 0 开始计数
:header	匹配如 h1, h2, h3之类的标题元素（ps：没法在header前面加选择器如div：header）
:animated	匹配全部正在执行动画效果的元素
:focus	匹配当前获取焦点的元素。如同其余伪类选择器（那些以":"开始），建议:focus前面用标记名称或其余选择;		换句话说，$(':focus')等同为$('*:focus')
:root 1.9+	选择该文档的根元素。在HTML中，文档的根元素，和$(":root")选择的元素同样，永远是<html>元素。
:target 1.9+	选择由文档URI的格式化识别码表示的目标元素。（PS：这个不寻常的用法，可进一步讨论中找到 W3C CSS specification）

内容

:contains(text)	匹配包含给定文本的元素	$("p:contains('John')")	查找全部包含 "John" 的 p 元素
:empty	匹配全部不包含子元素或者文本的空元素
:has(selector)	匹配含有选择器所匹配的元素的元素
:parent	匹配含有子元素或者文本的元素

可见性

:hidden	匹配全部不可见元素，或者type为hidden的元素
:visible	匹配全部的可见元素

属性

[attribute]	匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！若是想要兼容最新版本，只须要简单去掉@符号便可。	$("div[id]")	查找全部含有 id 属性的 div 元素
[attribute=value]	匹配给定的属性是某个特定值的元素	$("input[name='newsletter']")	查找全部 name 属性是 newsletter 的 input 元素
[attribute!=value]	匹配全部不含有指定的属性，或者属性不等于特定值的元素。（ps：注意！和=不要留空格，会报错）		此选择器等价于 :not([attr=value])
[attribute^=value]	匹配给定的属性是以某些值开始的元素
[attribute$=value]	匹配给定的属性是以某些值结尾的元素
[attribute*=value]	匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN]	复合属性选择器，须要同时知足多个条件时使用。	$("input[id][name$='man']")	找到全部含有 id 属性，而且它的 name 属性是以 man 结尾的

子元素

selector:first-child	匹配selector所选元素中在其父元素里的第一个子元素。（若所选元素不是第一个子元素则不选择）
:first-of-type 1.9+	结构化伪类，匹配E的父元素的第一个E类型的孩子。等价于:nth-of-type(1) 选择器。	$("span:first-of-type");	查找span元素的父元素的子元素的第一个span元素
:last-child	匹配selector所选元素中在其父元素里的最后一个子元素	$("ul li:last-child")	在每一个 ul 中查找最后一个 li
:last-of-type 1.9+	结构化伪类，匹配E的父元素的最后一个E类型的孩子
:nth-child()	匹配其父元素下的第N个子或奇偶元素，要匹配元素的序号，从1开始(参考first-child，示例在此表格以后)
:nth-last-child() 1.9+	选择全部他们父元素的第n个子元素。计数从最后一个元素开始到第一个。（与:nth-child()x类似，从后开始计数）
:nth-last-of-type() 1.9+	选择的全部他们的父级元素的第n个子元素，计数从最后一个元素到第一个。
:nth-of-type(n\|even\|odd\|formula)1.9+	选择同属于一个父元素之下，而且标签名相同的子元素中的第n个。odd奇数，even偶数
:only-child	若是某个元素是父元素中惟一的子元素，那将会被匹配
:only-of-type 1.9+	选择全部没有兄弟元素，且具备相同的元素名称的元素

:first-child ,:last-child ,:first-of-type, :last-of-type的区别

        <div >
        	<span>1</span>
        	<p>2</p>
        	<p>3</p>
        </div>
        <div >
        	<p>4</p>
        	<p>5</p>
        </div>

　　示例浏览器

    	$("p:first-child").css("color","red");

　　结果：只有4变红动画

        $("p:first-of-type").css("color","red");

　　结果：2和4变红ui

    	$("p:nth-child(2)").css("color","red");

　　结果：2和5变红spa

按上例通俗的说：有of的不会在乎span的存在，没of的会在span的存在

表单

:input	匹配全部 input, textarea, select 和 button 元素
:text	匹配全部的单行文本框
:password	匹配全部密码框
:radio	匹配全部单选按钮
:checkbox	匹配全部复选框
:submit	匹配全部提交按钮，理论上只匹配 type="submit" 的input或者button，可是如今的不少浏览器，button元素默认的type即为submit，orm 因此不少状况下，不设置type的button也会成为筛选结果。为了防止歧义或者误操做，建议全部的button在使用时都添加type属性。
:image	匹配全部图像域
:reset	匹配全部重置按钮
:button	匹配全部按钮
:file	匹配全部文件域

表单对象属性

:enabled	匹配全部可用元素，没被禁用的（PS：disabled="disabled"禁用按钮）
:disabled	匹配全部不可用元素
:checked	匹配全部选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来讲，获取选中推荐使用 selected
:selected	匹配全部选中的option元素

混淆选择器

$.escapeSelector(selector) 3.0+

这个方法一般被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候，这个方法基本上与CSS中CSS.escape()方法相似，惟一的区别是jquery中的这个方法支持全部浏览器。

$( "div" ).find( "." + $.escapeSelector( ".box" ) );

选择出类中包含.box的div