jQuery的DOM操作之设置和获取HTML、文本和值 html()text()val()

时间:2023-10-16 18:54:38

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>

jQuery的DOM操作之设置和获取HTML、文本和值 html()text()val()

如果需要设置某元素的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>

jQuery的DOM操作之设置和获取HTML、文本和值 html()text()val()

如果需要为某元素设置文本内容,那么需要传递一个参数:

<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>

jQuery的DOM操作之设置和获取HTML、文本和值 html()text()val()

通过上面的例子可以发现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>

jQuery的DOM操作之设置和获取HTML、文本和值 html()text()val()

该网页中的一些元素是默认选中的,可以通过val()方法来改变它们的选中项。

<script type="text/javascript">

$(document).ready(function(){

$("#single").val("选择2号");

$("#multiple").val(["选择2号","选择3号"]);

$(":checkbox").val(["check2","check3"]);

$(":radio").val(["radio2"]);

});

</script>

效果如下:

jQuery的DOM操作之设置和获取HTML、文本和值 html()text()val()