WEB前端开发

之jQuery

分享人:肖知晓程序员

个人网站:http://webmianhua.com

详细了解jquery请点击:jquery 1.10网页版API
  • 󰂲jQuery的特点
  • 󰂲$()的用法
  • 󰂲选择器
  • 󰂲属性操作
  • 󰂲绑定/解绑事件
  • 󰂲文档处理(添加、删除、移动)
  • 󰂲筛选
  • 󰂲效果/动画
  • 󰂲ajax
  • 󰂲自定义插件
jQuery的特点
  • JQuery的选择器用起来很方便,操作DOM要比原生JS方便很多。
  • JQuery的链式操作可以把多个操作写在一行代码里,非常好用。
  • JQuery简化了AJAX操作,后台只需返回一个JSON格式的字符串就能完成与前台的通信。
  • JQuery基本兼容了现在主流的浏览器,不用再为浏览器兼容问题而伤脑筋。
  • JQuery有丰富的UI插件,例如:树形菜单、日期控件、弹出窗口等,简单实用。
  • JQuery可扩展性强,JQuery提供了扩展接口:JQuery.extend(object),可以在JQuery的命名空间上增加新函数。JQuery的所有插件都是基于这个扩展接口开发的。
$()的用法
  • 1、$(function(){ //code }) 绑定ready事件监听函数
  • 2、$(selector) 接收CSS选择器表达式,返回匹配的DOM元素的jquery对象
  • 3、$(html) 用提供的HTML代码创建DOM元素
  • 4、$(document,window,document.body,this) 封装DOM元素为jquery对象
  • 5、$(object) 封装普通对象为jquery对象
  • 6、$(jquery object) 接受一个jquery对象,返回该jquery对象的拷贝副本
选择器

󰆩基本选择器

$('code') 通过html标签选择
$('#myid') 通过id选择
$('.myclass') 通过class选择
$('code, #myid, .myclass') 返回同时满足条件的jquery对象集合

󰆩层叠选择器

$('div code')
$('ul > li')
$('.test span')
$('#test > .btn')
$('strong + em')
$('strong ~ em')

注:jquery的选择器和CSS的规则保持了一致,因此,前端开发人员只要懂CSS的写法,对jquery就很容易上手了。
选择器

󰆩过滤选择器

过滤选择器 描述
$('li:first') 获取匹配的第一个元素
$('li:last') 获取匹配的最后个元素
$('li:not(li:first)') 去除所有与给定选择器匹配的元素
$('li:even') 匹配所有索引值为偶数的元素,从 0 开始计数
$('li:odd) 匹配所有索引值为奇数的元素,从 0 开始计数
$('li:eq(1)') 匹配一个给定索引值的元素
$('li:gt(2)') 匹配所有大于给定索引值的元素
$('li:lt(2)') 匹配所有小于给定索引值的元素
$(':empty') 匹配所有不包含子元素或者文本的空元素
$(':hidden') 匹配所有不可见元素,或者type为hidden的元素
$(':visible') 匹配所有的可见元素
$('a[target="_blank"]') 匹配给定的属性是某个特定值的元素
$('[class^="my"]') 匹配给定的属性是以某些值开始的元素
$('a[title$="blog"]') 匹配给定的属性是以某些值结尾的元素
$('a[href*="zip"]') 匹配给定的属性是以包含某些值的元素
$('a[rel][href][title$="blog"]') 获取匹配多个属性的元素
属性操作
方法 描述
attr 设置或返回被选元素的属性值
removeAttr 从每一个匹配的元素中删除一个属性
prop 获取在匹配的元素集中的第一个元素的属性值。
removeProp 用来删除由.prop()方法设置的属性集
addClass 为每个匹配的元素添加指定的类名。
removeClass 从所有匹配的元素中删除全部或者指定的类。
toggleClass 匹配所有大于给定索引值的元素
html 匹配所有小于给定索引值的元素
text 匹配所有不包含子元素或者文本的空元素
val 匹配所有不可见元素,或者type为hidden的元素
绑定/解绑事件
方法 描述
click 触发每一个匹配元素的click事件。
mouseover 当鼠标指针位于元素上方时,会发生 mouseover 事件。
mousemove 当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。
mouseout 当鼠标指针从元素上移开时,发生 mouseout 事件。
focus 当元素获得焦点时,触发 focus 事件。
blur 当元素失去焦点时触发 blur 事件。
keydown 当键盘或按钮被按下时,发生 keydown 事件。
keyup 当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。
scroll 当用户滚动指定的元素时,会发生 scroll 事件。
hover 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法
change 当元素的值发生改变时,会发生 change 事件。
submit 当提交表单时,会发生 submit 事件。
resize 当调整浏览器窗口的大小时,发生 resize 事件。
bind 为每个匹配元素的特定事件绑定事件处理函数。
unbind bind()的反向操作,从每一个匹配的元素中删除绑定的事件。
on 在选择元素上绑定一个或多个事件的事件处理函数。
(具有老版本中的.bind().delegate(), 和 .live()的功能)
off 在选择元素上移除一个或多个事件的事件处理函数。
... 还有N多,不一一列举,自己查看API文档
文档处理(添加、删除、移动)
方法 描述
append 向每个匹配的元素内部追加内容。
appendTo 把所有匹配的元素追加到另一个指定的元素元素集合中。
prepend 向每个匹配的元素内部前置内容。
prependTo 把所有匹配的元素前置到另一个、指定的元素元素集合中。
after 在每个匹配的元素之后插入内容。
before 在每个匹配的元素之前插入内容。
insertAfter 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
insertBefore 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
wrap 把所有匹配的元素用其他元素的结构化标记包裹起来。
unwrap 这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。
replaceWith 将所有匹配的元素替换成指定的HTML或DOM元素。
replaceAl 用匹配的元素替换掉所有 selector匹配到的元素。
empty 删除匹配的元素集合中所有的子节点。
remove 从DOM中删除所有匹配的元素。
clone 克隆匹配的DOM元素并且选中这些克隆的副本。
筛选
方法 描述
eq 获取第N个元素
first 获取第一个元素
last 获取最后个元素
hasClass 检查当前的元素是否含有某个特定的类,如果有,则返回true。
这其实就是 is("." + class)。
find 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
children 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
next 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
nextAll 查找当前元素之后所有的同辈元素。
prev 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
prevAll 查找当前元素之前所有的同辈元素
parent 取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents 取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。
siblings 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
andSelf 加入先前所选的加入当前元素中
end 回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。
效果/动画
方法 描述
show 显示隐藏的匹配元素。
hide 隐藏显示的元素
toggle 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
slideDown 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。
slideUp 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
slideToggle 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。
fadeIn 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。
fadeOut 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。
fadeTo 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
fadeToggle 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。
animate 用于创建自定义动画的函数。
ajax
方法 描述
ajax $.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){

}
});
get $.get(url, data, function(){

}, type);
通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
post $.post(url, data, function(){

}, type);
通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
自定义插件

󰆩jQuery.fn.extend

扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。

jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});

󰆩jQuery.extend

扩展jQuery对象本身。

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});

Thank You!