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的。

转载于:https://www.cnblogs.com/zhangqigao/articles/8366210.html