第八篇《jQuery基础》.ppt

第八章 JavaScript框架 之 jQuery基础应用 上章回顾 XMLHttpRequest对象是AJAX的核心 开发AJAX必须遵循以下几个步骤： 创建XMLHttpRequest对象 使用open()方法创建一个请求 使用send()方法发送一个请求 对服务器端响应进行处理 本章目标 jQuery简介 掌握jQuery基本语法 掌握jQuery 四种选择器使用方法 利用jQuery控制元素属性、样式 理解jQuery事件模型 学会使用jQuery内置动画 工作任务 jQuery树状菜单 jQuery简介1 jQuery由来 jQuery是由美国人John Resig于2006年创建的一个开源项目，随着被人们熟知，越来越多的程序高手加入其中，完善并壮大其项目内容，如今已发展成为集JavaScript、CSS、DOM、Ajax于一体的强大框架体系。 主旨 以更少的代码，实现更多的功能（Write less,do more） jQuery简介2 jQuery基本功能 访问和操作DOM元素 控制页面外观 对页面事件的处理 大量插件在页面中的运用 与Ajax技术的完美结合 jQuery开发环境 下载jQuery文件库 jQuery官方网站： 引入jQuery文件库 script src=“jQuery库文件路径”/script jQuery中文学习网站 jQuery基本语法1 jQuery最基础的方法是”$()”,通过”$()”能够更加方便快捷的选择将被操作的页面元素 例如 $(‘input’):能够获得所有input标记集合 $()称为jQuery的选择器 jQuery选择器继承了CSS和xPath语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性。 jQuery基本语法2 文档就绪程序 $(document).ready(fn);是指当所有页面元素准备就绪后执行指定的方法， 这个方法纯粹是为了替代window.onload事件而设计的，$(document).ready(fn)比window.onload执行速度要快的多。 $(document).ready(fn);还有一种更加常用的写法$(fn); 。 jQuery选择器 基本选择器 子选择器 属性选择器 位置或元素关系选择器 基本选择器 $(‘a’); 这个选择器匹配所有超链接元素 $(‘#specialID’); 这个选择器匹配id为specialID的元素 $(‘.specialClass’); 这个选择器匹配拥有CSS类specialClass的元素 $(‘a#specialID’); 匹配id为specialID的超链接元素 $(‘p a.specialClass’); 这个选择器匹配拥有CSS类specialClass、在p元素中声明的超链接元素。 子选择器 有时我们只想选择某元素的子节点。 例如，现在有这样一段HTML代码： ul a href=”#”link1/a lia href=”#”link2/a/li /ul 我们想要选择ul标记下的“link1”超链接。利用基本CSS选择器，我们尝试选择器： $(‘ul a’); 不幸的是，“link1”与“link2”超链接都会被选中，因为“link2”也是ul的后代节点。 更高级的解决办法是利用“子选择器”，父节点与直接子节以“”符号隔开，如下所示： $(‘ul a’); 这个选择器只匹配ul标记下的“link1”超链接。 属性选择器-1 属性选择器-2 假设我们指向绑定特殊行为到执行本网站之外的地址链接，在href属性中以“http://”开头的超链接我们便可以认为是外部链接。利用特征选择器，我们可以这么写 $(‘a[href^=http://]’); //^表示开头 特征选择器还可以这么写： $(a[href$=.com]); //匹配所有以“.com”作为href属性结尾的超链接。 $(‘a[href*=sina]’); //匹配所有href属性包含“sina”字符串的超链接 $(‘form[method]’); //获取所有包含method属性的表单 $(‘input[type=text]’); //获取所有文本框 属性选择器语法表 位置选择器 有时候必须根据元素在页面上的位置或者其他元素的关系去选择元素。也许你想要选择页面上的第一个链接、奇数或偶数的段落，或者每个列表的最后一项。jQuery支持实现这个具体选择的机制。 例如： 位置选择器语法表 利用元素关系获取元素集合 find()函数 jQuery还提供了find()方法用于搜索所有与指定表达式