w3c——jquery学习笔记
2015-06-29 11:52
676 查看
语言注意事项：
第一个单词全部小写第二个单词首字母大写
1、加载安装准备
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
也可以选择 CDN引用，最好是这样
http://libs.baidu.com/jquery/1.10.2/jquery.min.js
http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js
http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js
2、基础语法： $(selector).action()
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p .test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
3、要先等文档完全加载后再运行 jquery 代码，所以需要
$(document).ready(function(){
// jQuery methods go here...这里写代码
}); 完整写法
$(function(){
// jQuery methods go here...这里写代码
}); 简写
4、jquery 选择器
元素选择器$("p")选取 P 元素
id选择器$("#id")选取 id 属性的元素
class选择器$(".class")选取 class 属性的元素
4、jquery 事件
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
常见 DOM 事件：
页面中指定一个点击事件：
$("p").click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
$("p").click(function(){
// action goes here!!代码写这里
});
5、显示/隐藏 show() 和hide()
语法:speed 可取值有slow、fast、毫秒数；callback是隐藏或显示后所执行函数的名称，可无！
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
6、切换 toggle()
语法:
$(selector).toggle(speed,callback);
7、淡入淡出
fadeIn()用于淡入已隐藏的元素
语法:
$(selector).fadeIn(speed,callback);
fadeOut()用于淡出可见元素
语法:
$(selector).fadeOut(speed,callback);
fadeToggle()可以在 fadeIn() 与 fadeOut() 方法之间进行切换
语法:
$(selector).fadeToggle(speed,callback);
fadeTo()允许渐变为给定的不透明度（值介于 0 与 1 之间）
语法:
$(selector).fadeTo(speed,opacity,callback);
8、滑动
slideDown()用于向下滑动元素
语法:
$(selector).slideDown(speed,callback);
slideUp()用于向上滑动元素
语法:
$(selector).slideUp(speed,callback);
slideToggle()可以在 slideDown() 与 slideUp() 方法之间进行切换
语法:
$(selector).slideToggle(speed,callback);
9、动画 animate()用于创建自定义动画
语法：
$(selector).animate({params},speed,callback);
params 参数定义形成动画的 CSS 属性（必选）
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
也可以操作多个属性，中间用逗号隔开并换行，属性名称用驼峰写法（即第一个单词全小写，第二个开始首字母大写）
例如：
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
注意生成颜色动画不在 jquery 中，需要另外下载插件实现
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"；
10、停止动画stop() 用于在动画或效果完成前对它们进行停止。
适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
$("#stop").click(function(){
$("div").stop();
});
当前停止，后面的继续
$("#stop2").click(function(){
$("div").stop(true);
});
全部停止，不需要参数
$("#stop3").click(function(){
$("div").stop(true,true);
});
停止，但是显示动画完成后的效果
11、callback 方法（回调函数）
Callback 函数在当前动画 100% 完成之后执行
$("button").click(function(){
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});
$("p").hide(1000);
alert("The paragraph is now hidden");
});
12、chaining事件链
通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
例如： $("#p1").css("color","red").slideUp(2000).slideDown(2000);
或者
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
效果等同。
13、获取内容和属性，即 DOM 操作
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
例：
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
例：
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
alert($("#w3s").attr("href"));
});
14、设置内容和属性
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
例：
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
$("#w3s").attr("href","http://www.w3cschool.cc/jquery");
});
也可以同事设置多个属性值
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3cschool.cc/jquery",
"title" : "W3Schools jQuery Tutorial"
});
});
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
15、添加元素
append() - 在被选元素的结尾插入内容，$("p").append("Some appended text.");
prepend() - 在被选元素的开头插入内容，$("p").prepend("Some prepended text.");
after() - 在被选元素之后插入内容，$("img").after("Some text after");
before() - 在被选元素之前插入内容，$("img").before("Some text before");
16、删除元素
remove() - 删除被选元素（及其子元素），$("#div1").remove();
empty() - 从被选元素中删除子元素，$("#div1").empty();
17、获取并设置 CSS 类
addClass() - 向被选元素添加一个或多个类
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
也可以一次规定多个类
$("button").click(function(){
$("#div1").addClass("important blue");
});
removeClass() - 从被选元素删除一个或多个类
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
toggleClass() - 对被选元素进行添加/删除类的切换操作
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
css() - 设置或返回一个或多个样式属性
返回 CSS 属性
语法：css("propertyname");
$("p").css("background-color");
设置 CSS 属性
语法：css("propertyname","value");
设置多个 CSS 属性
语法：css({"propertyname":"value","propertyname":"value",...});
18、尺寸——元素和浏览器窗口的尺寸
width()
height()
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "</br>";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
innerWidth()
innerHeight()
$("button").click(function(){
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
outerWidth()
outerHeight()
$("button").click(function(){
var txt="";
txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
txt+="Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
19、遍历祖先
jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
向上遍历 DOM树
parent()返回被选元素的直接父元素，只会向上一级对 DOM 树进行遍历
parents()返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)；
也可以使用可选参数来过滤对祖先元素的搜索，例如：
$(document).ready(function(){
$("span").parents("ul");
});
返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素
parentsUntil()返回介于两个给定元素之间的所有祖先元素
$(document).ready(function(){
$("span").parentsUntil("div");
});
返回介于 <span> 与 <div> 元素之间的所有祖先元素
20、遍历后代
children()返回被选元素的所有直接子元素，只会向下一级对 DOM 树进行遍历
$(document).ready(function(){
$("div").children();
});
也可以使用可选参数来过滤对子元素的搜索
$(document).ready(function(){
$("div").children("p.1");
});
返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
find()返回被选元素的后代元素，一路向下直到最后一个后代
$(document).ready(function(){
$("div").find("span");
}); 返回div 下的所有 span
$(document).ready(function(){
$("div").find("*");
}); 返回 div 下的所有元素
21、遍历同胞
siblings()返回被选元素的所有同胞元素
也可以使用可选参数来过滤对同胞元素的搜索
$(document).ready(function(){
$("h2").siblings("p");
}); 返回与 h2同胞的所有 p 元素
next()返回被选元素的下一个同胞元素，只返回一个元素
nextAll()返回被选元素的所有跟随的同胞元素
nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素
$(document).ready(function(){
$("h2").nextUntil("h6");
}); 返回h2与 h6之间的所有同胞元素
prev()返回的是前面的同胞元素，只返回一个元素
prevAll()返回的是前面的所有同胞元素
prevUntil()返回的是介于两个给定参数之间的所有前面的同胞元素
22、遍历——过滤，缩小搜索元素的范围
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
irst()返回被选元素的首个元素
last() 返回被选元素的最后一个元素
eq()返回被选元素中带有指定索引号的元素，索引号从 0 开始，因此首个元素的索引号是 0 而不是 1
$(document).ready(function(){
$("p").eq(1);
}); 返回第二个p元素
filter()允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
$(document).ready(function(){
$("p").filter(".intro");
}); 返回带有 intro 类名的所有 p元素
not()返回不匹配标准的所有元素
$(document).ready(function(){
$("p").not(".intro");
}); 返回不带有 intro 类名的所有 p 元素
23、ajax简介AJAX = 异步 JavaScript 和 XML（Asynchronous
JavaScript and XML）。
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
24、AJAX load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
$("#div1").load("demo_test.txt");把 demo_text.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("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
25、AJAX get() 和 post() 方法
用于通过 HTTP GET 或 POST 请求从服务器请求数据
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
26、noConflict() 方法在页面上同时使用其他框架不冲突的方法
如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：
例如：
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});
第一个单词全部小写第二个单词首字母大写
1、加载安装准备
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
也可以选择 CDN引用，最好是这样
http://libs.baidu.com/jquery/1.10.2/jquery.min.js
http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js
http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js
2、基础语法： $(selector).action()
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p .test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
3、要先等文档完全加载后再运行 jquery 代码，所以需要
$(document).ready(function(){
// jQuery methods go here...这里写代码
}); 完整写法
$(function(){
// jQuery methods go here...这里写代码
}); 简写
4、jquery 选择器
元素选择器$("p")选取 P 元素
id选择器$("#id")选取 id 属性的元素
class选择器$(".class")选取 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> 元素 | 在线实例 |
什么是事件？
页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
常见 DOM 事件：
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click单击 | keypress | submit | load |
| dblclick双击 | keydown | change | resize |
| mouseenter鼠标移到 mousedown 鼠标移到并按下时 | keyup | focus鼠标点击选中时，通过 CSS 改变输入框背景 | scroll |
| mouseleave鼠标移走 mouseup 鼠标松开 | blur失去焦点时 | unload | |
| hover光标悬停；当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。 $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); |
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。页面中指定一个点击事件：
$("p").click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
$("p").click(function(){
// action goes here!!代码写这里
});
5、显示/隐藏 show() 和hide()
语法:speed 可取值有slow、fast、毫秒数；callback是隐藏或显示后所执行函数的名称，可无！
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
6、切换 toggle()
语法:
$(selector).toggle(speed,callback);
7、淡入淡出
fadeIn()用于淡入已隐藏的元素
语法:
$(selector).fadeIn(speed,callback);
fadeOut()用于淡出可见元素
语法:
$(selector).fadeOut(speed,callback);
fadeToggle()可以在 fadeIn() 与 fadeOut() 方法之间进行切换
语法:
$(selector).fadeToggle(speed,callback);
fadeTo()允许渐变为给定的不透明度（值介于 0 与 1 之间）
语法:
$(selector).fadeTo(speed,opacity,callback);
8、滑动
slideDown()用于向下滑动元素
语法:
$(selector).slideDown(speed,callback);
slideUp()用于向上滑动元素
语法:
$(selector).slideUp(speed,callback);
slideToggle()可以在 slideDown() 与 slideUp() 方法之间进行切换
语法:
$(selector).slideToggle(speed,callback);
9、动画 animate()用于创建自定义动画
语法：
$(selector).animate({params},speed,callback);
params 参数定义形成动画的 CSS 属性（必选）
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
也可以操作多个属性，中间用逗号隔开并换行，属性名称用驼峰写法（即第一个单词全小写，第二个开始首字母大写）
例如：
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
注意生成颜色动画不在 jquery 中，需要另外下载插件实现
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"；
10、停止动画stop() 用于在动画或效果完成前对它们进行停止。
适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
$("#stop").click(function(){
$("div").stop();
});
当前停止，后面的继续
$("#stop2").click(function(){
$("div").stop(true);
});
全部停止，不需要参数
$("#stop3").click(function(){
$("div").stop(true,true);
});
停止，但是显示动画完成后的效果
11、callback 方法（回调函数）
Callback 函数在当前动画 100% 完成之后执行
使用 callback 实例
$("button").click(function(){$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});
没有 callback(回调)
$("button").click(function(){
$("p").hide(1000);alert("The paragraph is now hidden");
});
12、chaining事件链
通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
例如： $("#p1").css("color","red").slideUp(2000).slideDown(2000);
或者
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
效果等同。
13、获取内容和属性，即 DOM 操作
获得内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
例：
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
例：
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
获取属性 - attr()
$("button").click(function(){alert($("#w3s").attr("href"));
});
14、设置内容和属性
设置内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
例：
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
设置属性 - attr()也用于设置/改变属性值
$("button").click(function(){$("#w3s").attr("href","http://www.w3cschool.cc/jquery");
});
也可以同事设置多个属性值
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3cschool.cc/jquery",
"title" : "W3Schools jQuery Tutorial"
});
});
attr() 的回调函数（回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。）
$("button").click(function(){$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
15、添加元素
append() - 在被选元素的结尾插入内容，$("p").append("Some appended text.");
prepend() - 在被选元素的开头插入内容，$("p").prepend("Some prepended text.");
after() - 在被选元素之后插入内容，$("img").after("Some text after");
before() - 在被选元素之前插入内容，$("img").before("Some text before");
16、删除元素
remove() - 删除被选元素（及其子元素），$("#div1").remove();
empty() - 从被选元素中删除子元素，$("#div1").empty();
17、获取并设置 CSS 类
addClass() - 向被选元素添加一个或多个类
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
也可以一次规定多个类
$("button").click(function(){
$("#div1").addClass("important blue");
});
removeClass() - 从被选元素删除一个或多个类
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
toggleClass() - 对被选元素进行添加/删除类的切换操作
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
css() - 设置或返回一个或多个样式属性
返回 CSS 属性
语法：css("propertyname");
$("p").css("background-color");
设置 CSS 属性
语法：css("propertyname","value");
设置多个 CSS 属性
语法：css({"propertyname":"value","propertyname":"value",...});
18、尺寸——元素和浏览器窗口的尺寸
width()
height()
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "</br>";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
innerWidth()
innerHeight()
$("button").click(function(){
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
outerWidth()
outerHeight()
$("button").click(function(){
var txt="";
txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
txt+="Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
19、遍历祖先
jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
向上遍历 DOM树
parent()返回被选元素的直接父元素，只会向上一级对 DOM 树进行遍历
parents()返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)；
也可以使用可选参数来过滤对祖先元素的搜索，例如：
$(document).ready(function(){
$("span").parents("ul");
});
返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素
parentsUntil()返回介于两个给定元素之间的所有祖先元素
$(document).ready(function(){
$("span").parentsUntil("div");
});
返回介于 <span> 与 <div> 元素之间的所有祖先元素
20、遍历后代
children()返回被选元素的所有直接子元素，只会向下一级对 DOM 树进行遍历
$(document).ready(function(){
$("div").children();
});
也可以使用可选参数来过滤对子元素的搜索
$(document).ready(function(){
$("div").children("p.1");
});
返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
find()返回被选元素的后代元素，一路向下直到最后一个后代
$(document).ready(function(){
$("div").find("span");
}); 返回div 下的所有 span
$(document).ready(function(){
$("div").find("*");
}); 返回 div 下的所有元素
21、遍历同胞
siblings()返回被选元素的所有同胞元素
也可以使用可选参数来过滤对同胞元素的搜索
$(document).ready(function(){
$("h2").siblings("p");
}); 返回与 h2同胞的所有 p 元素
next()返回被选元素的下一个同胞元素，只返回一个元素
nextAll()返回被选元素的所有跟随的同胞元素
nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素
$(document).ready(function(){
$("h2").nextUntil("h6");
}); 返回h2与 h6之间的所有同胞元素
prev()返回的是前面的同胞元素，只返回一个元素
prevAll()返回的是前面的所有同胞元素
prevUntil()返回的是介于两个给定参数之间的所有前面的同胞元素
22、遍历——过滤，缩小搜索元素的范围
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
irst()返回被选元素的首个元素
last() 返回被选元素的最后一个元素
eq()返回被选元素中带有指定索引号的元素，索引号从 0 开始，因此首个元素的索引号是 0 而不是 1
$(document).ready(function(){
$("p").eq(1);
}); 返回第二个p元素
filter()允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
$(document).ready(function(){
$("p").filter(".intro");
}); 返回带有 intro 类名的所有 p元素
not()返回不匹配标准的所有元素
$(document).ready(function(){
$("p").not(".intro");
}); 返回不带有 intro 类名的所有 p 元素
23、ajax简介AJAX = 异步 JavaScript 和 XML（Asynchronous
JavaScript and XML）。
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
24、AJAX load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
$("#div1").load("demo_test.txt");把 demo_text.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("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
25、AJAX get() 和 post() 方法
用于通过 HTTP GET 或 POST 请求从服务器请求数据
HTTP 请求：GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。语法：$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
26、noConflict() 方法在页面上同时使用其他框架不冲突的方法
如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：
例如：
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- GUI - Web前端开发框架
- JavaScript演示排序算法
- jQuery Ajax 跨域调用
- jquery教程靠边站，一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 你应该学习哪种编程语言？
- c++ primer 第五版 笔记前言
- 如何优雅地处理前端异常？
- [转]我们需要一种其他人能使用的编程语言
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作
- jQuery实现复选框批量选择与反选的方法
- jQuery中的常用事件总结