jquery基础教程 - 第二章 选择元素
内容提要
1、网页中元素的介绍
2、如何通过CSS选择符在页面中查找元素
3、扩展jquery标准的CSS选择符
4、让选择页面元素更灵活的DOM遍历方法
本章重点：让我们能够在DOM中快捷而又轻松地获取元素或元素的集合
1、网页中元素介绍
1.1理解DOM
-- JQUERY最大的特性之一就是它能够简化在DOM中选择元素的任务，
DOM 充当网页和javascript之间的接口，它以对象网络而非纯文本的形式来表现html的代码
<html>是网页中的祖先元素；
搞清楚子元素，父元素，同辈元素之间的关系
2、如何通过CSS选择符在页面中查找元素
2.1使用$()函数
-- jquery的各种选择符和方法取得的结果集合会被包装在jquery对象中；
创建jquery对象就需要$()函数；
-- 这个对象能接受CSS选择符作为参数，充当一个工厂，返回包含页面中对应元素的jquery
对象
所有能在样式表中使用的选择符都可以传给这个函数，随后我们可以对匹配的元素集合应用
jquery方法
2.2三种基本选择符
-- 标签名选择符、ID选择符、类选择符
-- 将方法连缀到$()工厂函数后面时，包装在jquery对象中的元素会被自动、隐式的循环
遍历。换句话说，这样就避免了使用for循环之类的显示迭代(这种迭代在dom脚本编程中
很常见)
2.3CSS选择符
-- jquery支持支持CSS规范1到CSS规范3的几乎所有选择符，所以，不必为那种浏览器不理
解某种不太常用的选择符而担心，只要该浏览器启用了javascript就没有问题
2.3.1基于列表项的级别添加样式
$(document).ready(function(){
$(‘#selected-plays > li‘).addClass(‘horizontal‘);
});
$()函数中的选择符的含义是，查找ID为selected-plays的元素(#selected-plays)的子元
素(>)中所有的列表项(li)
$(document).ready(function(){
$(‘#selected-plays > li‘).addClass(‘horizontal‘);
$(‘#selected-plays > li:not(‘horizontal‘)‘).addClass(‘sub-lev‘);
});要为其他项（非顶级的项）添加样式，有很多种方式。因为已经为顶级项添加了horizontal
类，所以取得全部非顶级项的一种方式，就是使用否定式伪类选择符来识别没有horizontal
类的所有列表项。
2.4属性选择符
-- 属性选择符是CSS选择符中特别有用的一种选择符，属性选择符通过HTML元素的属性选
择元素
属性选择符使用一种从正则表达式中借鉴来的语法
^ 表示值在字符串的开始
$ 表示值在字符串的结尾
* 表示值在字符串的任意位置
2.4.1为链接添加样式
$(document).ready(function(){
$(‘a[href^="mailto"]‘).addClass(‘mailto‘);
});选择A标签的href属性的值以mailto开头的元素
$(document).ready(function(){
$(‘a[href$=".pdf"]‘).addClass(‘mailto‘);
});选择A标签的href属性的值以.pdf结尾的元素
$(document).ready(function(){
$(‘a[href^="http"][href*="henry"]‘).addClass(‘mailto‘);
});选择A标签的href属性的值以http开头，并且在任意位置出现henry的元素
2.5自定义选择符（此处的自定义选择符是指jquery定义的选择符）
-- 这类选择符通常跟在CSS选择符后面，基于已经选择的元素集的位置来选择元素
$(‘div.horizontal:eq(1))‘;
选择带有horizontal类样式的<div>集合中的第二项
$(document).ready(function(){
$(‘tr:even‘).addClass(‘alt‘);
});给dom中所有的奇数<tr>添加样式类alt，偶数使用odd
:nth-child 这个选择符相对于元素的父元素来进行计算，可以结束数字,odd,even作为参数
是jquery中唯一一个从1开始计数的选择符
$(document).ready(function(){
$(‘td:contains(Henry)‘).addClass(‘highlight‘);
});选择任何一个单元格的内容中包含Henry的元素，添加highlight样式类 :contains() 区分大小写
表单选择符
:input 输入类的元素
:button 按钮元素或type为button的元素
:enabled 启用的表单元素
:disabled 禁用的表单元素
:checked 勾选的单选按钮或复选框
:selected 选择的选项元素
2.6DOM遍历方法
.filter()方法会迭代所有匹配的元素，对每个元素都调用传入的函数兵进行测试函
数的返回值,true则保留，false则从匹配集合中删除相应元素
$(‘tr‘).filter(‘:even‘).addClass(‘alt‘);
.next 选择匹配元素的后一个元素
$(document).ready(function(){
$(‘td:contains(Henry)‘).next().addClass(‘highlight‘);
});.nextAll 选择匹配元素的后面所有元素
$(document).ready(function(){
$(‘td:contains(Henry)‘).nextAll().addClass(‘highlight‘);
});.prev 选择匹配元素的钱一个元素
$(document).ready(function(){
$(‘td:contains(Henry)‘).prev().addClass(‘highlight‘);
});.prevAll 选择匹配元素的前面所有元素
$(document).ready(function(){
$(‘td:contains(Henry)‘).prevAll().addClass(‘highlight‘);
});
.sliblings 选择处于相同DOM层次的所有其他元素
$(document).ready(function(){
$(‘td:contains(Henry)‘).sliblings().addClass(‘highlight‘);
});
$(document).ready(function(){
$(‘td:contains(Henry)‘).nextAll().addBack().addClass(‘highlight‘);
});.addBack() 在选择的元素中再包含原来的元素
$(document).ready(function(){
$(‘td:contains(Henry)‘).parent().children().addClass(‘highlight‘);
}); 通过.parent()在DOM中追溯到上一层到达<tr>,然后再通过.children()选择该行的
所有单元格
2.7访问DOM元素
为什么要访问DOM:所有选择符表达式和多数jquery方法都返回一个jquery对象，而这通常是
我们所期望的因为jquery对象能够提供隐式迭代能力；但是有时候我们还是可能需要再代码
中直接访问DOM元素，
var myTag = $(‘#my-element‘).get(0).tagName; 简写：var myTag = $(‘#my-element‘)[0].tagName;
选择id为my-element的元素的标签名
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
