• jQuery的概念、基本使用、选择器、样式操作


    仓库: 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了

    JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。

    简单理解: 就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

    比如 jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)。

    jQuery 的概念:jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。

    j 就是 JavaScript; Query 查询; 意思就是查询js,把js中的DOM操作做了封装,可以快速的查询使用里面的功能。

    jQuery 封装了 JavaScript 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。

    学习jQuery本质: 就是学习调用这些函数(方法)。

    优点:

    轻量级。核心文件才几十kb,不会影响页面加载速度

    跨浏览器兼容。基本兼容了现在主流的浏览器

    链式编程、隐式迭代

    对事件、样式、动画支持,大大简化了DOM操作

    支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等  免费、开源

    jQuery 的入口函数

    7bc7a50b25964463abc96c6c55f9bb24.png

    496d239e416c40d38941954c3a35b6f0.png 

     1. 等着 DOM 结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery 帮我们完成了封装。

    2. 相当于原生 js 中的 DOMContentLoaded。

    3. 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。

    4. 更推荐使用第一种方式。

    4a332a34c0ee4766ba37281242d02c40.png

    jQuery 的顶级对象 $

    1.$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替 $,但一般为了方便,通常都直接使用 $ 。

    2.$ 是jQuery 的顶级对象, 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象,就可以调用jQuery 的方法。

    166ffcd870864055aa00b8c9f2bea97c.png

    jQuery 对象和 DOM 对象

    1. 用原生 JS 获取来的对象就是 DOM 对象

    2. jQuery 方法获取的元素就是 jQuery 对象。

    3. jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)。

    注意:

    只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法

    2ed9ea6cccdf45bb97abd2babb7d03a1.png

    DOM 对象与 jQuery 对象之间是可以相互转换的。

    因为原生js 比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

    9a5f5cdacd2b4f53b040df8d4c174b61.png

    b2d0e1c89353491c9be6dd995a4b8f32.png 

     a9a4da24e2bc4795b37c22c92f7e5c3c.png

    jQuery 基础选择器

    原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准

    ce4297f9546b4a44a6376ba91bab584f.png

    358b2c0f7c7d46788ba5b714a4496fb8.png 

    jQuery 层级选择

    e5f43948346c4b8d9a2ac8bb60ae1643.png

    b4a0809d6c6c45dc83251cdba3d1ecf8.png 

    136cdda275bb42b99bccd441e69e2977.png 

    遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代。给匹配到的所有元素进行循环遍历,执行相应的方法,而不用再进行循环,简化我们的操作,方便我们调用。

    a8a70fcf97264424bdf5076e6f4a9226.png

    jQuery 筛选选择器

    c03900f7f6424f6da882757aeaa8ea7a.png 

    e7402bfcbd7142bf8b8bd33bc4c5bede.png 

     32cbb84996334688bef7e37a62fde22c.png

    jQuery 里面的排他思想:当前元素设置样式,其余的兄弟元素清除样式。

    0b8cedb0231b4c90a69c9fb1268465fa.png

     链式编程是为了节省代码量,看起来更优雅

    e31a34106a66416dbc0cf935c2e6b4a6.png

     使用链式编程一定注意是哪个对象执行样式.

    03428aec3e9a4dbab5ced389c5377b61.png

    jQuery 样式操作

    jQuery 可以使用 css 方法来修改简单元素样式; 也可以操作类,修改多个样式。

    75ffbeaa77164d37bcf9b7b7635c5620.png

    36b06aeb2c01438c8c5cae6fdb55cc63.png 

    46f3c5785fa94aa6b27e801295557d42.png 

    d8be1b1d7a21448cb37129fb67bd076b.png 

    设置类样式方法

    作用等同于以前的 classList,可以操作类样式, 注意操作类里面的参数不要加点。

    81f69caba6b64d5b9c84acbd0389eca1.png

    6ddda4e746ad4a5a9277d14aaa71a133.png 

    3f6d2c58412a451f8e867ba135f3bfdf.png 

    a0c2f579fe1042f0aae65070e07f3bf2.png 

     tab栏切换

    2e2e05e921f048de8f7edaddbad2bae6.png

    类操作与className区别

    原生 JS 中 className 会覆盖元素原先里面的类名。

    jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。

    e18637b7936a467e901f4f3336cd61df.png

     

  • 相关阅读:
    如何调试 Python 代码
    构造方法、方法重载、全局变量与局部变量
    MySQL高级十一:其它索引详解
    java使用策略模式优化代码中的if-else if 判断。
    行业分析| 快对讲,楼宇对讲
    SpringBoot项目中使用MybatisPlus
    Linux之强大的gawk
    CF1477D Nezzar and Hidden Permutations 题解
    7-34 通讯录的录入与显示
    手写useState与useEffect
  • 原文地址:https://blog.csdn.net/weixin_53155105/article/details/126312704