jquery中关于属性的学习
来源:互联网 发布:卡巴斯基 知乎 编辑:程序博客网 时间:2024/05/20 14:44
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
样式:
<style type="text/css"> .testToggle{ font-size: 50px; color:red; }</style>
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
欢迎大家批评指正
- jquery中关于属性的学习
- 关于JQUERY UI dialog的bgiframe属性
- 关于jquery attr属性的使用
- jquery关于修改css的属性值
- 关于jquery框架的初探-context属性
- JQuery UI----初次学习(添加关于添加UI包的顺序与dialog属性设置)
- 关于属性中包含shadow的属性
- jQuery学习笔记--jqGrid的属性列表
- 关于Jquery中animate可以操作css样式属性总结
- 关于jquery中data添加获取Element自定义属性
- jquery遍历标签中自定义的属性
- jquery中ajax的dataType属性
- jQuery中动态设置表格的属性
- jquery中元素属性的操作
- jquery匹配属性中有“.”的元素
- jQuery中checkbox的checked属性
- 向Jquery的cache中添加属性
- jQuery 学习八(属性)
- spring学习之---Annotation
- 前端试题大综合练习(三)
- adc mda 的一些配置,,,非常感谢分享
- 无锁编程:lock-free原理;CAS;ABA问题
- POJ 3616 Milking Time(DP)
- jquery中关于属性的学习
- SlidingPaneLayout
- 前后分离--异常回调
- Codeforces 340E 错排问题dp
- CSS定位样式
- 解决maven mybatis generator只生成insert方法
- 全球十大最美旅游胜地,你心动了吗?
- 初识dubbo(阿里巴巴分布式服务框架)
- 【hnoi2006】潘多拉的盒子