1、css选择器
1)标签选择器: p{} h1{}
2)ID选择器:#menu{}
3)class选择器:.has_children{}
4)群组选择器: h1,h2,h3,p,#menu{}
5)后代选择器:div span{}
6)通配选择器:*{}
7)子选择器:div > span{}
8)相邻选择器:label + input{}
9)伪选择器:a:active{}
10)同辈选择器 form ~ input{}
其中前六种主流浏览器都支持,jquery的选择器完全继承了css的风格,除了支持css选择器外,也有少量独有的选择器。
2、松耦合
css 使得网页的内容与样式相分离,css找到元素后给元素添加样式。
jquery 使得网页的内容与行为相分离,jquery找到元素后给元素添加行为。
3、判断某个元素是否存在
不管指定的元素是否存在,返回的jquery对象都不会为空,所以要判断jquery对象是否存在需要这样判断
if($('#ff').length>0) // to do ... 或者 if($('#ff')[0]) // to do ...
4、jquery选择器
1)基本选择器
$("#one").css('background-color', '#bbffaa'); // id选择器
$('div.mini').css('background-color','#bbffaa'); // class选择器
$('div').css('background-color','#bbffaa'); // 标签选择器
$('*').css('background-color','#bbffaa'); // 通配选择器,匹配页面中所有元素
$('span, #two').css('background-color','#bbffaa'); // 群组选择器,将span的匹配结果与#two的匹配结果合并在一起
2)层次选择器
$('body div').css('background-color','#bbffaa'); //后代选择器
$('body > div').css('background-color','#bbffaa'); //子代选择器
$('#one + div').css('background-color','#bbffaa'); //相邻选择器向后匹配,完全等价与 $('#one').next("div").css('background-color','#bbffaa');
$('#two ~ div').css('background-color','#bbffaa'); //后续兄弟选择器,完全等价与 $('#two').nextAll('div').css('background-color','#bbffaa');
$('#two').siblings('div').css('background-color','#bbffaa'); // 兄弟选择器,匹配所有#two的同辈div,不分前后顺序,要区别去后续兄弟选择器
3)过滤选择器
(1)基本过滤
$('div:first').css('background-color','#bbffaa'); // 第一个div元素
$('div:last').css('background-color','#bbffaa'); // 最后一个div元素
$('div:not(.one)').css("background-color","#bbffaa"); // 不排除指定选择器的div元素
$('div:even').css("background-color","#bbffaa"); // 索引为偶数的元素
$('div:odd').css("background-color","#bbffaa"); // 索引为奇数的元素
$('div:eq(3)').css("background-color","#bbffaa"); // 索引为3的元素,从0开始
$('div:gt(3)').css("background-color","#bbffaa"); // 索引大于3的元素
$('div:lt(3)').css("background-color","#bbffaa"); // 索引小于3的元素
$(':header').css("background-color","#bbffaa"); // <h>系列标题元素
$(':animated').css("background-color","#bbffaa"); // 正在活动的
(2)内容过滤
$('div:contains("two")').css("background-color","#bbffaa"); // 含有指定文本的div元素
$('.mini:empty').css("background-color","#bbffaa"); // 不含有任何子元素或者文本的class="mini"的元素
$('span:has(.mini)').css("background-color","#bbffaa"); // 含有子元素为.mini的span元素
$('div:parent').css("background-color","#bbffaa"); // 含有任何子元素或者文本的div元素
(3)可见性过滤
$('div:hidden').show(3000).css("background-color","red"); // 选取所有不可见的元素 $('input:hidden')可以选取隐藏域
$('div:visiable').css("background-color","#bbffaa"); // 选取所有可见的元素
(4)属性过滤
$('div[title]').css('background-color','#BBFFAA'); // 包含title属性的div元素
$('div[title=test]').css('background-color','#BBFFAA'); // 包含title属性并且值为test的div元素
$('div[title!=test]').css('background-color','#BBFFAA'); // 包含title属性并且值不为test的div元素与不包含title属性的div元素的集合
$('div[title^=te]').css('background-color','#BBFFAA'); // 包含title属性并且值以te开头的div元素
$('div[title$=est]').css('background-color','#BBFFAA'); // 包含title属性并且值以est结尾的div元素
$('div[title*=es]').css('background-color','#BBFFAA'); // 包含title属性并且值包含es的div元素
$('div[id][title*=es]').css('background-color','#BBFFAA'); // 包含id属性与title属性并且title属性值包含es的div元素
(5)子元素过滤
$(':nth-child(2)').css('background-color','#BBFFAA'); // 为每个父元素匹配索引为2的子元素,索引从1开始
$(':nth-child(odd)').css('background-color','#BBFFAA'); // 为每个父元素匹配索引为奇数的子元素, even为偶数
$(':nth-child(3n+1)').css('background-color','#BBFFAA');// 为每个父元素匹配索引为3n+1的子元素, n从0开始
$(':first-child').css('background-color','#BBFFAA'); // 为每个父元素匹配第一个子元素
$(':last-child').css('background-color','#BBFFAA'); // 为每个父元素匹配最后一个子元素
$(':only-child').css('background-color','#BBFFAA'); // 为每个父元素匹配有且仅有一个的子元素
(6)表单元素属性过滤
$('#form1 :enabled'); // 表单中所有可用的元素
$('#form1 :disabled'); // 表单中所有不可用的元素
$('#form1 input:checked'); // radio或checkbox的选中项
$('#form1 select :selected'); // 下拉列表或多选框的选中项
4)表单选择器
$("#form1 :input") // 匹配所有表单元素包括input、select、textarea、button,注意与$("#form1 input")的区别
$("#form1 :text") // 匹配 <input type="text"/>元素
$("#form1 :password") // 匹配 <input type="password"/>元素
$("#form1 :radio") // 匹配 <input type="radio"/>元素
$("#form1 :checkbox") // 匹配 <input type="checkbox"/>元素
$("#form1 :submit") // 匹配 <input type="submit"/>和<button>元素
$("#form1 :image") // 匹配 <input type="image"/>图像按钮
$("#form1 :reset") // 匹配 <input type="reset"/>元素
$("#form1 :button") // 匹配 <input type="button"/>和<button>元素
$("#form1 :file") // 匹配 <input type="file"/>元素
$("#form1 :hidden") // 匹配 <input type="hidden"/>和所有不可见的元素,如<div style="display:none;">元素
5、选择器的一些注意事项
1)选择器中含有".","[","("等特殊字符,这种情况下需要对特殊字符转义才行
<div id="id.a">aa</div> // 获取方式$("#id\\.a")
<div id="id#b">bb</div> // 获取方式$("#id\\#b")
<div id="id[1]">cc</div> // 获取方式$("#id\\[1\\]")
2)一些常用的方法
$category.is(":hidden") // 判断当前元素是否为隐藏的 is() 返回boolean值
$("ul li").filter(":contains('佳能'),:contains('尼康')") // 筛选出与指定表达式匹配的元素集合,其中表达式可以是多个选择器的组合
addClass("promoted") // 可以为匹配的元素添加类名
$("div.showmore > a").toggle(fun,fun); // 可以给匹配的元素添加一组交互事件
分享到:
相关推荐
Jquery选择器,Jquery选择器Jquery选择器Jquery选择器Jquery选择器Jquery选择器
Jquery选择器; 基本选择器;jQuery选择器;jQuery选择器; 层级选择器;jQuery选择器;;; 筛选选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器; 排他思想;jQuery选择器;jQuery...
jquery 选择器 描述
jQuery选择器速查表,包括了jQuery的基本选择器、层次选择器、过滤选择器、表单选择器,方便以后查找。
jQuery选择器全解.
jQuery选择器过滤器全面的总结,老师推荐!
jQuery选择器大全(48个代码片段 21幅图演示)
jQuery选择器大全(48个代码片段+21幅图演示)
经典的jQuery选择器应用例子,直观的演示了各种选择器的应用例子。对学习jQuery很有帮助。
jquery初学者必备,有各种jquery的选择器,个人学习时整理
Jquery选择器分类整理,基本都包含到了,学习笔记。
JQuery选择器详解JQuery选择器详解
JQuery 选择器,方便 使用的技术
这是一份比较全面的jQuery选择器基础知识,包括源代码和相应的ppt,供大家分享
jQuery选择器总结,网上下载的,非原创的,仅供参考,学习学习。
jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。
jQuery时间选择器点击选择小时分钟代码
jquery选择器功能无比强大,用好了可以起到事半功倍的效果,这个资源把选择器单独列出来,便于方便查找
JQ 选择器大全包含:基本选择器,层级选择器,层级函数,过滤选择器,内容选择器,可见选择器,jq中显示相关的函数,属性选择器,子元素选择器,表单选择器。里面的练习题可以拿来练手
现在我们开始Jquery的选择器之旅哈哈。 下面的选择器分类中, 带有“过滤器”的分类表示是“过滤”选择器, 否则就是“选择”功能的选择器。 jQuery选择器分为如下几类: [说明]