一個簡單的例子：
<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、代碼中的函數：
1) hide：隱藏對象。
2) click：點擊事件。
- ready: 文檔就緒函數(為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼)。
舉例：
a> 試圖隱藏一個不存在的元素
b> 獲得未完全加載的圖像的大小
2、其它：
1）jquery內庫引入:
// 引入Jquery內庫，需要注意<script>標簽必須是一對，不能單獨出現，不然引入內庫文件失敗。
<script type="text/javascript" src="../bin/jquery.js"></script>
2)關鍵字：
this:用于代表此函數對象。
Jquery特性：
HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函數
JavaScript 特效和動畫
HTML DOM 遍歷和修改
AJAX
選擇器：
元素選擇其：
$("p.intro") 選取所有 class="intro" 的 p元素。
$("p#demo") 選取所有 id="demo" 的 p元素。
屬性選擇器：
$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
CSS選擇器：
$("p").css("background-color","red");
總結：jquery中目前包含三種選擇器
1.元素選擇器。2.屬性選擇器。3.CSS選擇器。
事件：
$(document).ready(function) 將函數綁定到文檔的就緒事件（當文檔完成加載時）
$(selector).click(function) 觸發或將函數綁定到被選元素的點擊事件
$(selector).dblclick(function) 觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function) 觸發或將函數綁定到被選元素的獲得焦點事件
$(selector).mouseover(function) 觸發或將函數綁定到被選元素的鼠標懸停事件
show/hide函數使用：
語法：
// 1.speed用來設置隱藏或顯示的速度（毫秒），callback：回調函數,默認不需要填寫參數。
//2.toggle介于hide和show之間，如果目前對象是隱藏執行toggle函數可以顯示對象，相反目前對象是顯示執行toggle函數可以隱藏對象。
$(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>
獲取內容和屬性：
- 獲取內容：
1> text():設置或返回所選元素的文本內容。
2> html()：設置或返回所選元素的內容（包括 HTML 標記）。
3> val():設置或返回表單字段的值。
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>
修改內容和屬性：
<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("修改內容為TEXT");
});
$("button.html").click(function(){
$("p.html").html("修改內容為HTML");
});
$("button.val").click(function(){
$("input.text").val("修改內容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>
添加內容和屬性：
1、append() - 在被選元素的結尾插入內容。
2、prepend() - 在被選元素的開頭插入內容。
3、after() - 在被選元素之后插入內容。
4、before() - 在被選元素之前插入內容。
<html>
<head>
<script type="text/javascript" src="../bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 在內容后面添加新的元素
$("button.append").click(function(){
$("p").append("<b>end Appended text</b></br>");
});
// 在內容前面添加新的元素
$("button.prepend").click(function(){
$("p").prepend("<b>start Appended text</b></br>");
});
// 在內容后面添加新的元素
$("button.after").click(function(){
$("p").after("<b>end Appended text</b></br>");
});
// 在內容前面添加新的元素
$("button.before").click(function(){
$("p").before("<b>start Appended text</b></br>");
});
// 創建新元素添加
$("button.password").click(function(){
// 通過HTML方式創建元素
var text1="<p>Text.</p>";
// 以jquery方式創建元素
var text2=$("<p></p>").text("Text.");
var field=$("<input type='password'></input>");
// 通過 DOM 來創建元素
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>
刪除內容和屬性：
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() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行添加/刪除類的切換操作
css() - 設置或返回樣式屬性
代碼：
<html>
<head>
<script type="text/javascript" src="../bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button.addCssStyle").click(function(){
// 1. 選擇器選擇多個元素，通過逗號隔離。
// 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切換狀態。
$("H1,H4,p").toggleClass("blue");
$("div").toggleClass("important");
});
$("button.getCssStyle").click(function(){
// 1.通過css屬性名獲取對象使用css的值
alert($("div").css("propertyname","value"));
alert($("p").css("background-color"));
// 一次性設置css多個屬性(格式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>標題1</H1>
<H4>標題2<H4>
<p>這是一個段落</p>
<p>另一個段落</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數據解析
$.getJSON(
path, // 請求地址
function(data){ // 回調函數獲取返回值
$.each(data,function(k,v){
//var text = $("<input type='text'></input></br></br>").val(v.Leadername);
//$("body").append(text);
});
})
// 執行完之后操作
.done(function(){
do thing ...
})
// 執行失敗操作
.fail(function(){
do thing ...
});
});
</script>
</head>
<body>
</body>
</html>
