Web前端开发（JavaScript+jQuery）课件 项目4 Web前端技术_第1页
Web前端开发（JavaScript+jQuery）课件 项目4 Web前端技术_第2页
Web前端开发（JavaScript+jQuery）课件 项目4 Web前端技术_第3页
Web前端开发（JavaScript+jQuery）课件 项目4 Web前端技术_第4页
Web前端开发（JavaScript+jQuery）课件 项目4 Web前端技术_第5页
已阅读5页，还剩38页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web前端技术

jQuery目录jQuery选择器4.24.1jQuery基础jQuery动画效果4.3☞点击查看本小节知识架构☞点击查看本小节知识架构jQuery事件机制4.4☞点击查看本小节知识架构☞点击查看本小节知识架构

4.1jQuery基础4.1.1

什么是jQuery？jQuery是一款快速、轻巧而功能丰富的JavaScript库。特点和优势：简化的DOM操作事件处理动画和效果Ajax支持跨浏览器兼容性插件开发简洁的语法4.1.2

网页中如何添加jQuery有两个版本的jQuery可供下载：Productionversion-用于实际的网站中，已被精简和压缩。Developmentversion-用于测试和开发（未压缩，是可读的代码）在HTML文档中使用<script>标签引入jQuery文件。本地文件引入<!--下载的jQuery文件应该在相应的路径下--><scriptsrc="path/to/jquery.min.js"></script>4.1.2

网页中如何添加jQuery在HTML文件的<head>部分添加一个指向jQuery库的<script>标签，通过CDN（内容分发网络）引用它。示例：

百度引用的方法。2.通过CDN引入动手实践：我的第一个jQuery程序创建HTML页面，在HTML文档中使用<script>标签引入jQuery文件。1.创建HTML页面<scriptsrc="jquery-1.12.4.js"></script>动手实践：我的第一个jQuery程序2.书写jQuery代码<script>$(document).ready(function(){ alert("欢迎来到jQuery课堂"); });</script>

4.2jQuery选择器4.2.1jQuery语法在jQuery中，基础语法始于定义$，表示jQuery的开始，紧随其后的是选择器，用于指定操作的HTML标签。示例：$(this).hide()//隐藏当前元素$("p").hide()//隐藏所有<p>元素$("p.test").hide()//隐藏所有class="test"的<p>元素$("#test").hide()//隐藏所有id="test"的元素4.2.2

