第八章《jQuery基础》.ppt

1、第八章,JavaScript框架 之 jQuery基础应用,上章回顾,XMLHttpRequest对象是AJAX的核心 开发AJAX必须遵循以下几个步骤： 创建XMLHttpRequest对象 使用open()方法创建一个请求 使用send()方法发送一个请求 对服务器端响应进行处理,本章目标,jQuery简介 掌握jQuery基本语法 掌握jQuery 四种选择器使用方法 利用jQuery控制元素属性、样式 理解jQuery事件模型 学会使用jQuery内置动画,工作任务,jQuery树状菜单,jQuery简介1,jQuery由来 jQuery是由美国人John Resig于2006年创建的

2、一个开源项目，随着被人们熟知，越来越多的程序高手加入其中，完善并壮大其项目内容，如今已发展成为集JavaScript、CSS、DOM、Ajax于一体的强大框架体系。 主旨 以更少的代码，实现更多的功能（Write less,do more）,jQuery简介2,jQuery基本功能 访问和操作DOM元素 控制页面外观 对页面事件的处理 大量插件在页面中的运用 与Ajax技术的完美结合,jQuery开发环境,下载jQuery文件库 jQuery官方网站：http:/ 引入jQuery文件库jQuery中文学习网站 http:/,jQuery基本语法1,jQuery最基础的方法是”$()”,通过”

3、$()”能够更加方便快捷的选择将被操作的页面元素 例如 $(input):能够获得所有标记集合 $()称为jQuery的选择器 jQuery选择器继承了CSS和xPath语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性。,jQuery基本语法2,文档就绪程序 $(document).ready(fn);是指当所有页面元素准备就绪后执行指定的方法， 这个方法纯粹是为了替代window.onload事件而设计的，$(document).ready(fn)比window.onload执行速度要快的多。 $(document).ready(fn);

