jQuery选择器，外加例子讲解
- jQuery选择器的优势：
(1) 代码更简单
(2) 支持CSS1到CSS3选择器
(3) 完善的处理机制
- jQuery选择器的分类
（1） 基本选择器
基本选择器是jQuery中使用最多的选择器，它又元素Id、class、元素名、多个元素符组成。
（2） 层次选择器
层次选择器通过DOM元素间的层次关系来获取元素，主要的层次关系包括父子、后代、相邻、兄弟关系。
（3） 过滤选择器
① 简单过滤选择器
过滤选择器是根据某类过滤规则进行元素的匹配，书写时都以(:)开头；简单过滤选择器是过滤选择器中使用最广泛的一种。
② 内容过滤选择器
内容过滤选择器是根据元素中的文字内容或所包含的的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。
③ 可见性过滤选择器
可见性过滤选择器根据元素是否可见的特征来获取元素
④ 属性过滤选择器
⑤ 子元素过滤选择器
⑥ 表单对象属性过滤选择器
此选择器主要是对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素。
（4） 表单选择器
eg：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 选取含有 属性title 的div元素.
$('#btn1').click(function(){
$('div:[title]').css('background','orchid');
})
// 选取 属性title值等于“test”的div元素.
$('#btn2').click(function(){
$('div[title=test]').css('background','orange');
})
$('#btn3').click(function(){
// 选取 属性title值不等于“test”的div元素(没有属性title的也将被选中).
$('div:[title!=test]').css('background','chartreuse');
})
$('#btn4').click(function(){
$('div:[title^=te]').css('background','#FFC0CB');
})
$('#btn5').click(function(){ $('div:[title$=est]').css('background','aqua');
})
$('#btn6').click(function(){
//选取属性title值含有es的元素
$('div:[title*=es]').css('background','coral');
})
$('#btn7').click(function(){
//组合属性选择器，首先选取有属性id的元素，然后在结果中选取属性title值含有es的元素
$('div:[id][title*=es]').css('background','deeppink');
}) })
</script>
</head>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label> <h3> 属性选择器.</h3>
<input type="button" value="选取含有 属性title 的div元素." id="btn1" />
<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2" />
<input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3" />
<input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4" />
<input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5" />
<input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6" />
<input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7" /> <br /><br /> <!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div> <div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div> <div style="display:none;" class="none">
style的display为"none"的div
</div> <div class="hide">class为"hide"的div</div> <div>
包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>
</body>
</html>
style.css部分：
div,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
}
结果图：
jQuery选择器，外加例子讲解的更多相关文章
- jQuery选择器简单例子
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQuery_5.aspx. ...
- Jquery选择器 讲解
在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象 ...
- jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...
- jQuery选择器和选取方法
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮 ...
- jQuery选择器和选取方法.RP
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...
- 《锋利的jQuery（第2版）》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
- jquery选择器 之 获取父级元素、同级元素、子元素
jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...
- jQuery选择器。 5.21 《深夜还在编码的你》
(之所以字体弄那么大是因为省眼,程序员不容易,程序员的眼睛更不容易,请保护我们的眼睛) 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器. 熟练地使用选 ...
- jQuery 选择器 （基础恶补之三)+Ajax
jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector). ...
随机推荐
- kolla-ansible安装openstack(Ocata)
基本功能部署 基础环境 角色 操作系统 硬件配置 Depoly CentOS 7 Server 磁盘:40GB 内存:8GB 网卡:ens3(内网) ens4(外网) Sched CentOS 7 S ...
- mysql--对行(表中数据)的增删改查
一.插入数据(增加)insert 1.插入数据(顺序插入) 语法一: INSERT INTO 表名(字段1,字段2,字段3…字段n) VALUES(值1,值2,值3…值n); #指定字段来插入数据,插 ...
- 内置函数——sorted
对List.Dict进行排序,Python提供了两个方法对给定的List L进行排序,方法1.用List的成员函数sort进行排序,在本地进行排序,不返回副本方法2.用built-in函数sorted ...
- PHP全局变量与SESSION 漏洞（global 与 session）
先看这一段简单的代码 <?php session_start();$_SESSION[‘isadmin’]=’yes’;$isadmin=’no’;echo $_SESSION[‘isadmin ...
- 手把手教渗透测试人员打造.NET可执行文件
在进行渗透测试的过程中,我们有时候会希望使用可执行文件来完成某些任务.最近,我们在测试过程中拿下了一个网站,从而获得了一次发动水坑攻击的机会. 原文地址:https://www.peew.pw/blo ...
- TPshop商城 Getshell后门文件分析与复现
本文作者:i春秋签约作家——Laimooc 官网地址:http://www.tp-shop.cn/ 影响版本:TPSHOP v2.0.0 后门文件:eval-stdin.php 内容: <?ph ...
- 3.2 Multi-Master Replication
摘要: 出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该 ...
- Objective-C Associated Objects 的实现原理
我们知道,在 Objective-C 中可以通过 Category 给一个现有的类添加属性,但是却不能添加实例变量,这似乎成为了 Objective-C 的一个明显短板.然而值得庆幸的是,我们可以通过 ...
- allure报告定制（pytest+jenkins）
环境及安装可查看 pytest+jenkins安装+allure导出报告 要让allure报告更漂亮,更直观,需要在脚本中写入allure特性 一开始allure调用step().story().fe ...
- ui2-3
2016.9讲义 一．课程的主要内容和目的 二．课程所用工具软件——Photoshop CS6 1. Photoshop 的发展史 1990.2,ps1.0问世,1991.2,PS2.0发行,此后,进 ...