什么是jQuery

jQuery是一款跨浏览器的开源JavaScript库，它的核心理念是write less,do more（写得更少，做的更多）。

jQuery 1.x版本兼容IE6/7/8，使用最为广泛，所以推荐使用1.x最新版本(官网地址：https://code.jquery.com/)

DOM对象与jQuery对象

什么是DOM对象

在Javascript中，经常需要操作DOM。所谓DOM指的是文档对象模型。它提供了对文档结构化的描述，并将HTML页面与脚本、程序语言联系起来.

什么是jQuery对象

$()是一个工厂函数，通过$(参数)的形式可以创建jQuery的实例对象，创建了jQuery对象之后，可以调用提供的方法。
备注：$(参数)等价于jQuery(参数)，若在项目中$被用于其他功能，则可使用jQuery进行操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery对象</title>
    <script src="./js/jquery-1.12.4.js"></script>  <!--引入本地jQuery-->
</head>
<body>
    <div>Hello jQuery</div>
    <script>
        //创建div元素对象，保存为obj
        var obj = $('div');
        //判断obj是否为jQuery对象
        alert(obj instanceof jQuery);  //输出结果为true
        //调用html()方法获取元素的内容
        alert(obj.html());  //输出结果为Hello jQuery
    </script>
</body>
</html>

拓展：
在使用jQuery时，不仅可以通过jQuery对象调用实例方法，还可以直接通过“$.方法名()”的形式调用静态方法。
静态方法“$.trim()”可以过滤字符串两端的空白字符

jQuery对象转换成DOM对象

jQuery对象属于类数组对象，其内部将DOM对象作为数组元素。jQuery对象转换成DOM对象有两种方式，index表示DOM对象在jQuery对象中的索引。
方式1：obj[index]

1
2
3
4
5
6
7
8
9
<div>第一个div</div>
<div>第二个div</div>
<script>
    var divs = $('div')  //divs类数组
    var div1 = divs[0];
    var div2 = divs[1];
    alert(div1.innerHTML);
    alert(div2.innerHTML);
</script>

方式2：obj.get(index)

1
2
3
4
5
<div>第一个div</div>
<script>
    var result = $('div').get(0).innerHTML;
    alert(result);
</script>

DOM对象转换成jQuery对象

将DOM对象作为$()函数的参数，即可转换成jQuery对象

1
2
3
4
5
6
7
8
<button id="myBtn">Hello HuangZebin</button>
<script>
    //获取DOM对象myBtn
    var btn = document.getElementById('myBtn');
    //将DOM对象转为jQuery对象
    var btn1 = $(btn);  //这里不用单引号!
    alert(btn1[0] === btn);  //三等于号（值 类型 都相同）
</script>

Chrome开发者工具讲解

外链：https://blog.csdn.net/Huang2016SCJ/article/details/101017442