HTML5教案第26讲 jQuery基础-3doc

web前端开发jQuery基础（教案）教学内容及教学过程说明步骤一问题引入jQuery的文档非常丰富，因为其轻量级的特性，文档并不复杂，随着新版本的发布，可以很快被翻译成多种语言，这也为jQuery的流行提供了条件。问题1：jQuery最有特色的语法特点？回答1：。问题2：jQuery的核心特性？回答2：。步骤二讲授7.1jQuery事件7.1.1事件冒泡事件冒泡是指在一个对象上触发某类事件（比如onclick事件），如果次对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。事件冒泡的作用，事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让用户在对象层的不同级别捕获事件。事件冒泡通常用到事件委托上，事件委托就是把事件加到父级上，通过判断事件来源的子集执行相应的操作。事件委托首先可以极大地减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。比如，div中又包含子div时，当单击子div时，同时也会单击父div和body的单击事件，因此会按照子div、父div和body的顺序相应单击事件。冒泡事件可能引发的问题有。（1）事件对象。由于IE-DOM和标准DOM实现事件对象的方法各不相同，导致在不同的浏览器中获取事件对象变得比较困难，针对这样的问题，jQuery进行必要的扩展和封装，从而能更轻松地获取事件和事件对象，$("element").bind("click",function(event){})。（2）停止事件冒泡，停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行，在jQuery中stopPropagation()方法来停止事件冒泡，$('span').bind('click',function(event){vartxt=$("#msg").html()+"<span>停止事件冒泡</span>";$("#msg").html(txt);event.stopPropagation();})。（3）阻止默认行为，preventDefault()方法来阻止元素的默认行为。（4）事件的捕获，事件的捕获和冒泡事件刚好是两个相反的过程，事件的捕获是从最顶部开始的。并非是所有的浏览器都支持事件的捕获，也无法通过javasc进行修复，只能使用原生态的JavaScript。7.1.2事件解除unbind()方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。ubind()适用于任何通过jQuery附加的事件处理程序。unbind()规定从指定元素上删除的一个或多个事件处理程序。如果没有规定参数，unbind()方法会删除指定元素的所有事件处理程序。其基本语法如下。$(selector).unbind(event,function)event：可选。规定删除元素的一个或多个事件，由空格分隔多个事件值。如果只规定了该参数，则会删除绑定到指定事件的所有函数。function：可选。规定从元素的指定事件取消绑定的函数名。7.2jQuery效果7.2.1jQuery容器适应由于电子产品的多样化，尤其是电子屏幕的尺寸多样化，在网站设计过程中总是希望无论使用的是哪种设备浏览到的网页样式区别不大。设计元素尺寸(HTML元素)时根据不同的窗口尺寸按照比例来扩大或者缩小元素尺寸，在本小节中会介绍如何选取窗口的宽度和高度(即浏览器窗口)的大小。获取元素的宽度和高度的三种方法如下。$(选择器).width()|innerWidth()|outerWidth();$(选择器).height()|innerHeight()|outerHeight();7.2.2隐藏和显示在jQuery中，可以使用hide()和show()方法，及toggle()来隐藏和显示HTML元素，hide()方法将显示的元素隐藏，show()方法是将隐藏的元素显示在页面，toggle()方法是把元素在隐藏和显示之间切换。其基本语法如下。$(selector).hide(speed,callback);$(selector).show(speed,callback);$(selector).toggle(speed,callback);可选的speed参数规定隐藏/显示的速度，可以取：slow、fast或毫秒。可选的callback参数是隐藏或显示完成后所执行的函数名称。7.2.3jQuery滑动通过jQuery，可以在元素上创建滑动效果。jQuery拥有以下滑动方法：slideDown()；slideUp()；slideToggle()方法。其中slideDown()方法用于向下滑动元素，slideUp()方法用于向下滑动元素，slideToggle()方法在slideDown()方法与slideUp()方法之间进行切换。也就是说，如果元素向下滑动，则slideToggle()可向上滑动它们。如果元素向上滑动，则slideToggle()可向下滑动它们。其基本语法如下。$(selector).slideDown(speed,callback);$(selector).slideUp(speed,callback);$(selector).slideToggle(speed,callback);可选的speed参数规定效果的时长。它可以取slow、fast或毫秒。可选的callback参数是滑动完成后所执行的函数名称。7.2.4jQuery淡入与淡出通过jQuery，可以实现元素的淡入淡出效果，jQuery拥有下面四种fade方法：fadeIn()，fadeOut()，fadeToggle()，fadeTo()。其中fadeIn()用于淡入已隐藏的元素；fadeOut()方法用于淡出可见元素；fadeToggle()方法可以在fadeIn()与fadeOut()方法之间进行切换。如果元素已淡出，则fadeToggle()会向元素添加淡入效果。如果元素已淡入，则fadeToggle()会向元素添加淡出效果；fadeTo()方法允许渐变为给定的不透明度（值介于0与1之间）。其基本语法如下。$(selector).fadeIn(speed,callback);$(selector).fadeOut(speed,callback);$(selector).fadeToggle(speed,callback);$(selector).fadeTo(speed,opacity,callback);7.2.4jQuery动画jQuery中上面的效果有时很难满足要求，也可以利用animate()方法创建自定义动画。这个函数利用设置CSS属性的方法改变元素外观样式实现动画效果。根据CSS样式规则中属性和属性值的对应方法相同，因此动画参数设置可以采用json串的方法。其基本语法如下。$(selector).animate({params},speed,callback);必需的params参数定义形成动画的CSS属性。可选的speed参数规定效果的时长。它可以取slow、fast或毫秒。可选的callback参数是动画完成后所执行的函数名称。注意：当使用animate()方法时，必须使用camel标记法书写所有的属性名，比如，必须使用paddingLeft而不是padding-left，使用marginRight而不是margin-right，等等，同时，色彩动画并不包含在核心jQuery库中。7.3AJAX实现异步请求操作7.3.1jQuery中AJAX语法ajax()方法用于执行AJAX（异步HTTP）请求。所有的jQueryAJAX方法都使用ajax()方法。该方法通常用于其他方法不能完成的请求。其基本语法如下。$.ajax({name:value,name:value,...})该参数规定AJAX请求的一个或多个名称/值对。常见参数如下。url：规定发送请求的URL，默认是当前页面。type：规定请求的类型（GETPOST）。data：规定要发送到服务器的数据。dataType：预期的服务器响应的数据类型。success(result,status,xhr)：当请求成功时运行的函数。方法 描述$.ajax() 执行异步AJAX请求$.get() 使用AJAX的HTTPGET请求从服务器加载数据$.getJSON() 使用HTTPGET请求从服务器加载JSON编码的数据$.getScript() 使用AJAX的HTTPGET请求从服务器加载并执JavaScript$.param() 创建数组或对象的序列化表示形式（可用于AJAX请求的URL查询字符串）$.post() 使用AJAX的HTTPPOST请求从服务器加载数据load() 从服务器加载数据，并把返回的数据放置到指定的元素中步骤三课堂小结1．jQuery