知识点一：三个实用的jQuery的DOM操作方法==>获取、替换

最新推荐文章于 2023-02-03 01:40:48 发布

流浪蓝

最新推荐文章于 2023-02-03 01:40:48 发布

阅读量697

点赞数 1

分类专栏：前端文章标签： jquery dom

本文链接：https://blog.csdn.net/qq_35932345/article/details/53764158

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、text(); 设置或返回所选元素的文本内容

2、html();设置或返回所选元素的内容（包括 HTML标记）,

代码如下：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
    $(document).ready(function(){
      $("#btn1").click(function(){
             alert("Text: " + $("#test").text());
  });
       $("#btn2").click(function(){
             alert("HTML: " + $("#test").html());
          });
   });
</script>
</head>

<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>

</html>

3、获取属性-attr()方法用于获取属性值。

代码如下：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
		$(document).ready(function(){
  		$("button").click(function(){
   		 alert($("#w3c").attr("name"));
 	 	});
	});
	</script>
</head>

<body>
<p><span id="w3c" name="我就是我，我就是这样！！"></span></p>
<button>显示 href 值</button>
</body>

</html>

4、Val();设置或返回表单字段的值，说明：就是获取表单列表的值的

代码如下：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
	$(document).ready(function(){
  	$("button").click(function(){
    	alert("Value: " + $("#test").val());
  	});
});
	</script>
</head>

<body>
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>显示值</button>
</body>

</html>

5、通过text(),HTML() 以及val()对原有的内容进行替换

代码如下：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
 	 $("#btn1").click(function(){
    	$("#test1").text("Hello world!");
  });
  	$("#btn2").click(function(){
    	$("#test2").html("<b>Hello world!</b>");
  });
  	$("#btn3").click(function(){
    	$("#test3").val("Dolly Duck");
  });
});
</script>
</head>

<body>
<p id="test1">这是段落。</p>
<p id="test2">这是另一个段落。</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>

6、使用attr() 方法设置/改变属性值

代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
	$(document).ready(function(){
  	$("button").click(function(){
    	$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
  });
});
</script>
</head>

<body>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>改变 href 值</button>
<p>点击button替换原有的P标签中的href中间的值</p>
</body>
</html>

流浪蓝

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
知识点一：三个实用的jQuery的DOM操作方法==>获取、替换

1、text(); 设置或返回所选元素的文本内容2、html();设置或返回所选元素的内容（包括 HTML标记）,代码如下： $(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); });
复制链接

扫一扫