test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<input type="text" value="xx"/>
<input type="text" value="yy"/>
<input type="text" value="zz"/>
<script type="text/javascript">
alert( $("input").val() );//xx默認首項
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<script type="text/javascript">
/*用JS語法創建一個一維數組，存入string類型的姓名，再迭代
var nameArray = new Array("哈哈","呵呵","嘻嘻");
for(var i=0;i<nameArray.length;i++){
document.write(nameArray[i]+"<br/>");
}*/
/*用JSON語法創建一個一維數組，存入string類型的姓名，再迭代
var nameArray = ["哈哈","呵呵","嘻嘻","都都"];//js對象
var $nameArray = $(nameArray);//jquery對象
$nameArray.each(function(){
this表示數組中每一個元素，this屬性js對象，this代表string類型
alert(this);
});*/
//用JSON語法創建一個一維數組，存入object類型的姓名和薪水，再迭代
var nameArray = [
{
name : "哈哈",
sal : 6000
},
{
name : "嘿嘿",
sal : 7000
},
{
name : "笨笨",
sal : 8000
}
];
var $nameArray = $(nameArray);
$nameArray.each(function(){
//this代表object類型
alert(this.name + ":"+this.sal);
});
</script>
</body>
</html>
append_prepend.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
<hr/>
<div>這是子元素，要插入到父元素內</div>
<script type="text/javascript">
//DIV標籤插入到UL標籤之後(父子關係)
//$("ul").append( $("div") );
//DIV標籤插入到UL標籤之前(父子關係)
$("ul").prepend( $("div") );
</script>
</body>
</html>
attr.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<form>
<table>
<tr>
<td>
<input type="text" name="username" value="張三"/>
</td>
<td>
<input type="password" name="password" value="123456"/>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
//取得form裏第一個input元素的type屬性
//alert( $("form input:first").attr("type") );//text
//設置form裏最後個input元素的爲只讀文本框
//$("form input:last").attr("readonly","readonly")
//$(":password").attr("readonly","readonly")
</script>
</body>
</html>
create_element_text_attr.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<script type="text/javascript">
//創建div元素，添加"哈哈"文本，ID屬性，並添加到文檔中
//<body><div id="2015">哈哈</div></body>
/*js方式
var divElement = document.createElement("div");
divElement.innerHTML = "哈哈哈";
divElement.setAttribute("id","2015");
divElement.id = "2015";
document.body.appendChild(divElement);*/
//jquery方式
var $div = $("<div id='2015'>哈哈哈哈哈</div>");
//$("body").append( $div );
$(document.body).append( $div );
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<ul id="a">
<li>第一項</li>
<li id="secondID">第二項</li>
<li>第三項</li>
</ul>
<ul id="b">
<li>第一條</li>
<li id="secondID">第二條</li>
<li>第三條</li>
</ul>
<div>這是div元素</div>
<script type="text/javascript">
//刪除ID爲secondID的LI元素
//$("#secondID").remove();
//刪除所有LI元素
//$("#a li").remove();
//刪除UL元素
$("#b").remove();
</script>
</body>
</html>clone_true.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<input type="button" value="原按鈕" οnclick="alert('靜態事件')"/>
<script type="text/javascript">
//複製原input元素，添加到原input元素後，與其同級
/* var $old = $(":button");
var $new = $old.clone();
$new.val("新按鈕");
$old.after( $new ); */
//爲原input元素動態添加單擊事件，且複製原input元素，
var $old = $(":button");
$old.click(function(){
alert("動態事件");
});
//添加到原input元素後，與其同級，且和原按鈕有一樣的行爲
var $new = $old.clone(true);
$new.val("新按鈕");
$old.after( $new );
</script>
</body>
</html>
replaceWith.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<table border="1" align="center">
<tr>
<td>
<div style="width:165px;height:23px">
雙擊會被替換成文本框
</div>
</td>
<td>
不會變
</td>
</tr>
</table>
<script type="text/javascript">
//雙擊<div>中的文本，用文本框替換文本
$("div").dblclick( function(){
var $text = $("<input type='text' style='width:165px;height:23px'/>");
//文本框替代div標籤
$(this).replaceWith( $text );
} );
</script>
</body>
</html>
removeAttr.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<table>
<tr>
<td>
添加屬性border/align/width
</td>
<td>
刪除屬性align
</td>
</tr>
</table>
<script type="text/javascript">
//爲<table>元素添加屬性border/align/width
var $table = $("table").attr("border","2").attr("align","right").attr("width","60%")
//將<table>元素的align屬性刪除
$table.removeAttr("align");
</script>
</body>
</html>addClass_removeClass_toggleClass_hasClass.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.myClass{
font-size:30px;
color:red
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<div>無樣式</div>
<div class="myClass">有樣式</div>
<script type="text/javascript">
//爲無樣式的DIV添加樣式
$("div:first").addClass("myClass");
//爲有樣式的DIV刪除樣式
$("div:last").removeClass("myClass");
//切換樣式，即有樣式的變成無樣式，無樣式的變成有樣式
$("div").toggleClass("myClass");
//最後一個DIV是否有樣式
var flag = $("div:last").hasClass("myClass");
alert(flag?"有樣式":"無樣式");
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<img src="../images/zgl.jpg"/>
<script type="text/javascript">
//獲取圖片的座標
var offset = $("img").offset();
var x = offset.left;
var y = offset.top;
alert(x+":"+y);
//設置圖片的座標
$("img").offset({
top:100,
left:200
});
//獲取圖片的寬高
var w = $("img").width();
var h = $("img").height();
alert(w+":"+h);
//設置圖片的寬高
$("img").width(500);
$("img").height(600);
</script>
</body>
</html>
children_next_prev_siblings.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<p>Hello</p>
<div>
<span>
Hello Again
<b>
Bold
</b>
</span>
</div>
<p>And Again</p>
<span>And Span</span>
<script type="text/javascript">
//取得div元素的直接子元素內容，不含後代元素
var $span = $("div").children();
var content = $span.html();//包含子標籤
var content = $span.text();//不包含子標籤
alert(content);
//取得div元素的下一個同級的兄弟元素內容
var $p = $("div").next();
alert( $p.text() );
//取得div元素的上一個同級的兄弟元素內容
alert( $("div").prev().text() );
//依次取得div元素的上下一個同級的所有兄弟元素的內容
var $all = $("div").siblings("p");
$all.each(function(){
alert( $(this).html() );
});
</script>
</body>
</html>動畫效果
show_hide.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<p>
<img src="../images/zgl.jpg"/>
</p>
<script type="text/javascript">
//圖片隱蔽
$("img").hide(5000);
//休息3秒
window.setTimeout(function(){
//圖片顯示
$("img").show(5000);
},3000);
</script>
</body>
</html>fadeIn_fadeOut.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<p>
<img src="../images/zgl.jpg" style="display:none"/>
</p>
<script type="text/javascript">
//淡入顯示圖片
$("img").fadeIn(3000);
//淡出隱蔽圖片
$("img").fadeOut(3000);
</script>
</body>
</html>
slideUp_slideDown.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<div>
中國0<br/>
中國1<br/>
中國2<br/>
中國3<br/>
中國4<br/>
中國5<br/>
中國6<br/>
中國7<br/>
中國8<br/>
中國9<br/>
</div>
<input type="button" value="我的好友"/>
<script type="text/javascript">
//向上下滑動
$(":button").click(function(){
//div標標上下移動
$("div").slideToggle(1000);
});
</script>
</body>
</html>