[TOC]
# jQuery简介
jQuery是一款优秀的javaScript库（框架），该框架凭借简洁的语法和跨平台的兼容性，极大的简化了开发 人员对HTML文档，DOM，事件以及Ajax的操作。
主旨口号：写的更少, 干的更多(以更少的代码,实现更多的功能)
作者：John Resig(约翰·雷西格)
John Resig(约翰·雷西格)，1984年5月8日出生于美国纽约。 个人著作： 精通JAVASCRIPT 以及 JAVASCRIPT忍者的秘密
工作经验：先后于Mozilla、可汗学院担任开发工程师。
jQuery框架版本相关介绍开源许可协议：MIT许可证
官方网站： [http://jquery.com/](http://jquery.com/)
中文API网站: [http://jquery.cuishifeng.cn/](http://jquery.cuishifeng.cn/)
托管仓库： [https://github.com/jquery/jquery](https://github.com/jquery/jquery)
版本情况：
JQuery目前分成1.x版、2.x版和3.x版本，从 2.0.0开始不再支持IE 6/7/8，2.0.0版本之前通过jQuery Migrate plugin与先前版本保持兼容。
最新版本 ：3.2.1
# jQuery的优点
* 轻量级
* 免费开源
* 完善的文档
* 丰富的插件支持
* 完善的Ajax功能
* 不会污染顶级变量
* 强大的选择器功能
* 出色的DOM操作封装
* 出色的浏览器兼容性
* 可靠的事件处理机制
* 隐式迭代和链式编程操作
# jQuery的基本功能
## Query 查找
### **1. 访问和操作DOM元素**
   说明:使用jQuery库,可以很方便地获取和修改页面中的某元素无论是删除、移动、复制元素,jQuery都 提供了一整套方便、快捷的方法,既减少了代码的编写,又大大提高了用户对页面的体验度。
**方法示例**：
**append()** ———— 向每个匹配的元素内部后面追加内容。
**appendTo** ————把内容在每个匹配的元素外部后面插入。
**prepend()** ————向每个匹配的元素内部前面追加内容。
**prependTo** ————把内容在每个匹配的元素外部前面插入。
**empty()** —————删除匹配的元素集合中所有的子节点。
**remove()** ————从DOM中删除所有匹配的元素。
   这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但**除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。**
**detach()**—————从DOM中删除所有匹配的元素。
   这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，**除了这个元素本身得以保留之外，所有绑定的事件、附加的数据等都会保留下来。**
html()
text()等
例：
html和css代码
```
<button>点击删除</button>
<button>点击增加</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
```
JavaScript代码
```
<script>
//给 li 绑定事件
$("li").click(function () {
alert(1)
});
//点击按钮,在ul里面的前面添加一个li
$("button").click(function () {
//创建节点
var newtag = $("<li>列表项</li>");//创建节点
//分别在内部和外部后面增加节点
$("ul").append(newtag); //在ul内部后面追加新节点
newtag.appendTo($("ul")); //把新节点追加到ul里面的后面
//分别在内部和外部前面面增加节点
$("ul").prepend(newtag); //在ul内部的前面追加新节点
newtag.prependTo($("ul")); //把新节点追加到ul里面的前面
//删除内容
$("button:eq(0)").click(function () {
$("ul").remove(); // 把选中的元素在页面中删除，但在jQuery对象会保留，绑定的事件和附加的数据会被移除
$("ul").empty(); //把选中元素里面的内容清空
lis.detach(); //把选中的元素在页面中删除，但在jQuery对象会保留，绑定的事件和附加的数据会保留下来
});
//以下用来测试恢复的节点说绑定的事件和附加的数据是否保存
$("button:eq(1)").click(function () {
$("ul").append(lis)
});
});
</script>
```
### **2. 控制页面的CSS样式**
   说明:使用jQuery框架,可以帮助我们方便快捷的来操作CSS样式，且jQuery已经完成了浏览器兼容性处理。
**方法示例：**
**css()**————————添加或修改匹配元素的样式属性。
**addClass()**—————为每个匹配的元素添加指定的类名。
**toggleClass()**————切换类，若存在就删除一个类，若不存在就添加一个类
**hasClass()**—————检查当前的元素是否含有某个特定的类，如果有，则返回true。
**removeClass()**———从所有匹配的元素中删除全部或者指定的类。
html和css代码
```
<html>
<style>
.hezi {
background: tan;
}
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
}
</style>
<script src="jquery-3.4.1.js"></script>
<body>
<button>获取类属性</button>
<button>增加类</button>
<button>删除类</button>
<button>切换类</button>
<button>检索类</button>
<div class="hezi">盒子</div>
</body>
</html>
```
JavaScript代码
```
<script>
$("button").eq(0).click(function () {
//添加或修改类属性
$(".hezi").css('font-size','30px');
});
$("button").eq(1).click(function () {
//增加box类
$(".hezi").addClass("box");
});
$("button").eq(2).click(function () {
//如果不指定删除类名,就会删除全部类名
$(".hezi").removeClass("box");
});
$("button").eq(3).click(function () {
//如果不指定删除类名,就会删除全部类名
if ( $(".box").hasClass("hezi") ){
alert('201314');
}
});
$("button").eq(4).click(function () {
//切换box类,如果有这个类就删掉,没有就添加
$(".hezi").toggleClass("box");
});
</script>
```
### **3. 完善的Ajax网络请求**
   说明:
**方法示例**：
**ajax()** ————通过 HTTP 请求加载远程数据。
**get()** ————取得其中一个匹配的元素。
**post()** ————通过远程 HTTP POST 请求载入信息。
html和css代码
```
<p>段落1</p>
<p>段落2</p>
```
JavaScript代码
```
<script>
var aa =$('p').get(0);
console.log(aa); //输出结果：<p>段落1</p>
var bb =$('p').get();
console.log(bb);
</script>
```
### **4. 页面标签事件处理**
   说明:
**方法示例**：
**on()**———————— 在选择元素上**绑定**一个或多个事件的事件处理函数。
**off()** ————————在选择元素上**移除**一个或多个事件的事件处理函数。
**click()** ———————触发每一个匹配元素的click事件。
**mouseenter()** ————当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
**hover()**———————一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
html和css代码
```
<style>
div{
width: 100px;
height: 100px;
background: skyblue;
border: 1px solid #000;
margin: 10px;
}
.box1{
width: 200px;
height: 200px;
background: skyblue;
}
</style>
<body>
<button class="btn2">撤销变色</button>
<button class="btn">点击</button>
<div class="box">盒子</div>
</body>
```
JavaScript代码
```
~~~
<script>
//新建节点
var oBOX = $('<div class="obox">盒子2</div>');
var oBtn = $('<button class="btn1">变色和增高</button>');
//注册点击事件
$('.btn').click(function () {
$('.box').css('width','300px');
$('.box').after(oBOX);
oBtn.insertAfter($('.btn'));//在 .btn 后面插入 oBtn
});
//事件委托，
$('body').on('click','.btn1',function () {
$('.box').css('background','pink');
console.log('变色');
});
$('body').on('mouseenter','.btn1',function () {
$('.box').css('height','300px');
console.log('变高');
});
$('body').on('mouseleave','.btn1',function () {
$('.box').css('height','100px');
console.log('恢复');
});
//点击 .btn2 移除 .btn1 的 click 事件，mouseenter 事件不受影响
$('.btn2').on('click',function () {
console.log('禁止变色按钮');
$('body').off('click','.btn1');//
});
//鼠标移入事件
$('body').on('mouseenter','.box',function () {
$('.box').css({
width:'300px',
height:200
});
});
//鼠标移出事件
$('body').on('mouseleave','.box',function () {
$('.box').css({
width:'100px',
height:100
});
});
//鼠标进入事件
$('.btn').hover(function () {
console.log('鼠标进入');
$(this).css('background','pink');
$('.obox').css('font-size','30px');
},function () {
console.log('鼠标离开');
$(this).css('background','#ccc');
$('.obox').css('font-size','16px');
});
</script>
```
### **5. 整套的动画特效实现**
   说明:
**方法示例**：
**show()** —————显示隐藏的匹配元素。
**hide()** —————隐藏显示的元素
**slideDown()** ——通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
**slideUp()** ————通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
**slideToggle()**———通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
**animate()** ———— 用于创建自定义动画的函数。
html和css代码
```
<style>
div{
width: 200px;
height: 200px;
background: skyblue;
}
</style>
~~~
<body>
<button>滑动隐藏</button>
<button>滑动显示</button>
<button>滑动切换</button>
<button>隐藏</button>
<button>显示</button>
<button>动画</button>
<div></div>
</body>
~~~
```
JavaScript代码
```
<script>
$(function () {
//滑动隐藏
$('button:eq(0)').click(function () {
$('div').slideUp();
});
//滑动显示
$('button:eq(1)').click(function () {
$('div').slideDown();
});
//滑动切换
$('button:eq(2)').click(function () {
$('div').slideToggle();
});
//隐藏
$('button:eq(3)').click(function () {
$('div').hide();
});
//显示
$('button:eq(4)').click(function () {
$('div').show();
});
//动画
$('button:eq(5)').click(function () {
$('div').animate({
width: '500px',
height: 400,
background: 'pink'
},1500);
});
})
</script>
```
### **6. 好用的工具方法和强大的插件支持**
   说明:
**方法示例：**
**extend()** ———用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
**each()** ———— 以每一个匹配的元素作为上下文来执行一个函数。
**map()** ————将一组元素转换成其他数组（不论是否是元素数组）
*****
1. extend()
JavaScript代码
```
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
//结果:
settings == { validate: true, limit: 5, name: "bar" }
```
2. each()
html和css代码
```
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
```
JavaScript代码
```
<script>
//写法一
$("p").each(function (index,ele) {
//输出函数的参数
console.log(arguments);
//console.log(index);
//console.log(ele);
//console.log($(ele));
//dom对象
// ele.innerText = index + "哈哈"
//jquery对象
$(ele).text("你好世界"+index);
});
//写法二
var arr = ["你好",2,3];
$.each(arr,function (index,ele) { //index是数组的索引值,ele是每个元素
console.log(ele);
});
var json = {name:"王龙",age:15,marry:true};
$.each(json,function (key,val) { //key是对象的属性,val是对象的属性值
console.log(key);
})
</script>
```
3. map()
html和css代码
```
<p> 我是内容 1</p>
<p> 我是内容 2</p>
<p> 我是内容 3</p>
<p> 我是内容 4</p>
<p> 我是内容 5</p>
```
JavaScript代码
```
<script>
//把上面五个p里面的文字放在一个数组里面
//each遍历
var arr = [];
$("p").each(function (index,ele) {
arr.push($(ele).text())
});
//console.log(arr);
//遍历并且返回一个数组
var array = $("p").map(function (index,ele) {
return $(ele).text();
});
console.log(array);
</script>
```
# jQuery体验
## jQuery框架的使用步骤
1. 下载jQuery框架在本地的电脑上（官网提供框架的下载链接，两个版本可供选择）
2. 创建项目，在项目的页面中使用script引入jQuery框架
3. 使用jQuery框架来实现相关的功能
## jQuery框架的代码风格：
1. 美元符号起始
  在jQuery框架中，不管是页面元素的选择、内置的功能函数，都使用美元符号来起始的，而这个美元符号,其实就是jQuery框架当中最重要且独有的对象: jQuery对象。
2. 链式编程操作
  jQuery框架中为我们提供了链式编程操作，链式编程的特点中，几乎每个jQuery方法执行完毕后都会把当前正在操作的对象作为返回值返回，如果我们需要对某个标签执行多个操作，那么使用链式编程可以让代码更短,更简洁
如： `$("#demoId").addClass("cur").siblings().removeClass("cur");`
## jQuery框架使用准备
### jQuery框架和JavaScript加载模式对比
```
//原生的JavaScript文档加载,先写的会覆盖后写的；
<script>
window.onload = function () {
console.log("window.onload——1")
};
window.onload = function () {
console.log("window.onload——2")
}
</script>
//打印结果: window.onload--2
//jQuery的文档加载,不会相互覆盖
<script src="jquery-3.2.1.js"></script>
<script>
$(document).ready(function () {
console.log("ready——1")
});
$(document).ready(function () {
console.log("ready——2")
})
;
//方式二，简写一
$(function () {
console.log("ready——3")
});
//方式三，简写二
$().ready(function () {
console.log("ready——4")
});
//打印结果：ready——1
// ready——2
// ready——3
// ready——4
</script>
```
### 两种加载模式的区别：
1. 执行时机不同
window.onload方法需要等所有的资源（CSS\\JS\\图片等）都加载完毕后再执行函数中的代码。 jQuery框架的ready方法只等DOM文档加载完毕后立即执行包裹代码。
2. 执行次数不同
window.onload方法，只会执行一次，后面的会把前面的覆盖，
jQuery框架的ready方法，有几次执行几次，不存在覆盖的问题。
3. jQuery存在多种简写方式
完整的编写方式：$(document).ready(function(){})
简写方式：`$().ready(function())
$(function())`
## jQuery框架冲突解决
```
<script>
//解决冲突方法一、
var jQ=$.noConflict(); // conflict 冲突， noConflict() 不冲突,运行这个函数将变量$的控制权让渡给第一个实现它的那个库,释放 jQuery 对 $ 变量的控制。
//解决冲突方法二、
console.log(jQuery('div')); //通过jQuery()直接获取
var $='今天天气很好';
console.log($);
console.log(jQ);
</script>
```
# jQuery对象和DOM对象的相互转换
DOM对象：每个HTML页面都是一个 DOM对象( Document Object Model ，文本对象模型)，通过传统的 JavaScript方法访问页面中的元素，就是访问 DOM 对象。
jQuery对象：在 jQuery框架中，通过本身自带的方法获取页面元素的对象，称为 jQuery 对象 ;
html和css代码
```
<body>
<div>1</div>
<div>2</div>
</bod
```
JavaScript代码
```
<script>
window.onload = function () {
//通过原生js方法获取到的odiv这个对象是原生dom对象
var odiv = document.getElementsByTagName("div")[0];
console.log(odiv);
odiv.style.width = 400 + "px";
odiv.style.height = 400 + "px";
odiv.style.backgroundColor = "skyblue";
//通过jQuery方法来获取元素,是jQuery对象,不能直接使用原生js的属性和方法
console.log( $("div") );
//$("div").css("width","400px").css("height","400px").css("background","pink")
// jQuery对象转原生dom对象
//方法一
console.log( $("div")[0] );
//方法二
console.log( $("div").get(1) );
//怎么把原生dom对象转化成jQuery
//直接使用$选择这个对象
console.log( $(odiv) );
}
</script>
```
# jQuery特点总结
* jQuery省略了取数据模块，可以直接通过$()选择元素，并且支持 css里面所有选择器
* jQuery允许对群体数据进行直接控制
* jQuery里面所有的事件都省略了on
* jQuery封装了很多常用的方法，可以直接调用
html和css代码
```
<body>
<button><span>按钮1</span></button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
<button>按钮7</button>
<button>按钮8</button>
<button>按钮9</button>
<button>按钮10</button>
</body>
```
JavaScript
```
<script>
//原生 js 写法
window.onload = function () {
//获取btns
var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
alert( this.innerText );
}
}
};
// jQuery 写法
$(function () {
$("button").click(function () {
//console.log( $(this) )
//alert( this.innerText )
alert( $(this).text() );
});
});
</script>
```
# jQuery框架的CSS方法
**使用原生的方式来设置标签的样式**
```<body>
<div>我是div标签</div>
<button id="btnID">按钮</button>
<script>
window.onload = function () {
var oBtn = document.getElementById("btnID");
oBtn.onclick = function () {
var oDiv = document.getElementsByTagName("div")[0];
oDiv.style.height = "50px";
oDiv.style.width = "200px";
oDiv.style.background = "red";
}
</script>
</body>
```
**使用jQuery中的css方法来设置标签的样式**
```
<body>
<div>我是div标签</div>
<button id="btnID">按钮</button>
<script src="jquery-3.2.1.js"></script>
<script>
$(function () {
$("#btnID").click(function () {
$("div").css("height","50px").css("width","200px").css("background","red");
})
})
</script>
</body>
```
**CSS方法的语法：**
1. $("selector").css(name,value);
2. $("selector").css(name1,value).css(name2,value)...;
3. $("selector").css( { name1 : value , name2 : value})
```
<script>
$(function () {
$("#btnID").click(function () {
//01 CSS方法的第一种使用方式
$("div").css("height","50px");
$("div").css("width","200px");
$("div").css("background","red");
//02 CSS方法的第二种使用方式:链式编程
$("div").css("height","50px")
.css("width","200px").css("background","red");
//03 CSS方法的第三种使用方式:传递样式键值对的对象作为参数
$("div").css({
"height":"100px",
"width":"200px",
"background":"red"
})
})
})
</script>
```
# jQuery操作html
1. $("selector").html(value); 修改html
2. $("selector").html(); 访问html
3. $("selector").text(value); 修改文本内容
4. $("selector").text(); 访问文本内容
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.4.1.js"></script>
<script>
$("button:eq(0)").click(function(){
//修改html
$("div").html("<h1>标题1<h1><p>段落</p>")
});
$("button:eq(1)").click(function(){
//访问html
$("div").html();
});
$("button:eq(2)").click(function(){
//访问内本内容
$("div").text();
});
</script>
</head>
<body>
<button>修改</button>
<button>访问全部</button>
<button>访问文字</button>
<div>
</div>
</body>
</html>
```
1
1
1
1
1
1
1
1
1
1
