JQuery
主要内容
Jquery对象
jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多，使用 jQuery 将极大的提高编写 javascript 代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更加健壮，"如虎添翼"。同时网络上丰富的 jQuery 插件也让我们的工作变成了"有了 jQuery，一切 so easy。" --因为我们已经站在巨人的肩膀上了。
jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多 JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，jQuery已经成为最流行的 javascript 框架，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。
Jquery的下载与安装
下载
http://jquery.com/ 下载
版本
jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不支持 ie6 7 8,如果需要下载 1.X)
(1)完整版 : jquery-2.1.4.js -->学习版本(学习源码 想高手学习是最好学习方法)
(2)压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版，减少传输)
目前使用版本：jquery-3.4.1.js
优点
(1)提供了强大的功能函数
(2)解决浏览器兼容性问题
(3)实现丰富的 UI 和插件
(4)纠正错误的脚本知识
......
安装
在页面引入即可
Jquery核心
 $ 符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象。通过该对象可以获取jQuery对象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。
$ <==> jQuery
Dom对象 与 Jquery包装集对象
明确 Dom 对象和 jQuery 包装集的概念, 将极大的加快我们的学习速度。原始的Dom对象只有DOM接口提供的方法和属性，通过js代码获取的对象都是dom对象；而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象，只有jQuery对象才能使用jQuery提供的方法。
Dom对象
javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法：
var div = document.getElementById("testDiv");var divs = document.getElementsByTagName("div");
Jquery包装集对象
可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封装成一个 jQuery 包装集,比如获取包含一个元素的 jQuery 包装集：
var jQueryObject = $("#testDiv");
Dom对象 转 Jquery对象
Dom对象转为jQuery对象，只需要利用$()方法进行包装即可
var domDiv = document.getElementById('mydiv');  // 获取Dom对象mydiv = $(domDiv);
Jquery对象 转 Dom对象
jQuery对象转Dom对象，只需要取数组中的元素即可
// 第一种方式 获取jQuery对象var jqueryDiv = jQuery('#mydiv');// 第二种方式 获取jQuery对象jqueryDiv = $('#mydiv');var dom = jqueryDiv[0]; // 将以获取的jquery对象转为dom
通过遍历jQuery对象数组得到的对象是Dom对象，可以通过$()转为jQuery对象
$('#mydiv').each(function() {//遍历       var jquery = $(this);    });
案例：
write less, do more
​

JQuery

主要内容



Jquery对象

​ jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多，使用 jQuery 将极大的提高编写 javascript 代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更加健壮，"如虎添翼"。同时网络上丰富的 jQuery 插件也让我们的工作变成了"有了 jQuery，一切 so easy。" --因为我们已经站在巨人的肩膀上了。

​ jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多 JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，jQuery已经成为最流行的 javascript 框架，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。

Jquery的下载与安装

下载

​ <http://jquery.com/>; 下载

版本

​ jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不支持 ie6 7 8,如果需要下载 1.X)

​ （1）完整版 : jquery-2.1.4.js -->学习版本(学习源码 想高手学习是最好学习方法)

​ （2）压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版，减少传输)

​ 目前使用版本：jquery-3.4.1.js

优点

​ （1）提供了强大的功能函数

​ （2）解决浏览器兼容性问题

​ （3）实现丰富的 UI 和插件

​ （4）纠正错误的脚本知识

​ ......

安装

​ 在页面引入即可

<script src="js/jquery-3.4.1.js" type="text/javascript" ></script>

Jquery核心

​ <font color="red"> $ 符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象。</font>通过该对象可以获取jQuery对象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。

$ <==> jQuery

Dom对象 与 Jquery包装集对象

​ 明确 Dom 对象和 jQuery 包装集的概念, 将极大的加快我们的学习速度。原始的Dom对象只有DOM接口提供的方法和属性，通过js代码获取的对象都是dom对象；而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象，只有jQuery对象才能使用jQuery提供的方法。

Dom对象

​ javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法：

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

Jquery包装集对象

​ 可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封装成一个 jQuery 包装集,比如获取包含一个元素的 jQuery 包装集：

var jQueryObject = $("#testDiv");

Dom对象 转 Jquery对象

​ Dom对象转为jQuery对象，只需要利用$()方法进行包装即可

var domDiv = document.getElementById('mydiv');  // 获取Dom对象
mydiv = $(domDiv);

Jquery对象 转 Dom对象

​ jQuery对象转Dom对象，只需要取数组中的元素即可

// 第一种方式 获取jQuery对象
var jqueryDiv = jQuery('#mydiv');
// 第二种方式 获取jQuery对象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0]; // 将以获取的jquery对象转为dom

​ 通过遍历jQuery对象数组得到的对象是Dom对象，可以通过$()转为jQuery对象

