文档介绍：jQuery+EasyUI培训
documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
同类型框架比较:
辅助操作:Prototype、 MooTools
整合型:YUI、ExtJs、 Dojo
jQuery既有操作性API,又有对于UI实现的封装
jQuery--简介
选择器
文档操作
CSS 处理
事件绑定
数据遍历
Ajax
效果
jQuery--功能划分
jQuery-选择器
三种类型选择器
jQuery 元素选择器
jQuery 使用选取 HTML 元素
$('p') ,$(‘#mm’)
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$([name = “abc"]) $([check=‘’checked])
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性
$('#ss').css('background-color','red');
最常用的三个方法
html()
设置或返回匹配的元素集合中的 HTML 内容$(‘#p’).html();
text()
设置或返回匹配元素的内容$(‘#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%"});
$(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(".selected")
first()
获取集合元素中的第一个
$("p span").first()
.last()
获取集合元素的最后一个
$("p span").last()
jQuery-元素遍历
常用事件
$(document).ready(function)
将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function)
触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)
触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)
触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)
触发或将函数绑定到被选元素的鼠标悬停事件
jQuery-事件处理
方法列举及比较
$.ajax:基础方法
语法:([settings])
.load:载入远程 HTML 文件代码并插入至 DOM 中
语法:load( url, [data], [callback] )
$.get:使用GET方式来进行异步请求
语法:( url, [data], [callback] )
$.post:使用POST方式来进行异步请求
语法:( url, [data], [callback], [type] )
$.getScript:通过 GET 方式请求载入并执行一个 JavaScript 文件
语法:( url, [callback] )
jQuery--Ajax
事件
jQueryAjax中有两种类型的事件:
全局事件
是每次的Ajax请求都会触发的,它会向DOM中的所有元素广播
ajaxSend 、 ess 、 ajaxError 、 plete
局部事件
每次的Ajax请求