JavaScript与jQuery案例教程课件第7章.pptx

1、 第 7 章 jQuery基础前端开发课程组JavaScript与jQuery案例教程目标TARGET知识目标 了解 jQuery 库的特点和优势。理解 jQuery 工厂函数。掌握常用 jQuery 选择器。了解 jQuery 事件对象的属性和方法。掌握 jQuery 绑定事件、解除绑定和事件处理。目标TARGET技能目标 能搭建 jQuery 开发环境。能实现 jQuery 对象与 DOM 对象的转换。能使用常用选择器实现 jQuery 的应用。能熟练使用 jQuery 的链式操作 能使用 jQuery 控制页面元素，实现 DOM 元素的查找、过滤和属性操作。能实现节点的添加、删除、复制和

2、替换。能实现 jQuery 事件绑定、解除绑定、事件处理。能实现 jQuery 复合事件的应用。1 任务描述 2 jQuery 简介 3 jQuery 常用选择器的应用 5 jQuery 事件 4 jQuery 控制页面 6 任务实施1任务描述Part实现文字和图片提示效果 本任务是当鼠标移动到小图时，显示该图的大图片及图片的标题，如图所示，当鼠标在小图范围内移动时，提示图片跟随鼠标移动；当鼠标移出小图片时，提示的大图片不显示。任务描述：实现文字和图片提示效果2 jQuery 简介Part jQuery 环境配置 jQuery 应用的创建 jQuery 对象与 DOM 对象的转换 1 jQue

3、ry 环境配置 jQuery是 Web 开发领域最流行的 JavaScript 库之一，jQuery 是一款免费且开放源代码的轻量级 JavaScript 代码库。jQuery主旨是：以更少的代码，实现更多的功能，即(Write Less,Do More)。使用之前需要引用 jQuery 库文件。jQuery 库文件可以从 下载2 jQuery应用的创建 jQuery 程序中不管是页面元素的选择、内置的功能函数，都是美元符号“$”来起始的。而这个“$”就是 jQuery 当中最重要且独有的对象。$()等效于 jQuery()，称为 jQuery 工厂函数，它是 jQuery 的核心函数，使用工

4、厂函数$()可以将 DOM 元素转化为 jQuery 对象。使用$(document)将 DOM 元素 document 转化为 jQuery 对象，并调用 ready 方法指定 DOM 加载就绪时执行的函数。$(document).ready()是整个 jQuery 运行的核心。语法：$(document).ready(function()/代码段);$(function()/代码段);上述两种写法是一致的，第二种是第一种的简写方式，功能类似于 JavaScript 中的window.onload=function();但是JavaScript 中 onload 没有简写方式，jQuery的

5、方式执行效率高。可以执行多次，按照（代码中的）先后顺序依次执行；不会被覆盖。举例演示【例7-1】创建 jQuery 应用。【例7-3】jQuery 实现登录表单简单验证。【例7-2】jQuery 的隐式循环和链式书写。3 jQuery对象与DOM对象的转换 jQuery 对象就是通过 jQuery 包装 DOM对象后产生的对象，jQuery 对象实际上就是 DOM对象的一个集合。jQuery 对象是 jQuery 独有的，其可以使用 jQuery 里的方法.例如：document.getElementById(mydiv).innerHTML=你好！;使用 jQuery 可以写为：$(#myd

6、iv).html(你好！);/html()是 jQuery 对象的方法 jQuery 对象无法使用 DOM 对象属性方法，DOM 对象也无法使用 jQuery 对象属性DOM对象转换为 jQuery对象：只需要用$()将 DOM 对象包装起来，就可以获得 jQuery 对象-$(DOM 对象)var variable=document.getElementById(mydiv);/DOM 对象var$variable=$(variable);/jQuery 对象jQuery对象转换为DOM 对象：通过两种方式转换index和 get(index)3jQuery常用选择器的应用Part 基本选择

7、器 层次选择器 过滤选择器1 基本选择器 选择器是 jQuery 的根基,在 jQuery 中,对事件处理,遍历 DOM和 Ajax 操作都依赖于选择器。在操作之前，必先选中。jQuery 选择器允许对 HTML 元素组或单个元素进行操作。jQuery选择器基于元素的 id、类、类型、属性、属性值等“查找”（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头：$()。语法：$(选择器)基本选择器选择器描述css模式jQuery示例#id根据给定的id匹配一个元素#test$(#test)选取id为test的元

8、素.class根据给定的类名匹配元素.test$(.test)选取所有class为test的元素element根据给定的元素名匹配元素p$(p)选取所有的元素*匹配所有元素*$(*)选取所有的元素selector1,selector2,selectorN将每一个选择器匹配到的元素合并后一起返回div,span,p.myClass$(div,span,p.myClass)选取所有、和拥有class为myClass的标签的一组元素基本选择器是 jQuery 所有选择器的基础，是 jQuery 中使用最频繁的选择器，通过元素的id 属性、class 属性、标签名称进行选择。举例演示【例7-4】基本选

