jQuery基础
jQuery API 3.1.0 速查表： http://www.php100.com/manual/jquery/
jQuery 是一个 JavaScript 库，用于简化Javascript的开发。适合HTML 元素选取与操作、CSS 操作、HTML 事件操作、JS特效和动画、DOM 遍历和修改、AJAX、Utilities 等等。
1 前言
1.1 jQuery 种类
jquery-3.1.0.js //未压缩版，代码易读，适合开发环境下使用
jquery-3.1.0.min.js //压缩版，访问速度快，代码可读性差。适合在生产环境下使用
jquery-3.1.0.slim.js //精简版，去掉了ajax的功能，如果你不需要用到ajax或者使用了独立的第三方ajax库，就可以用这个
jquery-3.1.0.slim.min.js //精简压缩版，只是对精简版的代码进行了压缩
1.2 获取 jQuery
1.下载到本地
<script src="jquery-3.1.0.js"></script>
2.CDN加速（推荐）
<script src="http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.js"></script>
国内常用的免费JavaScript库CDN：
1.新浪：http://lib.sinaapp.com/
2.百度：http://cdn.code.baidu.com/
3.又拍云：http://jscdn.upai.com/
4.七牛：https://www.staticfile.org/
5.BootCDN：http://www.bootcdn.cn/
2 DOM
2.1 基础
jQuery的核心是jQuery()函数，但一般都写成$()，也可以理解为 $ 即 jQuery。$()可以完成如下操作：
- 查找、选择元素
- 创建、追加和删除元素
- 用jQuery对象封装普通的DOM对象
2.1.1 名称冲突
/*jQuery 使用 ```$``` 符号作为 jQuery 的简介方式，但是某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 ```$ ```符号。为防止两者发生冲突，可以使用noConflict() 的方法来解决该问题。*/
//在jQuery中使用自定义的名称代替$ 符号
var jq=jQuery.noConflict();
2.1.2 ready()
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
在DOM加载完成时运行的代码，可以这样写：
$(document).ready(function(){
// 在这里写你的代码...
});
简写：
$(function($) {
// 可以在这里继续使用$作为别名...
});
2.2 选择器
查找DOM中元素的方式：CSS选择器。
| 语法 | 注释 |
|---|---|
$("*") |
匹配所有元素 |
$(this) |
当前 HTML 元素 |
$("p") |
所有<p> 元素 |
$("p.intro") |
所有class="intro"的<p>元素 |
$(".intro") |
所有class="intro" 的元素 |
$("#intro") |
id="intro"的元素 |
$("ul li:first") |
每个<ul> 的第一个 <li>元素 |
$("div#intro .head") |
id="intro"的<div>元素中的所有class="head"的元素 |
$("p > span") |
选择<p>内的<span> |
$("[href$='.jpg']") |
所有带有以 ".jpg" 结尾的属性值的href属性 |
注意：使用$()获取的结果是个元素数组，而不是某一个元素。
<a id="test1"></a>
<a id="test2"></a>
<a id="test3"></a>
<p>
<div>div1</div>
<span>span1</span>
</p>
<span class="testclass">span2</span>
<script>
//选择id为"test1"的元素
var elements = $("#test1");
//选择所有<a/>元素
var elements = $("a");
//批量修改所有选定的元素属性，其内部有个循环
elements.attr("target", "_blank");
//既然是数组，就有length属性不过这个不常用
elements.length
//选择<p>内的<span>
var innnerSpan = $("p > span");
//同时使用多个选择器
var elements = $("a, #test1, .testclass, p > span");
//批量修改样式
var elements = $("a, #test1, .testclass, p > span").attr("style","color:red");
</script>
更多内容参考：选择器参考手册
2.3 元素
2.3.1 创建元素(追加 )
创建一个超链接，使用append()方法
var a = $("<a/>").attr({
id:"myLink",
href:"http://baidu.com",
title:"Baidu",
}).text("Click here");
$(document.body).append(a);
2.3.2 删除元素
删除所选则的元素，使用remove()方法
$("#test").remove();
删除某个元素的所有子节点，使用empty()方法
$(document.body).empty();
2.3.3 隐藏元素
隐藏元素使用hide()方法
//隐藏所有 <p> 元素
$("p").hide();
//隐藏所有 class="test" 的元素
$(".test").hide();
2.4 样式
修改样式要使用jQuery对象中的css()方法
//修改单个样式
$("#testdiv").css("color","red");
//修改多个样式
$("#testdiv").css({
color:"red",
backgroundColor:"yellow"
});
2.4.1 修改CSS类
修改CSS类分别使用addClass()与removeClass()方法
<div id="test_id" class="class1 class2">
blablabla
</div>
<script>
$("#test_id").addClass("class3");
$("#test_id").addClass("class4 class5");
$("#test_id").removeClass("class1 class2");
$("#test_id").removeClass(); //删除对象元素中的所有CSS类
</script>
2.4.2 切换CSS类
切换CSS类需要使用。如果指定的类存在，则删除之。如果不存在，则添加之。
$("#test_id").toggleClass("class1");
用jQuery对象封装普通的DOM对象，以此得到的jQuery对象叫做封装器对象。封装器对象一般用于改进另一个对象的功能。以下代码表示，用jQuery对象封装元素对象，以使用toggleClass()切换"class1"类。
var target =$(e.target());
if(e.type == "mouseover" || e.type == "mouseout"){
target.toggleClass("class1");
}
2.4.3 检查CSS类
检查CSS类是否应用于某元素，使用hasClass()方法
$("#test_id").hasClass("class1");
2.5 属性
2.5.1 attr()
attr()为指定元素指定属性，可用于所有属性
//为所有图像设置src和alt属性
$("img").attr({ src: "test.jpg", alt: "Test Image" });
//为所有图像设置src属性
$("img").attr("src","test.jpg");
//把src属性的值设置为title属性的值
$("img").attr("title", function() { return this.src });
2.5.2 removeAttr()
//删除指定属性
$("img").removeAttr("src");
2.5.3 prop()
与attr不同，prop()专门用于checked属性
//获取复选框中checked的属性值。选中复选框为true，没选中为false。
$(":checkbox").prop("checked");
//禁用页面上的所有复选框
$("input[type='checkbox']").prop({
disabled: true
});
禁用和选中所有页面上的复选框。
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);
通过函数来设置所有页面上的复选框被选中
$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});
全选，反选，取消的功能实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Title</title>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript" src="test_js.js"></script>
</head>
<body>
<input type="button" value="全选" onclick="CheckAll()">
<input type="button" value="反选" onclick="CheckReverse()">
<input type="button" value="取消" onclick="CheckCancel()">
<table border="1">
<thead></thead>
<tbody id="tb1">
<tr>
<td><input type="checkbox"></td>
<td>11</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>33</td>
</tr>
</tbody>
</table>
<script>
function CheckAll() {
// $("#tb1").find(":checkbox").attr("checked", "checked");
$("#tb1").find(":checkbox").prop("checked", true); //建议写法
}
function CheckReverse() {
$("#tb1").find(":checkbox").each(function () {
if ($(this).prop("checked")) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
})
}
function CheckCancel() {
// $("#tb1").find(":checkbox").removeAttr("checked");
$("#tb1").find(":checkbox").prop("checked", false);
}
</script>
</body>
</html>
3 事件
jQuery中的一般事件应用
<a onclick="xxx();">!!!!!!</a>
<div id="d1">12312322</div>
<script>
$(function () { //当文档加载完毕自动执行此处代码
$('#d1').click(function () { //绑定事件（方法一）
//$(this)表示当前点击的标签
alert($(this).text());
});
// $('#d1').bind("click",function () { //绑定事件（方法二）
// alert($(this).text());
// })
});
</script>
3.1 设置监听器
所有的jQuery对象都有on()方法，用于监听事件。
function elementClick(e) {
alert("You clicked me!");
}
$(".class1").on("click", elementClick);
监听多个事件：
function clickHandler(e) {
alert("You clicked me!");
}
function dblclickHandler(e) {
alert("You double-clicked me!");
}
$(".class1").on({
click:clickHandler,
dblclick:dblclickHandler()
});
3.2 删除监听器
删除监听器：
$(".class1").off("click", elementClick);
$(".class1").off({
click:clickHandler,
dblclick:dblclickHandler()
});
删除所所选元素的所有监听器
$("#test").off();
4 jQuery 下的 Ajax
jQuery 提供多个与 AJAX 有关的方法。通过这些方法能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON。同时能够把这些外部数据直接载入网页的被选元素中。
4.1 load()
load()方法从服务器加载数据，并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
//URL(必选)：必需的 URL 参数规定您希望加载的 URL。
//data：规定与请求一同发送的查询字符串键/值对集合。
//callback：参数是 load() 方法完成后所执行的函数名称。
<h3 id="test">*******</h3>
<button id="btn1" type="button">点击，获取所请求文件的内容</button>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test").load("123.txt");
})
})
</script>
4.2 get()
GET：从指定的资源请求数据，用于从服务器获得（取回）数据，GET 方法可能返回缓存数据。
$.get(URL,callback);
//URL(必选)：要请求的 URL
//callback ：请求成功后所执行的回调函数。
<button>向目标页面发送 GET 请求，然后获得返回的结果</button>
<script>
function callback(data, status) {
alert("数据：" + data + "\n状态" + status);
}
function clickHandler() {
$.get("123.txt", callback);
}
$("button").on({
click: clickHandler
});
</script>
4.3 post()
POST：向指定的资源提交要处理的数据，也可以用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
$.post(URL,data,callback);
//URL(必选)：要请求的 URL
//data ：规定连同请求发送的数据。
//callback ：请求成功后所执行的回调函数。
<button>向目标页面发送 POST 请求，然后获得返回的结果</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/example/jquery/demo_test_post.asp",
{
name:"Morra",
city:"Beijing"
},
function(data,status){
alert("数据：" + data + "\n状态：" + status);
});
});
});
</script>
4.4 ajax()
本地请求
<input type="button" value="跨域请求" onclick="AjaxRequest();"/>
<div id="request_times"></div>
<script>
function AjaxRequest() {
$.ajax({ //发送一个请求
url: "",
type: "GET",
data:{'k1':'v1','k2':'v2'},
success: function (data) {
//当请求成功并从远程获取返回值的，时候此函数会自动执行
$('#request_times').append(data);
},
error: function () {
//当请求发生错误的时候自动执行
}
})
}
</script>
跨域请求
<input type="button" value="跨域请求" onclick="AjaxRequest();"/>
<script>
function AjaxRequest() {
$.ajax({ //发送一个请求
url: "",
type: "GET",
dataType:'jsonp',
jsonp:'callback',
jsonpCallback:'hello', //jsonpCallback的值就是服务端包装数据的值hello(das;qdw数据qweqwe)
success: function (data) {
//当请求成功并从远程获取返回值的，时候此函数会自动执行
console.log(data)
},
error: function () {
//当请求发生错误的时候自动执行
}
})
}
</script>
详情参考：jQuery 参考手册 - Ajax
5 补充
5.1 each()
循环所有数据，取出每一个数据的内容。类似于python中的for循环。
数组
a = [11, 22, 33, 44];
$.each(a, function (index) {
console.log(a[index]);
})
字典
var b = {"a": 1, "b": 2};
$.each(b, function (k, v) {
console.log(k, v)
})
5.2 map()
将一组元素转换成其他数组（不论是否是元素数组，可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。
HTML 代码:
<p><b>Values: </b></p>
<form>
<input type="text" name="name" value="John"/>
<input type="text" name="password" value="password"/>
<input type="text" name="url" value="http://ejohn.org/"/>
</form>
jQuery 代码:
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
结果:
[ <p>John, password, http://ejohn.org/</p> ]
5.3 返回顶部的实现
<input type="button" onclick="GoTop()" value="返回顶部">
<div id="content" style="height: 100px;width: 200px;overflow: auto; background-color: antiquewhite;">
<p>占位符</p>
<p>占位符</p>
<p>占位符</p>
<p>占位符</p>
<p>占位符</p>
<p>占位符</p>
<p>占位符</p>
<p>占位符</p>
</div>
<script>
function GoTop() {
$('#content').scrollTop(0); //某个div返回顶部
// $(window).scrollTop(0); //整个窗口返回顶部
}
</script>
5.4 菜单栏的实现
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="jquery-3.1.1.js"></script>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<div>
<div onclick="change(event)">菜单一</div>
<div class="content hide">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<div>
<div onclick="change(event)">菜单二</div>
<div class="content hide">
<div>11</div>
<div>22</div>
<div>33</div>
</div>
</div>
<div>
<div onclick="change(event)">菜单三</div>
<div class="content hide">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
</div>
<script>
function change(e) {
$(e.target).next().removeClass("hide"); //查找内容div，并显示内容
$(e.target).parent().siblings().find(".content").addClass("hide"); //查找除点击以外的所有菜单，并给每个菜单都加上hide的样式
}
</script>
</body>
</html>
6 插件
6.1 开源插件
| 插件 | 地址 |
|---|---|
| bootstrap | http://getbootstrap.com/ |
| bxslider | http://bxslider.com/ |
| jquery-easyui | http://www.jeasyui.net/ |
| jquery-validate | https://jqueryvalidation.org/ |
| font-awesome | http://fontawesome.io/ |
6.2 自定义插件
//index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="jquery-3.1.1.js"></script>
<script src="extends.js"></script> <!--注意插件要放在jquery后面-->
</head>
<body>
<a onclick="xxx();">!!!!!!</a>
<div id="d1">12312322</div>
</body>
</html>
extends.js插件文件写法如下：
//extends.js
$.extend({
"morra":function () {
return 123;
}
})
但是一般建议使用把插件方法封装在自执行函数中，extends.js加载的时候函数就会自动执行，不需要额外调用，写法如下：
//extends.js
(function (arg) {
arg.extend({
"morra":function () {
return "morra";
}
});
})(jQuery);
