关于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选择器详解 根据所获 ...
随机推荐
- 理解与模拟一个简单web服务器
先简单说下几个概念,根据自己的理解,不正确请见谅. web服务器 首先要知道什么是web服务器,简单说web服务器就是可以使用HTTP传输协议与客户端进行通信的服务器.最初的web服务器只能用来处理静 ...
- SilverLight 控件ListBox中的SelectionChanged事件
出现的问题: ListBox 中给了它一个这样的事件SelectionChanged="NumBasket_SelectionChanged" 也就是单击某行就会触发的事件,要实现 ...
- Android线程之AsyncTask
在之前的博客中为大家分享过关于Android多线程处理,想必大家对于Android为什么要使用多线程已经有了清晰的认识,我就在简单唠两句,Android规定UI界面的更新必须在在主线程进行,对于访问网 ...
- javase基础复习攻略《二》
今天就开始的真正走进JAVASE的世界,本篇介绍的是:JAVASE基础语法,大家如果有C语言的基础,对于本节内容一定感觉非常轻松,编程语言之间的都是相通的,只不过C语言属于面向过程编程,而JAVA语言 ...
- Microsoft Naive Bayes 算法——三国人物身份划分
Microsoft朴素贝叶斯是SSAS中最简单的算法,通常用作理解数据基本分组的起点.这类处理的一般特征就是分类.这个算法之所以称为“朴素”,是因为所有属性的重要性是一样的,没有谁比谁更高.贝叶斯之名 ...
- PHP的学习--图解PHP引用
在一篇文章中看到关于PHP引用的图解,对于加深对PHP引用的理解很有帮助,在这里备份一下. 如果你对PHP的引用一点也不了解,可以先看我之前的博客:PHP的学习--PHP的引用
- 优秀工具推荐:超实用的 CSS 库,样板和框架
当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间.在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效. 您可能感兴趣的相关文章 精 ...
- QT学习笔记1
不准备用MFC了,想切换到QT.所以跟着网上的一个笔记学习. 1 开发环境是VS2008+QT4.7+VassistX 具体如何配置看这个帖子:http://qimo601.iteye.com/blo ...
- Elasticsearch——多索引的使用
在Elasticsearch中,一般的查询都支持多索引. 只有文档API或者别名等不支持多索引操作,因此本篇就翻译一下多索引相关的内容. 首先,先插入几条数据: $ curl -XPOST local ...
- .NET Core扩展IServiceCollection自动注册服务
前言 在ASP.NET Core中使用依赖注入中使用很简单,只需在Startup类的ConfigureServices()方法中,通过IServiceCollection接口进行注入即可,其它的无需关 ...