小陈学 jQuery-jQuery基础之-获取节点-

一、jQuery的优势

体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持

简化JS的复杂操作
不再需要关心兼容性
提供大量实用方法

二、获取节点

• • 基本选择器

全局

*  表示选择到所有网页元素

标签

p ，a ，img ，h1，span

​​​​​​​class

也叫类选择器，一个class可以用在多个元素上；一个元素也可以使用多个class，之间用空格隔开

​​​​​​​id

一个id只能用在一个元素上

​​​​​​​交集

也叫指定选择器，把元素与class或id选择器结合起来用。

如span.red{ }

div#top{ }

​​​​​​​并集

也叫群选择器，多个不同的选择器 设置 相同的样式，不同的选择器之间用逗号分隔。

#box,p,.class1{...}​​​​​​​

示例

<script>
    $(function () {
        $("*").css("color", "red"); // 通配符（全局）选择器
        $("p").css("color", "blue"); // 标签选择器
        $(".list").css("color", "green"); // class选择器
        $("#box").css("color", "purple"); // id选择器
        $("p.aaa").css("color", "pink"); // 交集选择器
        $("h1,p,a,.test").css("text-decoration", "underline"); // 并集（群）选择器
    });
</script>

 

• • 层次选择器、、

同辈

div p   选择div里面所有的p段落

​​​​​​​子代

div>p   选择div里面的所有子代p元素，不包括孙代p元素

​​​​​​​相邻

div+p    选择在div后面的第一个p元素（如果div后面第一个元素不是p，则无效）

​​​​​​​同辈

div~p     选择在div后面的所有的p元素

​​​​​​​示例

<script>
    // 后代选择器
    $("form input").css("border", "2px dotted blue");
    $("form fieldset input").css("backgroundColor", "yellow");

    // 子代选择器
    $("ul.topnav > li").css("border", "3px solid red");

    // 相邻兄弟选择器
    $("label + input").css("color", "blue").val("Labeled!");

    // 通用兄弟选择器
    $("#box ~ p").css("color", "blue");

</script>

 

• • 属性选择器

属性选择器都是放在中括号里面的

​​​​​​​[attr]

选择带有attr属性的元素

​​​​​​​[attr="value"]

属性值等于value

​​​​​​​[attr^="value"]

属性值以value开头

​​​​​​​[attr$="value"]

属性值以value结尾

​​​​​​​[attr*="value"]

属性值包含value

​​​​​​​[attr~="value"]

属性值中含有value的，value是独立的，或用空格隔开才行，而*只要包含就行，比~范围广

​​​​​​​[attr|="value"]

属性值为value或value-开头

​​​​​​​[attr!="value"]

jQuery多了一个：[attr!="value"]
选取属性值不等于value的元素，CSS3没有这个选择器

 

• • 伪类

除了4种鼠标状态伪类选择器，除了target，jQuery都支持，在jQuery中也叫过滤选择器

​​​​​​​：first-child

E:first-child 第一个E元素（这个E元素必须是父元素的第一个子元素）

​​​​​​​：first-of-type

E:first-of-type

第一个E类型的元素（这个E元素不一定是父元素的第一个子元素）

​​​​​​​：last-child

E:last-child 最后一个E元素（这个E元素必须是父元素的最后一个子元素）

​​​​​​​：last-of-type

E:last-of-type 最后一个E类型的元素（这个E元素不一定是父元素的最后一个子元素）

​​​​​​​：nth-child(n)

选择第n个子元素（从前往后数）

n是从1开始

