1. html()方法:
此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的html内容。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($("p").html());
});
</script>
</head>
<body>
<p title="what kind of fruit do you like best?"><strong>你最喜欢的水果是?</strong></p>
</body>
</html>
如果需要设置某元素的html代码,也可以使用该方法,不过需要传入一个参数:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").html("<strong>你最喜欢的水果是?</strong>");
});
</script>
</head>
<body>
<p title="what kind of fruit do you like best?"></p>
</body>
</html>
2. text()方法:
次方法类似于javascript中的innerText属性,可以用来读取或者设置某个元素中的文本内容。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($("p").text());
});
</script>
</head>
<body>
<p title="what kind of fruit do you like best?"><strong>你最喜欢的水果是?</strong></p>
</body>
</html>
如果需要为某元素设置文本内容,那么需要传递一个参数:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").text("你最喜欢的水果是?");
});
</script>
</head>
<body>
<p title="what kind of fruit do you like best?"></p>
</body>
</html>
3. val()方法:
此方法类似于JavaScript中的value属性,可以用来设置或获取元素的值。无论元素是文本框,下拉列表还是单选框,它都可以发回元素的值。
如果元素为多选,则返回一个包含所有选择的值的数组。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#address").focus(function(){
var txt_value=$(this).val();
if(txt_value=="请输入邮箱地址"){
$(this).val("");
}
});
$("#address").blur(function(){
var txt_value=$(this).val();
if(txt_value==""){
$(this).val("请输入邮箱地址");
}
});
$("#pwd").focus(function(){
var txt_value=$(this).val();
if(txt_value=="请输入邮箱密码"){
$(this).val("");
}
});
$("#pwd").blur(function(){
var txt_value=$(this).val();
if(txt_value==""){
$(this).val("请输入邮箱密码");
}
});
});
</script>
</head>
<body>
<input type="text" id="address" value="请输入邮箱地址" style="color:gray"><br>
<input type="text" id="pwd" value="请输入邮箱密码" style="color:gray"><br>
<input type="button" value="登录">
</body>
</html>
通过上面的例子可以发现val()方法不仅能设置元素的值,还能获取元素的值。而且val()方法还有另外一个用处,就是它能使select,checkbox和radio相应的选项被选中,在表单操作中经常会用到。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</head>
<body>
<select id="single">
<option>选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
</select>
<select id="multiple" multiple="multiple" style="height:130px">
<option selected="selected">选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
<option>选择4号</option>
<option selected="selected">选择5号</option>
</select>
<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"/>单选1
<input type="radio" value="radio2"/>单选2
<input type="radio" value="radio3"/>单选3
</body>
</html>
该网页中的一些元素是默认选中的,可以通过val()方法来改变它们的选中项。
<script type="text/javascript">
$(document).ready(function(){
$("#single").val("选择2号");
$("#multiple").val(["选择2号","选择3号"]);
$(":checkbox").val(["check2","check3"]);
$(":radio").val(["radio2"]);
});
</script>
效果如下: