前言

​  上篇文章让大家认识了 jQuery ，并学会如何使用 jQuery , 那今天这篇带大家再深一步的聊聊，看完一定要尝试练习一遍哟~

​  首先，要先和大家聊一下 jQuery 对象和 DOM 对象。

一、jQuery 对象和 DOM 对象

1.1 DOM 对象是什么？

我比较喜欢实践，直接示例吧，有一定 JavaScript 基础的同学很容易看懂，基础不好的其他同学该补补课咯。

• 代码示例

  • html

    <button>隐藏盒子</button>
    <div class="box"></div>
    

  • css

    .box {
           
        width: 200px;
        height: 200px;
        background-color: green;
    }
    

  • JavaScript

    // 点击按钮
    document.querySelector('button').addEventListener('click', function () {
           
        // 控制台输出当前绑定事件的元素
        console.log(this)
        // 隐藏盒子
        document.querySelector('.box').style.opacity = 0
    })
    

• 效果如下

  

咦，看过我上篇文章的同学肯定想，这不和上篇最后展示的效果一样吗，没错，效果一样，只不过这次 JavaScript 的代码是 DOM 对象。

​  我们有一行代码是控制台输出当前绑定事件的元素，看下图，这个样式就表示是 DOM 对象。

​

1.2 jQuery 对象是什么？

• 首先我们要知道 jQuery 的顶级对象是 $ 。
• $ 是 jQuery 的别称，在代码中可以使用 jQuery 代替，一般为了方便，通常都直接使用 $ 。
• $ 是 jQuery 的顶级对象，相当于原生 JavaScript 中的 window，把元素利用 $ 包装成 jQuery 对象，就可以调用 jQuery 的方法。

就不再放代码了，直接甩控制台输出结果示例

​  看到这种伪数组存储的形式就是 jQuery 对象。

总结

1. 用原生 JS 获取的对象就是 DOM 对象。
2. jQuery 方法获取的元素就是 jQuery 对象。
3. jQuery 对象本质是：利用 $ 对 DOM 对象包装后产生的对象（伪数组形式存储）。

注意：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScript 方法。

看下图更容易理解些

1.3 jQuery 对象和 DOM 对象转换

  这两个对象之间是可以相互转换的，因为原生 JS 比 jQuery 更大，原生的一些属性和方法 jQuery 没有给我们封装，所以要想使用这些属性和方法需要把 jQuery 对象转换为 DOM 对象才能使用。

​  ps：实际开发中比较常用的是把 DOM 对象转换为 jQuery 对象，这样才能够调用功能更加强大的 jQuery 中的方法。

• DOM 对象转换成 jQuery 对象（方法只有一种）

  // 获取 DOM 对象
  var box = document.querySelector('.box')
  // 把 DOM 对象转换为 jQuery 对象
  var jQueryObject = $(box) 
  

• jQuery 对象转换为 DOM 对象（方法有两种）

  // jQuery 对象[索引值]
  var Dom1 = $('div')[0]
  console.log(Dom1)
  
  // jQuery 对象.get[索引值]
  var Dom2 = $('div').get(0)
  console.log(Dom2)
  

二、jQuery 选择器

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

• 它允许对 HTML 元素组和单个元素进行操作。
• 它基于元素的 id、类、类型、属性、属性值等查找或选择 HTML 元素，基于已经存在的 CSS 选择器，它还有一些自定义的选择器。
• 它的所有选择器都以美元符号开头：$()。

2.1 基础选择器

• 说明：里面选择器直接写 CSS 选择器即可，但是要加引号。

$('选择器')

2.2 层级选择器

2.3 筛选选择器

jQuery 中还有一些筛选方法，类似 DOM 中通过一个节点找另外一个节点，除了父、子、兄以外有所加强。

若对你有收获，下一篇再见吧😊