爱站程序员基地属性操作
属性和属性节点
1.什么是属性?
对象身上保存的变量就是属性
2.如何操作属性?
对象.属性名称 = 值
对象.属性名称
对象[“属性名称”] = 值
对象[“属性名称”]
$(function () {function Person() {}var p = new Person()// p.name = \"lnj\"p[\"name\"] = \"zs\"// console.log(p.name)console.log(p[\"name\"])})
3.什么是属性节点?
在编写HTML代码时,在HTML标签中添加的属性就是属性节点
在浏览器中找到span这个DOM元素之后, 展开看到的都是属性
在attributes属性中保存的所有内容都是属性节点
4.如何操作属性节点?
- DOM元素.setAttribute(“属性名称”, “值”)
- DOM元素.getAttribute(“属性名称”)
$(function () {var span = document.getElementsByTagName(\"span\")[0]span.setAttribute(\"name\", \"lnj\")console.log(span.getAttribute(\"name\"))})
5.属性和属性节点有什么区别?
任何对象都有属性, 但是只有DOM对象才有属性节点
attr方法和prop方法
arrt方法
attr(name|pro|key,val|fn)
作用: 获取或者设置属性节点的值
- 可以传递一个参数, 也可以传递两个参数
- 如果传递一个参数, 代表获取属性节点的值
- 如果传递两个参数, 代表设置属性节点的值
如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
如果是设置:找到多少个元素就会设置多少个元素
如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增
$(function () {$(\"span\").attr(\"class\", \"box\")})
removeAttr(name)
删除属性节点
会删除所有找到元素指定的属性节点
$(function () {$(\"span\").removeAttr(\"class name\")})
prop方法
prop方法
特点和attr方法一致
$(function () {$(\"span\").eq(0).prop(\"demo\", \"it666\")$(\"span\").eq(1).prop(\"demo\", \"lnj\")console.log($(\"span\").prop(\"demo\"))})
removeProp方法
特点和removeAttr方法一致
$(function () {$(\"span\").removeProp(\"demo\")})
prop方法不仅能够操作属性, 他还能操作属性节点
官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
$(function () {// console.log($(\"span\").prop(\"class\"))// $(\"span\").prop(\"class\", \"box\")console.log($(\"input\").prop(\"checked\"))// true / falseconsole.log($(\"input\").attr(\"checked\"))// checked / undefined})
Class操作
addClass(class|fn)
作用: 添加一个类
如果要添加多个, 多个类名之间用空格隔开即可
$(function () {var btns = document.getElementsByTagName(\"button\")btns[0].onclick = function () {// $(\"div\").addClass(\"class1\")$(\"div\").addClass(\"class1 class2\")}})
removeClass([class|fn])
作用: 删除一个类
如果想删除多个, 多个类名之间用空格隔开即可
$(function () {var btns = document.getElementsByTagName(\"button\")btns[0].onclick = function () {// $(\"div\").addClass(\"class1\")$(\"div\").addClass(\"class1 class2\")}})
toggleClass(class|fn[,sw])
作用: 切换类
有就删除, 没有就添加
$(function () {var btns = document.getElementsByTagName(\"button\")btns[2].onclick = function () {$(\"div\").toggleClass(\"class2 class1\")}})
代码/文本/值操作
html([val|fn])
和原生JS中的innerHTML一模一样
$(function () {var btns = document.getElementsByTagName(\"button\")btns[0].onclick = function () {$(\"div\").html(\"<p>我是段落<span>我是span</span></p>\")}btns[1].onclick = function () {console.log($(\"div\").html())}})
text([val|fn])
和原生JS中的innerText一模一样
$(function () {var btns = document.getElementsByTagName(\"button\")btns[2].onclick = function () {$(\"div\").text(\"<p>我是段落<span>我是span</span></p>\")}btns[3].onclick = function () {console.log($(\"div\").text())}})
val([val|fn|arr])
$(function () {var btns = document.getElementsByTagName(\"button\")btns[4].onclick = function () {$(\"input\").val(\"请输入内容\")}btns[5].onclick = function () {console.log($(\"input\").val())}})
