jQuery学习笔记

1. jQuery是一个js函数库：write less，do more

封装简化DOM操作(CRUD)/Ajax

2. 为什么使用jQuery？

   • 强大选择器：方便快速查找DOM元素

   • 隐式遍历（迭代）：一次操作多个元素

   • 读写合一：读数据/写数据用的是一个函数

   • 事件处理

   • 链式调用

   • dom操作（CUD）

   • 样式操作

3. jQuery的不同版本

   1.x 兼容老版本IE，文件更大

   2.x 部分IE8及以下不支持，文件小，执行效率更高

   3.x 完全不再支持IE8及以下版本，提供了一些新的API，提供了不包含ajax/动画API的版本

4. 区别2种js库库文件

   • 开发版（测试版）

   • 生产版（压缩版）

5. 使用jQuery之前需要先引入，有两种方式

   1. 本地引入jQuery文件

   2. 远程CDN引入

6. 使用jQuery核心函数（$/jQuery）

   • jQuery库向外直接暴露的就是$/jQuery

   • 引入jQuery库后，直接使用$即可。

   • 当函数用：$(xxx)

   • 当对象用：$.xxx()

7. 使用jQuery核心对象：执行$()返回的对象

   • 得到jQuery对象：执行jQuery函数返回的就是jQuery对象

   • 使用jQuery对象：$obj.xxx()

8. jQuery函数的使用

   1. 作为一般函数调用：$（param）

      • 参数为函数：当DOM加载完成后，执行此回调函数。

      • 参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象

      • 参数为DOM对象，将dom对象封装成jQuery对象

      • 参数为html标签字符串（用得少）：创建标签对象并封装成jQuery对象

9. 作为对象使用：$.xxx()

   • $.each():隐式遍历数据

   • $.trim():去除两端的空格

10. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象

11. 基本行为

    • size（）/length:包含的DOM元素个数

    • [index]/get(index):得到对应位置的DOM元素

    • each（）：遍历包含的所有DOM元素

    • index（）：得到在所在兄弟元素中的下标

12. 伪数组

    object对象

    length属性

    数值下标属性

    没有数组特别的方法：forEach（），push（），pop（），splice（）

13. jQuery基本选择器是什么？

    • 有特定格式的字符串

14. jQuery基本选择器的作用

    • 用来查找特定页面元素

15. 基本选择器的分类

    • #id：id选择器

    • element：元素选择器

    • .class：属性选择器

    • *：任意标签

    • selector1，selector2，selectorN：取多个选择器的并集（组合选择器）

    • selector1selector2selectorN：取多个选择器的交集（相交选择器）

16. 层次选择器：查找子元素，后代元素，兄弟元素的选择器

    1. ancestor descendant

       在给定的祖先元素下匹配所有的后代元素

    2. parent>child

       在给定的父元素下匹配所有的子元素

    3. prev+next

       匹配所有紧接在prev元素后的next元素

    4. prev~siblings

       匹配prev元素之后的所有siblings元素

17. 过滤选择器

    • 在原有选择器匹配的元素中进一步进行过滤的选择器

    • 基本

    • 内容

    • 可见性

    • 属性

    ：first

    ：last

    ：eq（index）

    ：not（selector）

    ：lt

    ：gt

    ：odd

    ：even

    ：hidden

    ：visible

    [attrName]

    [attrName=value]

    • 多个过滤选择器不是同时执行，而是依次执行的

18. 表单

    :input

    :text

    :checkbox

    :radio

    :checked

    1. $.each():遍历数组或对象中的数据

    2. $.trim():去除字符串两边的空格

    3. $.type(obj):得到数据的类型

    4. $.isArray(obj):判断是否是数组

    5. $.isFunction(obj):判断是否是函数

    6. $.parseJSON(json):解析json字符串转换为js对象/数组

19. 操作任意属性

    • 操作标签的属性

      attr(name)/attr(name,value):读写非布尔值的标签属性

      removeAttr(name)/remove(name):删除属性

      prop(name)/prop(name,value):读写布尔值的标签属性

20. 操作class属性

    • addClass(classValue)：添加class

    • removeClass(classValue)：移除指定class

21. 操作HTML代码/文本/值

    • html()

    • val()

22. 设置css样式/读取css值

    • css（）

      设置多个样式

    • css（{多个样式对}）

      获取/设置标签的位置数据

    • offset（）：相对页面左上角的坐标

    • position（）：相对于父元素左上角的坐标

23. scrollTop():读取/设置滚动条的Y坐标

24. $(document.body).scrollTop()+$(document.documentElement).scrollTop()

    读取页面滚动条的Y坐标(兼容chrome和IE)

25. $('body,html').scrollTop(60);

    滚动到指定位置(兼容chrome和IE)

