jquery选择器学习
来源:互联网 发布:试题库数据库设计论文 编辑:程序博客网 时间:2024/06/16 16:17
jquery分类
元素选择器
$('a'); //选择所有a元素$('div'); //选择所有div元素$('p'); //选择所有p元素
类选择器
$('div.myClass'); //所有拥有myClass类的div元素$('p.myClass'); //所有拥有myClass类的p元素$('*.myClass'); //拥有myClass类的所有类型元素
ID选择器
$('#myID'); //id为myID的元素
通常在一个html页面中,一个元素只能拥有一个id,一个id也只能出现一次。
并集选择器
selector1,selector2,...,selectorN
将每一个选择器匹配的元素合并后一起返回
$("div,p,.title" )选取所有div、p和拥有class为title的元素
交集选择器
element.class或element#id
匹配指定class或id的某元素或元素集合
$("h2.title")选取所有拥有class为title的h2元素
全局选择器
*
匹配所有元素
$("*" )选取所有元素
层次选择器
后代选择器
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>
这的自己慢慢体会慢慢理解
属性选择器
[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>元素
后面在补上现在时间是23:14分建军节8/1
- jQuery学习--jQuery选择器
- jquery选择器学习笔记
- JQuery 选择器学习笔记
- jQuery学习之--选择器
- jQuery 学习七(选择器)
- jquery 学习笔记 ---选择器
- jQuery选择器学习理解
- JQuery的学习:选择器
- 【jQuery学习笔记------选择器】
- jquery学习--选择器
- jQuery选择器的学习
- jQuery学习之选择器
- jQuery 学习七(选择器)
- jquery input选择器学习
- jQuery学习(选择器)
- jQuery学习-选择器
- <学习笔记> jQuery 选择器
- jQuery 学习一:选择器
- Android进阶系列之1:数据库加密
- cmd 命令行 无法进入Python编辑器解决方案
- 浴谷夏令营第一期 d2上午例题分析
- 特征工程怎么做
- for...else...
- jquery选择器学习
- 判断一个节点是否在二叉树中,判断tree2是否为tree1的子树
- EU4-24: Accidents and injuries
- Dw基础课-网站常见元素及CSS基础(字、链接)
- Linux scp从本地复制到远程和从远程复制到本地的区别
- 【数据结构基础】直接插入排序
- 嵌入式面试总结-C语言函数相关
- 静态代理模式
- jetbrains学生认证接口