jquery选择器学习
2017-08-01 22:50
330 查看
jquery分类
1.基本选择器2.层次选择器
3.过滤选择器
4.表单选择器
元素选择器
$('a'); //选择所有a元素 $('div'); //选择所有div元素 $('p'); //选择所有p元素
类选择器
$('div.myClass'); //所有拥有myClass类的div元素 $('p.myClass'); //所有拥有myClass类的p元素 $('*.myClass'); //拥有myClass类的所有类型元素
ID选择器
$('#myID'); //id为myID的元素
通常在一个html页面中,一个元素只能拥有一个id,一个id也只能出现一次。
跟css样式选择器差不多的意思
并集选择器 | selector1,selector2,...,selectorN | 将每一个选择器匹配的元素合并后一起返回 | $("div,p,.title" )选取所有div、p和拥有class为title的元素 |
交集选择器 | element.class或element#id | 匹配指定class或id的某元素或元素集合 | $("h2.title")选取所有拥有class为title的h2元素 |
全局选择器 | * | 匹配所有元素 | $("*" )选取所有元素 |
层次选择器通过DOM元素之间的层次关系来获取元素
后代选择器 | ancestor descendant | 选取ancestor元素里的所有descendant(后代)元素 | $("#menu span" )选取#menu下的<span>元素 |
子选择器 | parent>child | 选取parent元素下的child(子)元素 | $(" #menu>span" )选取#menu的子元素<span> |
相邻元素选择器 | prev+next | 选取紧邻prev元素之后的next元素 | $(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl> |
同辈元素选择器 | prev~sibings | 选取prev元素之后的所有siblings元素 | $(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl> |
<div> <p> <span></span> <a></a> <b></b> </p> </div>
p是div的子元素,span是p的子元素,a、b同样是p的子元素
p是div的后代元素,span、a、b都是div的后代元素
后代可认为是包含的所有元素,而子元素只是包含一层的元素
上面的例子可以理解为div是父亲,p是div的儿子
span、a、b是p的儿子即div孙子,但都是div和p的后代
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery层次选择器示例</title> <style type="text/css"> * {margin:0; padding:0; line-height:30px;} body {margin:10px;} #menu {border:2px solid #03C; padding:10px;} a {text-decoration:none; margin-right:5px;} span {font-weight:bold; padding:3px;} h2 {margin:10px 0;} </style> <script src="js/jquery-1.8.3.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("h2").click(function(){ // $("#menu span").css("background-color","#09F");//后代选择器,获取并设置#menu下的<span>元素的背景颜色 $("#menu>span").css("background-color","#09F");//子选择器,获取并设置#menu下的子元素<span>的背景颜色 // $("h2+dl").css("background-color","#09F");//相邻选择器,获取并设置紧接在<h2>元素后的<dl>元素的背景颜色 //$("h2~dl").css("background-color","#09F");//同辈选择器,获取并设置<h2>元素之后的所有同辈元素<dl>的背景颜色 }); }); </script> </head> <body> <div id="menu"> <h2>全部旅游产品分类</h2> <dl> <dt>北京周边旅游<span>特价</span></dt> <dd><a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a></dd> </dl> <dl> <dt>景点门票</dt> <dd><a href="#">名胜</a> <a href="#">暑期</a> <a href="#">乐园</a></dd> <dd><a href="#">山水</a> <a href="#">双休</a></dd> </dl> <span>更多分类</span> <span>更多分类</span><span>特价</span> </div> </body> </html>
这的自己慢慢体会慢慢理解
同辈选择器用来选取目标元素之后的所有同辈元素
相邻选择器用来选取紧邻目标元素的下一个元素
子选择器用来获取元素的子元素
属性选择
属性选择器通过HTML元素的属性来选择元素
属性选择器 | [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的元素 | |
[selector] [selector2] [selectorN] | 选取满足多个条件的复合属性的元素 | $("li[id][title=新闻要点]" )选取含有id属性和title属性为新闻要点的<li>元素 |
相关文章推荐
- jQuery学习2 选择器的使用说明
- jQuery再学习之二、jQuery选择器
- Jquery实战学习--表单选择器
- JQuery 学习笔记 选择器之六
- jQuery基础学习7——层次选择器find()方法
- jquery学习之1.3-基本选择器
- JQuery学习笔记-层次选择器
- JavaScript学习笔记8-jQuery基本选择器深度解析
- JavaScript学习笔记8-jQuery基本过滤选择器深度解析
- 【知了堂学习笔记】_jQuery基础知识之选择器(一)
- JQuery 选择器学习笔记
- jquery学习一 选择器
- 学习小记(2015/10/19)——工作中遇见的一个关于jQuery选择器的小要点。
- jQuery 学习七(选择器)
- jQuery之过滤选择器学习笔记
- jquery1.9学习笔记 之选择器(基本元素二)
- Jquery伪选择器学习笔记
- jQuery学习之旅 Item1 选择器【一】
- Java程序员的JavaScript学习笔记(12——jQuery-扩展选择器)
- [置顶] Jquery学习总结(二) jquery选择器详解