day16-jQuery选择器
一、前言
之前我们选择器都是用dom做的,就是document.getElementById("i1"),这种方式,今天我们来用jquery的方式来解决这个问题。
jquery的api网址:http://jquery.cuishifeng.cn/
二、基本
2.1、id
描述:根据给定的ID匹配一个元素。
HTML 代码: <div id="myDiv">id="myDiv"</div> jQuery 代码: $("#myDiv");
2.2、class
描述:根据给定的css类名匹配元素。
HTML 代码: <div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span> jQuery 代码: $(".myClass");
2.3、标签
描述:根据给定的元素标签名匹配所有元素
HTML 代码: <div>DIV1</div> <div>DIV2</div> <span>SPAN</span> jQuery 代码: $("div");
2.4、组合(selector1,selector2,selectorN)
描述:将每一个选择器匹配到的元素合并后一起返回。
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
描述:在给定的祖先元素下匹配所有的后代元素(子子孙孙)
HTML 代码: <div id="i1"> <a>text</a> <a>text</a> <a>text</a> </div> jQuery 代码: $("#i1 a")
3.2、parent > child
描述:在给定的父元素下匹配所有的子元素(儿子)
HTML 代码: <div id="i1"> <div> <a>f1</a> </div> <a>f2</a> <a>f3</a> </div> jQuery 代码: $("#i1>a")
四、基本筛选器
4.1、:first
描述:获取第一个元素
HTML 代码: <div id="i1"> <a>f1</a> <a>f2</a> <a>f3</a> </div> jQuery 代码: $('#i1>a:first')
4.2、 :last
描述:获取最后个元素
HTML 代码: <div id="i1"> <a>f1</a> <a>f2</a> <a>f3</a> </div> jQuery 代码: $('#i1>a:last')
4.3、eq(index)
描述:匹配一个给定索引值的元素(从0开始计数)
HTML 代码: <div id="i1"> <a>f1</a> <a>f2</a> <a>f3</a> </div> jQuery 代码: $('#i1>a:eq(0)')
五、属性
5.1、[attribute]
描述:匹配包含给定属性的元素。
HTML 代码: <a duncan="123"></a> jQuery 代码: $('[duncan]')
5.2、[attribute=value]
描述:匹配给定的属性是某个特定值的元素
HTML 代码: <a duncan="123"></a> <a duncan="456"></a> jQuery 代码: $('[duncan="456"]')或者$('a[duncan="456"]')
六、表单对象属性
6.1、disabled
描述:匹配所有不可用元素
HTML 代码: <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> jQuery 代码: $("input:disabled")
重点说下:当input的标签的属性为 disabled="disabled" 表示标签不能使用。如图:
当然这个默认是enable的。