文章目录
一、jqurey的基本概念
1、JQureys是一个js库，帮助我们轻松实现原本可能比较麻烦的功能。
2、JQureys每个版本又有两个小版本：压缩和未压缩，压缩较小，但没有排版和注释 ，不便于阅读；而未压缩有排版和注释，便于阅读。
3、JQureys 实际上是一个js文件，加载到页面内就可以直接使用。
<script type="text/css" src="jquery-3.2.1.min.js">
也可以通过CDN（Content Distribute NetWork,内容分发网络）来引用JQureys 。
菜鸟网：
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
百度：
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
使用CDN的好处：
（1）省事
（2）速度更快
二、语法
定义了这是一个JQurey的代码：
(选择器).action()
**选择器：**按照一定的规则选择DOM元素，非常类似于css选择器。
action：对选中元素的操作。
案例
<body>
<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
</body>
方案一：
var paras = document.getElementsByTagName("p");
for(var i in paras){
paras[i].addEventListener("click",red);
}
方案二：
$("p").click(red);
function red(){
this.style.color = "red"
}
JQuery的一行代码(“p”).click(red)相当于下面js的代码；
var paras = document.getElementsByTagName("p");
for(var i in paras){
paras[i].addEventListener("click",red);
所以说JQurey极大简化了程序员的工作
三、选择器
（1）元素选择器
根据签名来获取元素，比如
$(“p”)：表示获取所以段落
$(“#p”)：表示选择id=“p的元素”
（2）id选择器
$(“#p1”)：表示选择id=“p1的元素”
（3）class选择器
$(“.top2”)：表示选择class=“.top2的元素”
（4）后代选择器
$(“div p”)：表示选择div里面p标签“div p的元素”
（5）类似于css里的伪类选择器
$(“p：first”)：表示选择p标签里面的一个元素。
（6）属性选择器
$(“p[name]”)：表示选中所有具有name属性的段落。
$(“p[name=’second’]”)：表示选中所有name=’second’的段落。
$(“tr:even”)：表示选中所有技术行的tr。
四、事件
JQurey中注册事件的方法也是调用JQurey对象的方法，
比如
单击事件：$(“#div”).click（）
鼠标移入事件：$(“#div”).mouseeenter（）
而且方法名就是js的事件名
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
background-color: greenyellow;
}
</style>
</head>
<script>
$(document).ready(function(){
$("#div1").mouseenter(function(){
// $("#div1").css("background-color","blue")
$(this).css("background-color","blue")//this是当前元素
});
});
</script>
<body>
<div id="div1">
</div>
</body>
</html>
之前，我们所有的js代码是放在之后的，如果放在之前呢？
实验证明，如果放在body之前，在获取元素时得到的结果为空，因为在执行代码时，文档还没有加载完毕，元素都还不存在
那怎么解决呢？
将代码放在$(document).ready(function(){……})中，也就是在文档加载完成之后去执行代码。
<script>
$(document).ready(function(){
$("#div1").mouseenter(function(){
// $("#div1").css("background-color","blue")
$(this).css("background-color","blue")//this是当前元素
});
});
</script>
<body>
<div id="div1">
</div>
</body>