jQuery·入门笔记
1、什么是jQuery？
jQuery 是一个 JavaScript 函数库。
jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。
jQuery 库包含以下功能：
-
HTML 元素选取
-
HTML 元素操作
-
CSS 操作
-
HTML 事件函数
-
JavaScript 特效和动画
-
HTML DOM 遍历和修改
-
AJAX
-
Utilities
-
jQuery还提供了大量的插件
2、jQuery语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(*selector*).*action*()
-
美元符号定义 jQuery
-
选择符（selector）"查询"和"查找" HTML 元素
-
jQuery 的 action() 执行对元素的操作
实例:
-
$(this).hide() - 隐藏当前元素
-
$("p").hide() - 隐藏所有 <p> 元素
-
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
-
$("#test").hide() - 隐藏 id="test" 的元素
3、文档就绪事件
所有 jQuery 函数位于一个 document ready 函数中：
jQuery入口函数
$(document).ready(function(){
// 开始写 jQuery 代码...
//里面都是jQuery执行代码
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
-
试图隐藏一个不存在的元素
-
获得未完全加载的图像的大小
提示：简洁写法（与以上写法效果相同）:
$(function(){
// 开始写 jQuery 代码...
});
JavaScript入口函数：
window.onload = function (){
//执行代码
}
jQuery 入口函数与 JavaScript 入口函数的区别：
-
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
-
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行
4、jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:
$("p")
#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：
$("#test")
.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：
$(".test")
更多其他实例
| 语法 | 描述 |
|---|---|
| $("*") | 选取所有元素 |
| $(this) | 选取当前 HTML 元素 |
| $("p.intro") | 选取 class 为 intro 的 <p> 元素 |
| $("p:first") | 选取第一个 <p> 元素 |
| $("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 |
| $("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素 |
| $("[href]") | 选取带有 href 属性的元素 |
| $("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 |
| $("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 |
| $(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 |
| $("tr:even") | 选取偶数位置的 <tr> 元素 |
| $("tr:odd") | 选取奇数位置的 <tr> 元素 |
5、jQuery 事件
jQuery 是为事件处理特别设计的。
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：
在元素上移动鼠标。
选取单选按钮
点击元素
1、常见 DOM 事件：
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click 单击触发 | keypress 键被按下 | submit | load |
| dblclick 双击触发 | keydown 键按下的过程 | change | resize |
| mouseenter 鼠标指针滑过该元素时 | keyup 键被松开 | focus 获得焦点时 | scroll |
| mouseleave 鼠标指针离开 | blur 失去焦点时 | unload | |
| mousedown 鼠标按下 | |||
| mouseup 松开鼠标 | |||
| hover 鼠标悬浮 |
2、jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$("p").click();
下一步是定义了点击后触发事件,通过一个事件函数实现：
$("p").click(function(){
// 动作触发后执行的代码!!
//所有DOM事件写法都如此
});
3、hover
hover()方法用于模拟光标悬停事件（ 移入--》移出 ）
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);
当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
实例
$("#p1").hover(
function(){
alert("鼠标进入，执行第一个函数");
},
function(){
alert("鼠标离开，执行第二个函数");
}
);
一、jQuery效果
jQuery隐藏/显示
1、hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
实例
$("#hide").click(function(){
$("p").hide();
//鼠标点击id为hide的元素时，p元素隐藏
});
$("#show").click(function(){
$("p").show();
//鼠标点击id为show的元素时，p元素显示
});
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
带有 speed 参数的 hide() 方法：
实例
$("button").click(function(){
$("p").hide(1000);
});
带有 speed 参数的 hide() 方法，并使用回调函数弹出框提示：
实例
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").hide(1000,"linear",function(){
alert("Hide() 方法已完成!");
//当点击class为hidebtn的元素时，隐藏div元素内容，隐藏速度1s，隐藏完成后执行一个回调函数（此处回调函数，弹出一个弹出框并含有提示文本）
});
});
});
第二个参数是一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）。
2、toggle（）
toggle() 方法用来切换 hide() 和 show() 方法，语法同上，可选speed和callback参数
显示被隐藏的元素，并隐藏已显示的元素：
实例
$("button").click(function(){
$("p").toggle();
});
jQuery淡入/淡出
jQuery 拥有下面四种 fade 方法：
| 方法 | 解释 | 语法 |
|---|---|---|
| fadeIn() | 淡入效果，已隐藏的元素慢慢显示出来 | $(selector).fadeIn(speed,callback); 可选参数 speed："slow","fast",毫秒 callback：fading淡入淡出完成后执行的函数名称 |
| fadeOut() | 淡出可见元素，可见的元素慢慢被淡出，消失 | $(selector).fadeOut(speed,callback); |
| fadeToggle() | 在 fadeIn() 与 fadeOut() 方法之间进行切换；已经淡出那就添加淡入效果，淡入那就添加淡出效果 | $(selector).fadeToggle(speed,callback); |
| fadeTo | 允许渐变为给定的不透明度 | $(selector).fadeTo(speed,opacity,callback); speed：此处必选，必须给定效果的时长，"slow"、"fast" 或毫秒 opacity：此处必选，值介于0-1之间 callback：可选参数，同上 |
一、注意大小写，fadeIn() fadeOut() fadeToggle() fadeTo() 大小写不能变。
二、fadeTo() 没有默认参数，必须加上 slow/fast/Time
jQuery滑动
| 滑动方法 | 解释 | 语法（参数都是可选） |
|---|---|---|
| slideDown() | 向下滑动元素 | $(selector).slideDown(speed,callback); |
| slideUp() | 向上滑动元素 | $(selector).slideUp(speed,callback); |
| slideToggle() | 在 slideDown() 与 slideUp() 方法之间进行切换 | $(selector).slideToggle(speed,callback); |
jQuery 动画 和 停止动画
1、jQuery 动画 - animate() 方法
参考文档：jQuery 效果 – 动画 | 菜鸟教程 (runoob.com)
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
-
必需的 params 参数定义形成动画的 CSS 属性。
-
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
-
可选的 callback 参数是动画完成后所执行的函数名称。
$("button").click(function(){
$("div").animate({left:'250px'});
});
默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。 如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
jQuery为什么要引入队列？
在JavaScript编程几乎总是伴随着异步操作：
setTImeout，css3Transition/Animation,ajax,dom的绘制，postmessage，web Database 等等，大量异步操作所带来的回调函数会把我们的算法分解，对于“异步+回调”的模式，怎么“拉平”异步操作使之跟同步一样，因为异步操作进行流程控制的时候无非避免的要嵌套大量的回调逻辑，所以就会出现 promises 约定了。
那么jQuery 引入队列其实从一个角度上可以认为：允许一系列函数被异步地调用而不会阻塞程序。
2、jQuery 停止动画 -stop()方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd); 参数可选
stopAll：规定是否应该清除动画队列；默认false，即仅停止当前活动的动画，队列中的下一个动画开始执行
goToEnd：规定是否立即完成当前动画，默认false
因此，默认地，stop() 会清除在被选元素上指定的当前动画
设置stopAll的参数为true时，会停止所有动画效果
jQuery callback方法
Callback 函数在当前动画 100% 完成之后执行
使用 callback 实例
$("button").click(function(){ $("p").hide("slow",function(){ alert("警告框会在hide完成后弹出"); }); });没有 callback(回调)
$("button").click(function(){ $("p").hide(1000); alert("警告框会在隐藏效果完成前弹出"); });
jQuery - 链(Chaining)
通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许在一条语句中运行多个 jQuery 方法（在相同的元素上）。
链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条
提示： 这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，只需简单地把该动作追加到之前的动作上
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
//"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
//效果同上，因为jQuery语法不是很严格，jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行
二、jQuery HTML
jQuery - 获取/设置内容和属性
-
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力
DOM = Document Object Model（文档对象模型）
DOM 定义访问 HTML 和 XML 文档的标准：
"W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。"
-
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
方法 释义 获取 设置 text() 设置或返回所选元素的文本内容 $("#test").text(); 获取id为test的元素的文本内容 $("#test1").text("Hello world!"); 设置id为test1的元素的文本内容为“Hello world!”，原来有值也会直接变更 html() 设置或返回所选元素的内容（包括 HTML 标签） $("#test").html(); 获取id为test的元素的内容（含HTML标签） $("#test2").html("Hello world!"); 设置id为test2的元素的文本内容为“Hello world!”，包含标签，所以该内容样式加粗 val() 设置或返回表单字段的值 $("#test").val(); 获取表单字段的值（即 表单字段的value值） $("#test3").val("haha"); 设置表单字段的值（value="haha"） attr() 用于获取属性值 $("#test").attr("href"); 获取链接中 href 属性的值 $("#test4").attr("href","jQuery 教程 | 菜鸟教程"); 设置改变链接中的href属性的值 attr() 的回调函数
jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
有回调函数的 attr() 方法：
$("button").click(function(){ $("#runoob").attr("href", function(i,origValue){ return origValue + "/jquery"; /* 原始：href="http://www.runoob.com" 点击按钮触发事件后：href=""http://www.runoob.com"/jquery" */ }); });
jQuery 添加元素
| 方法 | 释义 | 用法 |
|---|---|---|
| append() | 在被选元素的结尾插入内容 | |
| prepend() | 在被选元素的开头插入内容 | |
| after() | 在被选元素之后插入内容 | |
| before() | 在被选元素之前插入内容 |
总结 append、after没有区别，效果一样；prepend、before同理。
删除元素
-
remove() - 删除被选元素（及其子元素）
-
empty() - 从被选元素中删除子元素（清空子元素）
remove() 方法也可接受一个参数，允许对被删元素进行过滤，该参数可以是任何 jQuery 选择器的语法
删除 class="italic" 的所有 <p> 元素：
$("p").remove(".italic");
获取并设置CSS类
操作CSS类
-
addClass() - 向被选元素添加一个或多个类 （括号里填要添加的类名 例如 $("div").addClass("blue"); 需要添加多个类用空格隔开 ）
-
removeClass() - 从被选元素删除一个或多个类
-
toggleClass() - 对被选元素进行 添加/删除类 的切换操作
-
css() - 设置或返回样式属性
CSS()方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性
返回指定的 CSS 属性的值，语法：
css("propertyname");
返回首个匹配元素的 background-color 值：
$("p").css("background-color");
//返回“rgb(*,*,*)”
设置 CSS 属性
设置指定的 CSS 属性，语法：
css("propertyname","value");
为所有匹配元素设置 background-color 值：
$("p").css("background-color","yellow");
设置多个属性值，语法：
css({"propertyname":"value","propertyname":"value",...});
”属性1“：“属性值”，“属性2”：“属性值”
尺寸
元素和浏览器窗口的尺寸
| 方法 | 释义 | |
|---|---|---|
| width() | 设置或返回元素的宽度（不包括内边距、边框或外边距） | 括号里填数字就是设置宽度，不填就是返回元素宽度 |
| hieght() | 设置或返回元素的高度（不包括内边距、边框或外边距） | 同上 |
| innerWidth() | 返回元素的宽度（包括内边距） | |
| innerHeight() | 返回元素的高度（包括内边距） | |
| outerWidth() | 返回元素的宽度（包括内边距和边框） | |
| outerHeight() | 返回元素的高度（包括内边距和边框） |
三、jQuery 遍历
遍历
jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素
以某项选择开始，并沿着这个选择移动，直到抵达期望的元素为止
通过 jQuery 遍历，能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历
祖先
通过 jQuery，能够向上遍历 DOM 树，以查找元素的祖先
用于向上遍历DOM树的方法：
| 方法 | 释义 | 用法 |
|---|---|---|
| parent() | 返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历 | $("span").parent(); |
| parents() | 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>) | $("span").parents(); $("span").parents("ul"); 可选参数 过滤对祖先元素的搜索，此处返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素 |
| parentsUntil() | 返回介于两个给定元素之间的所有祖先元素 | $("span").parentsUntil("div"); 返回介于 <span> 与 <div> 元素之间的所有祖先元素 |
后代
能够向下遍历 DOM 树，以查找元素的后代
两个用于向下遍历 DOM 树的 jQuery 方法：
| 方法 | 释义 | 用法 |
|---|---|---|
| children() | 返回被选元素的所有直接子元素,只会向下一级对 DOM 树进行遍历 | $("div").children(); 返回每个 <div> 元素的所有直接子元素 $("div").children("p.1"); 可选参数来过滤对子元素的搜索；返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素 |
| find() | 返回被选元素的后代元素，一路向下直到最后一个后代 | $("div").find("span"); 返回属于 <div> 后代的所有 <span> 元素 $("div").find("*"); 返回 <div> 的所有后代 |
同胞
水平遍历DOM树
| 方法 | 释义 | 用法 |
|---|---|---|
| siblings() | 返回被选元素的所有同胞元素 | $("h2").siblings(); $("h2").siblings("p"); 使用可选参数来过滤对同胞元素的搜索；返回属于 <h2> 的同胞元素的所有 <p> 元素 |
| next() | 被选元素的下一个同胞元素 | $("h2").next(); |
| nextAll() | 返回被选元素的所有跟随的同胞元素 | $("h2").nextAll(); |
| nextUntil() | 返回介于两个给定参数之间的所有跟随的同胞元素 | $("h2").nextUntil("h6"); |
| prev() | 前一个 | |
| prevAll() | 前面所有 | |
| prevUntil() | 介于两者之间所有同胞 |
过滤
缩小搜索元素的范围
单个元素
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许基于其在一组元素中的位置来选择一个特定的元素。
eq()返回被选元素中带有指定索引号的元素，索引号从 0 开始
例子 $("p").eq(1);
多个元素
其他过滤方法，比如 filter() 和 not() 允许选取匹配或不匹配某项指定标准的元素。
filter() 方法允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的（多个）元素会被返回
not() 方法返回不匹配标准的所有元素
四、jQuery Ajax
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
jQuery AJAX 简介 | 菜鸟教程 (runoob.com)
什么是 AJAX？
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。
通过 jQuery AJAX 方法，可以使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时能够把这些外部数据直接载入网页的被选元素中。
jQuery - AJAX load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中
语法：
$(selector).load(URL,data,callback);
url：必需参数，希望加载的 URL
data：可选，与请求一同发送的查询字符串键/值对集合
callback：可选， load() 方法完成后所执行的函数名称
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
-
responseTxt - 包含调用成功时的结果内容
-
statusTxt - 包含调用的状态（“success”和“error”）
-
xhr - 包含 XMLHttpRequest 对象
jQuery - AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
HTTP 请求：GET vs POST
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
-
GET - 从指定的资源请求数据
-
POST - 向指定的资源提交要处理的数据
jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get(URL,callback); 或 $.get( URL [, data ] [, callback ] [, dataType ] )
-
URL：发送请求的 URL字符串。
-
data：可选的，发送给服务器的字符串或 key/value 键值对。
-
callback：可选的，请求成功后执行的回调函数。
-
dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
语法:
$.post(URL,callback); 或 $.post( URL [, data ] [, callback ] [, dataType ] )
-
URL：发送请求的 URL字符串。
-
data：可选的，发送给服务器的字符串或 key/value 键值对。
-
callback：可选的，请求成功后执行的回调函数。
-
dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）
$("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 和 POST 方法的区别：
1、发送的数据数量
在 GET 中，只能发送有限数量的数据，因为数据是在 URL 中发送的。
在 POST 中，可以发送大量的数据，因为数据是在正文主体中发送的。
2、安全性
GET 方法发送的数据不受保护，因为数据在 URL 栏中公开，这增加了漏洞和黑客攻击的风险。
POST 方法发送的数据是安全的，因为数据未在 URL 栏中公开，还可以在其中使用多种编码技术，这使其具有弹性。
3、加入书签中
GET 查询的结果可以加入书签中，因为它以 URL 的形式存在；而 POST 查询的结果无法加入书签中。
4、编码
在表单中使用 GET 方法时，数据类型中只接受 ASCII 字符。
在表单提交时，POST 方法不绑定表单数据类型，并允许二进制和 ASCII 字符。
5、可变大小
GET 方法中的可变大小约为 2000 个字符。
POST 方法最多允许 8 Mb 的可变大小。
6、缓存
GET 方法的数据是可缓存的，而 POST 方法的数据是无法缓存的。
7、主要作用
GET 方法主要用于获取信息。而 POST 方法主要用于更新数据。
678
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
