jQuery基础之jQuery选择器-CSDN博客

本文链接：https://blog.csdn.net/wustrive_2008/article/details/7361550

一，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");