HTML5教案第25讲 jQuery基础-2doc

web前端开发jQuery基础（教案）教学内容及教学过程说明步骤一问题引入jQuery的文档非常丰富，因为其轻量级的特性，文档并不复杂，随着新版本的发布，可以很快被翻译成多种语言，这也为jQuery的流行提供了条件。问题1：jQuery最有特色的语法特点？回答1：。问题2：jQuery的核心特性？回答2：。步骤二讲授7.1jQuery与HTML7.1.1添加HTML元素四种方法介绍如下。append()方法在被选中元素内部的结尾处增加新的元素。上例中，采用append方法将“冰红茶”列表项添加到无序列表中“橙汁”的后面。prepend()方法在被选中元素内部的开头处增加新的元素。上例中，采用prepend方法将“冰红茶”列表项添加到无序列表中“红茶”的前面。after()方法在被选中元素结束后增加新的元素。上例中，采用after方法将“冰红茶”列表项添加到无序列表的后面作为一个新的无序列表项（无序列表项前面图形位置可以看出来）。before()方法在被选中元素开始前增加新的元素。上例中，采用before方法将“冰红茶”列表项添加到无序列表的前面作为一个新的无序列表项(从无序列表项前面图形位置可以看出来)。7.1.2删除元素方法 描述remove() 删除被选元素（及其子元素）empty() 从被选元素中删除子元素<script>$(document).ready(function(){$(":button").click(function(){$("div").remove(); });});</script>7.1.3jQuery设置元素在HTML中经常需要动态设置某些元素的值，使网页在浏览器中呈现不同的内容，主要介绍html()、text()、val()方法三个方法用于HTML元素的值的修改和获取，clone()方法用于克隆元素，replaceWith()方法替换元素。1.html()方法，设置或返回所选元素的内容（包括HTML标记），如$("div").html()。2.text()方法，用于HTML元素文本内容提取，如$("div").text()。3.val()方法，设置或返回表单字段的值，$("input").val()。4.clone()方法，生成被选元素的副本，包含子节点、文本和属性，如$("div").clone()。5.replaceWith()方法，用指定的HTML内容或元素替换被选元素，如$("p").replaceWith("<b>Helloworld!</b>")。上述三种方法的区别是：调用text()方法设置的内容不会被html解析，用于元素里的内容是纯文本；调用html()方法设置的内容会被html解析，用于元素里的内容含有html标记；val()方法用于设置表单对象的值。7.1.4jQuery设置CSSjQuery利用css()方法设置所有匹配的元素中样式属性的值，其语法如下。$(selector).css(name,value)在JavaScript中可以通过style设置或者获取元素属性值，在jQuery中是通过css()方法设置或者获取元素值。7.2jQuery事件7.2.1jQuery事件绑定当页面加载完成后，需要为某个元素添加事件完成某个指定操作，就可以使用bind()方法。bind()方法可以向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数，其基本语法如下。$(selector).bind(event,data,function,map)必需参数event，规定添加到元素的一个或多个事件，由空格分隔多个事件值，必须是有效的事件。如click(),keypress()等。可选参数data，规定传递到函数的额外数据。必需参数function，规定当事件发生时运行的函数。参数map，规定事件映射({event:function,event:function,...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。7.2.2jQuery鼠标事件鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。1.click()方法当用户点击鼠标左键时触发，并调用单击事件对应的函数。2.dblclick()方法左键双击HTML元素时，会触发dblclick事件。dblclick()方法触发dblclick事件，或规定当发生dblclick事件时运行的函数，双击要求鼠标指向元素，并在一定时间内连续两次单击元素。3.mouseenter()方法当鼠标指针穿过元素时，会发生mouseenter事件。mouseenter()方法触发mouseenter事件，或规定当发生mouseenter事件时运行的函数。4.mouseleave()方法当鼠标指针离开元素时，会发生mouseleave事件。mouseleave()方法触发mouseleave事件，或规定当发生mouseleave事件时运行的函数。5.hover()方法hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。7.2.3jQuery键盘事件1.keydown()方法，keyup()方法当键盘键被按下时发生keydown事件，keydown()方法触发keydown事件，或规定当发生keydown事件时运行的函数；当键盘键被松开时发生keyup事件，keyup()方法触发keyup事件，或规定当发生keyup事件时运行的函数。2.keypress()方法keypress()方法是用户按下一个按键，并产生一个字符时发生（用户按了一个能在屏幕上输出字符的按键，keypress()事件才会触发）。7.2.4表单事件1.submit()方法当提交表单时，会发生submit()事件。该事件只适用于<form>元素。submit()方法触发submit事件，或规定当发生submit事件时运行的函数。2.change()方法当元素的值发生改变时，会发生change事件，或者触发被选元素的change事件。该事件仅适用于文本域（textfield），以及textarea和select元素。change()函数触发change事件，或规定当发生change事件时运行的函数。3.focus()方法当元素获得焦点时，发生focus事件。当单击选中元素或通过tab键定位到元素时，该元素就会获得焦点。focus()方法触发focus事件，或规定当发生focus事件时运行的函数。4.blur()方法当元素失去焦点时发生blur事件。blur()函数触发blur事件，或者如果设置了function参数，该函数也可规定当发生blur事件时执行的代码。可以通过事件绑定将blur事件绑定到所有函数，触发事件的行为既可以在鼠标时间内，又可以通过Tab键移动元素焦点。7.3jQuery事件综合应用焦点离开文本框或者下拉菜单时背景都变成蓝色的7.3.1任务分析一blur事件在文本框失去焦点时触发，（1）$(".field").blur绑定失去焦点事件，（2）$(this).css("background-color","blue")方法修改背景颜色。7.3.2任务实施<scripttype="text/javascript"> $(document).ready(function(){ $(".field").blur(function(){ $(this).css("background-color","blue");//失去焦点时背景颜色变为蓝色 }); });</script>实例二在HTML页面存在class为test的div元素，当单击按钮后隐藏div元素。步骤三课堂小结1．jQuery事件2．jQuery事件综合应用重点理解jQuery事件应用步