jQuery--jQuery概述、优势、各版本对浏览器的支持情况、引入jQuery库

ゝ一纸荒年。 2021-08-13 13:43 740阅读 0赞

#### jQuery概述 ####

JavaScript语言是NetScape公司开发的一种脚本语言，其功能强大，交互性强，是Web前端语言发展过程中的一个重要里程碑。JavaScript的实时性、跨平台、使用简单且安全性较高等特点决定了其再Web前端涉及中的重要第位。

但随着浏览器种类的推陈出新，JavaScript对浏览器的兼容性收到了极大挑战，网页前端设计者往往因浏览器的不兼容而导致工作量大增。2006年1月，美国John Resing创建了一个基于JavaScript的开源框架——jQuery。与JavaScript相比，jQuery具有代码高效、浏览器兼容性更好等特征，极大简化了对DOM对象、事件处理、动画效果以及AJAX等操作。

#### jQuery优势 ####

*  访问和操作DOM元素  
    jQuery中封装了大量的DOM操作，可以非常方便地获取或修改页面中的某个元素，包括元素的移动、赋值、删除等操作
 *  强大的选择器  
    jQuery允许开发人员使用CSS1~CSS3所有的选择器，方便快捷地控制元素的CSS样式，并很好地兼容各种浏览器
 *  可靠的事件处理机制  
    使用jQuery将表现层与功能层分离，可靠的事件处理机制让开发者更多专注于程序的逻辑设计
 *  完善的Ajax操作  
    Ajax异步交互技术极大方便了程序的开发，提高了浏览器的体验度。在jQuery库中将Ajax操作封装到函数$.ajax()中，开发者只需专心实现业务逻辑处理，无需关注浏览器的兼容性问题
 *  链式操作方式：  
    在某一个对象上产生一系列动作时，jQuery允许在现有对象上连续多次操作，链式操作是jQuery的特色之一
 *  完善的文档  
    jQuery是一个开源产品，提供了丰富的文档

**jQuery1.x与jQuery2.x对浏览器的支持情况：**

<table> 
 <thead> 
  <tr> 
   <th align="center">版本</th> 
   <th align="center">IE</th> 
   <th align="center">Chrome</th> 
   <th align="center">Firefox</th> 
   <th align="center">Safari</th> 
   <th align="center">Opera</th> 
   <th align="center">IOS</th> 
   <th align="center">Android</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">jQuery1.x</td> 
   <td align="center">6+</td> 
   <td align="center">支持</td> 
   <td align="center">支持</td> 
   <td align="center">5.1+</td> 
   <td align="center">12.1+</td> 
   <td align="center">6.1+</td> 
   <td align="center">2.3.4.0+</td> 
  </tr> 
  <tr> 
   <td align="center">jQuery2.x</td> 
   <td align="center">9+</td> 
   <td align="center">支持</td> 
   <td align="center">支持</td> 
   <td align="center">5.1+</td> 
   <td align="center">12.1+</td> 
   <td align="center">6.1+</td> 
   <td align="center">2.3.4.0+</td> 
  </tr> 
 </tbody> 
</table>

#### 引入jQuery库 ####

jQuery不需要安装，只需要将下载的jQuery库放到站点的一个公共目录中，然后在页面中通过< script />标签引入即可。

测试：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
    	</head>
    	<body>
    		<div id="myDiv">Hello World</div>
    		<script type="text/javascript"> $(document).ready(function(){ alert($("#myDiv").html()); }); </script>
    	</body>
    </html>

![在这里插入图片描述][20190930213453441.png]

#### window.onload与$(document).ready()区别 ####

<table> 
 <thead> 
  <tr> 
   <th align="center">区别项</th> 
   <th align="center">window.onload</th> 
   <th align="center">$(document).ready()</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">执行时间</td> 
   <td align="center">必须在页面全部加载完毕（包含图片下载）后才能执行</td> 
   <td align="center">在页面中所有DOM结构下载完毕后执行，此时可能DOM元素关联的内容并没有加载完毕</td> 
  </tr> 
  <tr> 
   <td align="center">执行次数</td> 
   <td align="center">一个页面只能由一个，当页面中存在多个window.onload时，仅输出最后一个的结果，无法完成多个结果同时输出</td> 
   <td align="center">一个页面可以有多个，姐u共可以相继输出</td> 
  </tr> 
  <tr> 
   <td align="center">简化写法</td> 
   <td align="center">无</td> 
   <td align="center">可以简写成$()</td> 
  </tr> 
 </tbody> 
</table>

[20190930213453441.png]: /images/20210813/a5d2cb133a494df1bb372402f7170fe5.png