jQuery.js js类库
a. 浏览器的兼容性处理完善，兼容ie6
b. DOM操作接口简单，容易上手
c. DOM动画，效果
d. AJAX/jsonp 封装好，容易使用
类库[厨房]，插件[门/窗]，框架[毛胚房]
jQuery版本 jQuery.fn.jquery
1. 1版本 兼容IE6
2. 2版本 去掉低版本ie的兼容性代码
3. 3最新版本
1. jQuery 全局变量 $ === jQuery
2. 页面DOM渲染完成
$(document).ready(function() {
//
})
$(function() {
//
})
3. 获取元素
$(css选择器) 返回来的是数组，获取匹配元素的长度 arr.length或arr.size()
jQuery获取到的元素跟原生的方法不能互用
可以转换
原生的元素 ====> jQuery对象 this ===> $(this)
var box = document.getElementById("box") ====> $(box)
jQuery对象 ====> 转换成 原生的对象
$("#box") $("#box")[0]/$("#box").get(0)
.eq(n) 获取第几个
4. 链式操作
jq方法调用，返回调用该方法的元素
5. 设置样式
$().css("color", "red")
$().css({
name1:value1,
name2:value2
})
.hide()
.show()
.toggle()
6. 获取元素宽
$(ele).width() 内容宽width
$(ele).innerWidth() 内容width + padding
$(ele).outerWidth() 内容width + padding + border
$(ele).outerWidth(true) 内容width + padding + border + margin
$(ele).width(200) 设置宽200
7. 元素的坐标
$(ele).offset() 返回文档坐标 {left: x , top: y}
$(ele).position() 返回相对定位父级的坐标 {left: x , top: y}，从ele元素margin开始算。盒模型margin左上角到父级的左上角的距离
到定位父级的border-box
ele.offsetLeft 从元素的border-box开始算，到定位父级的border-box
ele.offsetTop 从元素的border-box开始算，到定位父级的border-box
$(ele).scrollTop()
.scrollLeft()
返回顶部 $("html,body").scrollTop(0)
8. 属性设置
元素的普通属性
$(ele).attr(name) 获取属性
$(ele).attr(name, value) 设置属性
$(ele).removeAttr(name) 移除属性
元素的布尔属性
$(ele).prop(name) 获取属性，返回来的布尔值
$(ele).prop(name, true) 设置属性
$(ele).removeAttr(name) 移除属性
9. 文本/内容获取
ele.innerHTML/ele.innerText
ele.value
一般元素：$(ele).html()/$(ele).text()
表单元素：$(ele).val()
10. class的获取设置
$(ele).addClass("active")
$(ele).removeClass("active")
$(ele).toggleClass("active")
$("#box").hasClass("active");是否具有该属性
11. DOM树关系节点
$(ele).index() 在所有兄弟元素中的下标
$(ele).index("button") 在所有button兄弟元素中的下标
$(ele).siblings() 元素的兄弟元素
$(ele).siblings("span") span兄弟元素
12. jquery 事件
$().click(cb)
$().mousedown(cb)
$().keydown()
事件绑定
$(ele).bind("click", cb)
$(ele).on("click", cb) 推荐使用on这种方式，还能做事件委托
事件委托 $(parent).on("click", "childSelector", cb)
事件解绑
$(ele).unbind("click") 解除点击事件绑定
$(ele).unbind() 解除所有事件绑定
$(ele).off("click") 解除点击事件绑定
事件对象
$(ele).one("click", cb) 只绑定一次事件
$(ele).trigger("click") 事件模拟
$(ele).hover(mouseover, mouseout) 事件合成，mouseover/mouseout
阻止默认事件
e.preventDefault()
取消冒泡
e.stopPropagation()
13.DOM操作
a.新建元素,注意跟获取元素区分,创建元素肯定出现尖括号
b.插入元素
末尾插入
$(document.body).append(ele);
ele.appendTo($("body"));
开头插入元素
parent.prepend(child)
child.prependTo(parent)
A.before(B) 在A前面插入B
B.insertBefore(A) 在A前面插入B
c.复制
$(ele).clone(bol) bol为true时,事件也会复制
d.移除元素
$(ele).remove()
$(ele).empty() 清空子元素
e.筛选元素
$(ele).next() 下一个兄弟元素
$(ele).nextAll() 之后所有的兄弟元素
$(ele).nextUntil(nchild) 之后所有的兄弟元素到nchild之前为止
$(ele).prev()
$(ele).prevAll()
$(ele).prevUntil()
$(ele).siblings() 兄弟元素
$(ele).parent()
$(ele).parents()
$(ele).children()
$(ele).find() 内部找到
$(ele).filter() 自身查找
$(ele).eq(index) 自身第几个
$(ele).index() 在兄弟元素中的排行
$(ele).index("button") 在所有button兄弟元素中的下标
$(ele).slice(start, end) 获取从start到end的所有元素,不包括end
$("li:lt(4)") 获取前4个
14.效果
$(ele).hide(ms)
$(ele).show(ms)
$(ele).toggle()
淡入/淡出
$(ele).fadeOut(ms)
$(ele).fadeIn(ms)
$(ele).fadeTo(ms,opatity)
$(ele).fadeToggle()切换淡入/淡出
滑动
$(ele).sildeUp()
$(ele).slideDown()
$(ele).slideToggle()
$(ele).animate({},400)
15.jQuery插件封装
扩展jquery元素功能
$.fn.extend({})
e.originalEvent 找到原生e
16. $(ele).each(function(index,key))
一些应用
1.返回顶部
$("html,body").animate({scrollTop:0},300)
$("html,body").scrollTop(0)
2.scroll事件 scrollTop/scrollLeft值变化就会触发
3.
4.jQuery工具函数
$.trim(str) 去掉字符串首尾空格
$.parseJSON() 将json字符串转换为对象
$.each(arr,fn) 遍历数组
$.map(arr,fn)返回数组
$.type() 类型检测
$.fn.extend() 给元素扩展方法功能
$.extend() 给juqery扩展工具函数
5.zepto.js 移动端的jquery精简版
zepto.js 将功能分成许多模块,只保留
核心模块;包含许多方法
通过on() & off()处理事件
XMLHttpRequest 和 JSONP 实用功能