第八章《jQuery基础》

方法 children() content() next() nextAll() parent() 描述 返回指定包装集每个元素的所有子节点的包装集。 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个 iframe，则查找文档内容。 返回包装集中每个元素紧邻的后面的同辈元素的包装集。 返回当前元素之后所有的同辈元素。 取得一个包含着所有匹配元素的唯一父元素的包装集。
这个方法纯粹是为了替代window.onload事件而设计的， $(document).ready(fn)比window.onload执行速度要快的多。

$(document).ready(fn);还有一种更加常用的写法$(fn); 。
Hands-On实训教程系列
jQuery选择器


$(„ul a‟); 不幸的是，“link1”与“link2”超链接都会被选中，因为“link2”也是 <ul>的后代节点。

更高级的解决办法是利用“子选择器”，父节点与直接子节 以“>”符号隔开，如下所示：

$(„ul > a‟);
这个选择器只匹配<ul>标记下的“link1”超链接。
Hands-On实训教程系列
jQuery选择器继承了CSS和xPath语言的部分语法，允许通 过标签名、属性名或内容对DOM元素进行快速、准确的选择， 而不必担心浏览器的兼容性。
Hands-On实训教程系列
jQuery基本语法2

文档就绪程序

$(document).ready(fn);是指当所有页面元素准备就绪后 执行指定的方法，
Hands-On实训教程系列
位置选择器


有时候必须根据元素在页面上的位置或者其他元素的关系去 选择元素。也许你想要选择页面上的第一个链接、奇数或偶 数的段落，或者每个列表的最后一项。jQuery支持实现这个 具体选择的机制。 例如：
$(‘a:first’); //匹配第一个出现在页面上的超链接 $('p:odd'); //代表选择器匹配所有序数为奇数的段落元素 $('p:even'); //代表选择器匹配所有序数为偶数的段落元素 $('li:last-child'); //选择li父节点的最后一个子元素
Hands-On实训教程系列
本章目标



jQuery简介 掌握jQuery基本语法 掌握jQuery 四种选择器使用方法 利用jQuery控制元素属性、样式 理解jQuery事件模型 学会使用jQuery内置动画
Hands-On实训教程系列
工作任务

jQuery树状菜单
Hands-On实训教程系列
:even或 :odd
:eq(n)
:gt(n) :lt(n)
第n个匹配元素(n从0开始)
匹配从第n(不包括n)个元素之后的所有元素 匹配从第n(不包括n)个元素之前的所有元素
Hands-On实训教程系列
利用元素关系获取元素集合
jQuery提供了一系列方法允许根据元素集合中某元素与其他元素的层次关 系获取新的元素集合。请看下表：
Hands-On实训教程系列
find()函数

jQuery还提供了find()方法用于搜索所有与指定表达 式匹配的元素，这个方法是找出正在处理的元素的后 代元素的好方法
find(selector) 参数：selector ，有效的选择器表达式 返回：元素集合
Hands-On实训教程系列
jQuery操作DOM元素
Hands-On实训教程系列
直接获取或设置样式

//为当前页所有图像新增一个宽度为1个像素的黑色实心边框
$('img').css('border','1px solid #000') ; $('img').css( {'border':'1px solid #000' , 'width':'32px' ,'height':'32px'} );
属性选择器-1
如果我们写了这么一段HTML代码：
<a href=’index.jsp’>返回首页</a> <a href=’’>新浪</a> <a href=’’>网易</a>
Hands-On实训教程系列
属性选择器-2

假设我们指向绑定特殊行为到执行本网站之外的地址链接， 在href属性中以“http://”开头的超链接我们便可以认为是外 部链接。利用特征选择器，我们可以这么写

Hands-On实训教程系列
修改元素样式




$(„img‟).addClass(„css_class1‟) // 为当前页面所有图像新增CSS类“css_class1”。 $(„img‟).addClass(„css_class1 css_class2‟) //为当前页面所有图像新增CSS类“css_class1”与“css_class2”，多个 类名之间用空格隔开。 $(„img‟).removeClass(„css_class1 css_class2‟) //为当前页面所有图像删除CSS类“css_class1”与“css_class2”。 $(„img‟).hasClass(„class1‟) ; //验证当前页面是否有图像包含CSS类“class1”，有则返回true，没有则 返回false。
Hands-On实训教程系列
属性选择器语法表
选择器 * E EF E>F E+F E~F E:has(F) E.C E#I E[A] E[A=V] E[A^=V] E[A$=V] E[A*=V] 匹配任何元素 匹配标签名称为E的所有元素 匹配标签名为F、作为E后代节点的所有元素 匹配标签名为F、作为E的直接子节点的所有元素 匹配前面是邻近兄弟节点E的所有元素F（E 和 F紧挨着） 匹配前面是任何兄弟节点E的所有元素F（E和F不需要紧挨着） 匹配标签名为E、至少有一个标签名称为F的后代节点的所有元素 匹配待用类名C的所有元素E.。.C等效于*.C 匹配id属性值为I的元素E。#I等效于*#I 匹配带有属性A的所有元素E（不关心属性值是什么） 匹配所有元素E，其A属性值必须等于V 匹配所有元素E，其A属性值必须以V开头 匹配所有元素E，其A属性值必须以V结尾 匹配所有元素E，其A属性值必须包含V 描述
Hands-On实训教程系列
位置选择器语法表
选择器
:first 匹配指定的第一个元素
描述
:last
:first-child :last-child :only-child :nth-child(n) :nth-child(even|odd) :nth-child(Xn+Y)
匹配指定的最后一个元素
匹配指定元素的父元素的第一子元素 匹配指定元素的父元素的最后一个子元素 返回没有兄弟节点的所有元素 第n个子节点(n从1开始)。li:nth-child(2)返回每个列表的第二个<li>元素 奇数或偶数的子节点。li:nth-child(even)返回每个序列的偶数子结点 根据传入的公式计算第n个子节点。如果Y为0，则忽略Y，n从0开始，且X不等于0。 li:nth-child(3n)返回位置在3的整数倍数的元素，而li:nth-child(5n+1)返回5的倍数 的元素的下一项 页面范围内偶数或奇数的匹配元素。li:even返回全部偶数<li>项

//返回字符串”An image”
//则可以将所有当前页所有img标记的alt属性设置为”An new image” //代表移除id=myImage对象的alt属性
$('img').attr('alt‟,‟An new image');

$('#myImage').removeAttr('alt') ;

主旨

Hands-On实训教程系列
jQuery简介2

jQuery基本功能

访问和操作DOM元素 控制页面外观 对页面事件的处理 大量插件在页面中的运用 与Ajax技术的完美结合
Hands-On实训教程系列
jQuery开发环境

下载jQuery文件库

jQuery官方网站： <script src=“jQuery库文件路径”></script>
基本选择器 子选择器 属性选择器 位置或元素关系选择器
Hands-On实训教程系列
基本选择器

$(„a‟);

这个选择器匹配所有超链接元素 这个选择器匹配id为specialID的元素 这个选择器匹配拥有CSS类specialClass的元素 匹配id为specialID的超链接元素


$(„#specialID‟);

$(„a[href^=http://]‟);
//^表示开头

特征选择器还可以这么写：

$('a[href$=.com]'); //匹配所有以“.com”作为href属性结尾的超链接。 $(„a[href*=sina]‟); //匹配所有href属性包含“sina”字符串的超链接 $(„form[method]‟); //获取所有包含method属性的表单 $(„input[type=text]‟); //获取所有文本框

$(„.specialClass‟);

$(„a#specialID‟);