资源描述：
《jquery+easyui培训》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、jQuery+EasyUI培训2012.02.27jQuery是优秀的Javascirpt框架.用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。同类型框架比较:辅助操作:Prototype、MooTools整合型:YUI、ExtJs、DojojQuery既有操作性API，又有对于UI实现的封装jQuery--简介选择器文档操作CSS处理事件绑定数据遍历Ajax效果jQuery--功能划分jQuery-选择器三种类型选择器jQuery元素选择
2、器jQuery使用选取HTML元素$('p'),$(‘#mm’)jQuery属性选择器jQuery使用XPath表达式来选择带有给定属性的元素。$([name=“abc"])$([check=‘’checked])jQueryCSS选择器jQueryCSS选择器可用于改变HTML元素的CSS属性$('#ss').css('background-color','red');最常用的三个方法html()设置或返回匹配的元素集合中的HTML内容$(‘#p’).html();text()设置或返回匹配元素的
3、内容$(‘#p’).text();val()设置或返回匹配元素的值$(‘#p’).val();jQuery-文档操作三种CSS操作方法$(selector).css(name,value)为所有匹配元素的给定CSS属性设置值$("p").css("background-color","red");$(selector).css({properties})同时为所有匹配元素的一系列CSS属性设置值$("p").css({"background-color":"red","font-size":"200
4、%"});$(selector).css(name)返回指定的CSS属性的值$(this).css("background-color");jQuery-CSS处理常用方法$(selector).each(function(index,element))对jQuery对象进行迭代，为每个匹配元素执行函数next(selector)获得匹配元素紧邻元素中的下一个$("p").next(".selected");prev(selector)获得匹配元素紧邻元素中的上一个$("p").prev(".sel
5、ected")first()获取集合元素中的第一个$("pspan").first().last()获取集合元素的最后一个$("pspan").last()jQuery-元素遍历常用事件$(document).ready(function)将函数绑定到文档的就绪事件（当文档完成加载时）$(selector).click(function)触发或将函数绑定到被选元素的点击事件$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件$(selector).focu
6、s(function)触发或将函数绑定到被选元素的获得焦点事件$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件jQuery-事件处理方法列举及比较$.ajax:基础方法语法:jQuery.ajax([settings]).load:载入远程HTML文件代码并插入至DOM中语法:load(url,[data],[callback])$.get:使用GET方式来进行异步请求语法:jQuery.get(url,[data],[callback])$.p
7、ost:使用POST方式来进行异步请求语法:jQuery.post(url,[data],[callback],[type])$.getScript:通过GET方式请求载入并执行一个JavaScript文件语法:jQuery.getScript(url,[callback])jQuery--Ajax事件jQueryAjax中有两种类型的事件：全局事件是每次的Ajax请求都会触发的，它会向DOM中的所有元素广播ajaxSend、ajaxSuccess、ajaxError、ajaxComplete局部事
8、件每次的Ajax请求时在方法内定义的,针对的是当前Ajax的结果beforeSend、success、error、complete、jQuery--Ajax常用方法$(selector).hide(speed,callback)隐藏元素$("p").hide();$(selector).show(speed,callback)显示元素$("p").show();$(selector).slideDown()向下滑动（显示）被选元素$(".panel").slideDo
