● 一、jQuery安装
1. 从jquery.com下载jQuery库
● Production version - 用于实际的网站中，已被精简和压缩
● Development version - 用于测试和开发（未压缩，是可读的代码）
2. 从CDN中载入jQuery
如果不想下载并存放jQuery，也可以通过CDN（内容分发网络）引用它。
如百度CDN引用jQuery：
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
许多用户在访问其他站点时，已经从百度等加载过jQuery，当他们访问您的站点时，会从缓存中加载jQuery，这样可以减少加载时间。同时，大多数CDN都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
二、jQuery语法
jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。
基础语法：$(selector).action()
实例：
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("#test").hide() - 隐藏id="test"的元素
为了防止文档在完全加载（就绪）前运行jQuery代码，可以将jQuery函数放到document read函数中：
$(document).ready(function(){
//jQuery methods go here…
});
可以简写为：
$(function(){
//jQuery methods go here…
});
三、jQuery选择器
jQuery选择器基于元素的id、类、类型、属性、属性值等“查找”（或选择）HTML元素。它基于已经存在的CSS选择器，除此外还有一些自定义的选择器。
jQuery中所有选择器都以美元符号开头：$()。
元素选择器
基于元素名选取元素：$("p")
实例 - 用户点击按钮后，所有<p>元素都隐藏：
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
#id选择器
通过HTML元素的id属性选择指定的元素：$("#test")
.class选择器
通过指定的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>元素 |
四、jQuery效果
1.隐藏和显示
语法：
--$(selector).hide(speed,callback);
--$(selector).show(speed,callback);
speed：规定隐藏/显示的速度，可以取"slow","fast"或毫秒
callback：规定隐藏或显示完成后所执行的函数名称
实例：
<html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(1000); }); $("#show").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>点击按钮控制本段显示</p> <button id="hide">隐藏</button> <button id="show">显示</button> </body> </html>
$("button").click(function(){
$("p").toggle();
});
toggle方法也具有speed和callbalck可选参数。
2.淡入淡出
--fadeIn()用于淡入已隐藏的元素：$(selector).fadeIn(speed,callback);
speed：规定效果的时长，可以取值"slow","fast"或毫秒
callback：规定fading完成后所执行的函数名称
实例：
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
--fadeOut()用于淡出可见元素：$(selector).fadeOut(speed,callback);
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
--fadeToggle()可以在fadeIn()和fadeOut()方法之间进行切换
语法：$(selector).fadeToggle(speed,callback);
实例：
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
--fadeTo()方法允许渐变为给定的不透明度：$(selector).fadeTo(speed,opacity,callback);
opacity：将淡入淡出效果设置为给定的不透明度，值介于0到1之间
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
3.滑动
● slideDown()：向下滑动元素
语法：$(selector).slideDown(speed,callback);
speed：规定效果的时长，可取"slow","fast"或毫秒
callback：滑动完成后所执行的函数名称
实例
$("#flip").click(function(){
$("#panel").slideDown();
});
● slideUp()：向上滑动元素
语法：$(selector).slideUp(speed,callback);
speed：规定效果的时长，可取"slow","fast"或毫秒
callback：滑动完成后所执行的函数名称
实例
$("#flip").click(function(){
$("#panel").slideUp();
});
● slideToggle()：切换滑动元素
语法：$(selector).slideToggle(speed,callback);
speed：规定效果的时长，可取"slow","fast"或毫秒
callback：滑动完成后所执行的函数名称
实例
$("#flip").click(function(){
$("#panel").slideToggle();
});
4. 动画
animate()方法用于创建自定义动画：$(selector).animate({params},speed,callback);
params：定义形成动画的CSS属性
speed：规定效果时长，可以取"slow","fast"或毫秒
callback：动画完成后所执行的函数名称
实例：把<div>元素往右边移动250像素
$("button").click(function(){
$("div").animate({left:'250px'});
});
*注：默认情况下，所有HTML元素都有一个静态位置，且无法移动。如需对位置进行操作，应先把元素的CSS position属性设置为realave、fixed或absolute
可以操作多个属性：
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
*注：一般CSS属性均可以使用animate()方法操作，但属性名应当写成Camel风格，如margin-right写为margin-right。色彩动画需要额外下载Color Animations插件。
使用相对值：
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
使用预定义的值：
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
toggle：指定属性的值从0到预定义切换
show：如果元素为隐藏的，则视为指定元素值为0，通过show来打到预定义值
hide：同上理
动画队列：
$("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");
});
5. 停止动画
stop()方法用于停止动画或效果，适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。
语法：$(selector).stop(stopAll,goToEnd);
stopAll：规定是否应该清除动画队列，默认为false，即仅停止活动的动画
goToEnd：规定是否立即完成当前动画，默认为false
6. callback参数
使用callback：
$("button").click(function(){
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});
作为回调方法参数，警告框将在动画完成后弹出。否则，即便将警告框写在hide方法后面，也会在hide动画执行前先弹出警告框。
7. 方法链Chainning
对于同一个元素的操作，可以直接在上一个方法后面点加新的方法，如：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
*注：动画效果方法有队列存在，但css方法并没有，所以如果在后面添加一个.css("color","blue")，并不能看到由红转蓝，而是直接被改为蓝色。
五、jQuery HTML
1. jQuery捕获
jQuery中非常重要的部分，就是操作DOM的能力。jQuery提供一系列与DOM相关的方法，这使访问和操作元素和属性变得很容易。
获得内容 - text()、html()以及val()
● text() - 设置或返回所选元素的文本内容
$("#btn1").click(function(){
alert("Text: "+$("#test").text()); //获取id为btn1标签对内的Text
});
$("#btn2").click(function(){
alert("HTML: "+$("#test").html()); //获取id为btn2标签对内的HTML
});
● val() - 设置或返回表单字段的值
$("#btn1").click(function(){
alert("Value: "+$("#test").val());
});
● attr() - 获取属性值
$("button").click(function(){
alert($("#w3s").attr("href"));
});
2. jQuery设置内容和属性
通过text()、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+")";
});
});
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"
});
});
$("button").click(function(){
$("#w3s").attr("href",function(i,origValue){
return origValue+"/jquery";
});
});
3. jQuery - 添加元素
● append() - 在被选元素的结尾插入内容
● prepend() - 在被选元素的开头插入内容
function appendText(){
var txt1="<p>Text.</p>"; //Create element with HTML
var txt2=("<p></p>").text("Text."); //Create with jQuery
var txt3=document.createElement("p"); //Create with DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);//prepend()同理
}
● after() - 在被选元素之后插入内容
● before() - 在被选元素之前插入内容
function afterText(){
var txt1="<b>I </b>";
var txt2=$("<i></i>").text("love ");
var txt3=document.createElement("big");
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);
}
4. jQuery - 删除元素
● remove() - 删除被选元素及其子元素
● empty() - 删除被选元素的子元素
<html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("#button1").click(function(){ $("#div1").empty(); }); }); $(document).ready(function(){ $("#button2").click(function(){ $("#div1").remove(".italic"); //删除参数指定选择器决定的元素 }); }); $(document).ready(function(){ $("#button3").click(function(){ $("#div1").remove(); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;"> This is some text in the div. <p class="italic"><i>This is a paragraph in the div.</i></p> <p>This is another paragraph in the div.</p> </div> <br> <button id="button1">Empty the Div</button> <button id="button2">Remove the Italic Paragraph</button> <button id="button3">Remove the Div</button> </body> </html>
5. jQuery - 获取并设置CSS类
示例使用样式：
.import{
font-weight:bold;
font-size:xx-large;
}
.blue{
color:blue;
}
● addClass() - 向被选元素添加一个或多个类
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
$("#div1").addClass("important blue");
});
● removeClass() - 从被选元素删除一个或多个类
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
● toggleClass() - 对被选元素进行添加/删除类的切换操作
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
● css() - 设置或返回样式属性
返回指定的CSS属性值：
$("p").css("background-color"); //参数为CCS属性名
设置CSS属性值：
$("p").css("background-color","yellow");
设置多个CSS属性：
$("p").css({"background-color":"yellow","font-size":"200%"}); //用逗号分隔属性值对
6. jQuery - 尺寸 
● 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 wdith: "+$("#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);
});
六、jQuery遍历
1. 祖先
● parent() - 返回被选元素的直接父元素
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
//span标签的直接父元素将会设置为指定样式
● parents() - 返回被选元素的所有祖先元素，它一路向上直到文档的根元素<html>
$(document).ready(function(){
$("span").parents().css({"color":"red","border":"2px solid red"});
});
//span标签的所有父元素都会设置为指定样式
● parentsUntil() - 返回介于两个给定元素之间的所有祖先元素
$(document).ready(function(){
$("span").parentsUntil("div");
});
//span的父元素直到一个div父元素（不包括该div元素）
2. 后代
● children() - 返回被选元素的所有直接子元素
$(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>的所有后代
3. 同胞
● siblings() - 返回被选元素的所有同胞元素（也就是兄弟元素）
$(document).ready(function(){
$("h2").sibling(); //h2本身不算在内
});
$(document).ready(function(){
$("h2").siblings("p"); //返回兄弟元素中所有<p>元素
});
● next() - 返回被选元素的下一个兄弟元素
$(document).ready(function(){
$("h2").next(); //只返回一个元素
});
● nextAll() - 返回被选元素的所有跟随的兄弟元素
$(document).ready(function(){
$("h2").nextAll();
});
● nextUntil() - 返回介于两个给定参数之间的所有跟随的兄弟元素
$(document).ready(function(){
$("h2").nextUntil("h6");
});
● prev(), prevAll() & prevUntil()
返回前面的兄弟元素
4. 过滤
● first() - 返回被选元素的首个元素
$(document).ready(function(){
$("div p").first(); //选取首个<div>元素内部的第一个<p>元素
});
● last() - 返回被选元素的最后一个元素
$(document).ready(function(){
$("div p").last(); //返回最后一个<div>元素中的最后一个<p>元素
});
● eq() - 返回被选元素中带有指定索引号的元素
$(document).ready(function(){
$("p").eq(1); //索引号从0开始，该行返回第二个<p>元素
});
● filter() - 规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的返回
$(document).ready(function(){
$("p").filter(".intro");
});
● not() - 返回不匹配标准的所有元素
$(document).ready(function(){
$("p").not(".intro");
});
七、jQuery Ajax
1. Ajax load()方法
语法：$(selector).load(URL,data,callback);
URL - 必需参数，规定希望加载的URL。
data - 可选参数，规定与请求一同发送的查询字符串键值对集合
callback – load()方法完成后所执行的函数名称
demo_test.txt:
<h2>jQuery and AJAX is FUN!</h2>
<p id="p1">This is some text in a paragraph.</p>
示例：将指定文件的内容加载到<div>元素中
$("#div1").load("demo_test.txt");
示例：将demo_test.txt中id="p1"的元素内容加载到<div>中
$("#div1").load("demo_test.txt #p1");
示例：回调方法
$("button").click(function(){
$("#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.statusTxt);
});
});
2. Ajax get()和post()
● $.get(URL,callback);
$("button").click(function(){
$.get("demo_test.html",function(data,status){
alert("Data: "+data+"nStatus: "+status);
});
});
demo_test.php:
<?php
echo "This is some text from an external PHP file.";
?>
● $.post(URL,data,callback);
$("button").click(function(){
$.post("demo_test_post.html",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: "+data+"nStatus: "+status);
});
});
demo_test_post.php:
<?php
$name=isset($_POST['name'])?htmlspecialchars($_POST['name']):'';
$city=isset($_POST['city'])?htmlspecialchars($_POST['city']):'';
echo 'Dear' . $name;
echo 'Hope you live well in ' . $city;
?>
661
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
