jQuery速成--非前端专业的可选项
前言
在Vue、React框架盛行的今天，我们是否还要学习 jQuery 框架呢，答案是当然可以的，jQuery框架曾经也是流行一时，是一个非常方便好用的框架，在做一些前后端不分离的项目上有非常大的优势，也很方便，在一些场景下还是有应用空间的（本人就遇到很多学校里的项目，用的都是jQuery，因为大家都不是专业的前端，所以用jQuery很正常，而且往往学校里的一些项目都比较老了，所以用老框架！），那么我们就来速成一下 jQuery。（因为是速成，所以一些边角可能不会照顾到，大部分都是菜鸟教程摘录，有基础的话看几个小时就可以上手了）
jQuery基础
jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法：$(selector).action()
例子：
-
$(this).hide() - 隐藏当前元素
-
$("p").hide() - 隐藏所有 <p> 元素
-
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
-
$("#test").hide() - 隐藏 id="test" 的元素
文件就绪事件
$(document).ready(function(){
// 开始写jQuery代码
});
将jQuery代码写在 document ready 函数中，可以使文档加载（就绪）之后才开始运行 jQuery 代码，即在 HTML DOM 加载完成后才可以对 DOM 进行操作。
简洁写法：
$(function() {
// 写jQuery代码
});
jQuery 选择器
元素选择器
如：$("p").action()
id选择器
如：$("#id").action()
class选择器
如：$(".class").action()
还有更多的选择方法，可以写在里面，语法和css是一样的
jQuery 事件
页面对不同访问者的响应叫做事件，事件处理程序指的是当HTML中发生某些事件时调用的方法。
某些可能的事件：
-
在元素上移动鼠标
-
点击元素
-
...
常见的DOM事件：
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| hover |
jQuery事件方法语法：
// 以点击事件为例子
$("p").click(); // 点击事件
$("p").click(function(){
// 点击事件发生后触发的代码
});
事件在上面都有链接详情，不做过多赘述。
jQuery 效果
hide(),show():
$("#hide").click(function(){
$("p").hide(); // 隐藏HTML元素
});
$("#show").click(function(){
$("p").show(); // 显示HTML元素
});
hide()和show()可选的两个参数：
hide(speed,callback); show(speed,callback);
speed:隐藏/显示速度；callback:隐藏或显示完成后所执行的函数名称
toggle():
显示被隐藏的元素，隐藏已显示的元素，用法和参数和上面一样
jQuery Fading 方法:
实现HTML元素的淡入淡出
分别是以下四种方法：
// fadeIn(speed, callback);方法 用于淡入已隐藏的元素。其中speed、callback为可选参数
$("button").click(function(){
$("#div1").fadeIn();
});
//fadeOut(speed, callback);方法 用于淡出可见元素。其中speed、callback为可选参数
$("button").click(function(){
$("#div1").fadeOut();
});
//fadeToggle(speed, callback);方法 淡入已经淡出的元素,淡出已经淡入的元素,speed、callback为可选参数
$("button").click(function(){
$("#div1").fadeToggle();
});
/* fadeTo(speed,opacity,callback); 方法
* 允许渐变为给定的不透明度
* speed和callback都和上面一样，opacity参数设置淡入淡出给定的不透明度（值介于0与1之间）
*/
$("button").click(function(){
$("#div1").fadeTo("slow", 0.4);
});
jQuery 滑动方法
使元素上下滑动
以下是三种方法：
// slideDown(speed, callback);方法，用于下滑元素，可选参数不讲了
$("#flip").click(function(){
$("#panel").slideDown();
});
// slideUp(speed, callback);方法，用于上滑元素，可选参数不讲了
$("#flip").click(function(){
$("#panel").slideDown();
});
// slideToggle(speed, callback);方法，用于下滑和上滑元素，可选参数不讲了
$("#flip").click(function(){
$("#panel").slideDown();
});
jQuery 动画方法
语法：$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 和 callback就不说了
// 实例 简单来说，就是触发事件后，改变一个元素的css，达到动画效果
$("button").click(function(){
$("div").animate({left:'250px'});
});
// 操作多个元素
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
// 使用相对值 定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
// 使用预定的值 可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
// 使用队列功能（这个还是有很多门道的，我这里只有用法）
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
jQuery stop() 方法
可以停止正在做的动画，比如hide,show等等（前提是他们设置了speed）,换言之，stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
/*
stop(stopAll, goToEnd);
stopAll:是否清除动画队列，默认为false
goToEnd:是否立即完成当前动画，默认为false
*/
$("#stop").click(function(){
$("#panel").stop();
});
tips:在动画队列的场景下（连续播放多个动画），stop() 只停止当前正在运行的动画，停止动画后，队列中的下一个动画开始进行。
jQuery callback 方法
callback 参数设置后，函数将会在当前动画完成之后才执行，不然当前函数就是和动画同步执行了。
// 执行完hide之后，调用内部的函数
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
// 方法和hide动画同时进行
$("button").click(function(){
$("p").hide(1000);
alert("段落现在被隐藏了");
});
jQuery 方法链
当我们要对同一个HTML元素执行不同的 jQuery 事件时，我们就可以写方法链
// 这里是按先后顺序执行的
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
// 如果链过长，我们也可以这么写
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
jQuery 操作HTML
jQuery DOM 操作
三个简单实用的DOM操作的 jQuery 方法：
-
text() - 设置或返回所选元素的文本内容
-
html() - 设置或返回所选元素的内容（包括 HTML 标签）
-
val() - 设置或返回表单字段的值
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
alert("值为: " + $("#test").val());
})
获取属性值 - attr() 方法
// 这个方法可以获取一个元素的属性值
$("button").click(function(){
alert($("#runoob").attr("href"));
});
jQuery 设置内容和属性
// 还是上面的四个操作，但是上面是查询，这里是设置
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
$("button").click(function(){
// 这里是以键值对的形式更改
$("#runoob").attr("href","http://www.runoob.com/jquery");
// 修改多个属性值
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
});
text()、html()、val()、attr()的回调函数
回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
// 这里的i就是下标，origText就是原始的值
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});
// attr()的回调函数（和上面大同小异）
$("button").click(function(){
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
jQuery 添加元素
添加新的HTML内容
-
append() - 在被选元素的结尾插入内容
-
prepend() - 在被选元素的开头插入内容
-
after() - 在被选元素之后插入内容
-
before() - 在被选元素之前插入内容
// tips:append/prepend 是在选择元素内部嵌入(即内部的最后和开头)。after/before 是在元素外面追加。
$("p").append("最后追加文本");
$("p").prepend("在开头追加文本");
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
jQuery 删除元素
删除HTML元素
-
remove() - 删除被选元素（及其子元素）
-
empty() - 从被选元素中删除子元素
// 删除被选元素 及其 子元素
$("#div1").remove();
// 删除被选元素 的 子元素
$("#div1").empty();
// 过滤被删除的元素 下面的例子删除 class="italic" 的所有 <p> 元素：
$("p").remove(".italic");
jQuery 改变尺寸
jQuery 提供多个处理尺寸的重要方法：
-
width()
-
height()
-
innerWidth()
-
innerHeight()
-
outerWidth()
-
outerHeight()
这六种方法都是一样的，都是用来设置或返回尺寸
$("#div1").width();
$("#div1").width();
$("#div1").innerWidth();
$("#div1").innerHeight();
$("#div1").outerWidth();
$("#div1").outerHeight();
jQuery 操作CSS
通过 jQuery，可以很容易地对 CSS 元素进行操作
-
addClass() - 向被选元素添加一个或多个类
-
removeClass() - 从被选元素删除一个或多个类
-
toggleClass() - 对被选元素进行添加/删除类的切换操作
-
css() - 设置或返回样式属性
/*
css样式如下：
.important {
font-weight:bold;
font-size:xx-large;
}
.blue {
color:blue;
}
*/
// addClass()方法，向不同元素添加class属性
$("button").click(function(){
$("h1,h2,p").addClass("blue"); // 添加类时可以选取多个元素
$("div").addClass("important");
});
// removeClass()方法，在不同元素中删除指定的class属性
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
// toggleClass()方法，该方法对被选元素进行添加/删除类的切换操作
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
// ----------------------------------------------------------------
// 返回css属性:css("属性名");
// 如下实例就返回了bgc的属性值
$("p").css("background-color");
// 设置css属性:css("属性名","属性值");
// 如下实例
$("p").css("background-color","yellow");
// 设置多个css属性 （键值对形式）
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery 遍历
什么是遍历？
jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
向上遍历 DOM 树
方法：
-
parent()
-
parents()
-
parentsUntil()
// parent()方法，返回备选元素的直接父元素（返回后可进行接下去的操作）
$(document).ready(function(){
$("span").parent();
});
// parents()方法，返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
$(document).ready(function(){
$("span").parents();
});
// 过滤：在所有祖先中搜索某元素
// 如下，在所有祖先中搜索ul元素
$(document).ready(function(){
$("span").parents("ul");
});
// parentsUntil()方法，返回介于两个给定元素之间的所有祖先元素
// 下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：
$(document).ready(function(){
$("span").parentsUntil("div");
});
向下遍历 DOM 树
方法：
-
children()
-
find()
// children()方法，返回被选元素的所有 直接 子元素
$(document).ready(function(){
$("div").children();
});
// 过滤：可选参数来过滤对子元素的搜索
// 下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：
$(document).ready(function(){
$("div").children("p.1");
});
// find()方法，返回被选元素的后代元素，一路向下直到最后一个后代。
// 下面的例子返回属于 <div> 后代的所有 <span> 元素：
$(document).ready(function(){
$("div").find("span");
});
// 下面的例子返回 <div> 的所有后代：
$(document).ready(function(){
$("div").find("*");
});
在 DOM 树中水平遍历
方法：
-
siblings()
-
next()
-
nextAll()
-
nextUntil()
-
prev()
-
prevAll()
-
prevUntil()
// siblings() 方法返回被选元素的所有同胞元素。
$(document).ready(function(){
$("h2").siblings();
});
// 过滤：只选p元素
$(document).ready(function(){
$("h2").siblings("p");
});
// next() 方法返回被选元素的下一个同胞元素。
$(document).ready(function(){
$("h2").next();
});
// nextAll() 方法返回被选元素的所有跟随的同胞元素。
$(document).ready(function(){
$("h2").nextAll();
});
// nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
$(document).ready(function(){
$("h2").nextUntil("h6");
});
//prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。
jQuery 过滤
方法：
-
first()
-
last()
-
eq()
-
filter()
-
not()
// first() 方法返回被选元素的首个元素。
$(document).ready(function(){
$("div p").first();
});
// last() 方法返回被选元素的最后一个元素。
$(document).ready(function(){
$("div p").last();
});
// eq() 方法返回被选元素中带有指定索引号的元素。
// 索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：
$(document).ready(function(){
$("p").eq(1);
});
// filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
// 下面的例子返回带有类名 "url" 的所有 <p> 元素：
$(document).ready(function(){
$("p").filter(".url");
});
// not() 方法返回不匹配标准的所有元素。
// 下面的例子返回不带有类名 "url" 的所有 <p> 元素：
$(document).ready(function(){
$("p").not(".url");
});
jQuery AJAX
简介
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。(也就是不需要刷新网页)，原来Ajax是在jQuery中前端和后端数据交互的方法呀！！
什么是AJAX？
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
参考手册：jQuery Ajax 参考手册
jQuery load() 方法
一个Ajax方法，load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：$(selector).load(URL,data,callback);
必选URL:您希望加载文件或网页的地址
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
/*
下面是示例文件的内容
这是示例文件（"demo_test.txt"）的内容：
<h2>jQuery AJAX 是个非常棒的功能！</h2>
<p id="p1">这是段落的一些文本。</p>
*/
// 下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中：此时这个元素的内容就变成了上面的文本，直接变换的
$("#div1").load("demo_test.txt");
// 也可以把 jQuery 选择器添加到 URL 参数。
// 下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：
$("#div1").load("demo_test.txt #p1");
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
-
responseTxt - 包含调用成功时的结果内容
-
statusTXT - 包含调用的状态
-
xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
jQuery get()/post() 方法
GET 和 POST 请求（具体上网查，不做赘述）
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
-
GET - 从指定的资源请求数据
-
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
$.get()方法
语法：
$.get(URL,callback); 或 $.get( URL [, data ] [, callback ] [, dataType ] )
-
URL：发送请求的 URL字符串。
-
data：可选的，发送给服务器的字符串或 key/value 键值对。
-
callback：可选的，请求成功后执行的回调函数。
-
dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）。
// 下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
回调函数的参数：
第一个回调参数（data）存有被请求页面的内容，第二个回调参数（status）存有请求的状态。
$.post()方法（写法上和get大同小异）
语法：
$.post(URL,callback); 或 $.post( URL [, data ] [, callback ] [, dataType ] )
-
URL：发送请求的 URL字符串。
-
data：可选的，发送给服务器的字符串或 key/value 键值对。
-
callback：可选的，请求成功后执行的回调函数。
-
dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）。
// 下面的例子使用 $.post() 连同请求一起发送数据：(终于看到一个有data的例子了)
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
回调函数的参数和get一样
// 上面的php代码如下：（不懂也无伤大雅，反正现在php用的公司已经少之又少了，害，以前可是jQuery和php的天下啊） <?php $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : ''; $url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : ''; echo '网站名: ' . $name; echo "\n"; echo 'URL 地址: ' .$url; ?>
jQuery 其他
onConflict() 方法
由于不太重要，只作简单说明，作用：解决jQuery和其他js框架的冲突，具体参考：jQuery noConflict() 方法
JSONP
由于不太重要，只作简单说明，作用：可以让网页从别的域名（网站）那获取资料，即跨域读取数据。具体参考：jQuery JSONP
后记
阅读完这些，大伙应该对 jQuery 已经有了初步的了解了，其实 jQuery 还有挺多内容的，如果你不想钻研，只是想用一用这个框架的话，那么很简单，直接参照着手册用就行了。这里我也放两个网址，方便大家食用 jQuery，感谢大家的阅读！。
参考：菜鸟教程 | jQuery教程
更加细化的参考手册：
749
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
