jquery中的html代码、文本以及值

最新推荐文章于 2024-09-09 22:16:15 发布

this_is_art_of_code

最新推荐文章于 2024-09-09 22:16:15 发布

阅读量3.2k

点赞数

分类专栏： jquery 文章标签： jquery 内容操作

本文链接：https://blog.csdn.net/qq_28596151/article/details/80472777

版权

jquery 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1、html()方法

1.1、$(selector).html();

返回匹配到的元素的内部所包含的一切东西。包括html标签以及标签中含有的属性。

1.2、$(selector).html(html内容);

将匹配到的元素内部设置为指定的html内容(如果之前其内部存在内容，会被删除)，然后返回所有匹配到的元素组成数组。

2、text()方法

2.1、$(selector).text();

返回匹配到的元素内部的innerText属性，不会抱包含html标签。

2.2、$(selector).text(innerText内容);

给匹配到的元素设置文本内容，并返回匹配到的元素组成的数组。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery的dom操作</title>
	<script src="../jquery-1.7.2.min.js"></script>
	<style>
		.red{
			color:red;
		}
		.blue{
			color:blue;
		}
	</style>
</head>
<body>
	<p title="选择你喜欢的水果" οnclick="change()">你最喜欢的水果是?</p>
	<ul> 
		<li title="苹果">苹果</li>
		<li class="" title="橘子title">橘子</li>
		<li title="菠萝">菠萝</li>
		<li title="菠萝2">菠萝2</li>
		<li title="菠萝3">菠萝3</li>
	</ul>
</body>
</html>
<script> 
	$(function(){
		
		console.log($("ul").html());
		
		console.log($("li").html());//默认输出第一个元素的内部html
		
		console.log($($("li")[1]).html());//我们想要获取匹配到的第二个元素的html
		
		console.log($("li").length);//5
		
		
		console.log($("li").html("html"));//会对匹配到的每一个元素进行设置
		
		console.log($("li").text());//返回所有匹配到的元素的内部innerText内容，是一个字符串
		
		console.log($("li").text("text"));//给匹配到的每一个元素进行设置innerText内容
	});
</script>

3、val()方法

此类方法类似于javaScript中的value属性，可以用来设置和获取元素的值。无论元素是文本框，下拉框还是单选框，他都可以返回元素的值。如果元素为多选，则可以返回一个包含选择的值的数组。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>val()方法</title>
	<script src="../jquery-1.7.2.min.js"></script>
</head>
<body>
	<select name="test" id="test">
		<option value="0">0</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
	</select>
	<br>
	<input type="radio" name="single" value="1">
	<input type="radio" name="single" value="2">
	<input type="radio" name="single" value="3">
	<input type="radio" name="single" value="4">
	<input type="radio" name="single" value="5">
	
	
	
</body>
<script>
	$(function(){
		$("#test").val(1);
		$("input[name='single']").val(["1"]);//可以
		$("input[value='2']").attr("checked",true);//可以
		$("input[value='3']").prop("checked",true);//可以
		$("input[value='4']").prop("checked","checked");//可以
		$("input[value='5']").attr("checked","checked");//可以
		alert($("input[name='single']:checked").val());//5
	})
</script>
</html>