jquery中的获取、设置与删除

最新推荐文章于 2026-01-05 12:22:51 发布

转载最新推荐文章于 2026-01-05 12:22:51 发布 · 346 阅读

文章标签：

#javascript #ViewUI

jquery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了使用jQuery来获取和设置HTML元素的文本值、HTML值、表单值及属性值的方法。包括如何使用text()、html()和val()方法获取内容，以及如何利用这些方法和attr()方法设置新的值。

1.获取

（1）获取所选元素的文本值或html值

text（）：获取文本值

html（）：获取html值

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="jquery-2.1.4.min.js">
</script>
<script>
$().ready(function(){
  $("#btn1").click(function(){
    alert("Text: "+$("p").text());
  });
  $("#btn2").click(function(){
    alert("HTML: "+$("p").html());
  });
});
</script>
</head>
<body>
<p>测试<b>jquery</b>获取</p>
<input id="btn1" type="submit" value="显示text"/>
<input id="btn2" type="submit" value="显示html"/>
</body>
</html>

结果为：通过text获取的内容为：测试jquery获取

通过html获取的内容为：测试<b>jquery</b>获取

（2）获取表单值

val（）：获取表单中的值

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="jquery-2.1.4.min.js">
</script>
<script>
$().ready(function(){
  $("#btn").click(function(){
    alert("Val: "+$("#text").val());
  });
});
</script>
</head>
<body>
<input id="text" type="text" />
<input id="btn" type="submit" value="显示表单值"/>
</body>
</html>

（3）获取元素指定的属性

语法：attr（"属性名称"）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="jquery-2.1.4.min.js">
</script>
<script>
$().ready(function(){
  $("#btn").click(function(){
    alert("Val: "+$("#text").attr("type"));
  });
});
</script>
</head>
<body>
<input id="text" type="text" />
<input id="btn" type="submit" value="显示表单值"/>
</body>
</html>

结果为：text

2.设置

（1）设置元素Text格式内容、html格式内容、表单值

text("要设置的text值")

html("要设置的html值")

val("表单值")

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="jquery-2.1.4.min.js">
</script>
<script>
$().ready(function(){
  $("#btn1").click(function(){
    $("#text-set").text("hello world");
  }); 
  $("#btn2").click(function(){
    $("#html-set").html("this is <b>set html</b>");
  });  
  $("#btn3").click(function(){
    $("#text").val("name");
  });
});
</script>
</head>
<body>
<p id="text-set">this is set text</p>
<p id="html-set">this is <b>set text</b></p>
<input id="text" type="text" /><br>
<input id="btn1" type="submit" value="设置Text值"/>
<input id="btn2" type="submit" value="设置HTML值"/>
<input id="btn3" type="submit" value="设置表单值"/>
</body>
</html>

（2）设置元素属性值

语法为：attr("属性名称","属性值")

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="jquery-2.1.4.min.js">
</script>
<script>
$().ready(function(){
  $("#btn").click(function(){
    $("#test-attr").attr("href" , "http://www.w3school.com.cn/jquery");
  }); 
});
</script>
</head>
<body>
<p><a href="http://www.baidu.com" id="test-attr">baidu.com</a></p>

<input id="btn" type="submit" value="设置属性"/>
</body>
</html>