HTML5特性---＞Property和Attributes

最新推荐文章于 2024-05-17 13:52:13 发布

六代目专机

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量579

点赞数 1

分类专栏： html5新特性文章标签： javascript html5 jquery

本文链接：https://blog.csdn.net/Ghost__H/article/details/114376575

版权

html5新特性专栏收录该内容

2 篇文章 0 订阅

订阅专栏

正在学习HTML5的新特性,博客记录之

1.引子

2.HTML的property和attribute

1.什么是attribute?

2.什么是property?

3.property和attribute的同步问题

1.什么是attribute，什么是property

2.什么是布尔值属性，什么是非布尔值属性

3.attribute和property的同步关系

4.用户操作的是property

5.浏览器认的是property

1.引子

首先我们来看一个效果，来引出今天的主题

全选效果

从上面的例子中可以看出,全选按钮在按过一次之后。我们手动取消了几个选项的选中状态再点击全选按钮时就已经不起作用了。这是为什么呢？先不要着急我们再来看一个效果

全选效果-2

可以看到上面两个例子产生的效果截然相反，一个是手动点击取消了选中之后无法再通过全选按钮选中，另一个则是可以。产生这个效果的原因是什么呢？我们来分析一下代码。

$(function(){
	$("#CheckedAll").click(function(){
		$("input[type=checkbox][name=items]").prop("checked", true);
		$("#checkedAll_2").prop("checked", true);
	});
});

$(function(){
	$("#CheckedAll").click(function(){
		$("input[type=checkbox][name=items]").attr("checked", true);
		$("#checkedAll_2").attr("checked", true);
	});
});

上面两端代码基本上相同，唯一不同的地方就是方法调用那里，一个是prop(property)，另一个则是attr(attrbute)。看来这两个方法的不同就是造成不同效果的原因了！那么这两个方法有什么不同，它们都操作了什么属性才造成这样的效果呢？

2.HTML的property和attribute

1.什么是attribute?

先来看一段简单的代码

<script type="text/javascript">
	
	
	
	
		debugger
		var hzx = document.querySelector("input[type=checkbox]");
</script>

这一段代码中我们加上了一个断点，这样可以使得代码在断点位置暂停。当我们一步步执行代码到最后一句时可以在监控中看到input标签的attributes数组

attributes

可以看到在attributes数组中的三个成员就是html属性，这其中又分为html预定义属性和用户自定义属性。

2.什么是property?

property

可以看到,property就是js原生对象的直接属性,从上面也可以看到每一个attributes里面的属性都会有一个property与之对应。

3.property和attribute的同步问题

让我们先来抛出两段代码

	var qhf = document.querySelector("input[type=checkbox]");
		
		debugger
		qhf.setAttribute("name","qhf1")
		qhf.setAttribute("name","qhf2")
		qhf.setAttribute("name","qhf3")
		
		qhf.name="qhf4";
		qhf.name="qhf5";
		qhf.name="qhf6";
		
		qhf.setAttribute("name","qhf7")
		qhf.setAttribute("name","qhf8")
		qhf.setAttribute("name","qhf9")

	var qhf = document.querySelector("input[type=checkbox]");
		
		debugger
		qhf.setAttribute("checked","qhf1")
		qhf.setAttribute("checked","qhf2")
		qhf.setAttribute("checked","qhf3")
		
		qhf.checked="qhf4";
		qhf.checked="qhf5";
		qhf.checked="qhf6";
		qhf.checked=false;
		
		qhf.setAttribute("checked","qhf7")
		qhf.setAttribute("checked","qhf8")
		qhf.setAttribute("checked","qhf9")

1.非布尔值的同步问题

在第一个代码段中，我们书写了一些设置非布尔值属性的代码。让我们来看看这里面的property和attributes是否会同步

非布尔值的同步

可以看到对于非布尔值属性的同步问题，不管什么情况 property和attribute都会同步

2.布尔值属性的同步

布尔值的同步

从上面可以看到，在没有动过property时，attribute会同步property，一旦动过property ，attribute不会同步property。

4.浏览器认谁？

我们来看一段代码

	var qhf = document.querySelector("input[type=checkbox]");
		var btn = document.querySelector("input[type=button]");
		btn.onclick=function(){
			debugger
			qhf.checked=true;
		}

运行这段代码后，可以看到

浏览器认谁

只有property属性变成了true，说明浏览器认的是property。

5.用户操作的是谁？

老规矩，来看一段代码块。

	var qhf = document.querySelector("input[type=checkbox]");
		qhf.onclick=function(){
			debugger
		}

运行后可以看到

用户操作的是谁

在我们选中单选框后，property变成了true，说明用户操作的是property。