4、还有一种更加常用的写法$(fn); 。,jQuery选择器,基本选择器 子选择器 属性选择器 位置或元素关系选择器,基本选择器,$(a); 这个选择器匹配所有超链接元素 $(#specialID); 这个选择器匹配id为specialID的元素 $(.specialClass); 这个选择器匹配拥有CSS类specialClass的元素 $(a#specialID); 匹配id为specialID的超链接元素 $(p a.specialClass); 这个选择器匹配拥有CSS类specialClass、在元素中声明的超链接元素。,子选择器,有时我们只想选择某元素的子节点。 例如，现在有这样一段

5、HTML代码：link1 link2我们想要选择标记下的“link1”超链接。利用基本CSS选择器，我们尝试选择器： $(ul a); 不幸的是，“link1”与“link2”超链接都会被选中，因为“link2”也是的后代节点。 更高级的解决办法是利用“子选择器”，父节点与直接子节以“”符号隔开，如下所示： $(ul a); 这个选择器只匹配标记下的“link1”超链接。,属性选择器-1,如果我们写了这么一段HTML代码：,属性选择器-2,假设我们指向绑定特殊行为到执行本网站之外的地址链接，在href属性中以“http:/”开头的超链接我们便可以认为是外部链接。利用特征选择器，我们可以这么写

6、$(ahref=http:/); /表示开头 特征选择器还可以这么写： $(ahref$=.com); /匹配所有以“.com”作为href属性结尾的超链接。 $(ahref*=sina); /匹配所有href属性包含“sina”字符串的超链接 $(formmethod); /获取所有包含method属性的表单 $(inputtype=text); /获取所有文本框,属性选择器语法表,位置选择器,有时候必须根据元素在页面上的位置或者其他元素的关系去选择元素。也许你想要选择页面上的第一个链接、奇数或偶数的段落，或者每个列表的最后一项。jQuery支持实现这个具体选择的机制。 例如：,位置选择器语

7、法表,利用元素关系获取元素集合,jQuery提供了一系列方法允许根据元素集合中某元素与其他元素的层次关系获取新的元素集合。请看下表：,find()函数,jQuery还提供了find()方法用于搜索所有与指定表达式匹配的元素，这个方法是找出正在处理的元素的后代元素的好方法,jQuery操作DOM元素,设置元素属性 修改元素样式 设置元素内容,设置元素属性,在jQuery中提供了attr()方法，attr()方法可以从元素集合中第一个元素获取指定属性值，或将属性值设置到元素集合中每一个元素上。相同的jQuery方法能够执行迥异的操作，是因为传给方法的参数个数和类型不同而决定的。 $(#myImag

8、e).attr(alt); /返回字符串”An image” $(img).attr(alt,An new image); /则可以将所有当前页所有img标记的alt属性设置为”An new image” $(#myImage).removeAttr(alt) ; /代表移除id=myImage对象的alt属性,修改元素样式,$(img).addClass(css_class1)/ 为当前页面所有图像新增CSS类“css_class1”。 $(img).addClass(css_class1 css_class2)/为当前页面所有图像新增CSS类“css_class1”与“css_class2

9、”，多个类名之间用空格隔开。 $(img).removeClass(css_class1 css_class2)/为当前页面所有图像删除CSS类“css_class1”与“css_class2”。 $(img).hasClass(class1) ;/验证当前页面是否有图像包含CSS类“class1”，有则返回true，没有则返回false。,直接获取或设置样式,/为当前页所有图像新增一个宽度为1个像素的黑色实心边框$(img).css(border,1px solid #000) ;$(img).css(border:1px solid #000 , width:32px ,height:32

10、px); /设置单个样式 css(样式名,样式值); /设置多个样式,写在大括号内 css(样式名1:样式值1,样式名2:样式值2);,设置元素内容,方法：html()，获取元素集合中第一个元素的HTML内容。 方法：html(text)，把传入的HTML片段写入元素集合每个元素。 方法：text()，把元素集合中每个元素的文本内容连接起来后做为方法的返回值。 方法：text(content)，把元素集合每个元素的文本内容设置为指定值。,jQuery事件模型,$(img).bind(click,function(event)alert(Hi!);,$(img).unbind(click);,j

11、Query支持的事件名称,以下是jQuery为eventType参数所提供的20个事件名。,让页面生动起来,jQuery内置动画效果： 显示和隐藏 淡入和淡出 滑上和滑下,显示和隐藏,元素淡入与淡出,jQuery提供了使元素淡入与淡出的效果，分别对应了fadeIn()与fadeOut()方法，与显示/隐藏不同的是，淡入与淡出效果不改变元素大小，只是逐渐调整元素透明度达到显示与隐藏的效果。 方法：fadeIn(speed,callback) 元素淡入 方法：fadeOut(speed , callback) 元素淡出 两个方法的参数用法与show()/hide()方法完全相同，这里不再赘述。,元

12、素滑上与滑下,jQuery提供了元素滑上与滑下的效果，对应了slideDown()和slideUp()方法，与显示/隐藏不同的是，滑上与滑下效果只改变元素大小，让元素显示时像拉窗帘似的从顶部滑下来或者拉上去。 方法：slideDown(speed,callback) 元素滑下 方法：slideUp(speed , callback) 元素滑上 两个方法的参数用法与show()/hide()方法完全相同，这里不再赘述。,jQuery访问DOM对象,通过选择器获得的对象是jQuery对象，可以应用jQuery库提供的方法 如果需要应用DOM模型提供的方法需要将jQuery对象转成DOM对象 访问D

13、OM对象的语法 选择器.get(index); 选择器index;,相关实践15-1,案例：jQuery完成树状菜单的开发,相关实践15-2,在硬盘任意位置下新建tree目录，将以下文件复制到tree目录中。 close.gif、item.gif、opengif 图片资源 jquery-1.3.1.min.js jQuery库文件启动Dreamweaver，在tree目录下新建“tree.html”文件，定义页面HTML元素。 运行效果见右图。,相关实践15-3,实现树的展开与折叠 实现树状菜单展开/折叠的关键是对CSS属性“display”控制，当所有display属性值为“block”时便

14、显示树的子节点，为“none”则隐藏树的子节点。在当前页面，我们使用一个name属性为“container”的层包裹每棵树下的所有标记。只要将这个层的CSS属性“display”设置为“block”或“none”就可以实现菜单展开与折叠。,相关实践15-4,/展开与折叠树的代码如下： $document.ready(function()$(“ul label“).bind(click ,function()if($(this).parent().find(“div“).css(“display“) = “block“)$(this).parent().find(“div“).fadeOut(2

15、00);$(this).parent().find(“imgname=onoff“).attr(“src“,“close.gif“);else$(this).parent().find(“div“).fadeIn(200);$(this).parent().find(“imgname=onoff“).attr(“src“,“open.gif“);); ),相关实践15-5,当点击“展开/折叠”按钮时，将所有子节点显示/隐藏。同样，在页面初始化时，绑定按钮单击事件处理程序，程序判断当前页“name=container”层“display”属性值，如果是“block”值子节点就淡出消失，如果是“n

16、one”则淡入显示，对应图标也发生改变。,相关实践15-6,$(function()$(#openclose).bind(click,function()if($(“uldiv“).css(“display“) = “block“)$(“uldiv“).fadeOut(300);$(“imgname=onoff“).attr(“src“,“close.gif“);else$(“uldiv“).fadeIn(300);$(“imgname=onoff“).attr(“src“,“open.gif“); ); ),相关实践15-7,菜单默认以纵向排列，我们可以让它以横向排列，要做到这点很简单。只需

17、要设置的CSS属性“float”为“left”即可。,相关实践15-8,$(function()$(#horder).bind(click,function()$(li).css(float,“left“););$(#vorder).bind(click,function() $(li).css(float,“none“);) ),相关实践15-9,当鼠标移动到子节点上时，会动态显示小技巧(Tips)，提示我们可以点击就能查看相关信息。在书写HTML代码时，我们预留了一个”id=tips”的层，就是用来完成这个功能的，每当鼠标移动到子节点上时tips层显示，提示“点击这里查看关于子节点名的信息

18、”，当鼠标移开后隐藏这个层。,相关实践15-10,第一步，我们需要在块中新增美化tips层的CSS样式，我们要求该层拥有淡黄色背景且有细线边框。#tips position:absolute;z-index:1;border:1px solid #cccccc;background-color:#FFC;display:none;font-size:14px; ,相关实践15-11,第二步，在块中为所有子节点绑定mouseover与mouseout事件处理程序。,$(function()$(lilabel).bind(mouseover,function(event)$(#tips).css(

19、left:event.pageX +15, top:event.pageY + 10);$(#tips).show(500);$(#tips).text(“点击这里查看关于“ + $(this).text() + “的信息“););$(lilabel).bind(mouseout,function(event)$(#tips).hide();); );,相关实践15-12,为了用户有更好的使用体验，我们增加一些CSS效果，让鼠标移到所有节点上时鼠标指针变为“手指型”，并且在移动到子节点上时节点文字变为红色且带有点状下划线。,相关实践15-13,第一步，在块中加入以下CSS代码,ulcursor

20、:pointer; .limouseovercolor:#900;border-bottom:1px dotted #900 ,相关实践15-14,第二步，在块中加入JavaScript代码，当鼠标移到子节点上时，应用“limouseover”CSS类，移开后删除“limouseover”CSS类。,$(function()$(li label).bind(mouseover,function()$(this).addClass(limouseover););$(li label).bind(mouseout,function()$(this).removeClass(limouseover);); ),相关实践15-15,程序最终运行效果如下：,总结,jQuery选择器分类 基本选择器 子选择器 特征选择器 位置选择器 利用元素关系获取元素集合 $()是页面就绪程序 jQuery事件模型 的bind()与unbind()方法 常用jQuery元素的扩展方法 css() attr() addClass() text() html() 常用jQuery内置动画函数 show() hide() fadeIn() fadeOut() slideDown() slideUp(),