jQuery 基础教程（三）之jQuery的选择器

一、jQuery 选择器

（1）选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器

（2）jQuery 选择器的优点:

简洁的写法

$('#id)    //documnet.getElementById('id');
$('p')     //documnet.getElementByTagName('p');

（3）完善的事件处理机制

//若在网页中没有id为'id'的元素，浏览器会报错
//document.getElementById('id').style.backgroundColor='blue';//需要先判断document.getElementById('id')是否存在
if(document.getElementById('id'))document.getElementById('id').style.backgroundColor='blue';//使用jQuery获取网页中的元素即使不存在页面也不会报错
$("#id").css("backgroundColor","blue");

二、基本选择器

（1）基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素

（2）基本选择器示例

(A)改变 id 为 one 的元素的背景色为红色

$("#one").css("backgroundColor","red");

(B)改变元素名为的所有元素的背景色为 # bbffaa，字体颜色为红色

$("p").css({color:"red",backgroundColor:"#bbffaa"});

(C)改变第一个元素的背景色为红色

$("p").eq(0).css("backgroundColor","red");

(D)改变所有元素和 id 为 one 的元素的背景色为 # bbffaa

$("h1,#one").css("backgroundColor","#bbffaa");

三、层次选择器

（1）如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器

注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

（2）层次选择器示例

(A)改变内所有的背景色为 # bbffaa

$(“body div")

(B)改变内子的背景色为 # bbffaa

$("body>div")

(C)改变 id 为 one 的下一个的背景色为 # bbffaa

$("#one+div")

(D)改变 id 为 two 的元素后面的所有兄弟的元素的背景色为 # bbffaa

$("#two~div")

(E)改变 id 为 two 的元素所有兄弟元素的背景色为 # bbffaa

$("#two"). siblings("p")

四、过滤选择器

（1）过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头

（2）按照不同的过滤规则, 过滤选择器又可分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

（3）基本过滤选择器

（4）基本过滤选择器示例

(A)改变第一个 div 元素的背景色为 # bbffaa

$("div:first")

(B)改变id不为 one 的所有p元素的背景色为 # bbffaa

$("p:not('#one')")

(C)改变索引值为偶数的 tr元素的背景色为 # bbffaa

$(“tr:even")

(D)改变索引值为大于 3 且为奇数的 p元素的背景色为 # bbffaa

$(“p:gt(3):odd")

(E)改变所有的标题元素的背景色为 # bbffaa

$(":header")

(F)改变当前正在执行动画的所有元素的背景色为 # bbffaa

$(":animated")

五、内容过滤选择器

（1）内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

（2）内容过滤选择器示例

(A)改变含有文本 ‘di’ 的 p元素的背景色为 # bbffaa

$("p:cotains(di)")

(B)改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 # bbffaa

$("div:empty")

(C)改变含有 class 为 mini 元素的 p元素的背景色为 # bbffaa

$("p:has(.mini)")

(D)改变含有子元素(或者文本元素)的div元素的背景色为 # bbffaa

$("div:parent")

六、可见性过滤选择器

（1）可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

（2）可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (<input type=“hidden”>)和 visible:hidden 之类的元素

（3）可见性过滤选择器示例

(A)改变所有可见的div元素的背景色为 # bbffaa

$("div:visible")

(B)选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 # bbffaa

$(":hidden")

(C)选取所有的文本隐藏域, 并打印它们的值

$("input:hidden")

七、属性过滤选择器

（1）属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

（2）属性过滤选择器示例

(A)选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素.

$("div[id][title='es']")

(B)含有属性title 的div元素.

$("div[title]")

(C)属性title值等于"test"的div元素.

$("div[title='test']")

(D)属性title值不等于"test"的div元素(没有属性title的也将被选中).

$("div[title!='test']")

(E)属性title值以"te"开始的div元素.

$("div[title^='te']")

(F)属性title值以"est"结束的div元素.

$("div[title$='est']")

(G)属性title值含有"es"的div元素.

$("div[title*='es']")

八、子元素过滤选择器

（1）nth-child() 选择器详解如下：

(A) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素

(B):nth-child(2): 能选取每个父元素下的索引值为 2 的元素

(C):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数的元素

(D):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

（2）子元素过滤选择器示例

每个class为one的div父元素下的第2个子元素.

$("div.one:nth-child(2)")

每个class为one的div父元素下的第一个子元素

$("div.one:first-child") $("div.one:nth-child(1)")

每个class为one的div父元素下的最后一个子元素

$("div.one:last-child")

如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素

$("div.one:only-child")

九、表单对象属性过滤选择器

（1）此选择器主要对所选择的表单元素进行过滤

（2）表单对象属性过滤选择器示例

利用 jQuery 对象的 val() 方法改变表单内可用元素的值

$(":enabled").val('xx')

利用 jQuery 对象的 val() 方法改变表单内不可用元素的值

$(":disabled").val('xx')

利用 jQuery 对象的 length 属性获取多选框选中的个数

$("input[type='checkbox']:checked").length

利用 jQuery 对象的 text() 方法获取下拉框选中的内容

$(":selected").text()

十、表单选择器

练习

1. 给网页中所有的<p>元素添加 onclick 事件

2. 是一个特定的表格隔行变色

3. 对多选框进行操作, 输出选中的多选框的个数

jQuery 基础教程（三）之jQuery的选择器相关推荐

jQuery 3教程(三)：jQuery集合
原文地址:jQuery 3教程(三):jQuery集合 Introduction jQuery选择器选择出来的结果很多时候是一个DOM元素集而非单个元素,jQuery可以灵活的访问和修改DOM元素集, ...
（转）jquery基础教程八 load方法及小技巧
首先我们看看手册上的描述 load(url, params, callback) 装入一个远程HTML内容到一个DOM结点. 注意:避免用装入的scripts脚本,装入脚本改用$.getScript. ...
jquery系列教程7-自定义jquery插件全解：对象函数、全局函数、选择器
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
jQuery——入门（三）JQuery DOM操作（核心处理和文档处理）
jQuery--入门(三)JQuery DOM操作(核心处理和文档处理) 一.核心处理(JQuery对象访问) 1.页面加载检测函数:$(document).ready(function(){}); ...
jQuery学习（三）—jQuery使用步骤以及注意事项
jQuery学习(三)-jQuery使用步骤以及注意事项 jQuery的使用步骤: 第一步:利用script标签将jQuery文件引入到当前的HTML中第二步:在文档中插入一个新的script标签在 ...
Ogre3D基础教程三
文档:教程:基础教程:基础教程三出自Ogre3D开放资源地带跳转到: 导航, 搜索目录 [隐藏] 1 先决条件 2 简介 3 从这里开始 4 根对象和场景管理器的创建 4.1 根对象 4.2 场 ...
jQuery基础教程
调试环境:webstorm 版本11.0.1 Chrome 版本54.0.2840.99 声明:本博客借鉴了w3school在线教程,如果需要详细的教程可以访问http://www.w3school. ...
jQuery 基础教程（一）之jQuery的由来及简介
一.RIA技术 (1)RIA(Rich Internet Applications) 富互联网应用,具有高度互动性.丰富用户体验以及功能强大的客户端. (2)常见的RIA技术 Ajax Flex Sl ...
jQuery 基础教程（五）之使用jQuery创建动画效果
一.jQuery 中的动画: 隐藏和显示 (1)hide() 在 HTML 文档中, 为一个元素调用 hide() 方法会将该元素的 display 样式改为 none. 代码功能同 css(&qu ...
jQuery 基础教程（二）之jQuery对象与DOM对象
一.jQuery 对象 (1)jQuery 对象就是通过 jQuery 包装DOM对象后产生的对象 (2)Query 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以 ...

jQuery 基础教程（三）之jQuery的选择器

jQuery 基础教程（三）之jQuery的选择器相关推荐

最新文章

热门文章

jQuery 基础教程 （三）之jQuery的选择器

jQuery 基础教程 （三）之jQuery的选择器相关推荐

最新文章

热门文章

jQuery 基础教程（三）之jQuery的选择器

jQuery 基础教程（三）之jQuery的选择器相关推荐