jquery属性操作.html(),, .prop()

最新推荐文章于 2022-11-03 16:34:35 发布

a_Joker_Ling

最新推荐文章于 2022-11-03 16:34:35 发布

阅读量391

点赞数

分类专栏： JavaScript jquery Html 文章标签： html css javascript vue js

本文链接：https://blog.csdn.net/a1209849629/article/details/105530263

版权

Html 同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

JavaScript

15 篇文章 1 订阅

订阅专栏

jquery

9 篇文章 0 订阅

订阅专栏

jquery属性操作

1、html() 取出或设置html内容

// 取出html内容

var $htm = $('#div1').html();

// 设置html内容

$('#div1').html('<span>添加文字</span>');

2、prop() 取出或设置某个属性的值

// 取出图片的地址

var $src = $('#img1').prop('src');

// 设置图片的地址和alt属性

$('#img1').prop({src: "test.jpg", alt: "Test Image" });

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			var $a = $('.link');
			var $img = $('#img01');
			var $div = $('#div1');

			// 读取class属性值
			console.log( $a.prop('class') );

			// 没有设置的属性读取为空
			console.log( $a.prop('title') );

			// 获取是图片的绝对地址
			console.log($img.prop('src'));

			//alert($img.prop('src'));

			// 设置属性
			$a.prop({'href':'http://www.baidu.com','title':'百度网链接'});

			//console.log( $a.prop('title') );

			//读取标签内包含的内容
			console.log( $a.html() );

			$div.html('<span>div里面的span元素</span>');

		})

	</script>
</head>
<body>
	<a href="#" class="link">这是一个链接</a>
	<img src="images/002.jpg" id="img01" alt="水果">

	<div id="div1"></div>

</body>
</html>