9、择器的应用：获取并设置所有元素的背景。【例7-5】基本选择器的应用：提示。2 层次选择器 层次选择器通过 DOM 元素之间的层次关系来获取元素，其主要层次关系包括后代、父子、相邻、兄弟关系。层次选择器选择器描述css模式jQuery示例$(a n c e s t o r descendant)选 取 a n c e s t o r 元 素 里 的 所 有descendant后代元素div span$(div span)选取里的所有的元素$(parentchild)选取parent元素下的child子元素，$(ancestor descendant)选择的是所有descendant子元素div

10、span$(div span)选取元素下元素名是的子元素$(prev+next)选取紧接在prev元素后的next元素.one+div$(.one+div)选取class为one的下一个元素$(prevsiblings)选取prev元素之后的所有siblings元素#two div$(#two div)选取id为two的元素后面的所有兄弟元素举例演示【例7-6】层次选择器的应用：获取并设置网页元素的文字颜色。【例7-7】网页选项卡的实现。举例演示 【例7-8】淘宝网选项卡的实现。3 过滤选择器 过滤选择器通过特定的过滤规则来筛选元素，语法特点是使用“:”，如使用$(li:first)来选取第一

11、个 li 元素，$(div:last)匹配最后一个 div 元素。基本过滤选择器是过滤选择器使用最广泛的一种。1.基本过滤选择器常用的基本过滤选择器选择器描述:first选取第一个元素$(tr:first):last选取最后一个元素$(tr:last):not(selector)去除所有与给定选择器匹配的元素$(input:not(:checked):even选取所有元素中偶数索引的元素，从 0 开始计数$(tr:even):odd选取所有元素中奇数索引的元素，从 0 开始计数$(tr:odd)常用的基本过滤选择器选择器描述:eq(index)选取指定索引的元素，如取得集合中的第二个元素$(d

12、iv.horizontal:eq(1):gt(index)选取索引大于指定index的元素$(tr:gt(0):lt(index)选取索引小于指定index的元素$(tr:lt(2):header选取所有的标题元素 如：h1,h2,h3$(:header):animated匹配所有正在执行动画效果的元素:focus选取当前获得焦点的元素举例演示 【例7-9】基本过滤选择器的应用。【例7-10】基本过滤选择器实现隔行变色。2 内容过滤选择器 内容过滤选择器根据元素中的文字内容或所包含的子元素获取元素。常用的内容过滤选择器选择器描述:contains(text)选取包含text文本内容的元素$(d

13、iv:contains(新);区分大小写:empty选取不包含子元素或者文本节点的空元素$(td:empty):has(selector)选取含有选择器所匹配的元素的元素$(div:has(p).addClass(test);:parent选取含有子元素或文本节点的元素$(td:parent)举例演示 【例7-11】内容过滤选择器实现包含大豆的单元格高亮。3 属性过滤选择器 属性过滤选择器根据元素的某个属性获取元素，如 ID 号或匹配属性值的内容，并以“”开始，以“”结束，其中表示值在字符串的开始,$表示值在字符串的结尾.*表示要匹配的值可以出现在字符串的任意位置,!表示对值取反等。常用的内容

14、过滤选择器选择器描述attribute选取拥有此属性的元素$(divid)attribute=value选取指定属性值为value的所有元素 attribute!=value选取属性值不为value的所有元素 attribute=value选取属性值以value开始的所有元素 attribute$=value选取属性值以value结束的所有元素 attribute*=value选取属性值包含value的所有元素 selector1 selector2selectorN复合性选择器，首先经selector1选择返回集合A，集合A再经过selector2选择返回集合B，集合B再经过selector

15、N选择返回结果集合 4表单过滤选择器 表单过滤选择器是选取表单元素的过滤选择器。常用的表单过滤选择器选择器描述:input选取所有、和元素:text选取所有的文本框元素:password选取所有的密码框元素:radio选取所有的单选框元素:checkbox选取所有的多选框元素:submit选取所有的提交按钮元素:image选取所有的图像按钮元素:reset选取所有重置按钮元素:button选取所有按钮元素:file选取所有文件上传域元素 5表单属性过滤选择器 表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素。常用的表单属性过滤选择器选择器描述:enabled匹配所有可用元素:dis

16、abled选取所有不可用的元素，如：$(inputtype=text:disabled)选择禁用的文本输入字段:checked匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)如：$(inputtype=radio:checked)选择所有选中的单选按钮:selected 选取所有被选中的选项元素（下拉框），如：$(select:selected).text();获取下拉框选中的内容:checkbox选取所有的多选框元素 举例演示 【例7-12】表单元素的获取。6可见度过滤选择器 可见度过滤选择器是根据元素的可见与不可见状态来选取元素。:hidden选取所有不可见

17、元素，匹配所有display:none、input hidden元素，如：$(tr:hidden)。:visible 选取所有可见的元素，如：$(tr:visible)。举例演示【例7-13】过滤选择器实现品牌列表。4 jQuery 控制页面Part DOM 元素的遍历 DOM 元素属性操作及节点添加 DOM 节点删除、复制和替换1 DOM元素的遍历jQuery 遍历函数包括了用于筛选过滤、查找和串联元素的方法。如表 所示。jQuery 遍历函数函数说明.add()将元素添加到匹配元素的集合中。.andSelf()把之前的元素集添加到当前集合中。.children()获得匹配元素集合中每个元素

18、的所有直接子元素。.closest()从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素，即被选元素的第一个祖先元素.contents()获得匹配元素集合中每个元素的子元素，包括文本和注释节点。:focus选取当前获得焦点的元素.each()对jQuery 对象进行迭代，为每个匹配元素执行函数。.end()结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。.eq()返回带有被选元素的指定索引号的元素。eq(index)获取第N个元素（index的值从0算起)如果index为负数，从最后一个元素向前计数$(p).eq(1)jQuery 遍历函数函数说明.filter(

19、)将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。.find()获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。.first()将匹配元素集合缩减为集合中的第一个元素。相当于eq(0)，如：$(li).first().has()将匹配元素集合缩减为包含特定元素的后代的集合。去掉那些不含有指定后代的元素。.is()根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。.last()将匹配元素集合缩减为集合中的最后一个元素。相当于.eq(-1)，如：$(li).last().map()把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象

20、。.next()获得匹配元素集合中每个元素紧邻的同辈元素。.nextAll()获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。.nextUntil()获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。.not()从匹配元素集合中删除元素。jQuery 遍历函数函数说明.offsetParent()获得用于定位的第一个父元素。.parent()获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。.parents()获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。.parentsUntil()获得当前匹配元素集合中每个元素的祖先元素，直

21、到遇到匹配选择器的元素为止。.prev()获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。.prevAll()获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。.prevUntil()获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。.siblings()获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。.slice()将匹配元素集合缩减为指定范围的子集。举例演示 【例7-14】DOM 元素的查找。【例7-15】DOM元素的过滤。2 DOM元素属性操作及节点添加 我们通常将 id,src,alt,class 等称为属性,即元素属

22、性。在jQuery中,提供了attr函数来操作元素属性,具体如表所示。1.元素属性操作jQuery attr 函数说明函数说明attr(name)取得第一个匹配元素的属性值.如：$(input).attr(value)attr(property)将一个名/值形式的对象设置为所有匹配元素的属性.如：$(input).attr(value:txt,title:text);attr(key,value)为所有匹配的元素设置一个属性值.如：$(input).attr(value,txt);attr(key,fn)为所有匹配的元素设置一个计算的属性值.如：$(input).attr(title,func

23、tion()return this.value);获取和设置函数说明函数说明val()获取第一个匹配元素的value值.如：$(#txt1).val()val(val)为匹配的元素设置value值.如：$(#txt1).val(txt1)html()获取第一个匹配元素的html内容.如：$(#dv1).html()html(val)设置每一个匹配的元素的html内容.如：$(#dv1).html(this is a div)text()取得所有匹配文本节点的内容,并将其连接起来.如：$(div).text()text(val)将所有匹配元素的置为val.如：$(div).text(divs)j

24、Query 操作 CSS 常用的方法函数说明addClass(classes)为每个匹配的元素添加指定的类名.如：$(input).addClass(colorRed borderBlack);.hasClass()检 查 当 前 的 元 素 是 否 含 有 某 个 特 定 的 类，如 果 有 则 返 回 t r u e.如：alert($(input).hasClass(borderBlack);removeClass(classes)从匹配元素中移除所有或指定的css类.如：$(input).removeClass(colorRed borderBlack);toggleClass(cla

25、sses)如果存在(不存在)就删除(添加)指定类.如：$(input).toggleClass(colorRed borderBlack);css(name)访问第一个匹配元素的样式属性.如：$(input).css(color)css(properties)把 一 个 名/值 对 设 置 给 所 有 匹 配 元 素 的 样 式 属 性.如：$(input).css(border:solid 3px silver,color:red)css(name,value)为匹配的元素设置同一个样式属性,如果是数字,将自动转换为像素值.如：$(input).css(border-width,5);jQu

26、ery 处理尺寸方法及说明函数说明width()设置或返回元素的宽度（不包括内边距、边框或外边距）。$(#div1).width()返回300height()设置或返回元素的高度（不包括内边距、边框或外边距）。$(#div1).height()返回100innerWidth()innerWidth()方法返回元素的宽度（包括内边距）。$(#div1).innerWidth()返回320innerHeight()innerHeight()方法返回元素的高度（包括内边距）。$(#div1).innerHeight()返回120outerWidth()outerWidth()方法返回元素的宽度（包括

27、内边距和边框）。$(#div1).outerWidth()返回322outerHeight()outerHeight()方法返回元素的高度（包括内边距和边框）。$(#div1).outerHeight()返回1222节点插入节点插入 创建元素可以使用工厂函数$(html,props)，参数 html 是用于动态创建 DOM 元素的HTML 标记字符串；参数 props 是用于附加到新创建元素上的属性、事件和方法。如下：$(你好，jQuery).appendTo(body);jQuery 元素插入方法函数说明$node.append($newNode)向每个匹配的元素内部的结尾处追加新元素。$n

28、ewNode.appendTo($node)将新元素追加到每个匹配元素内部的结尾处。$node.prepend($newNode)向每个匹配的元素内部的开始处追加新元素。$newNode.prependTo($node)将新元素追加到每个匹配元素内部的开始处。$node.after($newNode)向每个匹配的元素的之后插入内容，是并列兄弟。$newNode.insertAfter($node)将新元素插入到每个匹配元素之后，是并列兄弟。$newNode.before($node)向每个匹配的元素的之前插入内容，是并列兄弟。$node.insertBefore($newNode)将新元素插入

29、到每个匹配元素之前，是并列兄弟。举例演示 【例7-16】内部插入。【例7-17】外部插入。3 DOM节点删除、复制和替换$(p).remove(.hello);删除所有 class 属性值为 hello 的 p 元素，还有它下面的所有元素。该方法返回被删除节点的引用，该方法删除节点后，连同节点的事件也删除了。$(p).empty();从被选元素移除所有内容，包括所有文本和子节点。使用 detach 方法删除的节点，会保留原有的事件，该方法返回被删除节点的引用。1.删除节点举例演示【例7-18】删除节点。【例7-19】empty()、remove()、detach()方法的区别。复制节点：$(p

30、).clone();/返回节点克隆后的副本，但不会克隆原节点的事件。$(p).clone(true);/克隆节点，保留原有事件。替换节点：$(p).replaceWith(ITCAST);/将所有 p 元素，替换为ITCAST。$(ITCAST).replaceAll(p);/与 replaceWith 相反 被替换的在后面。2.复制和替换节点复制和替换节点举例演示5 jQuery 事件 Part 事件绑定与解除 复合事件1 事件绑定与解除 页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。在 jQuery 中，大多数 DOM 事件都有一个等效的 j

31、Query 方法。页面中指定一个点击事件：$(p).click();事件处理程序可以通过一个函数调用实现：$(p).click(function()/动作触发后执行的代码!);可以.bind()方法来为元素绑定事件。bind()方法将一个处理程序附加到每个匹配元素的事件上并返回 jQuery 对象。语法：bind(type,data,fn)1.事件绑定 unbind()方法：将先前附加的事件处理程序从元素上移除并返回 jQuery 对象。使用 bind方法附加的任何事件都可以使用 unbind 移除。语法：unbind(type,fn)2.事件解除绑定 one()方法：将事件处理程序附加到匹配

32、元素的指定事件并返回 jQuery 对象。所附加的事件处理程序最多只能执行一次，之后将自动取消绑定。参数说明和 bind 一样。语法：one(type,data,fn)$(.button).one(click,function()/仅一次事件触发 alert(仅一次事件触发！););3.one()举例演示$(.button).on(click,function()alert(替代.bind(););$(.button).off(click);/替代.unbind()方式，移除事件 如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，就会出现冒泡问题，可以使用 stopPropag

33、ation 方法或 return false 阻止冒泡。4.on()方法可以替代bind()方法举例演示【例7-20】随着鼠标的移动使图像明亮或模糊。2 复合事件 复合事件 hover(over,out)当鼠标移入一个匹配的元素时，触发指定的第一个函数；当鼠标移出该元素时，触发指定的第二个函数。伴随着对鼠标是否仍然处在特定元素中的检测，如果是，则会继续保持“悬停”状态，而不触发移出事件。举例演示【例7-21】hover(over,out)实现菜单效果。【例7-22】焦点行高亮效果实现。6任务实施Part实现文字和图片提示效果【演示】本任务是采用 HTML+CSS 的布局方式，结合 jQuery 方法，实现小图获得焦点就显示对应大图的效果，如图所示。举例演示谢谢多一点努力,多一点实践,多一点点就能创造奇迹!