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). ...
随机推荐
- 'Install app for SharePoint': Sideloading of apps is not enabled on this site
http://blog.lekman.com/2012/11/sharepoint-2013-sideloading-of-apps-is.html Solution: You need to ena ...
- Java实现对ftp的读写文件
这里仅仅是对ftp工具类的简单使用,很多东西还不是很了解.当然学以致用,先用到这里吧. public class FtpTest { /** * 向ftp写文件(数据) */ @Test public ...
- Linux 常用命令大放送
sbin 系统底层命令存放目录 bin 一般用户常用命令目录 文件用户管理 ls -lh 显示权限cp -r 复制文件 文件夹 mkdir test 创建文件夹rm -rf 删除文件 ...
- 516. Longest Palindromic Subsequence
Given a string s, find the longest palindromic subsequence's length in s. You may assume that the ma ...
- Mysql Insert Or Update语法实例
有的时候会需要写一段insert的sql,如果主键存在,则update:如果主键不存在,则insert.Mysql中提供了这样的用法:ON DUPLICATE KEY UPDATE.下面就看看它是如何 ...
- VMware Workstation 14 pro License Keys
AC5XK-0ZD4H-088HP-9NQZV-ZG2R4 CG54H-D8D0H-H8DHY-C6X7X-N2KG6 ZC3WK-AFXEK-488JP-A7MQX-XL8YF ZC5XK-A6E0 ...
- (转)Javascript模块化编程（二）：AMD规范
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...
- 定期删除Azure存储账号下N天之前的数据文件-ARM
######RemoveStorageBlob*DaysOld-ARM##### <# .SYNOPSIS Remove all blob contents from one storage a ...
- leetcode-292-Nim Game（搬石子）
题目描述: You are playing the following Nim Game with your friend: There is a heap of stones on the tabl ...
- 图的最短路径---迪杰斯特拉(Dijkstra)算法浅析
什么是最短路径 在网图和非网图中,最短路径的含义是不一样的.对于非网图没有边上的权值,所谓的最短路径,其实就是指两顶点之间经过的边数最少的路径. 对于网图,最短路径就是指两顶点之间经过的边上权值之和最 ...