jquery选择器
2015-08-18 13:05
597 查看
jquery选择器
要想用好jquery,扎实的选择器基础是必不可少的，下面我想总结了易于混淆的符合的用法，然后又根据内容分类给出了详细的选择器用法，经供参考。
【1】易于混淆的选择符号
l 逗号“,” 代表并列“和”
例如：改变所有的<span>元素和id为two的元素的背景色
$(‘span,#two’).css(“background”,”#3399FF”);
l 空格“ ” 代表“内部所有”
例如：改变body下所有div的颜色
$(‘body div’).css(“background”,”#0000FF”);
l 大于号“>” 代表“直系子辈”
例如：改变body内子div的颜色[不包括孙div]
$(‘body > div’).css(“background”,”#0000FF”);
l 加号“+” 代表“下一个兄弟”
例如：改变id为one的并列的下一个div
$(‘#one + div’).css(“background”,”#0000FF”);
l 波浪线“~” 代表“后面所有兄弟”
例如：改变id为two的后面所有div的颜色
$('#two ~div').css("background","#0000FF");
l 冒号“：” 代表“从已被选中对象中过滤或筛选出符合条件的”
例如：改变class不为one的所有div的颜色[one的子元素也会被选中]
$('div:not(.one)').css("background","#00FFFF");
l 中括号“[]” 代表“从已被选中对象中根据属性筛选出符合条件的”
例如：选取有属性id的div元素，然后在结果中选取属性title值含有es的div元素
$("div[id][title*='es']").css("background","red");
【2】根据内容分类给出的详细的选择器用法
让一个按钮改变另一个div的颜色
l 原始DOM方法
按钮事件onclick=”abc()”
js响应该方法
function abc(){
document.getElementById(“one”).style.background=”#0000FF”;
}
l 基本选择器
//jquery的id选择器去和按钮绑定一个事件
$(‘#b1’).click(
function(){
$(‘#one’).css(“background”,”#0000FF”);
}
);
//改变class为mini的所有元素的背景色为#FF0033
$(‘#b2’).click(
function(){
$(‘.mini’).css(“background”,”#FF0033”);
}
);
//改变所有标记为div的元素的背景色为#00FFFF
$(‘#b3’).click(
function(){
$(‘div’).css(“background”,”#00FFFF”);
}
);
//改变所有元素【通配符*】的背景色
$(‘$b4’).click(
function(){
$(‘*’).css(“background”,”00FF33”);
}
);
//改变所有的<span>元素和id为two的元素的背景色为#3399FF
$(‘#b5’).click(
function(){
$(‘span,#two’).css(“background”,”#3399FF”);
}
);
例题：点击弹出所有<p>元素对应的内容
$(‘p’).click(
function(){
//dom方法
//window.alert(this.innerHTML);
//jquery方法
window.alert($(this).html());
}
);
l 层次选择器
//改变body下所有div的颜色
$(‘$b1’).click(
function(){
$(‘bodydiv’).css(“background”,”#0000FF”);
}
);
//改变body内子div的颜色[不包括孙div]
$(‘$b2’).click(
function(){
$(‘body> div’).css(“background”,”#0000FF”);
}
);
//改变id为one的并列的下一个div[强调：同一级的后一个兄弟]
$(‘#b3’).click(
function(){
$(‘#one + div’).css(“background”,”#0000FF”);
}
);
//改变id为two的后面所有div的颜色[强调：同一级的后面所有兄弟]
$('#b4').click(
function(){
$('#two ~div').css("background","#0000FF");
}
);
//改变id为two的所有兄弟div的颜色[强调：同一级的所有兄弟]
$('#b5').click(
function(){
$("#two").siblings("div").css("background","#0000FF");
}
);
l 过滤选择器【：表示过滤】
[1]基础过滤选择器
//改变第一个div元素的背景色
$('#b1').click(
function(){
$('div:first').css("background","#00FFFF");
}
);
//改变最后一个div元素的背景色[若最后有层的关系，那指最内层]
$('#b2').click(
function(){
$('div:last').css("background","#00FFFF");
}
);
//改变class不为one的所有div的颜色[one的子元素也会被选中]
$('#b3').click(
function(){
$('div:not(.one)').css("background","#00FFFF");
}
);
//改变表格table奇偶数行的颜色
//[eq(0)代表被选中的第一个，空格代表组合]
<scripttype="text/javascript">
$("table:eq(0)tr:even").css("background","red");
$("table:eq(0)tr:odd").css("background","blue");
</script>
//改变索引值大于3的div元素的背景色
$('#b6').click(
function(){
$('div:gt(3)').css("background","#00FFFF");
}
);
//改变索引值等于3的div元素的背景色
$('#b7').click(
function(){
$('div:eq(3)').css("background","#00FFFF");
}
);
//改变索引值小于3的div元素的背景色
$('#b8').click(
function(){
$('div:lt(3)').css("background","#00FFFF");
}
);
//改变所有标题h1,h2,h3等的颜色
$('#b9').click(
function(){
$(':header').css("background","#00FFFF");
}
);
//动画及其改变
<scriptlanguage="JavaScript">
//一个动画函数
functionca(){
$("#mover").slideToggle("slow",ca);
}
//调用
ca();
//改变当前正在执行动画的所有元素的背景色
$('#b10').click(
function(){
$(':animated').css("background","red");
}
);
</script>
[2]内容选择器
//改变含有文本'di'的div元素的背景色
$('#b1').click(
function(){
$("div:contains('di')").css("background","red");
}
);
//改变含有class为mini元素的div元素的背景色
$('#b3').click(
function(){
// 方法一：含有.mini元素的标记本身变色
// $("div:.mini").css("background","red");
// 方法二:用.mini的标记的父元素变色
$("div:h
4000
as('.mini')").css("background","red");
}
);
//改变含有子元素（或者文本元素）的div的背景色
$('#b4').click(
function(){
$("div:parent").css("background","red");
}
);
//改变不包含子元素的div的背景色
$('#b2').click(
function(){
$("div:empty").css("background","red");
}
);
//改变不含文本di的div的背景色
$('#b5').click(
function(){
$("div:not(:contains('di'))").css("background","red");
}
);
//改变索引值大于3的div的背景色
$('#b6').click(
function(){
$("div:gt(3)").css("background","red");
}
);
[3]可见度过滤选择器
//改变所有可见div元素的背景色
$('#b1').click(
function(){
$('div:visible').css("background","red");
}
);
//选择所有不可见div元素，利用jQuery中的show()方法将他们显示出来，并设置背景色
$('#b2').click(
function(){
$('div:hidden').css("background","red");
$('div:hidden').show();
}
);
//选取所有文本隐藏域，并打印出他们的值
$('#b3').click(
function(){
$objs=$('input:hidden');
//方法1
//for(vari=0;i<$objs.length;i++){
// vardom_objs=$objs[i];
// window.alert(dom_objs.value);
//}
//jquery方法2
//$.each($objs,function(i,obj){
// window.alert($(obj).val());
// }
//);
//方法3
$.each(
$objs,function(){
//dom方式3.1
window.alert(this.value);
//jquery方式3.2
window.alert($(this).val());
}
);
}
);
[4]属性选择器
//修改含有属性title的div元素的背景色
$("#b1").click(
function(){
$("div[title]").css("background","red");
}
);
//修改title属性值为test的div元素的背景色
$("#b2").click(
function(){
$("div[title='test']").css("background","red");
}
);
//修改属性title值不等于test的div元素（没有属性title的也将被选中）的背景色
$("#b3").click(
function(){
$("div[title!='test']").css("background","red");
}
);
//修改属性title值以te开始的背景色
$("#b4").click(
function(){
$("div[title^='te']").css("background","red");
}
);
//修改属性title值以est结尾的背景色
$("#b5").click(
function(){
$("div[title$='est']").css("background","red");
}
);
//修改属性title值含有es的背景色
$("#b6").click(
function(){
$("div[title*='es']").css("background","red");
}
);
//选取有属性id的div元素，然后在结果中选取属性title值含有es的div元素
$("#b7").click(
function(){
$("div[id][title*='es']").css("background","red");
}
);
[5]子元素选择器
//修改每个class为one的div元素下的第二个子元素的背景色
$('#b1').click(
function(){
$("div.one:nth-child(2)").css("background","red");
}
);
//修改每个class为one的div元素下的第一个子元素的背景色
$('#b2').click(
function(){
//$("div.one:nth-child(1)").css("background","red");
$("div.one:first-child").css("background","red");
}
);
//修改每个class为one的div元素下的最后一个子元素的背景色
$('#b3').click(
function(){
$("div.one:last-child").css("background","red");
}
);
//修改每个class为one的div元素下的最后一个子元素的背景色
$('#b4').click(
function(){
$("div.one:only-child").css("background","red");
}
);
//修改每个class为one的div元素下的奇数子元素的背景色
$('#b4').click(
function(){
$("div.one:nth-child(even)").css("background","red");
}
);
[6]表单对象选择器
//选择所有button[包括<input type="button">和<button>]
varbuttons=$(':button');
//varbuttons=$("input[type="button"]");这种方式只能选前一种
window.alert(buttons.length);
[7]表单对象属性选择器
//利用val()方法改变表单内type=text可用的<input>元素的text值
$("#b1").click(
function(){
$("input[type='text']:enabled").val("Hello");
}
);
//利用val()方法改变表单内type=text不可用的<input>元素的text值
$("#b2").click(
function(){
$("input[type='text']:disabled").val("Hello");
}
);
//利用jQuery对象的length属性获取多选框选中的个数
$("#b3").click(
function(){
//window.alert($(":checkbox:checked").length);
window.alert($("input[type='checkbox']:checked").length);
}
);
//利用jQuery对象的text()方法获取下拉框选中的内容
$("#b4").click(
function(){
//window.alert($("selectoption:selected").text());
//用val取，必须循环
varobjs=$("select option:selected");
//$.each($objs,function(){
// alert($(this).val());
//})
//还是有方法的
//$.each($objs,function(i,n){
// alert(n.value);
// alert($(n).val());
//})
//最后一种方法
$objs.each(function(i,n){
window.alert($(n).val());
});
}
);
要想用好jquery,扎实的选择器基础是必不可少的，下面我想总结了易于混淆的符合的用法，然后又根据内容分类给出了详细的选择器用法，经供参考。
【1】易于混淆的选择符号
l 逗号“,” 代表并列“和”
例如：改变所有的<span>元素和id为two的元素的背景色
$(‘span,#two’).css(“background”,”#3399FF”);
l 空格“ ” 代表“内部所有”
例如：改变body下所有div的颜色
$(‘body div’).css(“background”,”#0000FF”);
l 大于号“>” 代表“直系子辈”
例如：改变body内子div的颜色[不包括孙div]
$(‘body > div’).css(“background”,”#0000FF”);
l 加号“+” 代表“下一个兄弟”
例如：改变id为one的并列的下一个div
$(‘#one + div’).css(“background”,”#0000FF”);
l 波浪线“~” 代表“后面所有兄弟”
例如：改变id为two的后面所有div的颜色
$('#two ~div').css("background","#0000FF");
l 冒号“：” 代表“从已被选中对象中过滤或筛选出符合条件的”
例如：改变class不为one的所有div的颜色[one的子元素也会被选中]
$('div:not(.one)').css("background","#00FFFF");
l 中括号“[]” 代表“从已被选中对象中根据属性筛选出符合条件的”
例如：选取有属性id的div元素，然后在结果中选取属性title值含有es的div元素
$("div[id][title*='es']").css("background","red");
【2】根据内容分类给出的详细的选择器用法
让一个按钮改变另一个div的颜色
l 原始DOM方法
按钮事件onclick=”abc()”
js响应该方法
function abc(){
document.getElementById(“one”).style.background=”#0000FF”;
}
l 基本选择器
//jquery的id选择器去和按钮绑定一个事件
$(‘#b1’).click(
function(){
$(‘#one’).css(“background”,”#0000FF”);
}
);
//改变class为mini的所有元素的背景色为#FF0033
$(‘#b2’).click(
function(){
$(‘.mini’).css(“background”,”#FF0033”);
}
);
//改变所有标记为div的元素的背景色为#00FFFF
$(‘#b3’).click(
function(){
$(‘div’).css(“background”,”#00FFFF”);
}
);
//改变所有元素【通配符*】的背景色
$(‘$b4’).click(
function(){
$(‘*’).css(“background”,”00FF33”);
}
);
//改变所有的<span>元素和id为two的元素的背景色为#3399FF
$(‘#b5’).click(
function(){
$(‘span,#two’).css(“background”,”#3399FF”);
}
);
例题：点击弹出所有<p>元素对应的内容
$(‘p’).click(
function(){
//dom方法
//window.alert(this.innerHTML);
//jquery方法
window.alert($(this).html());
}
);
l 层次选择器
//改变body下所有div的颜色
$(‘$b1’).click(
function(){
$(‘bodydiv’).css(“background”,”#0000FF”);
}
);
//改变body内子div的颜色[不包括孙div]
$(‘$b2’).click(
function(){
$(‘body> div’).css(“background”,”#0000FF”);
}
);
//改变id为one的并列的下一个div[强调：同一级的后一个兄弟]
$(‘#b3’).click(
function(){
$(‘#one + div’).css(“background”,”#0000FF”);
}
);
//改变id为two的后面所有div的颜色[强调：同一级的后面所有兄弟]
$('#b4').click(
function(){
$('#two ~div').css("background","#0000FF");
}
);
//改变id为two的所有兄弟div的颜色[强调：同一级的所有兄弟]
$('#b5').click(
function(){
$("#two").siblings("div").css("background","#0000FF");
}
);
l 过滤选择器【：表示过滤】
[1]基础过滤选择器
//改变第一个div元素的背景色
$('#b1').click(
function(){
$('div:first').css("background","#00FFFF");
}
);
//改变最后一个div元素的背景色[若最后有层的关系，那指最内层]
$('#b2').click(
function(){
$('div:last').css("background","#00FFFF");
}
);
//改变class不为one的所有div的颜色[one的子元素也会被选中]
$('#b3').click(
function(){
$('div:not(.one)').css("background","#00FFFF");
}
);
//改变表格table奇偶数行的颜色
//[eq(0)代表被选中的第一个，空格代表组合]
<scripttype="text/javascript">
$("table:eq(0)tr:even").css("background","red");
$("table:eq(0)tr:odd").css("background","blue");
</script>
//改变索引值大于3的div元素的背景色
$('#b6').click(
function(){
$('div:gt(3)').css("background","#00FFFF");
}
);
//改变索引值等于3的div元素的背景色
$('#b7').click(
function(){
$('div:eq(3)').css("background","#00FFFF");
}
);
//改变索引值小于3的div元素的背景色
$('#b8').click(
function(){
$('div:lt(3)').css("background","#00FFFF");
}
);
//改变所有标题h1,h2,h3等的颜色
$('#b9').click(
function(){
$(':header').css("background","#00FFFF");
}
);
//动画及其改变
<scriptlanguage="JavaScript">
//一个动画函数
functionca(){
$("#mover").slideToggle("slow",ca);
}
//调用
ca();
//改变当前正在执行动画的所有元素的背景色
$('#b10').click(
function(){
$(':animated').css("background","red");
}
);
</script>
[2]内容选择器
//改变含有文本'di'的div元素的背景色
$('#b1').click(
function(){
$("div:contains('di')").css("background","red");
}
);
//改变含有class为mini元素的div元素的背景色
$('#b3').click(
function(){
// 方法一：含有.mini元素的标记本身变色
// $("div:.mini").css("background","red");
// 方法二:用.mini的标记的父元素变色
$("div:h
4000
as('.mini')").css("background","red");
}
);
//改变含有子元素（或者文本元素）的div的背景色
$('#b4').click(
function(){
$("div:parent").css("background","red");
}
);
//改变不包含子元素的div的背景色
$('#b2').click(
function(){
$("div:empty").css("background","red");
}
);
//改变不含文本di的div的背景色
$('#b5').click(
function(){
$("div:not(:contains('di'))").css("background","red");
}
);
//改变索引值大于3的div的背景色
$('#b6').click(
function(){
$("div:gt(3)").css("background","red");
}
);
[3]可见度过滤选择器
//改变所有可见div元素的背景色
$('#b1').click(
function(){
$('div:visible').css("background","red");
}
);
//选择所有不可见div元素，利用jQuery中的show()方法将他们显示出来，并设置背景色
$('#b2').click(
function(){
$('div:hidden').css("background","red");
$('div:hidden').show();
}
);
//选取所有文本隐藏域，并打印出他们的值
$('#b3').click(
function(){
$objs=$('input:hidden');
//方法1
//for(vari=0;i<$objs.length;i++){
// vardom_objs=$objs[i];
// window.alert(dom_objs.value);
//}
//jquery方法2
//$.each($objs,function(i,obj){
// window.alert($(obj).val());
// }
//);
//方法3
$.each(
$objs,function(){
//dom方式3.1
window.alert(this.value);
//jquery方式3.2
window.alert($(this).val());
}
);
}
);
[4]属性选择器
//修改含有属性title的div元素的背景色
$("#b1").click(
function(){
$("div[title]").css("background","red");
}
);
//修改title属性值为test的div元素的背景色
$("#b2").click(
function(){
$("div[title='test']").css("background","red");
}
);
//修改属性title值不等于test的div元素（没有属性title的也将被选中）的背景色
$("#b3").click(
function(){
$("div[title!='test']").css("background","red");
}
);
//修改属性title值以te开始的背景色
$("#b4").click(
function(){
$("div[title^='te']").css("background","red");
}
);
//修改属性title值以est结尾的背景色
$("#b5").click(
function(){
$("div[title$='est']").css("background","red");
}
);
//修改属性title值含有es的背景色
$("#b6").click(
function(){
$("div[title*='es']").css("background","red");
}
);
//选取有属性id的div元素，然后在结果中选取属性title值含有es的div元素
$("#b7").click(
function(){
$("div[id][title*='es']").css("background","red");
}
);
[5]子元素选择器
//修改每个class为one的div元素下的第二个子元素的背景色
$('#b1').click(
function(){
$("div.one:nth-child(2)").css("background","red");
}
);
//修改每个class为one的div元素下的第一个子元素的背景色
$('#b2').click(
function(){
//$("div.one:nth-child(1)").css("background","red");
$("div.one:first-child").css("background","red");
}
);
//修改每个class为one的div元素下的最后一个子元素的背景色
$('#b3').click(
function(){
$("div.one:last-child").css("background","red");
}
);
//修改每个class为one的div元素下的最后一个子元素的背景色
$('#b4').click(
function(){
$("div.one:only-child").css("background","red");
}
);
//修改每个class为one的div元素下的奇数子元素的背景色
$('#b4').click(
function(){
$("div.one:nth-child(even)").css("background","red");
}
);
[6]表单对象选择器
//选择所有button[包括<input type="button">和<button>]
varbuttons=$(':button');
//varbuttons=$("input[type="button"]");这种方式只能选前一种
window.alert(buttons.length);
[7]表单对象属性选择器
//利用val()方法改变表单内type=text可用的<input>元素的text值
$("#b1").click(
function(){
$("input[type='text']:enabled").val("Hello");
}
);
//利用val()方法改变表单内type=text不可用的<input>元素的text值
$("#b2").click(
function(){
$("input[type='text']:disabled").val("Hello");
}
);
//利用jQuery对象的length属性获取多选框选中的个数
$("#b3").click(
function(){
//window.alert($(":checkbox:checked").length);
window.alert($("input[type='checkbox']:checked").length);
}
);
//利用jQuery对象的text()方法获取下拉框选中的内容
$("#b4").click(
function(){
//window.alert($("selectoption:selected").text());
//用val取，必须循环
varobjs=$("select option:selected");
//$.each($objs,function(){
// alert($(this).val());
//})
//还是有方法的
//$.each($objs,function(i,n){
// alert(n.value);
// alert($(n).val());
//})
//最后一种方法
$objs.each(function(i,n){
window.alert($(n).val());
});
}
);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- JavaScript演示排序算法
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站，一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- Mootools 1.2教程(2) DOM选择器
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作
- jQuery实现复选框批量选择与反选的方法
- jQuery中的常用事件总结
- 23个超流行的jQuery相册插件整理分享