day16-Jquery选择器

一、前言

　　之前我们选择器都是用dom做的，就是document.getElementById("i1"),这种方式，今天我们来用jquery的方式来解决这个问题。

　　jquery的api网址：http://jquery.cuishifeng.cn/

二、基本

2.1、id

描述：根据给定的ID匹配一个元素。

1 2 3 4

HTML 代码: <div id="myDiv">id="myDiv"</div> jQuery 代码: $("#myDiv");

2.2、class

描述：根据给定的css类名匹配元素。

1 2 3 4 5 6

HTML 代码: <div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span>   jQuery 代码: $(".myClass");

2.3、标签

描述：根据给定的元素标签名匹配所有元素

1 2 3 4 5 6 7

HTML 代码: <div>DIV1</div> <div>DIV2</div> <span>SPAN</span>   jQuery 代码: $("div");

2.4、组合(selector1,selector2,selectorN)

描述：将每一个选择器匹配到的元素合并后一起返回。

1 2 3 4 5 6 7 8

HTML 代码: <div>div</div> <p class="myClass">p class="myClass"</p> <span id="i1">span</span> <p class="notMyClass">p class="notMyClass"</p>   jQuery 代码: $("div,#i1,.myClass")

三、层级

3.1、ancestor descendant

描述：在给定的祖先元素下匹配所有的后代元素(子子孙孙)

1 2 3 4 5 6 7 8 9

HTML 代码: <div id="i1">         <a>text</a>         <a>text</a>         <a>text</a>     </div>   jQuery 代码: $("#i1 a")

3.2、parent > child

描述：在给定的父元素下匹配所有的子元素(儿子)

1 2 3 4 5 6 7 8 9 10 11

HTML 代码: <div id="i1">         <div>             <a>f1</a>         </div>         <a>f2</a>         <a>f3</a>     </div>   jQuery 代码: $("#i1>a")

四、基本筛选器

4.1、:first

描述：获取第一个元素

1 2 3 4 5 6 7 8

HTML 代码: <div id="i1">         <a>f1</a>         <a>f2</a>         <a>f3</a>     </div> jQuery 代码: $('#i1>a:first')

4.2、 :last

描述：获取最后个元素

1 2 3 4 5 6 7 8

HTML 代码: <div id="i1">         <a>f1</a>         <a>f2</a>         <a>f3</a>     </div> jQuery 代码: $('#i1>a:last')

4.3、eq(index)

描述：匹配一个给定索引值的元素(从0开始计数)

1 2 3 4 5 6 7 8

HTML 代码: <div id="i1">         <a>f1</a>         <a>f2</a>         <a>f3</a>     </div> jQuery 代码: $('#i1>a:eq(0)')

五、属性

5.1、[attribute]

描述：匹配包含给定属性的元素。

1 2 3 4 5

HTML 代码: <a duncan="123"></a>   jQuery 代码: $('[duncan]')

5.2、[attribute=value]

描述：匹配给定的属性是某个特定值的元素

1 2 3 4 5 6

HTML 代码: <a duncan="123"></a> <a duncan="456"></a>   jQuery 代码: $('[duncan="456"]')或者$('a[duncan="456"]')

六、表单对象属性

6.1、disabled

描述：匹配所有不可用元素

1 2 3 4 5 6 7 8

HTML 代码: <form>   <input name="email" disabled="disabled" />   <input name="id" /> </form>   jQuery 代码: $("input:disabled")

重点说下：当input的标签的属性为 disabled="disabled"  表示标签不能使用。如图：

当然这个默认是enable的。