$('#mydiv').each(function() {//遍历
       var jquery = $(this);    
});

案例：

<div id="mydiv">write less, do more</div>

<script type="text/javascript">
    console.log("-------------获取dom对象------------------")
    // dom对象
    var domDiv = document.getElementById("mydiv");
    console.log(domDiv);

    console.log("-------------获取jquery对象------------------")
    // 获取jquery对象
    // 第一种方式
    var jqueryDiv = jQuery('#mydiv');
    console.log(jqueryDiv);
    // 第二种方式
    jqueryDiv = $('#mydiv');
    console.log(jqueryDiv);

    console.log("-------------dom转jquery------------------")
    // dom转jquery包装集/对象
    var obj = $(domDiv);
    console.log(obj);

    console.log("-------------jquery转dom------------------")
    // jquery对象转dom对象
    var dom = $('#mydiv')[0]; // 获取jquery对象转为dom
    // 或
    var dom2 = jqueryDiv[0]; // 将jquery对象转为dom
    console.log(dom);
    console.log(dom2);

    /* this代表了dom对象，不是jquery对象 */
    console.log("-------------dom转jquery------------------")
    $('#mydiv').each(function() {
   // 通过id选择器选择了id为mydiv的所有元素然后进行遍历
   // 那么遍历出的每个元素就是id为mydiv的标签元素
   // 而this就代表了当前的这个元素
        var jquery = $(this);   
    });

    console.log("-------------jquery转dom------------------")
    $('#mydiv').each(function() {
        var dom3 = this;    
    });
</script>

jQuery 库可以通过一行简单的标记被添加到网页中。

您需要具备的基础知识

在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：

HTML

CSS

JavaScript

如果您需要首先学习这些科目，请在我们的 首页 查找这些教程。

什么是 jQuery ？

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

脚本之家小编补充：

优点：

相比于原生的js代码，用很少的代码就可以实现很强大的功能，并且兼容性也好，现在很多用原生js考虑支持多浏览器等等，尤其是jquery的选择器比较强大，一般多用于实际项目的使用，减少开发周期，一般公司都会要求用jquery，一般人的js达不到这种水平。

缺点：

但对于刚开始接触js的同学就是用这个是不利于学习的，很多人可能会使用jquery却不太会写原生的js了，不利于个人技术的提升， 所以对于初期js学习者可以先用原生的js练练手，对比着jquery是学习，要不以后就不会出现比jquery更好的js库了。

jQuery库包含以下功能：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

提示： 除此之外，Jquery还提供了大量的插件。

为什么使用 jQuery ？

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

很多大公司都在使用 jQuery， 例如:

Google

Microsoft

IBM

Netflix

jQuery是否适用于所有浏览器?

jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题，目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!

jquery是基于javascript类库的框架， 它里面提供了许多javascript类库，和一些css样式表的封装， 使用起来比较方便， 简化了用户与浏览器的交互， 提高了系统的性能和开发效率。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

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

语言特点

1、快速获取文档元素

jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。

2、提供漂亮的页面动态效果

jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。

3、创建AJAX无刷新网页

AJAX是异步的JavaScript和ML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。

到此这篇关于jQuery是用来干什么的 jquery其实就是一个js框架的文章就介绍到这了

现在来学习JQuery，既然学习，那我们就先来看看JQuery到底是什么，可以用来干什么

是什么：JQuery　是一JavaScript库，

作用：JQuery    极大的简化了JavaScript编程（如何简化，通过6个字写得少，做的多来实现）

是否易学:很容易学习

是目前最流行的JS框架。

该库包含

HTML元素选取

HTML元素操作

CSS操作<style>

HTML事件函数

JavaScipt特效和动画

HTML ＤＯＭ遍历和修改

AJAX

等

如何使用？

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。

Development version - 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从 jquery.com 中下载。

可以通过下载之后，进行引用，和VUE.js很像，<script src="jquery-1.10.2.min.js"></script>

或者通过引用<script src=""https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

注意引用：使用引用时，不要在该引用的script标签内编写其他方法，需要另外起一个script元素再进行相关操作

HTML元素选取和操作:

基本语法：$(selector).action()

$定义jQuery

selector选择符，查询或查找HTML 元素

action()执行方法，执行对所选则的元素的操作

实例：

$(this).hide()–隐藏当前元素

$(“h”).hide()–隐藏所有元素

$(“h.demo”).hide()–隐藏所有class=“demo"的元素

$(”#demo").hide()–隐藏所有Id="demo"的元素
*****同时还有一个重要地方，有时候，编写jQuery入口函数时，我们为了防止文档在未完全加载之前就运行JQuery代码，操作可能会失败，所有有时候，我们会这样写

$(document).ready(function () { }),或者$（function(){}）这主要意义是，保证当前的文档已经加载完全，才进行jQuery操作