属性操作

最新推荐文章于 2021-10-24 17:35:29 发布
最新推荐文章于 2021-10-24 17:35:29 发布
阅读量98 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sundanping_123/article/details/100271323
版权

在这里插入图片描述
在这里插入图片描述

<!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>
小哦--
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery HTML获取内容和属性操作实例分析
11-20
本文实例讲述了jQuery HTML获取内容和属性操作。分享给大家供大家参考，具体如下： 获取内容和属性 获得内容 – text()、html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法： text() – 设置或返回所选...
JS元素属性操作方法，包括获取属性，修改属性，删除属性
Revin的博客
01-08 2659
JS修改元素属性
JavaScript属性操作
流楚丶格念的博客
08-19 3877
属性操作非表单元素的属性案例：表单元素属性案例自定义属性操作样式操作类名操作案例 非表单元素的属性 href、title、id、src、className var link = document.getElementById('link'); console.log(link.href); console.log(link.title); var pic = document.getElementById('pic'); console.log(pic.src); 案例： ​ 点击按钮，切换img标签里
HTML DOM style属性操作
JayYuen的博客
09-17 3654
dom.style.property:通过元素的style属性间接操作css样式 一，修改颜色 title.style.color：修改节点的颜色 <body> <h1 id="title">修改颜色</h1> </body> <script> let title = document.getElementById("...
JS自定义属性操作
Sea_water778的博客
10-24 5811
1.获取属性两种方法 element.属性 获取内置属性值 element.getAttribute ( ’ 属性 ’ ); get获取 attribute 属性的意思 获取程序员自己添加的属性 称为自定义属性 2.设置属性值两种方法 element.属性 = ’ 值 ’ 设置内置属性值。 element.setAttribute ( ’ 属性 '，‘ 值 ’ )； 区别； element.属性 设置内置属性值 element.setAttribute( ’ 属性 '，‘ 值
DOM操作 （创建、增、删、改、查、属性操作、事件操作）
Mr_ZCheng的博客
10-14 4992
关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。 1.创建 1.document.write 2.innerHTML 3.createElement 2.增加 1.appendChild 2.insertBefore 3.删除 1.removeChild 4.改 主要修改dom的元素属性，dom元素的内容、属性、表单的值等 1.修改元素属性：src、herf、title等 2.修改普通元素内容：innerHTML、innerTe
JQuery节点元素属性操作方法
01-19
本文实例讲述了JQuery节点元素属性操作方法。分享给大家供大家参考。具体分析如下： 在JQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。 获取属性和设置属性 如果要获取p元素的属性...
JavaScript对象属性操作实例解析
10-15
主要介绍了JavaScript对象属性操作实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JQuery属性操作与循环用法示例
10-17
主要介绍了JQuery属性操作与循环用法,结合实例形式分析了jQuery属性读取、设置,以及针对页面元素循环遍历相关操作技巧,需要的朋友可以参考下
animate动画
sundanping_123的博客
09-02 5009
<!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"></s...
绑定click事件、获取元素索引值
sundanping_123的博客
09-02 1283
<!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"></s...
bootstrap路径导航、下拉菜单
sundanping_123的博客
09-04 739
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,...
移动端js事件和库（zepto库、swiper.js插件）
sundanping_123的博客
09-03 511
使用swiper 做幻灯片切换，代码太长，只写swiper段： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, init...
栅格隐藏
sundanping_123的博客
09-03 496
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, ...
bootstrap图片、字体图标、巨幕、导航条
sundanping_123的博客
09-04 495
导航条： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale...
swiper参数设置
sundanping_123的博客
09-03 479
这里是一一对应的。
栅格偏移
sundanping_123的博客
09-03 419
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, ...
栅格里面的row
sundanping_123的博客
09-04 394
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, m...
a 链接的herf属性
sundanping_123的博客
09-03 383
当链接处于网页下拉底部时，点击链接 ，会默认回到网页顶部。 但是如果我们不写herf属性，就会失去链接的特效，这也不是我们想要的。我们既想保持住链接特效，也不想回到网页顶部。 处理方法如下所示： ...
jquery如何判断元素是否被点击、属性操作、class操作
最新发布
05-31
可以使用 jQuery 提供的事件监听函数、属性操作函数和 class 操作函数来实现。 1. 判断元素是否被点击：可以使用 jQuery 提供的 click() 函数来监听元素的点击事件，当元素被点击时，click() 函数内部的回调函数会被执行。示例代码如下： ```javascript $(element).click(function() { // 元素被点击时执行的代码 }); ``` 2. 属性操作：可以使用 jQuery 提供的 attr() 函数来获取或设置元素的属性。示例代码如下： ```javascript // 获取元素的属性值 var attrValue = $(element).attr('attrName'); // 设置元素的属性值 $(element).attr('attrName', 'attrValue'); ``` 3. class 操作：可以使用 jQuery 提供的 addClass()、removeClass() 和 toggleClass() 函数来添加、删除或切换元素的 class。示例代码如下： ```javascript // 添加 class $(element).addClass('className'); // 删除 class $(element).removeClass('className'); // 切换 class $(element).toggleClass('className'); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值