[jQuery基础] jQuery对象 -- 属性操作

属性操作

属性和属性节点

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 / false
    console.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())
    }
})