26. 内容尺寸

    • height（）：height

    • width（）：width

27. 内部尺寸

    • innerHeight（）：height+padding

    • innerWidth（）：width+padding

28. 外部尺寸

    • outerHeight（false/true）:height+padding+border 如果是true，加上margin

    • outerWidth(false/true):width+padding+border 如果是true，加上margin

29. 在jQuery对象中的元素对象数组中过滤出一部分元素来

    1. first（）

    2. last（）

    3. eq(index/-index)

    4. filter(selector)

    5. not(selector)

    6. has(selector)

30. 在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签

    1. children（）：子标签中找

    2. find（）：后代标签中找

    3. parent（）：父标签

    4. prevAll():前面所有的兄弟标签

    5. nextAll（）：后面所有的兄弟标签

    6. siblings（）：前后所有的兄弟标签

31. 添加/替换元素

    • append（content）

32. 向当前匹配的所有元素内部的最后插入指定内容

    • prepend（content）

33. 向当前匹配的所有元素内部的最前面插入指定内容

    • before（content）

34. 将指定内容插入到当前所有匹配元素的前面

    • after（content）

35. 将指定内容插入到当前所有匹配元素的后面替换节点

    • replaceWith（content）

36. 用指定内容替换所有匹配的标签删除节点

    • 删除元素

      empty（）

    • 删除所有匹配元素的子元素

      remove（）

    • 删除所有匹配的元素

37. 事件绑定（2种）：

    • eventName（function（）{}）

      绑定对应事件名的监听，例如：$('#div').click(function(){});

    • on(eventName, funcion(){})

      通用的绑定事件监听, 例如：$('#div').on('click', function(){})

    • 优缺点:

      • eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持

      • on: 编码不方便, 可以添加多个监听, 且更通用

    • 常用：click,mouseenter/mouseleave mouseover/mouseout focus/blur

38. 事件解绑：

    • off(eventName)

39. 事件的坐标

    • event.clientX, event.clientY 相对于视口的左上角

    • event.pageX, event.pageY 相对于页面的左上角

    • event.offsetX, event.offsetY 相对于事件元素左上角

40. 事件相关处理

    • 停止事件冒泡 : event.stopPropagation()

    • 阻止事件默认行为 : event.preventDefault()

41. 区别mouseover与mouseenter?

    • mouseover: 在移入子元素时也会触发, 对应mouseout

    • mouseenter: 只在移入当前元素时才触发, 对应mouseleave

42. hover()使用的就是mouseenter()和mouseleave()

43. 区别on（'eventName',fun）与eventName（fun）

    • on（'eventName',fun）:通用，但编码麻烦

    • eventName（fun）：编码简单，但是有的时间没有对应的方法

44. 事件委托（委派/代理）：

    • 将多个子元素的事件监听委托给父辈元素处理

    • 监听回调是加载了父级元素上

    • 当操作任何一个子元素时，事件会冒泡到父级元素。

    • 父级元素不会直接处理事件，而是根据event.target得到发生事件的子元素，通过这个子元素调用事件回调函数

45. 事件委托的2方：

    • 委托方：子元素

    • 被委托方：父元素

46. 使用事件委托的好处

    • 添加新的子元素，自动有时间相应处理

    • 减少事件监听的数量：n==>1

47. jQuery的事件委托API

    • 设置事件委托： $(parentSelector).delegate(childrenSelector, eventName, callback)

    • 移除事件委托: $(parentSelector).undelegate(eventName)

48. 淡入淡出：不断改变元素的透明度（opacity）来实现的

49. fadeIn（）：带动画的显示

50. fadeOut（）：带动画隐藏

51. fadeToggle（）：带动画切换显示/隐藏

52. 滑动动画：不断改变元素的高度实现

53. slideDown（）：带动画的展开

54. slideUp（）：带动画的收缩

55. slideToggle（）：带动画的切换展开/收缩

56. 显示隐藏，默认没有动画，动画（opacity/height/width）

57. show（）：（不）带动画的显示

58. hide（）：（不）带动画的隐藏

59. toggle（）：（不）带动画的切换显示/隐藏

60. jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的

61. animate(): 自定义动画效果的动画

62. stop(): 停止动画

63. 问题 : 如果有2个库都有$, 就存在冲突

    • 解决 : jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了

    • API : jQuery.noConflict()

64. 区别: window.onload与 $(document).ready()

    • window.onload

      • 包括页面的图片加载完后才会回调(晚)

      • 只能有一个监听回调

    • $(document).ready()

      • 等同于: $(function(){})

      • 页面加载完就回调(早)

      • 可以有多个监听回调

65. 扩展jQuery的工具方法

    • $.extend(object)

66. 扩展jQuery对象的方法

    • $.fn.extend(object)