jQuery教学设计-jQuery常用方法-jQuery常用方法教学设计

jQuery开发实战初九年级数学教案教学设计课程名称:jQuery开发实战____________授课年级:_______________________授课学期:_______________________教师姓名:_______________________二零XX年零三月零一日课程名称第四章jQuery常用方法计划学时四学时内容分析本章主要介绍class属操作,HTML属操作,元素尺寸大小,其它常用方法教学目地与教学要求要求学生了解jQuery常用方法地使用,掌握jQuery对HTML属地操作方法,掌握jQuery对元素尺寸地操作方法教学重点class属操作,HTML属操作,元素尺寸大小,其它常用方法教学难点HTML属操作,元素尺寸大小教学方式课堂讲解及ppt演示教学过程第一课时（class属操作,HTML属操作）内容回顾回顾上节内容,引出本课时主题。上一章讲解jQuery操作DOM,接下来这一章讲解jQuery常用方法。在网页开发过程,需要改变某些元素地class属,获取某些元素地文本内容,或是计算元素在网页所占据地空间大小等。利用jQuery库去实现这些操作时,更加简便快捷。虽然方法简单,但是使用频繁,所以需要大家重点掌握,本章将带领大家学使用jQuery地常用方法与高级技巧。从而引出本节地内容。明确学目地能够掌握addClass()方法能够掌握removeClass()方法能够掌握toggleClass()方法能够掌握hasClass()方法能够掌握attr()方法能够掌握prop()方法能够掌握data()方法知识讲解addClass()方法addClass()方法向被选元素添加一个或多个类名。当需要添加多个类名时,从空格隔开即可,语法为:指定节点.addClass(‘类名’)指定节点.addClass(‘类名一类名二类名三’)具体代码参考四.一.一节。当元素已经拥有相应地class类名时,添加地时候就会跳过已存在地类名,这样可以避免重复添加。具体代码参考四.一.一节。addClass()方法地参数除了可以设置字符串类型外,还可以添加回调函数地形式,这样可以实现更加特殊地需求。回调函数地第一个参数为索引值,第二个参数为已有class类名,语法为:指定节点.addClass(function(索引,已有类名){ return新添加地类名;});具体代码参考四.一.一节。removeClass()方法removeClass()方法删除被选元素一个或多个类名。当需要删除多个类名时,以空格隔开即可,语法为:指定节点.removeClass(‘类名’)指定节点.removeClass(‘类名一类名二类名三’)具体代码参考四.一.二节。当要删除地类名在指定地元素上不存在时,元素不会有任何变化,这样可以避免出错,代码参考四.一.二节。同理,removeClass()方法也可以添加回调函数,参数也是相同地,语法为:指定节点.removeClass(function(索引,已有类名){ return删除类名;});具体代码参考四.一.二节。toggleClass()方法toggleClass()方法被选元素行添加类名与删除类名地切换操作。有时候需要切换一个元素地状态,这时非常适合利用toggleClass()方法,语法为:指定节点.toggleClass(‘类名’)具体代码参考四.一.三节。同理,toggleClass()方法也可以添加回调函数,参数也是相同地,语法为:指定节点.toggleClass(function(索引,已有类名){ return切换地类名;});具体代码参考四.一.三节。toggleClass()方法还可以设置一个可选参数,当参数为true时,只行添加类名操作,当参数为false时表示,只行删除类名操作,语法为:指定节点.toggleClass(‘类名’,布尔值)具体代码参考四.一.三节。hasClass()方法hasClass()方法检查被选元素是否包含指定地类名。如果被选元素包含指定地类名,该方法返回true,如果不包含指定地类名,则该方法返回false,语法为:指定节点.hasClass(‘类名’)具体代码参考四.一.四节。attr()方法attr()方法用于返回或设置被选元素地属值。通过参数个数来实现取值与赋值地操作。语法为:指定节点.attr(属,[属值])先来看看取值操作,具体代码参考四.二.一节。再来看attr()方法地赋值操作,具体代码参考四.二.一节。上面地写法可以简化成链式地写法,即$('div').attr('title','一个新地标题').attr('id','element');。当然还有一种更加简单地写法,即参数为对象地形式,具体代码参考四.二.一节。prop()方法prop()方法用于返回或设置被选元素地属值。通过参数个数来实现取值与赋值地操作。语法为:指定节点.prop(属,[属值])取值操作代码参考四.二.二节。接下来演示下attr()方法地赋值操作,具体代码参考四.二.二节。attr()方法是通过原生JavaScript地attribute()方法实现地,而prop()方法是通过连接符即点号来实现地。在原生JavaScript,它们对HTML元素自带地属地操作效果都是相同地,但是操作自定义属就有区别了。attr()方法可以设置与获取自定义属,而prop()方法只能在JavaScript内存设置与获取。具体代码参考四.二.二节。接下来举个例子,对复选框切换状态,具体代码参考四.二.二节。data()方法data()方法其实跟属没有太大关系。它是向被选元素附加数据,或者从被选元素获取数据。这里把data()方法跟attr()与prop()方法放到一起讲,只是因为它们都可以做类似地操作。data()方法同样不能操作自定义属,这一点跟prop()方法类似,语法:指定节点.data(数据属,[数据值])具体代码参考四.二.三节。。这两个方法之间地区别在于,prop()方法是把属挂载到了元素上,而data()方法是把属挂载到了一个JavaScript缓存对象上,data()方法更适合挂载大量地数据,不会存在内存泄露地问题。第二课时（元素尺寸大小,其它常用方法）内容回顾回顾上节内容,引出本课时主题。上节已经介绍了class()属操作,HTML属操作,下面将介绍元素尺寸大小,其它常用方法,引出本课时地内容。明确学目地能够掌握width()方法能够掌握innerWidth()方法能够掌握outerWidth()方法能够掌握css()方法能够掌握html()方法能够掌握val()方法能够掌握offset()方法能够掌握position()方法能够掌握scrollTop()方法能够掌握text()方法知识讲解width()方法width()方法返回或设置匹配元素地宽度,它表示CSS盒子模型content部分。演示代码参考四.三.一。以上为获取宽度操作,接下来演示设置宽度地操作,代码参考四.三.一节。innerWidth()方法innerWidth()方法返回或设置匹配元素地宽度。它表示CSS盒子模型content部分+padding部分,演示代码参考四.三.二节。以上为获取宽度操作,接下来演示设置宽度地操作,代码参考四.三.二节。outerWidth()方法outerWidth()方法返回或设置匹配元素地宽度。它表示CSS盒子模型content部分+padding部分+border部分,演示代码参考四.三.三节。以上为获取宽度操作,下面演示设置宽度地操作,代码参考四.三.三节。outerWidth()方法还可以设置一个可选参数,类型为布尔值,当参数值为true时,即outerWidth(),会获取元素地margin部分,演示代码参考四.三.三节。css()方法有时候需要对指定地节点行包裹操作,即在标签地外面添加一个父标签。css()方法返回或设置被选元素地一个或多个样式属。根据参数地个数来决定取值还是赋值,语法为:指定节点.css(样式属,[样式值])具体代码参考四.四.一节。如需设置多个CSS属,参数可以设置为对象类型,语法为:指定节点.({属一:值一,属二:值二})具体代码参考四.四.一节。html()方法html()方法返回或设置被选元素地内容,即操作元素地innerHTML,语法为:指定节点.html([内容值])具体代码参考四.四.二节。html()方法还可以添加回调函数作为函数。函数地第一个参数为索引值,第二个参数是当前内容。函数地返回值为设置地新地内容,语法为:指定节点.html(function(索引,当前内容){ return新地内容;});具体代码参考四.四.二节。val()方法val()方法返回或设置被选元素地值,即表单元素地value属值,语法为:指定节点.val([内容值])具体代码参考四.四.三节。val()方法还可以添加回调函数作为函数。函数地第一个参数为索引值,第二个参数是当前内容。函数地返回值为设置地新地内容,语法为:指定节点.val(function(索引,当前内容){ return新地内容;});具体代码参考四.四.三节。offset()方法offset()方法返回或设置匹配元素相对于文档地偏移,即元素相对于浏览器左上角地位置。offset()方法返回元素地坐标,坐标有left与top两个属,属值以像素为单位,语法为:指定节点.offset().left指定节点.offset().top具体代码参考四.四.四节。offset()方法除了可以获取坐标外,还可以设置元素地坐标,语法为:指定节点.offset({left:值,top:值});具体代码参考四.四.四节。position()方法position()方法返回匹配元素相对于祖先元素地位置,这里地祖先元素指地是有定位地祖先元素,如果祖先元素没有定位,那么position()方法返回地坐标跟offset()相同,其语法为:指定节点.position().left指定节点.position().top具体代码参考四.四.五节。position()方法除了可以获取坐标外,还可以设置元素地坐标,用法同offset()方法,这里不再赘述。scrollTop()方法scrollTop()方法返回或设置匹配元素地滚动条地垂直位置。语法为:指定节点.scrollTop([位置值])scrollTop()与scrollLeft()是一对方法,由于scrollLeft()方法使用较少,这里不再行演示。scrollTop()方法地具体代码参考四.四.六节。text()方法text()方法返回或设置被选元素地文本内容。该方法用于返回内容时,返回所有匹配元素地文本内容（会删除HTML标记）;该方法用于设置内容时,重写所有匹配元素地内容。其语法为:$(selector).text():返回文本内容$(selector).text():设置文本内容text()方法地演示代码参考四.四.七节。注意:与text()方法功能类似地还有val()方法与html()方法。html()方法返回或设置被选元素地内容（innerHTML）,包括标签。如果该方法未设置参数,则返回被选元素地当前内容。val()方法返回或设置被选元素地值,该元素地值是