简介
jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程。
语法
基础语法：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）”查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
文档就绪事件
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败，比如：试图隐藏一个不存在的元素；获得未完全加载的图像的大小
//写法一 $(document).ready(function(){ // 开始写 jQuery 代码... }); //写法二 $(function(){ // 开始写 jQuery 代码... });
选择器
jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素
| 语法 | 描述 |
|---|---|
| $(“p”) | 元素选择器 |
| $(“#test”) | id选择器 |
| $(“.test”) | class选择器 |
| $(“*”) | 选取所有元素 |
| $(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> 元素 |
事件
页面对访问者的不同操作叫做事件。术语有：触发，激发
常见的DOM事件：
| 鼠标 | 键盘 | 表单 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dbclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
常用的 jQuery 事件方法：
$(document).ready(function(){
//方法体
});
//接下来用三点...表示function(){//方法体}
$("p").click(...);
//双击触发的事件
$("p").dbclick(...);
//当鼠标指针穿过元素时触发的事件
$("p").mouseenter(...);
//当鼠标指针离开元素时触发的事件
$("p").mouseleave(...);
//当鼠标指针移动到元素上方，并按下鼠标按键时触发的事件
$("p").mousedown(...);
//当在元素上松开鼠标按钮时触发的事件
$("p").mouseup(...);
//当鼠标悬停在元素上面时触发的事件
$("p").hover(...);
//另外，当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);
//当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
//当元素获得焦点时触发的事件
$("input").focus(...);
//当元素失去焦点时触发的事件
$("input").blur(...);
比较keypress、keydown与keyup：
- keydown：在键盘上按下某键时发生，一直按着则会不断触发（opera浏览器除外），它返回的是键盘代码;
- keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效，换句话说，只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
- keyup：用户松开某一个按键时触发，与keydown相对，返回键盘代码。
jQuery效果
隐藏，显示，切换
语法：
$(selector).hide(speed,callback);元素隐藏$(selector).show(speed,callback);元素显示$(selector).toggle(speed,callback);元素切换hide()和show()方法- 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
- 可选的 callback 参数是隐藏或显示完成后所执行的函数名称
- 可选的 callback 参数，具有以下三点说明：
- $(selector)选中的元素的个数为n个，则callback函数会执行n次
- callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行，且不管元素有多少个，函数只会执行一遍
- callback既可以是函数名，也可以是匿名函数
淡入，淡出
语法：
$(selector).fadeIn(speed,callback);淡入已隐藏的元素$(selector).fadeOut(speed,callback);淡出可见元素$(selector).fadeToggle(speed,callback);可以在 fadeIn() 与 fadeOut() 方法之间进行切换$(selector).fadeTo(speed,opacity,callback);渐变为给定的不透明度（值介于 0 与 1 之间）
滑动
语法：
$(selector).slideDown(speed,callback);向下滑动元素$(selector).slideUp(speed,callback);向上滑动元素$(selector).slideToggle(speed,callback);在 slideDown() 与 slideUp() 方法之间进行切换
动画
语法：
$(selector).animate({params},speed,callback);params参数必须，其定义形成动画的 CSS 属性
注意：默认情况下，所有 HTML 元素都有一个静态位置static，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！停止动画
语法：
$(selector).stop(stopAll,goToEnd);，在动画完成前，停止动画或效果。
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。若为true，停止所有动画。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。链接Chaining
链接（chaining）技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。这样的话，浏览器就不必多次查找相同的元素。比如：
$("#p1").css("color","red").slideUp(2000).slideDown(2000); //或者，下面的美观写法。jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行 $("#p1").css("color","red") .slideUp(2000) .slideDown(2000);
jQuery HTML
设置和获取元素内容/值
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
text(), html(), val()的回调函数fun(i, origText){return str}：i为被选元素列表中当前元素的下标；origText为原始值；str为设置的新的元素内容
attr() - 方法用于设置/获取属性值，回调函数与html()等的一样，但我还不会使用//单属性设置 $("#w3s").attr("href","//www.w3cschool.cn/jquery"); //多属性设置 $("#w3s").attr({ "href" : "//www.w3cschool.cn/jquery", "title" : "jQuery 教程" });添加/删除元素
append() - 在被选元素内部的结尾插入指定内容
prepend() - 在被选元素内部的开头插入指定内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。如$("p").remove(".italic");，将删除所有类为italic的p元素CSS的设置
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回被选元素的一个或多个样式属性//class1,class2是类名 //可以对多个元素同时添加多个类 $("#div1,#div2").addClass("class1 class2"); //可以对多个元素同时移除多个类 $("#div1,#div2").removeClass("class1 class2"); //可以对多个元素同时进行多个类的切换操作 $("#div1,#div2").toggleClass("class1 class2"); //返回第一个p的xxx样式 $("p").css("propertyname"); //为所有的p设置xxx样式 $("p").css("propertyname","value"); //为所有的p设置多个样式 $("p").css({"propertyname":"value","propertyname":"value",...});尺寸
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth() 方法返回元素的宽度（包括内边距）
innerHeight() 方法返回元素的高度（包括内边距）
outerWidth() 方法返回元素的宽度（包括内边距和边框）
outerHeight() 方法返回元素的高度（包括内边距和边框）
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）
遍历
祖先
parent()，返回被选元素的直接父元素
parents()，返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
parentsUntil()，返回介于两个给定元素之间的所有祖先元素//可以使用可选参数来过滤对祖先元素的搜索，只选择ul的祖先元素 $("span").parents("ul"); //介于span和div之间的祖先元素 $("span").parentsUntil("div");后代
children()，返回被选元素的所有直接子元素
find()，返回被选元素的后代元素//可以使用可选参数来过滤对子元素的搜索 $("div").children("p .class1"); //必选参数来返回子元素中的特定元素 $("div").find("span"); $("div").find("#id"); $("div").find("*");//返回所有子元素同胞
siblings()，返回被选元素的所有同胞元素，如
$("h2").siblings();
next()，返回被选元素的下一个同胞元素，该方法只返回一个元素，如$("h2").next();
nextAll()，返回被选元素的所有跟随的同胞元素，如$("h2").nextAll();
nextUntil()，返回介于两个给定参数之间的所有跟随的同胞元素，如$("h2").nextUntil("h6");
以下方法类似
prev()
prevAll()
prevUntil()过滤
first()，返回被选元素的首个元素
last()，返回被选元素的最后一个元素
eq(idx)，返回被选元素中带有指定索引号的元素
filter(xxx)，匹配符合xxx标准的元素
not(xxx)，匹配不符合xxx标准的元素
Ajax
Ajax
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。load()方法
语法：
$(selector).load(URL,data,callback);，url必填，可选的 data 参数规定与请求一同发送的查询字符串键/值对集合，可选的 callback 参数是 load() 方法完成后所执行的函数名称//回调函数的三个参数：responseTxt - 包含调用成功时的结果内容； //statusTXT - 包含调用的状态；xhr - 包含 XMLHttpRequest 对象 $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("External content loaded successfully!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); });get()和post()方法
$.get(URL,callback);从服务器上请求数据
请求的url必填；回调函数可选，回调函数的第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
$.post(URL,data,callback);从服务器上请求数据
请求的url必填；可选的 data 参数规定连同请求发送的数据；可选的 callback 参数是请求成功后所执行的函数名，第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态
其他
$.noConflict();该方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。当然，您仍然可以通过全名替代简写的方式来使用 jQuery。
可以创建自己的简写
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});
如果你的 jQuery 代码块使用 简写，并且您不愿意改变这个快捷方式，那么您可以把 简 写 ， 并 且 您 不 愿 意 改 变 这 个 快 捷 方 式 ， 那 么 您 可 以 把 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 “jQuery”
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});
1034
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
