JQuery笔记

JQuery学习笔记

jQuery是啥呢？

它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的用法：

选择元素：

1. $(); 里面和CSS一样，不过对选择出的一组元素，一起处理，省略循环，这里是js不允许的。
2. 里面可以写CSS选择器原生dmo,jQuery对象、 null /undefind / function(){} selector/content等
3. jQuery特有的选择规则，选出来是jquery对象
4. filter可以用来筛选，例如说筛选类名。not的话可以用来反向选择，没有这一项的就被选中，is则相反。has说明里面有这一项的选项被选中。find跟has的区别是，找到这里有这一项的然后选中。
5. jQuery可以进行链式操作。
6. sizzle是用来选择特殊写法的，是查到dom最快的方式。

函数写法：

1. 都是函数式的写法。
2. CSS取值相当于getComputed，赋值相当于

   1	dom.style.***

   ，就写width，然后啥也不写
3. css赋值一组，取值取一个（）
4. xxx.setAttribute(‘son’,’’Feng) 这样就可以给对象添加属性了。
5. attr() 用于设置或返回被选中元素的属性值
6. prop() 如果是检索html元素则使用attr()替代。
7. next()下一个兄弟节点。
8. prev()上一个兄弟节点
9. index 当前兄弟节点
10. addClass removeClass
11. toggleClass 删除或者添加类名 没有的话帮你添加，有话帮你删除
12. insertBefore 插入到谁谁的前面。
13. appendTo() –这个比较常用

    1 2	A添加到B的里面（添加到最后一个子元素后） $('p').appendTo($('ul') D.append（C） D里加上C

14. remove detach 可以删除元素并且可以return 删除的元素。remove的话点击删除之后也删除了方法，因此第二次点击不能再删除了，而detach则可以。不断的进行删除和添加
15. on方法绑定时间

1

.on('click' ,'a', function(){})  //off可以解除绑定 $('.item').off('click'), 如果想指定解绑的元素，那就要传值以更精准

16. one() 只绑定之间一次
    scrollTop() 滚出去的高度
17. 动态生成标签

    1	$('<div></div>')

    经常用于动态添加图片或者选项框

关于事件：

1. 时间对象 e->e.pageX 相对文档而言，e.clinetX 相对于浏览窗口而言。 e.which 哪个键或按钮 e.button哪个鼠标按键被按

2. e.preventDefalut() s.stopPrpagation() return false; 这些都是用来解绑事件的

3. offset().left/top position().left/top。

   1. offset()方法返回或设置匹配元素相对于文档的偏移（位置）。

4. parent() 返回父节点

5. offsetParent() 返回离它最近有定位的父级

6. paerents() 返回多个父级

7. closet() 查找最近的祖先节点

8. val是jQuery里面代表.value的参数

9. each 遍历

   1	$('li')each(function (index , ele ){} )

10. end() 回退操作,可以使jQuery 可以连续实现点操作。就说可以用一行代码搞定。

11. slblings() 当前元素节点的所有兄弟节点
    1.

    1	$('li.third-item').siblings().css('background-color', 'red');

12. prevAll() 当前元素上面的所有兄弟节点

13. nextAll() 当前元素下面的所有兄弟节点

14. prevUntil() nextUntil() 掐头去尾选中元素，传jQuery 对象dom

15. clone 克隆节点，参数为true的时候，事件也能克隆

16. wrap 包裹的意思 wrapall 包裹选中所有的元素 会破坏结构 unwrap 接触包装，接过话标签不能删除。

17. A.add(B) 选中元素A和B集中操作。

18. slice(0，2) 截取，算头不算尾

19. serialize 串联表单数据 serializeArray 串联数据成数组

20. animate()

    1. 参数target
    2. 参数durition
    3. 参数代表速度变化方式
    4. 回调函数

21. stop(true, true) 停止当前所有的运动，停在当前目标带点 ,后面的参数决定是否立即到达目标点上

    1. 是否停止后续所有运动 false：不停止，继续运动 true :停止后续所有运动
    2. 是否立即到达当前目标点 flase :不到达 true：到达

22.stop（flase ,true） 跳过当前运动并到达目标点，执行后续运动

23. finish() 停止当前运动

24. delay （）延迟，参数，延迟运动

    1	jquery.easing.js 是专门用来做jQuery 运动的.

25. slideToggle(speed ,callback) 通过滑动效果来切换元素的可见状态

26. sildeUp sildedown 隐藏起来元素/显示元素——根据之前的不同状态进行切换- none–block or block–none

27. toggleClass(active) 对设置或移除备选元素的一个或多个类进行切换

28. fade in/out 淡入淡出

29. tigger 方法触发被选元素的指定事件类型。
    ==tigger出发事件是会冒泡，触发里面会影响外面 tigger可以触发自定义事件==

工具方法：

1

以$.xxx  jQuery.xxx这种方式调用 ，此类方法定位在jQuery 函数上面

$.type() 判断 参数的数据类型
原生js判断类型的三种方法：

1
2
3

1. arr.instanceof Aarray
2. arr.constructor ==Array
3. Object.prototype.toString.call(arr)

1,2两种有局限性，3 比较通用

trim()方法

1

$.trim 消除空格

$proxy() 改变this指针方向 参数1：function , 参数2：函数执行期上下文。

$noConflict() 防止冲突 在很多javascript库使用$作为一个函数或变量名，正如我们同时需要使用jQuery和其他库一样，我们可以使用$.noConfilct把$控制权交给其他库。

$.parseJSON() 字符转换成json ,要求非常严格，外部是单引号，内部属性是双引号，不需要回车符

$.makeArray 把类数组转换成数组。

jQuery高级方法：

$.extend() 插件扩展1 提供最新的jQuery 工具方法

$.fn.extend() 插件扩展2 提供最新的jQuery 实例方法，是实例不是工具方法

1

编写方法1， $.extend({keftTrim :function (){}})

1

2.fn.extend({drag : function()})

1

3. var cd = $.Callback()   回调函数--》返回回调对象

1

4. once 只执行一次fire()  方法 放在回调函数的参数里面。

1
2
3

var cd = $.Callbacks('once');
cd.add(fn1 ,fn2 ,fn3);
cd.fire();

memory记忆 前面触发函数，后面添加也会被添加并触发 unique也是只执行一遍

$.Deferred() 延迟对象相当于有状态的Callbacks();

添加函数；

1
2

done		fail		progress
触发成功，   失败 ，    进行中

触发函数：
resolve reject notify

$.deferred.promise() —->不能触发函数（无状态）

$(when) —->返回的是延迟对象，参数也是延迟对象。当参数延迟对象全部触发done的时候最后会触发when返回延迟对象的done函数。

1. 延迟对象作用控制的关键点，做链式运动的效果
2. $.ajax这种有状态的异步操作核心是deferred
3. when当发生多个ajax请求的时候，因为都是异步的，所以可以用多个deferred ，每当ajax 成功后我们触发一个，最后全部成功在when后一并处理。

$() 里面可以填什么

1
2
3
4

$(false /null /undefined)
 $('<li>,</li>')   $(<li/>s1234)  $('<li>', {html : 123 ,dg :' ds'})
$('#id' /  '.class'   /  div / ul /li /    li:eq(0))
$(dom)

//在JQuery中，init()函数里面会判断返回的类型，如果是DOM则是因为后面有.nodeType
$(function () {})
$($())

jQuery .extend() 拓展工具方法
$().extend() 拓展实例方法

extend：
拓展
合并（传两个参数 ，合并到第一个对象里面去）

原始值的话并不会变化，而改个引用值就ok。

extends的四种写法：

1
2
3
4

$.extend(obj1)
$.extend(obj1, obj2)
$.extend(true ,obj1)
$.extend(true ,obj1,obj2)

其实就是要关注target是什么，i是什么（从第几位开始传)，如果前面有true就往后挪一位.