jQuery

jQuery

1. jQuery是一个快速、小巧功能丰富的js库（其实就是学习jquery方法如何使用）

2. jQuery优势：

   • 可以写多个入口函数
   • jQuery的api名字容易记忆
   • jQuery代码简洁（隐式迭代）
   • jQuery帮我们解决了浏览器兼容问题
   • jQuery容错率较高

3. 怎么使用jQuery

   • 引入jquery文件
   • 写一个入口函数
   • 找到你要错做的元素（jquery选择器），去操作他（添加属性，样式，文本。。。）

4. jQuery入口函数和window.onload入口函数的区别

   • window.onload入口函数不能写多个，但是jQuery的入口函数可以写多个
   • 执行时机不同：jQuery要快于window.onload
     • jQuery要等待页面上的dom树加载完毕之后执行
     • window.onload等待页面上所有的资源都加载完之后执行

5. jQuery文件

   • 引入一个js文件，是会执行这js文件中的代码的

   • jQuery是一个自执行函数

   • 这个自执行文件就是给window对象添加一个jQuery属性和$属性

   • $和jQuery是等价的，是一个函数

     • 如果$函数参数传递的是一个匿名函数-入口函数
     • 如果参数传递是一个字符串-选择器/创建一个标签
     • 如果参数是一个dom对象，那就会把dom对象转换成jQuery对象

6. dom对象

   • 原生js选择器获取到的对象
   • 特点：只能调用dom方法或属性，不能调用jQuery的属性或方法

7. jQuery对象

   • 利用jQuery选择器获取到的对象

   • 特点：只能调用jQuery的属性或方法，不能调用原生jsdom的属性或方法

   • 是一个伪数组，其实就是dom对象的一个包装集

   • dom对象转换为jQuery对象

   • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uh7iBzyf-1618761399131)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210418083935741.png)]

   • jQuery对象转换为dom对象

   • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bVnnkRII-1618761399134)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210418084048214.png)]

   • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tX86JH6k-1618761399136)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210418084201720.png)]

8. text（）获取和设置文本

   • 获取文本：text（）方法不给参数：
     • 会获取到这个标签中所有的文本，包括后代元素的文本
     • 包含了多个dom元素的jQuery对象，通过text（）方法获取文本，会把所有dom元素的文本获取到
   • 设置文本：text（）给参数（参数就是要设置的文本）
     • 会覆盖原来的内容，如果设置的文本中包含标签，是不会把这个标签给解析出来的
     • 包含了多个dom元素的jQuery对象，通过text（）方法设置文本，会把素有的dom元素都设置上（隐式迭代）

9. css（）方法：设置/获取样式

   • 获取样式：css（）方法设置参数为要获取值的样式名
     • 获取包含了多个dom元素的jQuery对象的样式，只能获取到第一个dom对象的样式
   • 设置样式：css（样式名，样式值）
     • 设置的样式是行内样式
     • 分为单样式和多样式

10. jQuery选择器：是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素，jQuery选择器返回的是jQuery对象

    • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hIkJK6HZ-1618761399141)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210418091725235.png)]
    • 跟css的选择器用法一样

11. jQuery层级选择器

    • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ijBMLBia-1618761399142)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210418091823824.png)]
    • 跟css的选择器用法一样

12. jQuery过滤选择器

    • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aUkK1tH4-1618761399144)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210418092328177.png)]
    • 这类选择器都是带有冒号的

13. jQuery筛选选择器（方法）

    • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SDEyROxB-1618761399146)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210418092755923.png)]
    • 筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法
    • mouseover事件在鼠标移动到选取的元素及其子元素上时触发
    • mouseenter事件只在鼠标移动到选取的元素上时触发
    • 鼠标离开事件使用mouseleave，就不要使用mouseout

14. Class类操作

    • 添加类addClass（类名）
    • 移除类removeClass（类名）
    • 判断类hasClass（类名）：判断一个元素有没有某个类，有true，无false
    • 切换类toggleClass（类名）：如果元素有某个类就移除这个类，如果元素没有这个类就添加这个类

15. jQuery动画

    • 显示、隐藏和切换
      • shou（）hide（）
        • 参数一：代表执行动画的时常，毫秒数，也可以是代表时常的字符串
        • 参数二：代表动画执行完毕后的回调函数
        • 如果没有参数就没有动画效果
      • toggle（）：如果隐藏就显示，如果显示就隐藏
    • 滑入、滑出和切换
      • slideDown（）slideUp（）
        • 不给参数相当于默认值
        • 参数一：代表执行动画的时常，毫秒数，也可以是代表时常的字符串
        • 参数二：代表动画执行完毕后的回调函数
      • slideToggle（）：如果没有就滑入，如果有就滑出
    • 淡入、淡出和切换
      • fadeIn（）fadeOut（）
        • 不给参数相当于默认值
        • 参数一：代表执行动画的时常，毫秒数，也可以是代表时常的字符串
        • 参数二：代表动画执行完毕后的回调函数
      • fadeToggle（）：如果没有就淡入，如果有就淡出
      • fadeTo（）：淡入到哪里

16. 自定义动画animate（）

    • 参数一：必选的 对象 代表动画的属性
    • 参数二：可选的 代表执行动画的时常
    • 参数三：可选的 easing 代表的是缓动swing（默认）还是匀速linear
    • 参数四：可选的 动画执行完毕后的回调函数

17. 动画队列和停止动画

    • stop（）
      • 不写参数就是两个false
      • 参数一：是否清除队列
      • 参数二：是否跳转到最终结果