文档就绪事件所有jQuery函数位于一个documentready函数中。$(document).ready(function(){//开始写jQuery代码...});$(function(){//开始写jQuery代码...});简洁写法4.2.3jQuery选择器基本选择器选择器语法用途*选择器$(*)*选择器选取文档中的每个单独的元素，如果与其他元素（如嵌套选择器）一起使用，该选择器选取指定元素中的所有子元素。元素选择器$(“element”)元素选择器基于元素名选取元素。ID选择器$("#id")id选择器通过HTML元素的id属性选取指定的元素。类选择器$(".class")类选择器可以通过指定的class查找元素。复合选择器$(“selector1,selector2,selectorN”)复合选择器是将多个选择器组合在一起，可以是ID选择器、类选择器或者元素选择器，它们之间用逗号隔开，只要复合其中的任何一个条件，就会匹配，并以集合的形式返回jQuery包装集。4.2.3jQuery选择器2.层级选择器选择器描述selectorselector1后代选择器，根据祖先元素（selector）匹配所有的后代元素（selector1）parent>child子元素选择器（也叫父子选择器），根据父元素匹配所有的子元素pre+next相邻选择器，匹配pre元素紧邻的兄弟元素pre~siblings兄弟选择器，匹配pre素后的所有兄弟元素4.2.3jQuery选择器3.过滤选择器基本过滤选择器：选择器描述返回:first选取第一个元素单个元素组成的集合:last选取最后一个元素集合元素not(selector)去除所有与给定选择器匹配的元素集合元素:even选取索引时偶数的所有元素，索引从0开始集合元素:odd选取索引时奇数的所有元素，索引从0开始集合元素:eq(index)索引从0开始选取索引等于index的元素，索引从0开始集合元素:gt(index)选取索引大于index的元素，索引从0开始集合元素:it(index)选取索引小于index的元素，索引从0开始集合元素:header选取所有的标题元素，如：h1，h2等集合元素:animated选取当前正在执行动画的所有元素集合元素4.2.3jQuery选择器3.过滤选择器内容过滤选择器：选择器描述返回:contains(text)选取含有文本内容为text的元素集合元素:empty选取不包含子元素或者文本的空元素集合元素:has(selector)选取含有选择器所匹配的的元素的元素集合元素:parent选取含有子元素或者文本的元素集合元素4.2.3jQuery选择器3.过滤选择器属性过滤选择器：选择器描述返回[attribute]选取拥有此属性的元素集合元素[attribute=value]选取指定属性的值value的元素集合元素[attribute!=value]选取指定属性的值不等于value的元素集合元素[attribute^=value]选取指定属性的值以value开始的元素集合元素[attribute$=value]选取指定属性的值以value结束的元素集合元素[attribute*=value]选取指定属性的值含有value的元素集合元素[selector1][selector2]...[selectorN]用属性选择器合并成一个复合属性选择器，满足多个条件.每选择一次，缩小一次范围集合元素[attribute]选取拥有此属性的元素集合元素4.2.3jQuery选择器3.过滤选择器子元素过滤选择器：选择器描述返回nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素（index从1算起）集合元素:first-child选取每个父元素的第一个子元素集合元素:last-child选取每个父元素的最后一个子元素集合元素:only-child如果某个元素是它父元素中唯一的子元素，那么将被匹配.集合元素4.2.3jQuery选择器3.过滤选择器表单选择器：选择器描述返回:input选取所的<input>，<textarea>，<select>，和<button>元素集合元素:text选取所有的单行文本框集合元素:password选取所有的密码框元素集合元素:radio选取所有的单选框集合元素:checkbox选取所有的多选框集合元素:submit选取所有的提交按钮集合元素:image选取所有的图像按钮集合元素:reset选取所有的重置按钮集合元素:button选取所有的按钮集合元素:file选取所有的上传域集合元素:hidden选取所有的不可见元素集合元素动手实践：动态导购菜单的制作使用jQuery代码，实现一个动态商品切换的效果。1.布局分析动手实践：动态导购菜单的制作创建一个大的box，然后分别在其中div中创建一个无序列表；新建CSS样式表，添加修饰，使三个div元素在同一水平上显示；引入jQuery函数库，添加jQuery函数，实现鼠标经过时的动态切换效果。2.页面实现动手实践：动态导购菜单的制作2.页面实现//部分jQuery函数代码<script>$(function(){//就绪函数 //为左侧的列表中的li添加鼠标进入的事件 $("#left>li").mouseover(function(){ varidx=$(this).index(); $("#center>li").eq(idx).siblings('li').hide(); $("#center>li").eq(idx).show(); }); });</script>

4.3jQuery动画效果4.3.1jQuery基本动画效果获取id=hide的隐藏按钮,并给它一个单击click()事件，在click（）函数中输入响应事件的hide()函数，完成隐藏效果。1.hide()函数$("#hide").click(function(){$("p").hide("2000");});4.3.1jQuery基本动画效果让隐藏起来的图片显示出来，需要用到show()函数。用法与hide()函数相同，其参数的运用也一样。2.显示与隐藏效果的实现$("#show").click(function(){$("p").show("slow");});4.3.1jQuery基本动画效果实现隐藏和显示之间的切换需要用到状态切换函数。$(selector).toggle(speed,callback)3.切换效果的实现$(document).ready(function(){$("button").click(function(){$("p").toggle("2000");});});4.3.2淡入淡出动画效果在jQuery中实现淡入淡出效果的方法主要有fadeIn()、fadeout()、fadeToggle()、fadeTo()。 $(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); $(selector).fadeToggle(speed,callback); $(selector).fadeTo(speed,opacity,callback);4.3.3滑动效果jQuery动画效果中的滑动效果，主要是通过高度的变化动态切换元素的可见性，jQuery中用于创建滑动效果的方法有：slidDown()、slidUp()、slidToggle()。 $(selector).slideDown(speed,callback); $(selector).slideUp(speed,callback); $(selector).slideToggle(speed,callback);4.3.4自定义动画在jQuery中，使用animate()方法来自定义动画。params:必须参数，是一个包含样式属性及值的映射；speed:速度参数，可选；callback:在动画完成时执行的函数，也是可选参数。$(selector).animate({params},speed,callback);动手实践：我的第一个jQuery程序1.基本结构分析通过jQuery实现图片切换效果。图片会4秒钟切换一次，也可以自己单击数字，让图片进行切换，当前显示的图片所对应的数字上会有红色样式。动手实践：我的第一个jQuery程序2.切换效果实现设置图片之间的切换显示，即一张图片淡出的同时另一张图片淡入，图片切换，对应的数字和红色样式也会随着切换。$("#banner_lista").filter(":visible").fadeOut(1000).parent().children().eq(i).fadeIn(1000);document.getElementById("banner").style.background="";$(this).toggleClass("on");$(this).siblings().removeAttr("class");})

