jQuery

jQuery

---

#常见类库 >1. jQuery >1. ExtJS >1. AngularJs >1. prototype.js >1. React.js >1. Vue.js
...... #jQuery版本 >1. 正式版发布于2016/6/9 不支持IE 6-9 精简版不提供ajax模块 #jQuery基础 >1. 安装导入:

< script src="jquery-1.12.4.min.js"> < /script>
< script src="jquery-2.2.4.min.js"> < /script> 

>1. ready: $(document).ready(function(){ code.. }) ===>$(function(){ code..} ); >1. onload与ready区别： onload页面的所有内容加载完毕，ready页面dom加载完毕--可多次绑定 >1. jQueryDOM 和 DOM 不能混用 >1. 相互转换：

将 jQueryDOM转换成DOM： box [0]
>将DOM转为jQueryDom： $ (box)

#jQuery选择器 >1. sizzle下载得到：Sizzle(".box")[0].onclick = function( ) { } >1. 基本筛选器：

 1. ：first  2. ：not(selector)   3. :even   4. :odd   5. :eq(index)   6. :last  
7.:gt(index)   8. :lt(index)   9. :header ---选择标题标签  10. :animated  11. :focus  12. :root 
 13. :target  14. :lang ()

>1. 内容选择器：

 1. :contains(text)  2. :empty  3. :has(selector)  4. :patent

>1. 可见性选择器：

 1. ：hidden   2. :visible

>1. 属性选择器 >1. 子元素选择器 >1. 表单选择器 >1. 过滤 --破坏性操作：

1. eq(index)  2.first()  3.last()  4.hasClass(class) 返回true|false（作为判断）  5.filter()   6. is()  7.map() 
 8.has( )  9.not()  10.slice() 

>1. 查找：

1.parent( )父元素  2.parents()祖先元素，找指定的元素（div，li，p）  3.offsetParent()第一个定位的祖先元素   
4.parentsUntil()部分祖先元素（截止到..）  5.children()子元素（可传值）不包括后代  6.find()后代元素  
7.next()下一个兄弟元素  8.nextAll()后面所有的兄弟元素  9.nextUntil()后面兄弟元素的一部分（截止到） 10.prev()上一个兄弟元素
  11.prevAll()上面所有的兄弟元素  12.prevUntil()上面兄弟元素的一部分（截止到）  13.siblings()所有的兄弟元素

>1. 筛选串联：

1.add()把匹配的元素加入前面的集合  2.addBack()把前面的元素加入当前集合  3.contents()获取子节点  4.end()返回最后一次破坏性操作之前

#DOM操作 >1. 创建节点： var myimg = $(""); >1. 内部插入：

1.append()向每个匹配的元素内部追加内容（后面）  2.appendTo()将指定的内容追加到另一个指定的元素中（后面）  3.prepend()..前面 
 4.prependTo()..前面

>1. 外部插入：

1.after()在匹配的元素后面插入内容  2.before()在匹配的元素前面插入内容  3.insertBefore()把匹配的内容插入指定的元素的集合前面
  4.insertAfter()把匹配的内容插入指定的元素的集合后面

>1. 包裹：

1.wrap()把所有匹配的元素用其他元素的结构化标记包裹起来  2.unwrap()移除元素的父元素  3.wrapAll()将所有匹配的元素用单个元素包裹起来
  4.wrapInner()将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

>1.删除：

1.empty()清空  2.remove()从DOM中删除所有匹配的元素  3.detach()从DOM中删除所有匹配的元素与remove()不同的是，所有绑定的事
件、附加的数据等都会保留下来

>1. 复制： clone()克隆匹配的DOM元素并且选中被克隆的dom（true|false） >1. 属性：

1.attr()  2.removeAttr()  3.prop()  4.removeProp()

>1. 类：

1.addClass() 添加类  2.removeClass()删除类  3.toggleClass()存在则删除，不存在则不删除

>1. 文本/值：

1.html()innerHTML属性的值  2.text()innerText属性的值  3.val()value属性的值

#CSS >1. css()设置或获取css数值的值 >1. 位置：

1.offset()获取元素距离html的坐标--box.offset().top | box.offset().left  2.position()获取匹配元素相对定位父元素的偏
移--box.position().top | box.position().left  3.scrollTop()获取匹配元素相对滚动条顶部的偏移  4.scrollLeft()获取匹配元素相对
滚动条左侧的偏移

>1. 尺寸：

1.width() 内容高  2.height()内容宽  3.innerWidth()内容宽高+左右padding  4.innerHeight()内容高度+上下padding 
 5.outerWidth()内容宽度+左右padding+左右border  6.outerHeight()内容高度+上下padding+上下border

#事件 >1. 事件的绑定：

1.jquerydom.click({},function(){})
2. bind() 
3. on() 
4. one()只绑定一次

>1. 事件委派：

1. delegate(dom,event,function)
 2.on(event,dom,function)

>1. 解除事件委派：

1. undelegate()
2. off()

>1. 事件的自动触发：

1. trigger()触发浏览器的默认动作
2.triggerHandler()不触发默认动作

>1. 事件列表：

1. focus()
2. mouseenter()
 3. mouseleave()
 4. mousedown()
 5. mouseup()
 6. keydown()
 7. keyup()
 8. scroll()
 9. resize()

>1. 事件的切换：

hove(fn1,fn2)----鼠标滑入的函数，鼠标滑出的函数，可以只有一个函数

>1. 特效：（参数一：速度 ； 参数二：动画指定完毕以后执行的函数）

1. 显示/隐藏：show() | hide() | toggle()
2. 滑上/滑下：slideDown() | slideUp() | slideToggle()
3. 淡入/淡出/淡出到：fadeIn() | fadeOut() | fadeTo() | fadeToggle()

>1. 自定义动画：

1.设置动画：animate()---参数一：属性、对象  参数二：时间   参数三： 动画执行完毕以后执行的函数
2.停止动画：stop()---参数一（可选）：列队是否情况 默认false---参数二：停止时当前动画是否立即完成 默认false
3动画延迟:delay()
4.结束动画finish()

>1. 对象的访问：

1.each:类似于map（）变量jqueryDOM对象
2.size():获取jquerydom的元素集合
3.length:获取jquerydom的元素集合
4.selector:返回原始选择器
5.context:返回传递给$的普通dom
6.index():返回当前索引
7.get():类似于[] 如果不传入索引，索取所有的元素

>1. event对象：

1.which:返回按键，针对鼠标键盘
2.pageX | 3.pageY:鼠标的x y轴的坐标
4.data:获取事件传递的参数
5.type返回触发事件的名称
6.target:返回触发事件的元素
7.preventDefault():阻止默认事件
8.stopPropagation():阻止事件冒泡