我的小JQuery兄弟

我的小JQuery兄弟

[TOC]

---

由JQuery对象转为DOM对象

• 获取一个JQuery对象

var $btn = $("button");

• JQuery对象是一个数组

alert($btn.length);

• JQuery对象可以通过数组下标获取DOM对象

alert($btn[0].firstChild.nodeValue);

---

由DOM对象转为JQuery对象

// 使用$()包裹DOM对象

alert($(btn).text()); //等价于: btn.firstChild.nodeValue;

---

基本选择器

• ID选择器 #

$("#btn");

• class选择器 [ . ]

$(".btn");

• 标签选择器 button

$("button");

• 全部选择 [ * ]

$("*");

• 多选，并列选择器 ,

$(".btn,button,#btn");

---

层次选择器

• 选取ancestor的所有descendant(后代)元素

后代元素：包括子元素的子元素。。。

$("ancestor descendant");

• 选取ancestor的所有descendant(子)元素

子元素：只包括他下面的元素。。。

$("ancestor>descendant");

• 选取ancestor的下一个descendant元素

以下选择器仅在descendant和ancestor相邻的才有效.

$("ancestor+descendant");

• 选取ancestor后面的所有descendant元素

$("ancestor~descendant");

• 选取ancestor所有兄弟descendant元素

$("ancestor").sibling("descendant");

• 选取不相邻ancestor的下一个兄弟descendant元素

first代表的是第一个元素

$("ancestor").nextAll("descendant:first");

• 选取ancestor前面的所有兄弟descendant元素

$("ancestor").prevAll("descendant");

---

基本过滤选择器

• 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，该选择器都以“:”开头.

• 按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器.

选择器|描述|返回

------|------------|--------

:first|选取第一个元素|单个元素组成的集合

:last|选取最后一个元素|集合元素

:not(selector)|去除所有与给定选择器匹配的元素|集合元素

:even|选取索引时偶数的所有元素，索引从0开始|集合元素

:odd|选取索引时奇数的所有元素，索引从0开始|集合元素

:eq(index)|选取索引大于等于index的元素，索引从0开始|集合元素

:gt(index)|选取索引大于index的元素，索引从0开始|集合元素

:lt(index)|选取索引小于index的元素，索引从0开始|集合元素

:header|选取所有的标题元素，如：h1，h2等|集合元素

:animated|选取当前正在执行动画的所有元素|集合元素

---

$("#btn1").click(function() {

$("div:first").css("background","orange");

})

$("#btn2").click(function() {

$("div:last").css("background","orange");

})

$("#btn3").click(function() {

$("div:not(.one)").css("background","orange");

})

$("#btn4").click(function() {

$("div:even").css("background","orange");

})

$("#btn5").click(function() {

$("div:odd").css("background","orange");

})

$("#btn6").click(function() {

$("div:gt(3)").css("background","orange");

})

$("#btn7").click(function() {

$("div:eq(3)").css("background","orange");

})

$("#btn8").click(function() {

$("div:lt(3)").css("background","orange");

})

$("#btn9").click(function() {

$(":header").css("background","orange");

})

$("#btn10").click(function() {

$(":animated").css("background","orange");

})

$("#btn11").click(function() {

$("#two").nextAll("span:first").css("background","orange");

})

---

内容过滤选择器

内容过滤选择器的过滤规则主要体现在他所包含的子元素和文本内容上

选择器|描述|返回

------|----|----

:contains(text)|选取含有文本内容为text的元素|集合元素

:empty|选取不包含子元素或者文本的空元素|集合元素

:has(selector)|选取含有某个选择器的元素|集合元素

:parent|选取含有子元素或文本的元素|集合元素

---