jQuery的介绍与使用

在使用jQuery之前先来简单了解一下jQuery是什么？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它基于JavaScript来封装JavaScript中常用的功能代码，提供一种简便的JavaScript设计模式， HTML 元素选取、HTML 元素操作、CSS 操作、 HTML 事件函数、JavaScript 特效和动画、 HTML DOM 遍历和修改、 AJAX交互、Utilities。总而言之jQuery为开发人员提供了快速和简洁的创作工具。

 

一、如何使用jQuery

     jQuery是一个JavaScript脚本库，不需要特别的安装，只需要我们在页面标签内中，通过<script>标签引入jQuery库即可，我这里使用的是一个jQuery-3.2.1.min的版本，如图：

 

直到该文献发布之前jQuery是已经发布到了jquery-3.4.1版本，这时你可能会发现我说的和上面说的会不太一样，是的，jQuery发布的时候会发布两个版本一个正常的一个压缩的也称为 min 版，在使用上二者是没有任何的区别，但在体积上min版的占用内存会更小。

 

     jQuery下载地址：https://jquery.com/download/

 

二、jQuery对象获取方法

在获取对象这里我们会发现jQuery和css中很相似的地方，但又与JavaScript相差很大，jQuery语法是通过选取 HTML 元素，并对选取的元素执行某些操作

     基础语法：$(selector).action();

      - $美元符号定义jQuery

      - selector 选择符需要查找的元素  

      - action() 执行对元素的操作

支持css1~css3中的主流选择器 直接标签名:div  id选择: #div  类名选择:.div

仅需要改为 $(“选择器”)即可选择到该元素 

       

三、对象之间的转换

     3.jQuery可以使用jQuery库里面的方法，但是不能直接使用JavaScript中的方法，且JavaScript也是只可使用JavaScript库里面的方法，也不能直接使用jQuery中的方法，但jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中，我们需要jQuery与DOM能够相互的转换，它们都是可以操作的DOM元素，jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。如图：

 

使用jQuery中的get()方法进行转换，只需要提供一个索引就可以了

  var div=$divs.get(0);                                                     

将$divs对象中索引为0的元素转换为DOM对象

DOM对象与jQuery对象之间的转换  //JS对象包含 DOM对象

相比较jQuery转化成DOM，开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法，通过传递不同的参数而产生不同的作用。如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象

通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了。 

 

四、DOM对象与jQuery对象的区别

     1.DOM对象是通过原生的JS获取的对象，DOM对象只能使用JS中的方法和属性

     2.jQuery对象是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的。

通过标准的JavaScript操作DOM与jQuery操作DOM的对比，我们不难发现：

通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。

通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短，如图：

jQuery:具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

最后，jQuery的核心特性可以总结为：简洁、高效、快速、兼容性强……