jQuery选择器(6)
一:基本选择器
标签选择器:$("标签名"); 返回一组元素集合(匹配相同的标签名)
类选择器:$(".class类名"); 返回一组元素集合(匹配相同的class属性值)
id选择器:$("#id名"); 返回单个元素(匹配id属性值)
并集选择器:$("标签,class,id"); 返回一组元素集合(选择的元素)
全局选择器:$("*"); 返回一组元素集合(网页所有元素)
二.层次选择器
后代选择器 ancestor descendant 选取ancestor元素里的所有descendant(后代)元素 $("#menu span" )选取#menu下的<span>元素
子选择器 parent>child 选取parent元素下的child(子)元素 $(" #menu>span" )选取#menu的子元素<span>
相邻元素选择器 prev+next 选取紧邻prev元素之后的next元素 $(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl> 可用next()代替
同辈元素选择器 prev~sibings 选取prev元素之后的所有siblings元素 $(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl> 可用nextAll()代替
三.属性选择器
[attribute] 选取包含给定属性的元素 $(" [href]" ) 选取含有href属性的元素
[attribute=value] 选取等于给定属性是某个特定值的元素 $(" [href ='#']" ) 选取href属性值为“#”的元素
[attribute !=value] 选取不等于给定属性是某个特定值的元素 $(" [href !='#']" ) 选取href属性值不为“#”的元素
[attribute^=value] 选取给定属性是以某些特定值开始的元素 $(" [href^='en']" ) 选取href属性值以en开头的元素
[attribute$=value] 选取给定属性是以某些特定值结尾的元素 $(" [href$='.jpg']" ) 选取href属性值以.jpg结尾的元素
[attribute*=value] 选取给定属性是以包含某些值的元素 $(" [href* ='txt']" ) 选取href属性值中含有txt的元素
四.基本过滤选择器
/*获取第一个元素*/ $(".lis:first").css("color","green"); /*获取最后一个元素*/ $(".lis:last").css("color","blue"); /*忽略元素*/ $("a:not([href^=g])").css("background-color","pink"); /*奇数偶数:下标0开始,even偶数,odd奇数*/ $("li:odd").css("background-color","pink"); /*定位到具体哪一个*/ $("li:eq(0)").css("color","red"); /*定位到大于位置的元素*/ $("li:gt(2)").css("background-color","pink"); /*定位到小于位置的元素*/ $("li:lt(2)").css("background-color","green"); /*定位到标题元素*/ $(":header").css("background-color","blue"); /*获取有焦点的元素*/ $("#wht").focus(); $("input:focus").val('嗨喽'); /*获取动画元素*/ $("ul").fadeOut(3000).fadeIn(5000); $("ul:animated").css("background-color","blue");
五、可见性选择器
:visible 选取所有可见的元素 返回集合元素 eg、$(":visible") 选取所有可见元素
:hidden 选取所有隐藏的元素 返回集合元素 eg、$(":hidden") 选取所有隐藏元素
:hidden可以定位到隐藏元素,包含隐藏域等,如果说定位到的时隐藏域,显示时则修改type属性值,如果时普通元素则可以修改css样式display
$("input:hidden").attr("type","visible");
$("input:hidden").css("display","block");
六、注意问题
1.选择器中有特殊符号的注意事项
使用转义符:\\
2.选择器中含有空格的注意事项
七、补充
1.find :
当使用$(this)时,可用find()查找当前元素下的元素
2.each()迭代:
$("li").each(function(){
alert($(this).html());
});
最新文章
- SharePoint 2013 对二进制大型对象(BLOB)进行爬网
- 报错:org.hibernate.AssertionFailure: null id in com.tt.hibernate.entities.News entry (don&#39;t flush the Session after an exception occurs)
- angular $http配置属性
- 支持Android iOS,firefox(其它未测)的图片上传客户端预览、缩放、裁切。
- 应用层(一)HTTP服务访问基本流程和HTTP报文详解
- Blog 入职新公司的一些吐槽!
- oracle merge into 语法
- 基于C#的SolidWorks插件开发(1)--SolidWorks API接口介绍
- Flash Professional CS6 安装zxp插件
- webkit report
- 《AngularJS》--指令的相互调用
- 用ueditor上传图片、文件等到七牛云存储
- cocos2d-x游戏开发系列教程-坦克大战游戏加载地图的编写
- js解析php返回的json数据无法获取length的问题分析
- python基础--异常,对象和迭代器
- Angular-搜索框及价格上下限
- html2canvas 实现dashed虚线边框
- Storm 常用命令
- tomcat设置直接通过域名访问项目(不需要接 /项目名)
- [Swift]LeetCode123. 买卖股票的最佳时机 III | Best Time to Buy and Sell Stock III