http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
例子1，给<P>元素添加onclick事件
Var items=document.getElementsByTagName(“p”);//获取网页所有p元素
For（var i=0；i<items.length;i++）｛
Items[i].onclick=function(){
//onclick事件
}
｝
例子1
$(“p”).click(function(){
//onclick事件
})
例子2，使一个特定的表格隔行变色
Var item=document.getElementById(“tb”);// tb是表格id <table id=”tb”>
Var tbody=item.getElementByTagName(“tbody”)[0];//获取表格第一个tbody元素
Var trs=tbody.getElementsByTagName(“tr”); //获取tbody下面的所有tr元素集合
For（var i=0；i<trs.length;i++）{
If(i%2==0)//取模 （取余数 例如 0%2==0 ，1%2==1）
{
Trs[i].style.backgroundColor=”#888”;//改变符合条件的tr元素的背景色
}
}
例子2
$(‘#tb tbody tr : even’).css(“backgroundColor”,”#888”);
//获得id为tb的元素，然后寻找它下面的tbody标签，再寻找tbody下面的索引值是偶数的tr元素
//改变背景色 css(“property”,”value”);
例子3 对多选框进行操作，输出选中的多选框个数
Var btn =document.getElemengtById(“btn”);
Ntn.onclick=function(){
Var arrays=new Array();
Var items=document.getElementByName(“check”);//获取name为check的控件
For(int i=0;i<items.length;i++){
If(items[i].checked)
{
Arrays.puth(items[i].value);
}
}
Alert(“选中个数为：”+ arrays.length);
}
例子3
$(‘#btn’).click(function(){
Var length=$(“input[name=’check’]:checked”).length;
Alert(“选中的个数为”+length)；
})
基本选择器
根据id #id $(#test) 返回单个元素 document.getElementById(“test”)
根据class .class $(.test) 返回集合元素
根据标签 element $(“p”) 返回集合元素
所有元素 * $(*) 返回集合元素
基本选择器示例
eg1: //选择 id为 one 的元素
$('#btn1').click(function(){
$('#one').css("background","#bfa"); });
eg2: //选择 class 为 mini 的所有元素
$('#btn2').click(function(){
$('.mini').css("background","#bfa");});
eg3: //选择 元素名是 div 的所有元素
$('#btn3').click(function(){
$('div').css("background","#bfa"); });
eg4: //选择 所有的元素
$('#btn4').click(function(){
$('*').css("background","#bfa");});
eg5: //选择 所有的span元素和id为two的div元素
$('#btn5').click(function(){
$('span,#two').css("background","#bfa"); });
层次选择器
1， 选取元素后代 $(“div span”) 选取div元素里所有的span元素
2， 选取元素后代 $(“div >span”) 选取div元素下所有的span元素，指div的次级子元素
如 <div><span></span></div> , <div><body><span></span></ body ></div>这样div下面就不能获取到span
3， $(‘prev + next ’)选取紧接在prev元素后面的next元素
$(‘.one + div’) 选择class为one的下一个div元素 相当于$(“.one”).next(“div”);
4， $(‘prev ~ sibling ’) 选取prev元素之后的所有sibing
$(#two~ div)选取id为two的元素后面的所有div兄弟元素相当于$(“. two”).nextAll(“div”);
层次选择器示例
$(document).ready(function(){//选择 body内的所有div元素.
$('#btn1').click(function(){
$('body div').css("background","#bbffaa");})
//在body内的选择 元素名是div 的子元素.
$('#btn2').click(function(){
$('body > div').css("background","#bbffaa");})
//选择 所有class为one 的下一个div元素.
$('#btn3').click(function(){
$('.one + div').css("background","#bbffaa");})
//选择 id为two的元素后面的所有div兄弟元素.
$('#btn4').click(function(){
$('#two ~ div').css("background","#bbffaa");})});
<script type="text/javascript">
$(function() {
//实现隔行变色
$("tr:odd", "#mydiv").css("background-color", "yellow");
$("tr:has(td)", "#mydiv").mouseover(function() {
//获取到有td这个标签的tr标签
//has将匹配元素集合缩减为包含特定元素的后代的集合
if ($(this).find(":checkbox")[0].checked) return false;
//如果当前行 checkbox被选中
this.tag = $(this).css("background-color");
$(this).css("background-color", "red");
})
.mouseout(function() {
if ($(this).find(":checkbox")[0].checked) return false;
if (this.tag)
$(this).css("background-color", this.tag);
})
$(":checkbox", "#mydiv").click(
//选取#mydiv范围内所有checkbox
function() {
if (this.checked) {
//$(this).parent().parent()
// $(this) 指选中的td元素
$(this).parents("tr").css("background-color", "blue");
}
}
)
}
)
</script>
基本选择器
根据id #id $(#test) 返回单个元素 document.getElementById(“test”)
根据class .class $(.test) 返回集合元素
根据标签 element $(“p”) 返回集合元素
所有元素 * $(*) 返回集合元素
基本选择器示例
eg1: //选择 id为 one 的元素
$('#btn1').click(function(){
$('#one').css("background","#bfa"); });
eg2: //选择 class 为 mini 的所有元素
$('#btn2').click(function(){
$('.mini').css("background","#bfa");});
eg3: //选择 元素名是 div 的所有元素
$('#btn3').click(function(){
$('div').css("background","#bfa"); });
eg4: //选择 所有的元素
$('#btn4').click(function(){
$('*').css("background","#bfa");});
eg5: //选择 所有的span元素和id为two的div元素
$('#btn5').click(function(){
$('span,#two').css("background","#bfa"); });
层次选择器
1， 选取元素后代 $(“div span”) 选取div元素里所有的span元素
2， 选取元素后代 $(“div >span”) 选取div元素下所有的span元素，指div的次级子元素
如 <div><span></span></div> , <div><body><span></span></ body ></div>这样div下面就不能获取到span
3， $(‘prev + next ’)选取紧接在prev元素后面的next元素
$(‘.one + div’) 选择class为one的下一个div元素 相当于$(“.one”).next(“div”);
4， $(‘prev ~ sibling ’) 选取prev元素之后的所有sibing
$(#two~ div)选取id为two的元素后面的所有div兄弟元素相当于$(“. two”).nextAll(“div”);
层次选择器示例
$(document).ready(function(){//选择 body内的所有div元素.
$('#btn1').click(function(){
$('body div').css("background","#bbffaa");})
//在body内的选择 元素名是div 的子元素.
$('#btn2').click(function(){
$('body > div').css("background","#bbffaa");})
//选择 所有class为one 的下一个div元素.
$('#btn3').click(function(){
$('.one + div').css("background","#bbffaa");})
//选择 id为two的元素后面的所有div兄弟元素.
$('#btn4').click(function(){
$('#two ~ div').css("background","#bbffaa");})});
<script type="text/javascript">
$(function() {
//实现隔行变色
$("tr:odd", "#mydiv").css("background-color", "yellow");
$("tr:has(td)", "#mydiv").mouseover(function() {
//获取到有td这个标签的tr标签
//has将匹配元素集合缩减为包含特定元素的后代的集合
if ($(this).find(":checkbox")[0].checked) return false;
//如果当前行 checkbox被选中
this.tag = $(this).css("background-color");
$(this).css("background-color", "red");
})
.mouseout(function() {
if ($(this).find(":checkbox")[0].checked) return false;
if (this.tag)
$(this).css("background-color", this.tag);
})
$(":checkbox", "#mydiv").click(
//选取#mydiv范围内所有checkbox
function() {
if (this.checked) {
//$(this).parent().parent()
// $(this) 指选中的td元素
$(this).parents("tr").css("background-color", "blue");
}
}
)
}
)
</script>
过滤选择器
|
$("p:first") |
第一个 <p> 元素，返回单个元素 |
||
|
$("p:last") |
最后一个 <p> 元素，返回单个元素 |
||
|
:not(selector) |
$("input:not(:empty)") |
所有不为空的 input 元素，返回集合元素 去除所有与给定选择器匹配的元素 |
|
|
$("tr:even") |
所有索引偶数 <tr> 元素,返回集合元素 $(“input:even”),选取索引为偶数的input元素 |
||
|
$("tr:odd") |
所有索引奇数 <tr> 元素,返回集合元素 $(“input:odd”),选取索引为奇数的input元素 |
||
|
$("ul li:eq(3)") |
列表中的第四个元素（index 从 0 开始），返回单个元素 $(“input:eq(1)”)选取索引等于1的input元素 |
||
|
$("ul li:gt(3)") |
列出 index 大于 3 的元素,返回集合元素 $(“input:gt(1)”)选取索引大于1的input元素 |
||
|
|