18. jQuery节点操作

    • 创建

      • html（）设置或者获取内容的
        • 不给参数就是获取所有内容
        • 给参数就是设置内容，设置内容会把原来的内容覆盖掉，如果设置的内容中包含了标签，是会把标签给解析出来的
      • $（）能创建元素，但是创建的元素只存在于内存中，如果要在页面上显示，就要追加
        • 追加节点append（）

    • 添加

      • append（）（子元素）

        • 父元素.append（子元素），作为最后一个子元素添加

        • 把已经存在标签添加到父标签中，就相当于是剪切粘贴到了最后

      • prepend（）（子元素）

        • 把所有添加的放到第一个位置，不管是新添加还是剪切粘贴的都是放到首位

      • before（）（兄弟元素）

        • 元素A.before（元素B），就是把元素B插入到元素A的前面

      • after（）（兄弟元素）

        • 元素A.before（元素B），就是把元素B插入到元素A的后面

      • appendTo（）

        • 子元素.appendTo（父元素），把子元素作为父元素的最后一个子元素添加

    • 清空和删除（区别：内容清空和标签删除）

      • html（）：不推荐使用，有可能会造成内存泄漏，不安全
      • empty（）：推荐使用
      • remove（）：自杀

19. 克隆节点

    • clone（）只存在于内存中，如果要在页面上显示，需要追加到页面上（使用append（）方法）
    • 不管参数是true（表示会把事件一起克隆）还是false（默认）（就不会克隆事件）都会克隆到后代节点

20. 获取或设置表单元素内容

    • val（）不给参数就是获取、给参数就是设置

21. jQuery操作属性

    • attr（参数1，参数2）：更改属性、修改自定义属性、添加属性
    • attr（参数）：自带属性可获取、自定义属性可获取、如果没有属性（值为underfined）
    • attr（参数）：可移除自带属性，可移除自定义属性，可移除添加属性
    • removeAttr（参数…）：移除多属性

22. 操作布尔类型的属性

    • prop（）在jQuery1.6之后操作布尔类型属性，选中是true，没选中是false

23. jQuery尺寸和位置操作

    • width（）和height（）方法，可设置或获取高度，不包括内边距，边框和外边距
    • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TowWaeVu-1618761399147)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210418131018550.png)]
    • 可视区宽高
    • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ssLRZGM0-1618761399147)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210418131333859.png)]
    • offset（）和position（）
    • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8p2ribxm-1618761399148)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210418160243570.png)]
    • 设置或者获取垂直滚动条的位置
    • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P1AaIFBw-1618761399149)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210418160601230.png)]

24. jQuery事件发展历程

    • 用原生js给注册事件，原生js注册相同的事件，后面的会把前面的覆盖掉
    • jQuery给同一个元素注册同样的事件，后面的不会把前面的给覆盖掉
    • 简单事件绑定（click（）不支持同时注册，也不支持动态注册）
    • bind方式注册事件（支持同时注册，也不支持动态注册）
    • delegate注册委托事件（只能注册委托事件，因此注册时间需要记得方法太多了）（原理是事件冒泡）
    • jQuery1.7之后用on统一了所有事件的处理方法
      • on简单注册事件（不支持动态注册）
      • on委托注册（支持动态注册）
        • 使用on委托事件添加删除方法
    • 事件解绑off（）
      • 不给参数就是解绑所有事件
      • 给参数就是解绑指定的事件
    • 事件触发trigger（）
      • 代码的方式触发事件
      • 可以使用它来触发自定义事件

25. 事件对象

    • 注册一个事件，系统就会帮我们生成一个对象记录这个事件触发时候的一些信息，比如出发事件的时候有没有按住某个键，再比如触发这个事件的时候的一些坐标信息
    • jQuery中用事件参数e来获取
    • jQuery的事件对象是对原生js事件对象的一个封装，帮助我们处理好了兼容性
    • 事件对象中有三个常用的坐标
    • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ioZhWxFh-1618761399150)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210418192934867.png)]

26. jQuery补充知识点

    • 链式编程：通常情况下，只有设置操作才能把链式编程延续下去，因为获取操作的时候，会返回取到的相应的值，无法返回jQuery对象
    • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pVBncmQK-1618761399150)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210418212321772.png)]
    • 什么时候可以链式编程
      • 如果给元素调用一个方法，这个方法没有返回值，并且返回的是一个jQuery对象，那就可以继续在点出jQuery方法
      • 必须是jQuery对象才能点出jQuery方法

27. 显示迭代

    • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZaKvhS05-1618761399151)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210418215055957.png)]

28. 多库共存

    • 通过jQuery文件名来查看jQuery的版本是不靠谱的做法
    • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Agt6EVCc-1618761399152)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210418215534466.png)]
    • 通过以下四种方式来查看jQuery的版本
    • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-drcBAfui-1618761399153)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210418215630025.png)]
    • 当引入多个jQuery库时候，后面的$会覆盖掉前面的$，所以引入了noConflict（）方法来把$的控制权给释放掉

29. 插件

    • 用来做扩展功能的
    • jQuery插件库：www.jq222.com
    • 使用插件
      • 引入jQuery文件
      • 引入插件文件
      • 调用插件方法

30. jQueryUI

    • jQueryUI插件是jQuery团队自己开发的一套用户界面插件

31. 自己封装插件

    • 给jQuery的原型添加方法
    • 给jQuery直接添加方法