Jquery的选择器

jQuery借鉴了CSS种选择器的思想,CSS中的选择器 目的是选择出标签给标签加样式,而jQuery中
的选择器,选择出元素以后可以对元素做什么操作(加样式、绑定事件、调用方法).

一.基本选择器

1. 标签选择器

CSS

p {
样式规则
}

jQuery

$("div")

演示代码:

 

$(function(){

/*var $obj = $("div");

$obj.css("background-color","burlywood");

console.dir($obj);*/

//js

var divArr = document.getElementsByTagName("div");

for(var i=0;i<divArr.length;i++){
divArr[i].style.backgroundColor = "burlywood";

}
});

 

jQuery中有隐式的循环

 

2. id选择器

CSS

#myId {

}

<div id="myId"></div>

jQuery

$("#myId")

3. 类选择器

CSS

(1)

div.divClass1 {

}

(2)

.divClass1 {

}

<div class=""></div>

 

jQuery

$(".myClass1")

4. 组合选择器

选择器1,选择器2,....选择器n {

 

}

5. *

***************************************二.层次选择器***************************************

一.子级

1. 子代选择器

儿子节点

CSS
选择器1>选择器 {

}

2. 后代选择器

儿子和孙子...

选择器1 选择器2 {

}

二.同级(兄弟节点)

1. 下一个兄弟和下面所有

下一个兄弟

选择器1 + 选择器2 {

}

jQuery对象.next();//下一个

 

下面所有兄弟

选择器1 ~ 选择器2 {

}

jQuery对象.nextAll()

 

2. 上面一个兄弟和上面所有

上面一个兄弟

jQuery对象.prev();

上面所有兄弟

jQuery对象.prevAll();

$(function() {

var $obj = $("#p1").prevAll();

//alert($obj.html());//直接打印只能得到一个元素的内部html代码

//如果想循环遍历jQuery对象中包含的所有dom对象 需要使用each()方法
$obj.each(function(){

alert($(this).html());
});

console.dir($obj);

});

 

3. 得到同级的所有兄弟

jQuery对象.siblings

****************************三.过滤选择器*********************************

(一)基本过滤 10个

面试题
tr:even 得到偶数行tr

tr:odd 得到奇数行tr

动画方法 animate

$("div:not(:animated)").animate({left:"+=800"},5000);//让div向右移动800像素 5秒钟完成