第十讲jquery框架

一、什么是jQuery•jQuery是一个JavaScript库。•jQuery极大地简化了JavaScript编程。二、jQuery选择器•jQuery选择器允许您对HTML元素组或单个元素进行操作。•jQuery中所有选择器都以美元符号开头：$()。#id选择器•jQuery#id选择器通过HTML元素的id属性选取指定的元素。$(#test)例如；当用户点击按钮后，有id=test属性的元素将被隐藏：htmlheadscripttype=text/javascriptsrc=jquery/jquery.js/scriptscripttype=text/javascript$(document).ready(function(){$(.btn1).click(function(){$(p).hide();});$(.btn2).click(function(){$(p).show();});});/script/headbodypThisisaparagraph./pbuttonclass=btn1Hide/buttonbuttonclass=btn2Show/button/body/html•html•head•scripttype=text/javascriptsrc=jquery/jquery.js/script•scripttype=text/javascript•$(document).ready(function(){•$(#btn1).click(function(){•$(p).hide();•});•$(#btn2).click(function(){•$(p).show();•});•});•/script•/head•body•pThisisaparagraph./p•buttonid=btn1Hide/button•buttonid=btn2Show/button•/body•/html.class样式选择器•jQuery类选择器可以通过指定的class查找元素。$(.test)实例：用户点击按钮后所有带有class=“test”属性的元素都隐藏：$(document).ready(function(){$(button).click(function(){$(.test).hide();});});.class样式选择器•jQuery类选择器可以通过指定的class查找元素。$(.test)实例：用户点击按钮后所有带有class=“test”属性的元素都隐藏：$(document).ready(function(){$(button).click(function(){$(.test).hide();});});$(“p”)HTML元素选择器•jQueryHTML元素选择器可以通过指定的查找元素。$(“body)实例：用户点击按钮后所有body内的元素都隐藏：$(document).ready(function(){$(button).click(function(){$(body).hide();});});三、使用jQuery方法•headscriptsrc==“jquery/jquery.js/script/head四、jQuery事件•页面对不同访问者的响应叫做事件。•常见事件：（鼠标事件、键盘事件、表单事件、文档/窗口事件）•如click，keypress，submit，load，dblclick，keydown，change，resize，mouseenter，keyup，focu，sscroll，mouseleave，blur，unload五、Query事件方法•在jQuery中，大多数DOM事件都有一个等效的jQuery方法，常用的jQuery事件方法：1、$(document).ready()方法文档完全加载完后执行该函数2、click()方法在用户点击HTML元素时执行。$(p).click(function(){$(this).hide();});Query事件方法3、dblclick()方法当双击元素时，运行的函数$(p).dblclick(function(){$(this).hide();});4、mouseenter()方法当鼠标指针穿过元素时，运行的函数：$(#p1).mouseenter(function(){alert(Youenteredp1!);});Query事件方法5、mouseleave()方法当鼠标指针离开元素时运行的函数：$(#p1).mouseleave(function(){alert(Bye!Younowleavep1!);});6、mousedown()方法按下鼠标按键时，运行的函数：$(#p1).mousedown(function(){alert(Mousedownoverp1!);});Query事件方法7、mouseup()方法在元素上松开鼠标按钮时，运行的函数：$(#p1).mouseup(function(){alert(Mouseupoverp1!);});8、focus()方法当元素获得焦点时，运行的函数：$(input).focus(function(){$(this).css(background-color,#cccccc);});Query事件方法9、blur()方法当元素失去焦点时，运行的函数：$(input).blur(function(){$(this).css(background-color,#ffffff);});10、jQuery-设置内容和属性方法三种方法来设置内容：•text()-设置或返回所选元素的文本内容•html()-设置或返回所选元素的内容（包括HTML标记）•val()-设置或返回表单字段的值例如：$(#btn1).click(function(){$(#test1).text(Helloworld!);});$(#btn2).click(function(){$(#test2).html(bHelloworld!/b);});$(#btn3).click(function(){$(#test3).val(RUNOOB);});jQueryAJAX什么是AJAX？AJAX=异步JavaScript和XML（AsynchronousJavaScriptandXML）。简短地说，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。使用AJAX的应用程序案例：谷歌地图、腾讯微博、优酷视频等等。通过jQueryAJAX方法，您能够使用HTTPGet和HTTPPost从远程服务器上请求文本、HTML、XML或JSON-同时您能够把这些外部数据直接载入网页的被选元素中。六、jQuery动画效果•jQuery提供了很多动画效果，例如滑动效果、淡入淡出效果。•关于jQuery中可以实现动画效果的常用方法具体如下表所示。语法说明show([speed,[easing],[function]])显示隐藏的匹配元素hide([speed,[easing],[function]])隐藏显示的匹配元素toggle([speed],[easing],[function])元素显示与隐藏切换slideDown([speed],[easing],[function])垂直滑动显示匹配元素（向下增大）slideUp([speed,[easing],[function]])垂直滑动显示匹配元素（向上减小）slideToggle([speed],[easing],[function])在slideUp()和slideDown()两种效果间的切换fadeIn([speed],[easing],[function])淡入显示匹配元素fadeOut([speed],[easing],[function])淡出隐藏匹配元素fadeTo([[speed],opacity,[easing],[function]])以淡入淡出方式将匹配元素调整到指定的透明度fadeToggle([speed,[easing],[function]])在fadeIn()和fadeOut()两种效果间的切换设定动画效果：•参数speed表示动画的速度，可以设置为预定的三种速度（slow、fast和normal）或动画时长的毫秒值（如1000）；•参数easing表示切换效果，默认效果为swing，还可以使用linear效果；•参数function表示在动画完成时执行的函数；•参数opacity表示透明度数值（范围在0~1之间，如0.5）。[点击查看例5-24]$(function(){//隐藏（慢速，曲线效果）$(div).hide(slow);//显示（慢速度，直线效果）$(div).show(slow,linear);//设置透明度$(div).fadeTo(slow,0.5);});/script自定义动画•jQuery支持自定义动画，用户只需要指定一个最终样式，就可以使指定元素以动画效果变为最终样式。•在上述语法中，参数params表示一组包含动画最终属性值的集合，speed表示动画速度，easing表示动画效果，function表示动画完成后执行的函数。animate(params,[speed],[easing],[function])•例如，为元素添加自定义动画时，示例代码如下：//定义动画最终效果varcssjn={width:400px,height:300px,fontSize:25px};//添加自定义动画$(div).animate(cssjn,2000);七、jQuery的Ajax操作•在传统的Ajax中，通过XMLHttpRequest实现Ajax不仅代码复杂，浏览器兼容问题也比较多。•jQuery对Ajax操作进行了封装，使用jQuery可以极大地简化Ajax程序的开发过程。jQuery常用Ajax方法•在jQuery中，常用的Ajax操作方法如下表所示。方法说明load(url,[data],[function])载入远程HTML文件代码并插入至DOM元素中$.ajax(url,[settings])通用的Ajax方法，可发送请求并载入数据$.get(url,[data],[function],[type])通过GET方式发送请求并载入数据$.post(url,[data],[function],[type])通过POST方式发送请求并载入数据$.getJSON(url,[data],[function])通过GET方式发送请求并载入JSON数据$.getScript(url,[function])通过GET方式发送请求并载入JavaScript数据jQuery常用Ajax方法•参数url表示请求的URL地址；•参数data表示请求时发送的数据；•参数function表示载入成功时执行的函数；•参数type表示返回数据的格式，例如xml、html、script、json、text等；•参数settings是对Ajax的请求设置。$.ajax()方法•$.ajax()是通用方法，通过该方法的setting参数，可以实现$.get()、$.post()、$.getJSON()和$.getScript()方法同样的功能。（1）只发送GET请求：（2）发送GET请求并传递数据，接收返回结果：$.ajax(./test.php);$.ajax(./test.php,{data:{name:tom,age:23},//要发送的数据success:function(msg){//请求成功后执行