前端-jQuery-基本介绍
###
jQuery介绍
1，是JavaScript的第三方库，其实就是别人写好的代码，我们拿过来用，
2，极大的简化了JavaScript的操作，做同样的事情，jQuery比原生的js，写起来简单太多了，写起来非常的简练
3，学起来很简单，
4，jQuery很重要，大量的前端项目，都是用的jQuery，而不是原生js，
5，没有这个jQuery也是可以的，但是比较麻烦，所以我们先学习js的dom操作，这个是基础，
js能实现的效果 是不是jQuery都能实现？
并不能，jquery只是封装的js绝大部分功能，有很强的选择器。方便快捷轻量级。js还是原生的好。
大多数功能能实现，jquery仅仅只是一个javascript的框架，而javascript是一种语言
不能，javascript是一门编程语言，jquery是javascript封装好的内库！
jQuery是一个简洁而快速的JavaScript库，可用于简化事件处理，HTML文档遍历，Ajax交互和动画，以便快速开发网站。
目的是让开发者更容易地在网站上使用JavaScript。它不是一种单独的编程语言，与JavaScript一起工作。使用jQuery，将用更少的资源做更多的事情。
jQuery是基于js的，
###
用了vue还需要jquery吗
如果你作为前端有一段时间的话一定会很熟悉jquery，作为前端的开发神器我们无法想象没有jquery将会写多少繁琐的原生js。在angularjs,react,vue当道的年代里，或许你不在需要jquery了。
在没有任何前端框架之前，我们写代码，只能用原生的JS，进行数据的处理，DOM的操作，譬如对一个id 为txtName 的文本框进行赋值，我们是这样的 document.getElementById('txtName').value = '张三'。当然这还仅仅是针对通过id获取DOM ，现实开发中还有其它的各种操作，当然如果熟悉JS的话，其实写的代码性能也还不错。只不过用原生实现的代码比较多，开发起来慢啊，在这个时间就是金钱的年代，显然不是很好的方式。
基于原生实现不是很方便，就出来个Jquery框架了，他让我们少写很多代码，对很多操作都进行了封装简化，使我们开发起来快多了，譬如同样针对上面那个文本框赋值的功能，$('#txtName’).val('张三')。如果需要针对这个元素进行样式等改变，直接往后接着写就行了，不像原来用原生JS那样麻烦了。当然框架内部实现还是基于原生JS 这个是没办法改变的。
用Jquery开发了还多年，自己一直觉得已经挺快了，没有更好的方式了。但是总有一些牛逼的人物想更快，更好的方式，JQUERY操作DOM还是太慢了，还是得必须针对一个个DOM去操作，有没有那种数据变了，DOM也跟着变的。譬如还是上面的例子，张三 我现在又变成了李四了，我不需要找到DOM再赋值，直接文本框值就变成了李四呢。于是乎VUE框架诞生了。
####
我们先来看看jQuery当时能迅速的风靡全球的原因有哪些！
我想了想，无外乎下面三条
(1)出色的DOM操作封装
例如原来你要修改样式，原生JavaScript是这么写的
var dom = document.getElementById('test');
dom.style.color = 'blue';
用上jQuery后，一行搞定
$('#test').css('color', 'blue');
(2)便捷的Ajax操作
原生的JavaScript在ajax请求上的代码，嗯，我就不贴代码了！具体多复杂，懂前端的人都明白。
用上了jQuery后，简洁了不少！如下所示
$.ajax({url:"/guduyan",
success:function(result){
//dosomething
}});
(3)出色的动画效果
例如，我们需要把 一个<div>元素移动到左边，直到left属性等于250像素为止。
使用jQuery，我们可以这么写
$("div").animate({left:'250px'});
总而言之，jQuery作为一个JavaScript库。这个库里有很多函数，可以简化你的DOM
操作，提供一些特效功能...等等！它的目的就是让一些你不会写，不想写，没时间写的代码，那么库帮你准备好一些函数接口，让你调用直接完成功能。
MVVM的框架
而Vue、React之类，它们是JavaScript框架，引入了组件化、模块化的概念，采用虚拟DOM取代原来的DOM操作！在Vue这类MVVM框架中，数据和视图完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，达到了解耦的目的！
针对原来的jQuery的几个优点
(1)针对jQuery里便捷的Dom操作
在Vue和React这类MVVM框架中，采用一种绑定元素渲染的概念，基本不用怎么操作Dom，某些特殊操作除外。
ps:Dom操作不可能完全消失，否则Vue没必要再提供$refs属性。某些文章中说可以完全替代，我不敢苟同。
(2)针对jQuery里出色的动画效果
这个有CSS 3可以取代。另外，还有专门的动画库Velocity.js可以负责这些动画效果！
(3)针对jQuery便捷的Ajax操作
这个被Axios等库完全替代，而且API都差不多，功能也一样。
除了上面几点以外。像Vue这类的MVVM框架为了性能，不让开发者直接操作DOM树，引入虚拟DOM的概念。
###
学jQuery的必要性
(1)目前大量网站在用jQuery
虽然目前大量文章鼓吹什么jQuery不行啦，要退出潮流啦！
然而，各位随便去个网站，按f12输入一个$，大部分还是会返回一个
"function(a，b){return new r.fn.init(a,b,h)}"
我勒个去，说好的要退出历史舞台呢？怎么这么多网站还在用jQuery!
很简单，因为jQuery已经占领了市场。一个产品如果已经趋于稳定，再让他换另一套架构又是一笔成本。
正是因为目前市面上还是大量网站再用jQuery,所以学好jQuery还是很有必要的！
(2)jQuery能支持IE8以下版本
由于Vue之类的框架，只能支持IE8以上的版本。所以老实说，我也不懂现在鼓吹什么，市面上都是什么IE8浏览器啊。
实际情况是，现在很多那种事业单位里头的古董电脑，很多都还是IE7，像这种情况下，用vue之类的MVVM框架显然不适合。
ps:你给政府坐项目用Vue试试看，绝对被找茬!挣钱才是重点!技术是为金钱服务的！
(3)jQuery适合快速入门
曾记得我有一个同事，会点jQuery，就在那吹嘘自己全栈。对于这类人，我们应该是:"啊，你真棒，可以教教我们嘛！"没错，就是要让他膨胀，然后让他无心学习!
当然，这反应出一点，其实jQuery很好上手。当然，如果职业是前端，那当然要懂mvvm，但更多公司甚至不请前端，后端处理，那后端处理其实都是jQuery。
####
jQuery的学习内容
1，查找标签，----HTML 元素选取
2，操作标签的属性和样式-----HTML 元素操作，CSS 操作
3，给标签加动作，--HTML 事件函数，JavaScript 特效和动画，HTML DOM 遍历和修改
4，AJAX
除此之外，jQuery 还提供了大量的插件。
###
jQuery 安装
第一种方法：下载并引用
jQuery的版本下载网址：http://www.jq22.com/jquery-info122
找到要下载的版本，点击下载
下载好之后进行安装，并且新建项目名称为Jquery练习
将第一步中下载好的jQuery资源包进行解压，将解压好的.js文件移动到自己的web项目js包里面。
引入资源文件，并测试是否引加载成功，如果是undefinition 就没有引入。
创建一个html页面，将jQuery的min.js 的资源文件引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
</body>
</html>
###
第二种方法：直接使用链接引用
如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。
很有多公司都有这种cdn，下面是引用的百度的，
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
###
html的dom对象，和jQuery对象
同样是获取一个标签，看这两种不同的获取方式，
1，这是一个dom对象
var d1 = document.getElementById("d1")//这是一个dom对象
2，这是一个jQuery对象
ar $d1 = $("#d1")//这是一个jQuery对象，所有的jQuery对象的变量名字，约定俗成的，都要在前面加一个$符号，用来区分普通的dom对象，
##
jQuery对象转换成dom对象，直接使用索引取出，
dom对象转换成jQuery对象，直接使用$(dom对象)符号包一下，就是一个jQuery对象了，
示例：
var pEle = document.getElementById("p3") ------这是dom对象
var $pEle = $(pEle) ---转换成jQuery对象，就是$(pEle) -----这就是jQuery对象了，为什么变量名之前加一个$符号，因为是用来区分普通的dom对象的，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<p id="d1">测试</p>
</body>
</html>
###
注意语法：
$("") ---->就是相当于jQuery("")
##############
##############
