jQuery基础之jQuery选择器

一，CSS选择器

标签选择器：(以文档元素作为选择器)

E{

//css规则

}

demo：

td{

font-size:15px;

width:142px;

}

ID选择器：(以文档元素的唯一标识符ID作为选择符)

#ID{

//css选择器

}

demo：

#note{

font-size:15px;

}

类选择器：(以文档元素的class作为选择符)

E.className{

//css规则

}

demo：

div.note{

font-size:18px;

}

群组选择器：(多个选择符应用同样的样式规则)

E1,E2,E3{

//css规则

}

demo：

td,p,div{

font-size:15px;

}

后代选择器：（元素E的任意后代元素F）

E,F{

//css规则

}

demo:

#links a{

color:red;

}

通配选择器：（以文档的所有元素作为选择符）

*{

//css规则

}

demo:

*{

font-size:4px;

}

二，jQuery选择器：

jQuery中的选择器完全继承了CSS的风格。利用jQuery选择器可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为。

demo1：

<p class="demo">jQuery Demo</p>

<script type="text/javascript">

$(".demo").click(function(){

alert("jQuery demo!");

})

</script>

demo2:

<p>test1</p>

<p>test2</p>

要求：1，获取所有<p>元素

2，对<p>元素进行循环

3，给每个<p>元素添加行为

js代码如下：

不使用jQuery：

var items = document.getElementsByTagName("p");

for(var i = 0;i < items.length;i++){

items[i].onclick = function(){

alert("success");

}

}

使用jQuery：

$("p").click(function(){ //获取页面中的所有<p>元素，给每一个<p>元素添加onclick事件

alert("success");

. })

demo3:(使一个表格隔行变色)

<table id="tb">

<tbody>

<tr><td>第一行</td><td>第一行</td></tr>

<tr><td>第二行</td><td>第二行</td></tr>

<tr><td>第三行</td><td>第三行</td></tr>

<tr><td>第四行</td><td>第四行</td></tr>

<tr><td>第五行</td><td>第五行</td></tr>

<tr><td>第六行</td><td>第六行</td></tr>

</tbody>

</table>

js代码如下：

不使用jQuery：

var item = document.getElementById("tb");

var tbody = item.getElementsByTagName("tbody")[0];

var trs = tbody.getElementsByTagName("tr");

for(var i=0;i<trs.length;i++){

if(i%2==0){

trs[i].style.backgroundColor="red"

}

}

使用jQuery :$('#tb tbody tr:even').css("backgroundColor","red");