4.4jQuery事件机制4.4.1jQuery事件方法jQuery中事件方法一般与事件名称相同。例如单击事件click，对应的事件方法就是click（）方法。$("p").click(function(){//动作触发后执行的代码});4.4.2jQuery事件方法鼠标事件是指用户在单击鼠标或者移动鼠标时触发的事件。1.鼠标事件类别事件方法含义鼠标事件click()触发或将函数绑定到指定元素的click事件（单击鼠标的按键）dbclick()触发或将函数绑定到指定元素的dbclick事件（双击鼠标的按键）mousedown()触发或将函数绑定到指定元素的mousedown事件（鼠标的按键被按下）mouseup()触发或将函数绑定到指定元素的mouseup事件（鼠标的按键被释放弹起）mouseenter()触发或将函数绑定到指定元素的mouseenter事件（当鼠标指针进入目标时）mouseleave()触发或将函数绑定到指定元素的mouseleave事件（当鼠标指针离开目标时）mouseover()触发或将函数绑定到指定元素的mouseover事件（鼠标移到目标的上方或其子元素上）mouseout()触发或将函数绑定到指定元素的mouseout事件（鼠标移出目标的上方或任何子元素）mousemove()触发或将函数绑定到指定元素的mousemove事件（鼠标在目标的上方移动）4.4.2jQuery事件方法在通常的键盘事件中有keydown()、keypress()和keyup()。完整的按键过程应该分为两个步骤，按键被按下，然后按键被松开并复位，这里就触发了keydown()和keyup()。2.键盘事件类别事件方法含义键盘事件keydown()触发、或将函数绑定到指定元素的keydown事件keypress()触发、或将函数绑定到指定元素的keypress事件keyup()触发、或将函数绑定到指定元素的keyup事件4.4.2jQuery事件方法焦点事件包括获得焦点foucs()事件和失去焦点blur()事件。3.焦点事件$(document).ready(function(){$("input").focus(function(){$("input").css("background-color","yellow");});//获得焦点，背景颜色为黄色$("input").blur(function(){$("input").css("background-color","red");});//失去焦点，背景颜色为红色

});4.4.2jQuery事件方法当元素的值发生改变时，我们可以使用change事件。该事件仅适用于input、textarea、select等元素。4.改变事件$(document).ready(function(){$(".field").change(function(){$(this).css("background-color","#FF6600");});});4.4.2jQuery事件方法在jQuery中常用的绑定函数有on()、

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论