<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.test{
font-weight:bold;
color : red;
}
.add{
font-style:italic;
}
</style>
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//獲取<p>元素的HTML代碼
$("input:eq(0)").click(function(){
alert( $("p").html() );
});
//獲取<p>元素的文本
$("input:eq(1)").click(function(){
alert( $("p").text() );
});
//設置<p>元素的HTML代碼
$("input:eq(2)").click(function(){
$("p").html("<strong>你最喜歡的水果是?</strong>");
});
//設置<p>元素的文本
$("input:eq(3)").click(function(){
$("p").text("你最喜歡的水果是?");
});
//設置<p>元素的文本
$("input:eq(4)").click(function(){
$("p").text("<strong>你最喜歡的水果是?</strong>");
});
//獲取按鈕的value值
$("input:eq(5)").click(function(){
alert( $(this).val() );
});
//設置按鈕的value值
$("input:eq(6)").click(function(){
$(this).val("我被點擊了!");
});
});
</script>
</head>
<body>
<input type="button" value="獲取<p>元素的HTML代碼"/>
<input type="button" value="獲取<p>元素的文本"/>
<input type="button" value="設置<p>元素的HTML代碼"/>
<input type="button" value="設置<p>元素的文本"/>
<input type="button" value="設置<p>元素的文本(帶HTML)"/>
<input type="button" value="獲取按鈕的value值"/>
<input type="button" value="設置按鈕的value值"/>
<p title="選擇你最喜歡的水果." ><strong>你最喜歡的水果是?</strong></p>
<ul>
<li title='蘋果'>蘋果</li>
<li title='橘子'>橘子</li>
<li title='菠蘿'>菠蘿</li>
</ul>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#address").focus(function(){ // 地址框獲得鼠標焦點
var txt_value = $(this).val(); // 得到當前文本框的值
if(txt_value==this.defaultValue){
$(this).val(""); // 如果符合條件，則清空文本框內容
}
});
$("#address").blur(function(){ // 地址框失去鼠標焦點
var txt_value = $(this).val(); // 得到當前文本框的值
if(txt_value==""){
$(this).val(this.defaultValue);// 如果符合條件，則設置內容
}
})
$("#password").focus(function(){
var txt_value = $(this).val();
if(txt_value==this.defaultValue){
$(this).val("");
}
});
$("#password").blur(function(){
var txt_value = $(this).val();
if(txt_value==""){
$(this).val(this.defaultValue);
}
})
});
</script>
</head>
<body>
<input type="text" id="address" value="請輸入郵箱地址"/> <br/><br/>
<input type="text" id="password" value="請輸入郵箱密碼"/> <br/><br/>
<input type="button" value="登陸"/>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.test{
font-weight:bold;
color : red;
}
.add{
font-style:italic;
}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//設置單選下拉框選中
$("input:eq(0)").click(function(){
$("#single option").removeAttr("selected"); //移除屬性selected
$("#single option:eq(1)").attr("selected",true); //設置屬性selected
});
//設置多選下拉框選中
$("input:eq(1)").click(function(){
$("#multiple option").removeAttr("selected"); //移除屬性selected
$("#multiple option:eq(2)").attr("selected",true);//設置屬性selected
$("#multiple option:eq(3)").attr("selected",true);//設置屬性selected
});
//設置單選框和多選框選中
$("input:eq(2)").click(function(){
$(":checkbox").removeAttr("checked"); //移除屬性checked
$(":radio").removeAttr("checked"); //移除屬性checked
$("[value=check2]:checkbox").attr("checked",true);//設置屬性checked
$("[value=check3]:checkbox").attr("checked",true);//設置屬性checked
$("[value=radio2]:radio").attr("checked",true);//設置屬性checked
});
});
</script>
</head>
<body>
<input type="button" value="設置單選下拉框選中"/>
<input type="button" value="設置多選下拉框選中"/>
<input type="button" value="設置單選框和多選框選中"/>
<br/><br/>
<select id="single">
<option>選擇1號</option>
<option>選擇2號</option>
<option>選擇3號</option>
</select>
<select id="multiple" multiple="multiple" style="height:120px;">
<option selected="selected">選擇1號</option>
<option>選擇2號</option>
<option>選擇3號</option>
<option>選擇4號</option>
<option selected="selected">選擇5號</option>
</select>
<br/><br/>
<input type="checkbox" value="check1"/> 多選1
<input type="checkbox" value="check2"/> 多選2
<input type="checkbox" value="check3"/> 多選3
<input type="checkbox" value="check4"/> 多選4
<br/>
<input type="radio" value="radio1" name="a"/> 單選1
<input type="radio" value="radio2" name="a"/> 單選2
<input type="radio" value="radio3" name="a"/> 單選3
</body>
</html>