jquery中关于属性的学习_H5之家 - 中国HTML5教程资源分享第一站

1.jquery中attr和prop的区别

简单解释一下attr是attribute的缩写 prop是property的缩写，都是属性的意思，但是还是有点区别的 attribution表示html文档流中的节点属性，

proppety表示js对象中的属性

关于具体使用网上也有很多，自己测一下，记录一下自己的学习心得，下面是我的测试代码，后面是对应测试输出值

（1）html固有的属性，就是你使用IDE写代码时候有提示的一般都是它的固有属性，如果是固有属性的话，这两个都可以正常使用，都可以获取对应的值

（2）如果是自定义的属性，例如我代码中的a标签中data-test属性，使用prop是获取不到，使用attr就可以了

（3）当对应的值是bool值，例如按钮的disable属性、checkbox中check属性，值为Bollen类型的，使用prop才可以正确获取对应的bool值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试jQuery属性</title> </head> <body> <a id="testID" class="aClassName" href="###" data-test="dataTest">测试attr和prop</a> <input id="checkBox1" type="checkbox" checked="checked"> <input id="checkBox2" type="checkbox" checked> <p>测试prop</p> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function () { //测试html固有的属性 console.log($("#testID").attr("class")); //输出aClassName console.log($("#testID").prop("class")); //输出aClassName //测试自定义的属性 console.log($("#testID").attr("data-test")); //输出dataTest console.log($("#testID").prop("data-test")); //输出undefined //测试值为bool值的 console.log($("#checkBox1").attr("checked")); //输出checked console.log($("#checkBox1").prop("checked")); //输出true //测试值为bool值的 console.log($("#checkBox2").attr("checked")); //输出checked console.log($("#checkBox2").prop("checked")); //输出true }) </script> </body> </html>

2.jquery中与attr和prop相对应的removeAttr和removeProp

（1）removeAttr HTML中固有的还是自定义都是可以删除的

（2）removeProp 只能删除有prop设置的属性（官方API：The .removeProp() method removes properties set by the .prop() method.）

注意：Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead. 这个是官方API的解释大概意思就是尽量不要使用removeProp删除checked、disabled 一旦删除掉就不能在添加上了

3.addClass、removeClass、toggleClass

addClass removeClass 是给当前的标签添加类选择器对应代码如下自己可以测试一下，走过方知，toggleClass就是开关自动会给当前的标签添加和移除类选择器

样式：

html部分：

<h4 id="pid">测试toggleClass</h4>

对应的js：

//$("#pid").addClass("testToggle"); //$("#pid").removeClass("testToggle"); $("#pid").click(function (e) { $(e.target).toggleClass("testToggle"); console.log(e.target); });

4.获取html标签中的值 html() text() val()

html：

<div id="testGetValue"> 我是最外层 <h5> 我是次外层 <span>我是内层</span> </h5> </div>

js：

console.log($("#testGetValue").html()); //输出结果如下 /* 我是最外层 <h5> 我是次外层 <span>我是内层</span> </h5> */ $("#testGetValue").text(); //输出结果如下 /* " 我是最外层我是次外层我是内层 " */

总结：(1) val一般用于获取表单中值

（2）html是获取对应标签中值包括它所包含的标签和值; text 输出存文本，只会输出它所包含中的文本值（参考上面的代码和输出结果）

（3）jQuery中html(),对应原生js中document.getElementById("testGetValue").innerHTML，text(),对应原生中document.getElementById("testGetValue").innerText， val对应原生中value

欢迎大家批评指正