关于jQuery里面的选择器
一、JQuery选择器的概述
选择器是JQuery的根基,在JQuery中,对事件处理、遍历DOM和Ajax操作都依赖于选择器。
二、选择器的优势
1、简洁的语法
2、支持CSS1.0到CSS3.0选择器
3、完善的处理机制
三、基本选择器
名称 |
语法构成 |
描述 | 实例 |
标签选择器 |
element |
根据给定的标签名匹配元素 |
$("h2" )选取所有h2元素 |
类选择器 |
.class |
根据给定的class匹配元素 |
$(" .title")选取所有class为title的元素 |
ID选择器 |
#id |
根据给定的id匹配元素 |
$(" #title")选取id为title的元素 |
并集选择器 |
selector1,selector2,...,selectorN |
将每一个选择器匹配的元素合并后一起返回 |
$("div,p,.title" )选取所有div、p和拥有class为title的元素 |
交集选择器 |
element.class或element#id |
匹配指定class或id的某元素或元素集合 |
$("h2.title")选取所有拥有class为title的h2元素 |
全局选择器 |
* |
匹配所有元素 |
$("*" )选取所有元素 |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#box { background-color:#FFF; border:2px solid #;padding:5px; }
</style>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
$(document).ready(function () {
$("h2").click(function () { //获取<h2>元素为其添加click事件函数 标签选择器
$("h3").css("background-color", "#09F"); //css 是属性 属性值
$(".title").css("background", "pink"); //类选择器
$("#box").css("background", "purple"); //ID选择器
$("h2,dt,title").css("background","purple"); //给多个属性设置值 并集选择
$("h2.title").css("font-size", "50px"); //先获取class的title 给h2元素设置字体的大小 交集选择
$("*").css("color","red"); //改变所有的字体颜色 全局选择器
});
});
</script>
</head> <body>
<div id="box"> id为box的div
<h2 class="title">class为title的h2</h2>
<h3 >class为title的h3</h3>
<dl>
<dt>
<img src="data:image/1419573178hE6KzQ.jpg" width="" height="" alt="公主" title="当图片不显示的时候就显示alt属性的值"/></dt>
<dd class="title">公主</dd> </dl>
</div>
</body>
</html>
四、层次选择器
名称 |
语法构成 |
描述 |
示例 |
后代选择器 |
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> |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("h2").click(function () {
//$("#all span").css("background","pink"); //后代选择器 #all ---->后代是span
//$("#all>span").css("background", "pink"); //子选择器 就是在#all的标签而不是包裹在别人下的======子元素
// $("dt+dd").css("background","pink"); //相邻选择器 就是必须相邻的有顺序的
//$("span~dl").css("background","pink"); //同辈选择器 span在之后的dl
});
});
</script>
</head>
<body>
<div id="all"> <h2>全部旅游产品分类</h2>
<span>content</span>
<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>
</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>元素 |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("h2").click(function () {
//$("h2[title]").css("background", "pink"); //选取包含属性的元素 h2标签里面 title的属性
//$("[class=odds]").css("background", "pink"); //改变 class属性的值 odds元素背景颜色
$("[id!=box]").css("color","pink");
// $("[title^=h]").css("background", "pink"); //改变 title属性的值中以h 开头的元素背景颜色
//$("[title$=jp]").css("background","pink"); //改变 title属性的值中以 jp结尾的元素的背景颜色
//$("[title*=s]").css("background","pink"); //改变 title属性的值中含有 s元素的背景颜色
//$("li[class][title*=y]").css("background","pink"); //改变包含 class属性且title属性的值含有 y的<li>元素的背景颜色
});
});
</script>
</head>
<body>
<div id="box">
<h2 class="odds" title="cartoonlist">动画列表</h2>
<ul >
<li class="odds" title="kn_jp">名侦探柯南</li>
<li class="evens" title="hy_jp">火影忍者</li>
<li class="odds" title="ss_jp">死神</li>
</ul> </div>
</body>
</html>
六、基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素
基本过滤选择器 |
:first |
选取第一个元素 |
$(" li:first" )选取所有<li>元素中的第一个<li>元素 |
:last |
选取最后一个元素 |
$(" li:last" )选取所有<li>元素中的最后一个<li>元素 |
|
:even |
选取索引是偶数的所有元素(index从0开始) |
$(" li:even" )选取索引是偶数的所有<li>元素 |
|
:odd |
选取索引是奇数的所有元素(index从0开始) |
$(" li:odd" )选取索引是奇数的所有<li>元素 |
名称 |
语法构成 |
描述 |
示例 |
基本过滤选择器 |
:not(selector) |
选取去除所有与给定选择器匹配的元素 |
$(" li:not(.three)" )选取class不是three的元素 |
:header |
选取所有标题元素,如h1~h6 |
$(":header" )选取网页中所有标题元素 |
|
:focus |
选取当前获取焦点的元素 |
$(":focus" )选取当前获取焦点的元素 |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
$(document).ready(function () {
$("h2").click(function () {
// $("li:first").css("background", "#09F"); //改变第一个<li>(进行过滤的元素:)的背景颜色
//$("li:last").css("background", "pink"); //改变最后一个<li>(进行过滤的元素:)的背景颜色
//$("li:not(.three)").css("color","pink"); //改变在<li>里面除了three以外都改变字体颜色
//$("li:even").css("color", "pink"); //改变索引为偶数的<li>元素的字体颜色
//$("li:odd").css("color","#09F"); //改变索引为奇数的<li>元素的字体颜色
// $("li:eq(1)").css("background", "pink"); //改变索引值 等于1的<li>元素的颜色
//$("li:gt(1)").css("background", "pink"); //改变索引值 大于1的<li>元素的颜色
//$("li:lt(1)").css("background", "pink"); //改变索引值 小于1的<li>元素的颜色
//$(":header").css("color","pink"); //改变所有标题元素背景颜色如 h2 h3..... $(":focus").css("background","pink"); //改变当前获取焦点的元素背景 });
});
</script> </head>
<body>
<h2> 网络小说</h2>
<ul>
<li>王妃不好当 </li>
<li>致命交易 </li>
<li class="three"> 非诚勿扰</li>
<li> 逆天之宠</li>
<li> 交错时光的恋爱</li>
<li> 张震鬼故事</li>
<li> 第一次亲密接触</li>
</ul>
</body>
</html>
七、可见性过滤选择器
名称 |
语法构成 |
描述 |
示例 |
可见性过滤选择器 |
:visible |
选取所有可见的元素 |
$(":visible" )选取所有可见的元素 |
:hidden |
选取所有隐藏的元素 |
$(":hidden" ) 选取所有隐藏的元素 |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.12.3.min.js"></script>
<style>
#txt_show {display:none;color:#00C }
#txt_show {display:block;color:#F30 }
</style>
<script>
$(document).ready(function () {
$("[name=show]").click(function () {
$("p:hidden").show(); //获取隐藏元素,使其显示 });
$("[name=hide]").click(function () {
$("p:visible").hide(); //获取显示元素,使其隐藏 }); });
</script>
</head>
<body>
<p id="txt_hide">点击按钮我会隐藏哦 </p>
<p id="txt_show">隐藏我会显示哦 </p>
<input name="show" type="button" value="点击显示文字"/>
<input name="hide" type="button" value="点击隐藏文字"/>
</body>
</html>
总结:(一定要看实列,才会有收获哦)
关于jQuery里面的选择器的更多相关文章
- jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
- jQuery 简单过滤选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...
- JQuery:JQuery语法、选择器、事件处理
JQuery语法: 通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...
- 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
- jQuery基础知识--选择器与效果
$(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...
- jQuery的筛选选择器
基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...
- JQuery总结:选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 (转)
JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...
- jQuery中的选择器<思维导图>
选择器是jQuery的重要组成部分,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.如果能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. 下面是关于jQuery中 ...
- jQuery中的选择器《思维导图》
学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...
- jQuery简单过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--jQuery选择器详解 根据所获 ...
随机推荐
- AJAX文件上传实践与分析,带HTML5文件上传API。
对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...
- @import导入外部样式表与link链入外部样式表的区别
昨天碰到同事问了一个问题,@impor导入外部样式与link链入外部样式的优先级是怎样的,为什么实验的结果是按照样式表导入后的位置来决定优先级. 今天就这个问题,度娘上找了很久,终于有个总结性的答案出 ...
- 【Discuz】云平台服务:出了点小错,由于站点ID/通信KEY等关键信息丢失导致Discuz!云平台服务出现异常
提示信息 出了点小错,由于站点ID/通信KEY等关键信息丢失导致Discuz!云平台服务出现异常 版本X3.2.20160601 解决方案 Step1.修改云平台开通状态为未开通状态 Step2.访问 ...
- 接触Matlab10年后的一个总结,随时使用Matlab要掌握的一些要点
不记得上一次写超过20行的matlab程序是什么时候了,大概是2013年吧,那个时候写过2篇文章,实际用到了 一些matlab的内容,超过200行的matlab程序应该要追溯到2011年了,最近为了帮 ...
- vs xamarin android SharedPreferences
读 PreferenceManager.GetDefaultSharedPreferences(this).GetInt("uid", 0); 写 var editor = Pre ...
- 使用 SVG 实现一个漂亮的页面预加载效果
今天我们要为您展示如何使用 CSS 动画, SVG 和 JavaScript 创建一个简单的页面预加载效果.对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊 ...
- SQLServer学习笔记系列7
一.写在前面的话 转眼又是周一,回想双休的日子,短暂而幸福,在阳光明媚的下午,可以自己做自己想做的任何事,惬意舒适,或读书,或运动,或音乐,当我们静下心来慢慢感受这些的时候,会突然发觉,原来生活是这么 ...
- Moon.Orm3.8技术全攻略
Moon.ORM技术全攻略 一.绪论 本文主要是针对Moon.ORM的技术的讨论及其使用使用指导.如有其它疑问,请留言.本文主要针对Moon.ORM3.9版本,同时将会对4.0做一个技术预览.本文从 ...
- Centos6.5 python升级成2.7版本出现的一些问题解决方法
由于功能及程序依赖,需要将Centos上的python从2.6升级成2.7,把碰到的一些问题记录如下: 安装好2.7后将原来的/usr/bin/python改成/usr/bin/python26,并将 ...
- [Tool] 配置文件之Web.config
开发人员工具: 安装完vs后,(如2013:C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\Tools\Shortcuts\VS ...