jQuery入门
jQuery下载和引入
jQuery的下载
- 官网地址：jQuery
- 官方API：jQuery API Documentation
- jQuery API中文文档：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm | jQuery API 中文文档 | jQuery 中文网
我们可以通过官网jQuery 或者 jquery下载所有版本（实时更新） 下载jQuery；
jQuery的引入
使用jQuery非常简单，只需要在html页面的<head></head>之间引入下载的jQuery类库即可。如：
<script type="text/javascript" src="jquery.min.js"></script>
注:引入jquery的标签对不可以写js代码
将jQuery框架文件导入后，就可以使用jQuery的选择器和各种函数功能了。
jQuery初体验
jQuery实现动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin-top: 10px;
margin-left: 100px;
}
#bigDiv {
width: 183px;
height: 550px;
overflow: hidden;
background: url("images/customer.jpg");
}
#imgDiv {
margin: 210px auto 0;
text-align: center;
font-size: 14px;
user-select: none;
cursor: pointer;
color: orangered;
font-weight: bold;
}
#imgDiv>img {
margin-top: -3px;
cursor: pointer;
}
#imgDiv p {
line-height: 26px;
}
#imgDiv>div {
display: none;
}
</style>
</head>
<body>
<div id="bigDiv">
<div id="imgDiv">
<img src="images/reg.jpg" alt="">
<div>
<p>点击注册</p>
<p>认证中心</p>
</div>
<img src="images/buy.jpg" alt="">
<div>
<p>咨询</p>
<p>投诉</p>
<p>举报</p>
<p>退款</p>
</div>
<img src="images/sale.jpg" alt="">
<div>
<p>安全中心</p>
<p>物流中心</p>
<p>资金流动</p>
<p>纠纷处理</p>
</div>
<img src="images/person.jpg" alt="">
<div>
<p>修改资料</p>
<p>账号申诉</p>
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script>
$("#imgDiv>img").click(function () {
$(this).next("div").slideToggle(300).siblings("div").slideUp(300);
})
</script>
</body>
</html>对比以前JS的代码，是不是觉得jQuery实现非常简洁啊，jQuery的宗旨就是：write less，do more；
隐式迭代
在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用,这就叫做隐式迭代。
jQuery对象就是一个对象数组(伪数组)，对其调用方法其实是对这个数组中每个元素迭代调用这个方法，相当于使用了循环，遍历每个元素调用该方法。
比如添加单击事件:对于DOM对象获取到的多个元素,我们需要通过循环给其分别添加事件,但是jQuery对象则不需要,只要调用jQuery里面的点击事件方法,就可以给所有添加事件。
// JS给获取到的所有a标签添加鼠标单击事件:
var aArr=document.getElementsByTagName('a');
for(var i=0;i<aArr.length;i++){
aArr[i].onclick=function(){
alert("click me!");
}
}
// jQuery给获取到的所有a标签添加鼠标单击事件
$("a").click(function(){
alert("click me！");
});链式编程
链式编程，是将多个操作（多行代码）通过点号"."链接在一起成为一句代码。
首先来看一个例子：
$("#myphoto").css("border","2px solid #FF0000").attr("alt","good");对一个jQuery对象先调用了css()函数修改样式，然后使用attr()函数修改属性，这种调用方式像链一样，所以称为“链式操作”。
链式操作能够让代码变得简洁，因为往往可以在一条语句中实现以往多条语句才能完成的任务。比如如果不使用链式操作，需要用两条语句才能完成上面的任务：
$("#myphoto").css("border","2px solid #FF0000");
$("#myphoto").attr("alt","good");除了增加了代码量，还调用了两次选择器，降低了速度。
但是链式操作不应该太长，否则会造成语句难以理解，因为要查看jQuery对象当前的状态并不是容易的事，尤其如果涉及jQuery对象中元素的增删操作是更加难以判断。
并不是所有的jQuery函数都可以使用链式操作。这与链式操作的原理有关，之所以可以实现链式操作是因为其中的每个函数返回的都是jQuery对象本身。
链式编程可以使得代码可读性高，链式编程的原理就是返回一个this对象，就是返回本身，达到链式效果
jQuery思想理解
设计思想
jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。
使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。
jQuery设计思想之二，就是提供各种强大的过滤器，对结果集进行筛选，缩小选择结果
jQuery设计思想之三，就是最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来
jQuery设计思想之四，就是使用同一个函数，来完成取值（getter）和赋值（setter），即"取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定。
jQuery设计思想之五，就是提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。
jQuery设计思想之六：除了对选中的元素进行操作以外，还提供一些与元素无关的工具方法（utility）。不必选中元素，就可以直接使用这些方法。
jQuery设计思想之七，就是把事件直接绑定在网页元素之上。
最后，jQuery允许对象呈现某些特殊效果。
jQuery的$符号
JS命名规范允许出现的字符有：数字、字母、下划线、
<script src="jquery.js"></script>
<script type="text/javascript">
console.log($);
console.log(jQuery);
console.log($===jQuery);
</script>$。
JS命名规范允许作为变量命名开头的字符有：字母、下划线、$；但是，不允许以数字作为变量命名的开头。
var $ = "我是字符串";
var $ = 123;
function $() {
alert("我是函数$");
}jQuery使用$的原因是： 书写简洁， 相对于其他字符与众不同， 容易被记住。
JQuery占用了两个变量： $ 和 jQuery。
当在代码中打印 $ 和 jQuery时：
<script src="jquery.js"></script>
<script type="text/javascript">
console.log($);
console.log(jQuery);
console.log($===jQuery);
</script>显示的结果如下：
从结果中可以得出结论： $代表的就是jQuery。
那么应该如何理解jQuery里面的 $ 符号呢？
$ 实际上表示的是一个函数名， 如下所示：
$() //调用上面我们自定义的函数$
$(document).ready(function () {
}) //调用入口函数
$(function () {
}) //调用入口函数
$("#container") //调用id属性为container的元素
$("div") //获取所有的div标签元素如上方所示， jQuery里面的$函数， 根据传入参数的不同， 进行不同的调用， 实现不同的功能， 返回的jQuery对象。
jQuery这个js库， 除了 $ 之外， 还提供了另外一个函数：jQuery。
jQuery函数跟 $ 函数的关系： jQuery === $。
jQuery对象和DOM对象的相互转换
第一次学习jQuery,经常分辨不清哪些是jQuery对象，哪些是 DOM对象，因此需要了解jQuery对象和DOM对象以及它们之间的关系。
DOM对象
文档对象模型简称DOM，是W3C组织推荐的处理可扩展置标语言的标准编程接口。
- DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、 这些对象的行为和属性以及这些对象之间的关系。
- 通过DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的 内容进行修改和删除，同时也可以创建新的元素。
- DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和VBScript 使用。
- DOM对象，即是我们用传统的方法(javascript)获得的对象。
- DOM准确说是对文档对象的一种规范标准(文档对象模型),标准只定义了属性和方法行为。
简单来说：DOM对象指的是，使用JavaScript操作DOM返回的结果。
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法;反过来Dom对象也不能使用jQuery的方法。
简单来说：jQuery对象此处指的是：使用jQuery提供的操作DOM的方法返回的结果。
jQuery拿到DOM对象后又对其做了封装，让其具有了jQuery方法的jQuery对象，说白了，就是把DOM对象重新包装了一下。
案例：DOM操作返回值和jQuery操作返回值
<script src="jquery.js"></script>
<div>我是第1个div</div>
<div class="box">我是第2个div</div>
<div id="box">我是第3个div</div>
<div class="box">我是第4个div</div>
<div>我是第5个div</div>
<script>
// 通过js获取页面元素节点
var box = document.getElementById("box");
var cboxs = document.getElementsByClassName("box");
var divs = document.getElementsByTagName("div");
console.log(box);
console.log(cboxs);
console.log(divs);
console.log("------------------------")
// 通过jQuery获取页面元素
var jbox = $("#box");
var jCboxs = $(".box");
var jdivs = $("div");
console.log(jbox);
console.log(jCboxs);
console.log(jdivs);
var arr = [1, 2, 3, 4, 5];
console.log(arr)
</script>案例：jQuery对象和DOM对象API不能混搭
// 通过js获取页面元素节点
var box = document.getElementById("box");
// DOM对象调用DOM API,没有问题
box.style.background = "red";
// DOM对象没有css(),报错box.css is not a function
// box.css("background", "yellow");
// 通过jQuery获取页面元素
var jbox = $("#box");
// jQuery对象调用jQuery API,没有问题
jbox.css("background", "yellow");
// jQuery对象调用DOM API,存在问题：Cannot set property 'background' of undefined
jbox.style.background = "red";jQuery对象转成DOM对象
jQuery对象不能使用DOM中的方法，但如果对jQuery对象提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不使用DOM对象的时候，有两种处理方法。
（1）jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。例如只有一个类名为“bind”的DIV，在控制台输出console.log($(".bind"))
如图，通过调试工具，我们可以清除的看到，jQuery对象是一个类数组对象，我们可以通过$(".bind")[0]获得DOM对象。
（2）另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。还是上面的.bind对象 ，我们可以通过 $(".bind").get(0)获得DOM对象。如图：
DOM对象转成jQuery对象
对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为$(DOM对象), 转换后，就可以任意使用jQuery中的方法了。
注意： 平时用的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。
所有这些，都体现了jQuery对js的封装！
【思考】JS跟jQuery的区别是什么？
如何使用jQuery
使用步骤
- 第一步引入jQuery文件
- 第二步入口函数
- 第三步编写功能代码
版本介绍
1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了， 推荐使用版本1.8.3 和 1.11.3
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。
min：压缩版，压缩过后，体积会更小
压缩指的是：把注释、空格、换行全部去掉，把变量名称尽可能的换成更加简短的字符。
压缩的主要目的：就是让文件变的更小。
平时开发过程中，这两个文件使用哪个都可以；但是，项目上线的时候，推荐使用压缩版。
注意：引包注意点
第一点：在使用jQuery之前，先把jQuery文件引到页面中来
如果在使用jQuery之前，没有引用jQuery文件，会报错：
第二点：src路径一定要写正确
如果src路径写错，也会报错：
jQuery的入口函数
原生的JS的入口函数指的是：window.onload = function(){}: 如下所示：
<script type="text/javascript">
//原生js的入口函数。页面上所有内容加载完毕， 才执行。
//不仅要等文本加载完毕， 而且要等图片也加载完毕， 才执行函数。
window.onload = function () {
alert("hello");
}
</script>而jQuery的入口函数， 有以下几种写法：
写法：
<script type="text/javascript">
//文档加载完毕， 图片不加载的时候， 就可以执行这个函数。
$(document).ready(function () {
alert("hello");
})
</script>
<script type="text/javascript">
//文档加载完毕， 图片不加载的时候， 就可以执行这个函数。
$(function () {
alert("hello");
})
</script>
<script type="text/javascript">
//文档加载完毕， 图片也加载完毕的时候， 再执行这个函数。
$(window).ready(function () {
alert("hello");
})
</script>jQuery入口函数与js入口函数的区别
区别一： 书写个数不同：
（1）JS的入口函数只能出现一次， 出现多次会存在事件覆盖的问题。
（2）jQuery的入口函数， 可以出现任意多次， 并不存在事件覆盖问题。
区别二：执行时机不同：
（1）JS的入口函数是在所有的文件资源加载完成后， 才执行。这些文件资源包括：页面文档、外部的JS文件、外部的CSS文件、图片等。
（2）jQuery的入口函数， 是在文档加载完成后就执行。 文档加载指的是：DOM树加载完成后， 就可以操作DOM了， 不用等到所有的外部资源都加载成功。
Ps： 文档加载的顺序为：从上往下， 边解析边执行。
