一個(gè)簡(jiǎn)單的例子：
<html>
<head>
<script type="text/javascript" src="../bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<h1>
<p>if you click Hello Wolrd, i will disapper.</p>
</h1>
</body>
</html>
備注：
1渔伯、代碼中的函數(shù)：
1) hide：隱藏對(duì)象脓豪。
2) click：點(diǎn)擊事件尽纽。
- ready: 文檔就緒函數(shù)(為了防止文檔在完全加載（就緒）之前運(yùn)行 jQuery 代碼)卫漫。
舉例：
a> 試圖隱藏一個(gè)不存在的元素
b> 獲得未完全加載的圖像的大小
2柑爸、其它：
1）jquery內(nèi)庫引入:
// 引入Jquery內(nèi)庫沛慢，需要注意<script>標(biāo)簽必須是一對(duì)赡若，不能單獨(dú)出現(xiàn)，不然引入內(nèi)庫文件失敗团甲。
<script type="text/javascript" src="../bin/jquery.js"></script>
2)關(guān)鍵字：
this:用于代表此函數(shù)對(duì)象逾冬。
Jquery特性：
HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函數(shù)
JavaScript 特效和動(dòng)畫
HTML DOM 遍歷和修改
AJAX
選擇器：
元素選擇其：
$("p.intro") 選取所有 class="intro" 的 p元素燃领。
$("p#demo") 選取所有 id="demo" 的 p元素宴倍。
屬性選擇器：
$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素厘熟。
CSS選擇器：
$("p").css("background-color","red");
總結(jié)：jquery中目前包含三種選擇器
1.元素選擇器匹厘。2.屬性選擇器嘀趟。3.CSS選擇器。
事件：
$(document).ready(function) 將函數(shù)綁定到文檔的就緒事件（當(dāng)文檔完成加載時(shí)）
$(selector).click(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的點(diǎn)擊事件
$(selector).dblclick(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的雙擊事件
$(selector).focus(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的獲得焦點(diǎn)事件
$(selector).mouseover(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的鼠標(biāo)懸停事件
show/hide函數(shù)使用：
語法：
// 1.speed用來設(shè)置隱藏或顯示的速度（毫秒）愈诚，callback：回調(diào)函數(shù),默認(rèn)不需要填寫參數(shù)她按。
//2.toggle介于hide和show之間，如果目前對(duì)象是隱藏執(zhí)行toggle函數(shù)可以顯示對(duì)象炕柔，相反目前對(duì)象是顯示執(zhí)行toggle函數(shù)可以隱藏對(duì)象酌泰。
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
代碼：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="../bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button.hide").click(function(){
$("p").hide(10,function(){
alert("hide success!");
});
});
$("button.show").click(function(){
$("p").show(10,function(){
alert("show success!");
});
});
$("button.toggle").click(function(){
$("p").toggle(10,function(){
alert("toggle success!");
});
});
});
</script>
</head>
<body>
<h1>
<p>if you click Hello Wolrd, i will disapper.</p>
<button class="hide" type="button">hide</button>
<button class="show" type="button">show</button>
<button class="toggle" type="button">toggle</button>
</h1>
</body>
</html>
獲取內(nèi)容和屬性：
- 獲取內(nèi)容：
1> text():設(shè)置或返回所選元素的文本內(nèi)容。
2> html()：設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）匕累。
3> val():設(shè)置或返回表單字段的值陵刹。
2.獲取屬性：
attr():用于獲取屬性值
代碼：
<html>
<head>
<script type="text/javascript" src="../bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button.text").click(function(){
alert($("p.char").text());
});
$("button.html").click(function(){
alert($("p.char").html());
});
$("button.val").click(function(){
alert($("input.text").val());
});
$("button.attr").click(function(){
alert($("#w3s").attr("href"));
});
});
</script>
</head>
<body>
<h1>
<p class="char">這是一段操作的<b>粗體</b>字符串.</p>
</br>
<input class="text" type="text" value="這是一段操作的<b>粗體</b>字符串.">
</br>
<p><a id="w3s">W3School.com.cn</a></p>
</h1>
<button class="text" type="button">Text</button>
<button class="html" type="button">html</button>
<button class="val" type="button">val</button>
<button class="attr" type="button">attr</button>
</body>
</html>
修改內(nèi)容和屬性：
<html>
<head>
<script type="text/javascript" src="../bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button.text").click(function(){
$("p.text").text("修改內(nèi)容為TEXT");
});
$("button.html").click(function(){
$("p.html").html("修改內(nèi)容為HTML");
});
$("button.val").click(function(){
$("input.text").val("修改內(nèi)容VAL");
});
$("button.attr").click(function(){
//單屬性操作
//$("#w3s").attr("href","http://www.baidu.com");
//多屬性操作
$("#w3s").attr({
"href" : "http://www.baidu.com",
"title" : "www.baidu.com"
});
});
});
</script>
</head>
<body>
<h1>
<p class="text">這是一段操作的<b>粗體</b>字符串.</p>
</br>
<p class="html">這是一段操作的<b>粗體</b>字符串.</p>
</br>
<input class="text" type="text" value="這是一段操作的<b>粗體</b>字符串.">
</br>
<p><a id="w3s">W3School.com</a></p>
</h1>
<button class="text" type="button">Text</button>
<button class="html" type="button">html</button>
<button class="val" type="button">Text</button>
<button class="attr" type="button">attr</button>
</body>
</html>
添加內(nèi)容和屬性：
1、append() - 在被選元素的結(jié)尾插入內(nèi)容欢嘿。
2衰琐、prepend() - 在被選元素的開頭插入內(nèi)容。
3炼蹦、after() - 在被選元素之后插入內(nèi)容羡宙。
4、before() - 在被選元素之前插入內(nèi)容框弛。
<html>
<head>
<script type="text/javascript" src="../bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 在內(nèi)容后面添加新的元素
$("button.append").click(function(){
$("p").append("<b>end Appended text</b></br>");
});
// 在內(nèi)容前面添加新的元素
$("button.prepend").click(function(){
$("p").prepend("<b>start Appended text</b></br>");
});
// 在內(nèi)容后面添加新的元素
$("button.after").click(function(){
$("p").after("<b>end Appended text</b></br>");
});
// 在內(nèi)容前面添加新的元素
$("button.before").click(function(){
$("p").before("<b>start Appended text</b></br>");
});
// 創(chuàng)建新元素添加
$("button.password").click(function(){
// 通過HTML方式創(chuàng)建元素
var text1="<p>Text.</p>";
// 以jquery方式創(chuàng)建元素
var text2=$("<p></p>").text("Text.");
var field=$("<input type='password'></input>");
// 通過 DOM 來創(chuàng)建元素
var text3=document.createElement("p");
text3.innerHTML="Text.";
$("body").append(text1,text2,text3,field);
});
});
</script>
</head>
<body>
<h1>
<p>if you click Hello Wolrd, i will disapper.</p>
<button type="button" class="append">append</button>
<button type="button" class="prepend">prepend</button>
<button type="button" class="password">password</button>
<button type="button" class="after">after</button>
<button type="button" class="before">before</button>
</h1>
</body>
</html>
刪除內(nèi)容和屬性：
1辛辨、remove() - 刪除被選元素（及其子元素）
2、empty() - 從被選元素中刪除子元素
代碼:
<html>
<head>
<script type="text/javascript" src="../bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 清空子元素
$("button.remove").click(function(){
$("div.remove").remove();
});
// 清空所有元素
$("button.empty").click(function(){
$("div.empty").empty();
});
});
</script>
</head>
<body>
<h1>
<div class="remove" style="height:100px;width:300px;border:1px solid black ;background-color:yellow;">
<p>This is some text in the div.</p>
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div></br>
<div class="empty" style="height:100px;width:300px;border:1px solid black ;background-color:yellow;">
<p>This is some text in the div.</p>
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<button type="button" class="remove">remove</button>
<button type="button" class="empty">empty</button>
</h1>
</body>
</html>
CSS操作：
addClass() - 向被選元素添加一個(gè)或多個(gè)類
removeClass() - 從被選元素刪除一個(gè)或多個(gè)類
toggleClass() - 對(duì)被選元素進(jìn)行添加/刪除類的切換操作
css() - 設(shè)置或返回樣式屬性
代碼：
<html>
<head>
<script type="text/javascript" src="../bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button.addCssStyle").click(function(){
// 1. 選擇器選擇多個(gè)元素，通過逗號(hào)隔離斗搞。
// 2. 通過addClass屬性為元素附加css屬性指攒。
$("H1,H4,p").addClass("blue");
$("div").addClass("important");
});
$("button.removeCssStyle").click(function(){
// 1. 通過removeClass屬性刪除css屬性。
$("H1,H4,p").removeClass("blue");
$("div").removeClass("important");
});
$("button.toggleCssStyle").click(function(){
// 1.通過toggleClass切換狀態(tài)僻焚。
$("H1,H4,p").toggleClass("blue");
$("div").toggleClass("important");
});
$("button.getCssStyle").click(function(){
// 1.通過css屬性名獲取對(duì)象使用css的值
alert($("div").css("propertyname","value"));
alert($("p").css("background-color"));
// 一次性設(shè)置css多個(gè)屬性(格式css.({...more attribute value...}))
$("p").css({
"background-color":"red",
"font-size":"20px"
});
});
});
</script>
<style type="text/css">
.important{
font-weight: bold;
font-size: xx-large;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<H1>標(biāo)題1</H1>
<H4>標(biāo)題2<H4>
<p>這是一個(gè)段落</p>
<p>另一個(gè)段落</p>
<div>
重要的段落
</div>
<button class="addCssStyle" type="button">addCssStyle</button>
<button class="removeCssStyle" type="button">removeCssStyle</button>
<button class="toggleCssStyle" type="button">toggleCssStyle</button>
<button class="getCssStyle" type="button">getCssStyle</button>
</body>
</html>
Ajax操作：
<html>
<head>
<script type="text/javascript" src="../bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var path = "http://store.ceair.com/mas/gk/public/gkstqMas/GetXXBMonthDuty";
$.ajax({
url:path,
dataType:"json",
success:function(data){
$.each(data,function(k,v){
var text = $("<input type='text'></input></br></br>").val(v.Leadername);
$("body").append(text);
});
},
});
// 通過jquery框架提供的json數(shù)據(jù)解析
$.getJSON(
path, // 請(qǐng)求地址
function(data){ // 回調(diào)函數(shù)獲取返回值
$.each(data,function(k,v){
//var text = $("<input type='text'></input></br></br>").val(v.Leadername);
//$("body").append(text);
});
})
// 執(zhí)行完之后操作
.done(function(){
do thing ...
})
// 執(zhí)行失敗操作
.fail(function(){
do thing ...
});
});
</script>
</head>
<body>
</body>
</html>
