jQuery学习（一）认识jQuery

约定不等于承诺〃 2021-06-15 20:36 705阅读 0赞

# 认识jQuery #

## 1.原生JS的缺点 ##

首先呢，我们来做一个小的案例：在界面上放置两个按钮，四个div，这两个按钮的功能分别是给div添加边框和添加一些文字。我们用原生的js来实现一下这个功能：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css"> div { height: 60px; width: 300px; } </style>
    	</head>
    	<body>
    		<button type="button" id="btn1">添加边框</button>
    		<button type="button" id="btn2">添加文字</button>
    		<div> </div>
    		<div> </div>
    		<div> </div>
    		<div> </div>
    
    	</body>
    </html>
    
    <script type="text/javascript"> // 入口函数 window.onload = function() { // 获取对应的元素 var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); var divs = document.getElementsByTagName("div"); // 给btn1添加点击事件,书写方法体 btn1.onclick = function() { for (var i = 0; i < divs.length; i++) divs[i].style.border = '1px solid red'; } // 给btn2添加点击事件,书写方法体 btn2.onclick = function() { for (var i = 0; i < divs.length; i++) divs[i].textContent = "随便显示一些文字！"; } } </script>

我们看一下效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]  
通过这个示例，我们看一下原生的JS都有哪些欠缺的地方：

1.  首先是不能添加多个入口函数（window.onload），如果添加了多个入口函数，后面的就会把前面的覆盖掉，导致前面实现的功能全部失效。
2.  其次是原生的js的api名字都太长太难记。
3.  还有就是js有的时候代码冗余。比如上面我们用到的for循环，就重复了两遍。
4.  更致命的是，原生的js，存在着浏览器兼容性问题，这一点在学习的时候令我们头疼不已。
5.  还有，原生的js容错率很低，前面的代码如果出现了问题，后面的代码也执行不了。

## 2. 体验jQuery ##

通过上面的案例我们发现了原生js的很多问题，那么我们有没有办法解决上面的问题呢，答案是有的，我们就用jQuery来重新写一下上面的小功能，这里我们先不用计较代码的含义，我们只需要大体的感知一下就可以了：  
（我们只列出script标签内的代码，其他的部分跟上面的都相同）

<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript"> // 入口函数 $(document).ready(function() { // 设置边框 $('#btn1').click(function() { $('div').css('border', '1px solid red'); }); // 设置边框 $('#btn2').click(function() { $('div').text("我喜欢唱跳rap篮球。") }); }); </script>

我们发现这样的效果是相同的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 1]

我们可以参考上面的两种代码，比较一下，我们总结一下jQuery的优点有哪些：

1.  首先是入口函数，jQuery是可以添加多个入口函数的，尽管这一点没有在上面体现出来，我们可以自己添加一个其他的入口函数试一试。
2.  jQuery的api名字都比较容易记忆，我们可以看一下在js里面获取两个按钮的对象需要写`var btn1 = document.getElementById("btn1");`，而在jQuery中，我们只需要书写`$('#btn1')`就可以了。
3.  jQuery的代码十分简洁，我们可以看到在jQuery中给每一个div设置样式的时候，我们没有进行循环遍历。（jQuery的隐式迭代）
4.  jQuery帮我们解决了浏览器兼容性问题。
5.  jQuery的容错率比较高，前面的代码出了问题，后面的代码不会受影响。

## 3. jQuery是什么？ ##

我们看一下jQuery官网中的解释：  
![在这里插入图片描述][20191113162202701.png]  
**参考译文：**

> 什么是jQuery？  
> jQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。兼具多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。

我们可以知道，jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。jQuery是一个js文件，里面封装了一大堆的方法方便我们的开发，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。

## 4. 怎样使用jQuery？ ##

首先我们需要引入jQuery文件；

<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>

然后我们还要写一个入口函数：

$(document).ready(function() { 
    	// 代码写在这里
    });

然后我们使用jQuery选择器找到我们要操作的元素，然后对元素进行操作就可以了，比如给一个div，设置宽高分别为100px，背景为红色，文本为“唱跳rap篮球”，我们就可以写成：

$('div').width(100px).height(100px).css('backgroundColor','red').text("唱跳rap篮球");

这称之为链式编程，我们在后面再进行介绍。

## 5. jQuery的版本 ##

官网下载地址：[http://jquery.com/download/][http_jquery.com_download]  
jQuery版本有很多，分为1.x、2.x、3.x。  
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。

### 大版本分类： ###

*  1.x版本：能够兼容IE678浏览器
 *  2.x版本：不能兼容IE678浏览器
 *  3.x版本：不能兼容IE678浏览器，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

**关于压缩版和未压缩版：**

*  jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。
 *  jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

## 6. jQuery的入口函数 ##

jQuery的入口函数有两种写法：

// 入口函数
    $(document).ready(function(){ 
    	// 代码写在这里
    });

//入口函数2
    $(function(){ 
    	//代码写在这里
    });

这两种写法都是可以的。

**而且，我们需要特别注意一下window.onload()入口函数和jQuery入口函数的区别：**

1.  JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2.  jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。这就导致了jQuery的入口函数执行会早于window.onload()。

## 7. $ 是什么？ ##

首先我们试一下不引入jQuery文件，写一些jQuery的代码，看看会出现什么？  
![在这里插入图片描述][20191114092533950.png]  
浏览器报了一个错误，提示说`$ is not defined`，也就是说，如果以后我们遇到了这个错误，就表示我们没有引入jQuery文件。

我们在打开jQuery文件本身，观察一下文件的结构。  
如果仔细观察，可以发现，jQuery整个文件的结构其实是这样的：

(function (){ 
    	......
    	window.jQuery = window.$ = jQuery;
    }());

它其实是一个自执行函数。并且给window添加了两个属性jQuery和$，并且值为jQuery。

我们还知道，如果引入一个js文件，是会执行这个js文件中的代码的。而jQuery文件是一个自执行函数，执行这个jQuery文件的代码，其实就是执行这个jQuery自执行函数。这个自执行文件就是给window对象添加一个jQuery属性和一个$属性。

那么上面的这个jQuery是怎么来的呢？  
我们再看一下jQuery的代码（我这里使用的是1.12.4版本）：

// Define a local copy of jQuery
    jQuery = function( selector, context ) { 
    
    	// The jQuery object is actually just the init constructor 'enhanced'
    	// Need init if jQuery is called (just allow error to be thrown if not included)
    	return new jQuery.fn.init( selector, context );
    },

现在我们明白了，$其实和jQuery是等价的，是一个函数。

我们可以看一下：

结果：  
![在这里插入图片描述][20191114095318418.png]  
既然$是一个函数，如果我们传递的参数不同，那么它的效果也会不一样。

*  如果我们传递的是一个匿名函数，那它就是一个入口函数了。
 *  如果函数传递的是一个字符串，那么它就成为了我们的选择器，也有可能创建一个标签。
 *  如果我们传递的是一个dom对象，那它就会把dom对象转换成jQuery对象。

--------------------

END.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]: /images/20210615/560f2ccc834d4b12bd237656e5bcf321.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 1]: /images/20210615/68549d86386b41f58b8a363238b87d01.png
[20191113162202701.png]: /images/20210615/23c069eea17a452abd220ca38f726a0f.png
[http_jquery.com_download]: http://jquery.com/download/
[20191114092533950.png]: /images/20210615/741c79d6193248a89ca366fec67e3378.png
[20191114095318418.png]: /images/20210615/ee0c8fdbf3ae4ab38c1ded618b170d2f.png