E:nth-child(n)  选择第n个E元素。
li:nth-child(2n) {color:red}
li:nth-child(2n+1) {color:red}
li:nth-child(even){color:#f00;} /* 偶数 */
li:nth-child(odd){color:purple;} /* 奇数 */

​​​​​​​：nth-of-type(n)

E:nth-of-type(n)  选择第n个E类型的元素

​​​​​​​​​​​​​​：nth-last-child(n)

E:nth-last-child(n)

选择第n个子元素（从后往前数）

​​​​​​​：nth-last-of-type(n)

E:nth-last-of-type(n)

​​​​​​​：only-child

就是父盒子里面只有它一个子元素

<style>
    ul li:only-child {
        color: red;
    }
</style>
<ul>
    <li>1111111111</li>
</ul>
<ul>
    <li>2222222</li>
    <li>33333333</li>
    <li>4444</li>
</ul>

 

​​​​​​​only-of-type

就是父盒子里面只有它一个E类型的子元素，父盒子里面可以有多个子元素

<style>
    ul li:only-of-type {
        color: red;
    }
</style>
<ul>
    <p>pppp</p>
    <p>ppppp</p>
    <li>1111111111</li>
</ul>

 

​​​​​​​：empty

选择没有任何子元素（包括text节点）的元素E

<style>
    div p:empty {
        height: 25px;
        border: 1px solid #ccc;
        background: red;
    }
</style>
<div>
    <p>11111</p>
    <p></p>
    <p>33333</p>
</div>

 

​​​​​​​:enabled

选择表单中处于可用状态的元素

input:enabled{color:red}

​​​​​​​:disabled

选择表单中处于禁用状态的元素

input:disabled{color:red}

<style>
    input[type="text"]:enabled {
        border: 2px solid blue;
        background: greenyellow;
        color: #000;
    }

    input[type="text"]:disabled {
        border: 2px solid black;
        background: orangered;
        color: #fff;
    }
</style>
<input type="text" value="可用状态" />
<input type="text" value="禁用状态" disabled="disabled" />

 

​​​​​​​:checked

选择表单中被选中的radio或checkbox元素

input:checked{color:red}

<style>
    input:checked+span {
        background: #f00;
    }

    input:checked+span:after {
        content: " 我被选中了";
    }
</style>

<label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label>
<label><input type="radio" name="colour-group" value="1" /><span>红色</span></label>

 

​​​​​​​:focus

选择获得焦点的 input 元素

<style>
    input:focus {
        background: #f6f6f6;
        color: #f60;
        border: 1px solid #f60;
        outline: none;
    }
</style>
<input value="姓名" />
<input value="单位" />

 

​​​​​​​:seclected

选中的

​​​​​​​E:not(selector)

匹配不含有selector选择符的元素E

<style>
    .test :not(p) {
        color: red;
    }
</style>
<div class="test">
    <p>11111</p>
    <p>22222</p>
    <span>爱学吧</span>
</div>

 

<style>
    ul li:not(:last-child) {
        border-bottom: 1px solid red;
    }
</style>
<ul>
    <li>11111</li>
    <li>2222</li>
    <li>333333</li>
</ul>

 

<style>
    div p:not(.abc) {
        color: red;
    }
</style>
<div>
    <p>1111</p>
    <p class="abc">222</p>
    <p>33333</p>
</div>

 

​​​​​​​E:lang(fr)

匹配使用特殊语言的E元素

<style>
    div p:lang(en) {
        color: #090;
    }
</style>
<div>
    <p lang="kr">大段测试文字</p>
    <p lang="en">english</p>
</div>

 

​​​​​​​:root

匹配根元素。在HTML中，根元素永远是HTML  

​​​​​​​:contains(text)

选取包含特定文本的元素  $('td:contains("学习")')  返回包含 “学习”的td元素

​​​​​​​:has(selector)

选取包含selector元素的元素 $('tr:has("th")')  选取包含th元素的tr元素

 

• • 过滤选择器

:first

选取第一个元素

$(" li:first" )选取所有<li>元素中的第一个<li>元素

​​​​​​​:last

选取最后一个元素

$(" li:last" )选取所有<li>元素中的最后一个<li>元素

​​​​​​​:not(selector)

选取去除所有与给定选择器匹配的元素

$(" li:not(.three)" )选取class不是three的元素

​​​​​​​:even

选取索引是偶数的所有元素（index从0开始）

$(" li:even" )选取索引是偶数的所有<li>元素

​​​​​​​:odd

选取索引是奇数的所有元素（index从0开始）

$(" li:odd" )选取索引是奇数的所有<li>元素

 

​​​​​​​:eq(index)

选取索引等于index的元素（index从0开始）

$("li:eq(1)" )选取索引等于1的<li>元素

​​​​​​​:gt(index)

选取索引大于index的元素（index从0开始）

$(" li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1）

​​​​​​​:lt(index)

选取索引小于index的元素（index从0开始）

$(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1）

​​​​​​​:header

选取所有标题元素，如h1~h6

$(":header" )选取网页中所有标题元素

​​​​​​​:focus

选取当前获取焦点的元素

$(":focus" )选取当前获取焦点的元素

​​​​​​​:animated

选择所有动画

$(":animated" )选取当前所有动画元素