屬性和屬性節(jié)點
-
什么是屬性?
- 屬性就是對象身上的變量
- 只要對象身上都可以添加屬性(無論是自定義對象,還是DOM對象)
<script>
// 1.自定義一個對象
var obj = {};
console.log(obj);
// 2.動態(tài)給自定義對象添加屬性
obj.name = "lnj"; // name就是對象obj的一個屬性
obj.age = 33; // age就是對象obj的一個屬性
console.log(obj);
</script>
image.png
-
什么是屬性節(jié)點?
- 在html中編寫的所有標(biāo)簽督暂，里面的屬性都是屬性節(jié)點
<span class = 'box' nj = '666'></span> // 這里的class和nj就是屬性節(jié)點
- 在html中編寫的所有標(biāo)簽督暂，里面的屬性都是屬性節(jié)點
image.png
-
如果操作屬性?
- 添加或修改屬性(沒有就會添加,有就會修改)
對象.屬性名稱 = 值;對象["屬性名稱"] = 值;
- 獲取屬性
對象.屬性名稱對象["屬性名稱"]
- 添加或修改屬性(沒有就會添加,有就會修改)
-
如何操作屬性節(jié)點?
- 獲取屬性節(jié)點
DOM對象.getAttribute("屬性節(jié)點名稱")
- 設(shè)置屬性節(jié)點
DOM對象.setAttribute("屬性節(jié)點名稱", "值");
- 獲取屬性節(jié)點
jQuery中的attr和prop方法
-
attr(name|pro|key,val|fn)方法
- 用于設(shè)置或獲取屬性節(jié)點的值
<script>
$(function () {
// 1.獲取指定屬性節(jié)點值
var $res = $(".span1").attr("nj");
console.log($res);
// 2.設(shè)置屬性節(jié)點
$(".span1").attr("nj", "666");
$(".span2").attr("id", "box1 box2");
// 3.注意點:
// 3.1.獲取屬性節(jié)點時,只會獲取找到所有元素中第一個元素的屬性節(jié)點
$res = $("span").attr("class");
console.log($res);
$("span").attr("class", "lnj");
});
</script>
-
removeAttr(name)方法
- 用于刪除指定屬性節(jié)點
<script>
$(function () {
// 1.設(shè)置屬性節(jié)點時,會給所有找到元素設(shè)置屬性節(jié)點
$("span").attr("test", "jonathan");
// 2.刪除屬性節(jié)點時,會刪除所有找到元素的屬性節(jié)點
$("span").removeAttr("test");
});
</script>
-
prop(n|p|k,v|f)方法
- 用于設(shè)置或者獲取元素的屬性值
<script>
$(function () {
// 1.設(shè)置屬性
// 1.1.設(shè)置屬性時,會設(shè)置所有找到元素的屬性
$("span").prop("demo", "lnj");
// 2.獲取屬性
// 2.1.獲取屬性時,只會獲取找到第一個元素的屬性
console.log($("span").prop("demo"));
});
</script>
<script>
$(function () {
// 刪除所有找到元素的demo屬性
$("span").removeProp("demo");
});
</script>
-
attr方法和prop方法區(qū)別
- 既然所有的DOM對象，都有一個attributes屬性,而prop可以操作屬性,所以也可以操作屬性節(jié)點
- 官方推薦在操作屬性節(jié)點時,具有 true 和 false 兩個屬性的屬性節(jié)點，如 checked, selected 或者 disabled 使用prop()友多，其他的使用 attr()
- 因為如果具有 true 和 false 兩個屬性的屬性節(jié)點,如果沒有編寫默認attr返回undefined,而prop返回false
<script>
$(function () {
// 1.可以通過prop獲取屬性節(jié)點
console.log($("input").prop("class"));
// 2.可以通過prop設(shè)置屬性節(jié)點
$("input").prop("class", "tag");
// 3.如果沒有默認值,那么attr獲取返回undefined
// console.log($("input[type=checkbox]").attr("checked"));
// 4.如果沒有默認值,那么prop獲取返回false
console.log($("input[type=checkbox]").prop("checked"));
// 5.通過attr設(shè)置選中
// $("input[type=checkbox]").attr("checked", true);
// 6.通過prop設(shè)置選中
$("input[type=checkbox]").prop("checked", true)
});
</script>
jQuery增刪Class
- jQuery CSS類相關(guān)方法都是用于操作DOM對象的class屬性節(jié)點的值
-
addClass(class|fn)
- 給元素添加一個或多個類
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-jQueryCSS類</title>
<style>
.class1{
width: 200px;
height: 200px;
background-color: red;
}
.class2{
border: 5px solid #000;
}
</style>
<script src="代碼/js/jquery-1.12.4.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
// 1.添加一個類
// $("div").addClass("class1");
// 2.再添加一個類
// $("div").addClass("class2");
// 3.一次性添加多個類(用空格隔開)
$("div").addClass("class1 class2");
});
});
</script>
</head>
<body>
<button>添加</button>
<button>刪除</button>
<button>切換</button>
<div></div>
</body>
</html>
-
removeClass([class|fn])
- 刪除元素的一個或多個類
<script>
$(function () {
$("button").eq(1).click(function () {
// 4.刪除一個類
// $("div").removeClass("class2");
// 5.再刪除一個類
// $("div").removeClass("class1");
// 6.一次性刪除多個類(用空格隔開)
$("div").removeClass("class1 class2");
});
});
</script>
-
toggleClass(class|fn[,sw])
- 添加或刪除一個類(存在就刪除不存在就添加)
<script>
$(function () {
$("button").eq(2).click(function () {
// 7.切換一個類
// $("div").toggleClass("class2");
// 8.切換多個類
$("div").toggleClass("class1 class2");
});
});
</script>
jQuery代碼/文本/值
-
html([val|fn])
- 添加或獲取元素中的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-jQuery代碼文本值</title>
<script src="代碼/js/jquery-1.12.4.js"></script>
<script>
$(function () {
var $btns = $("button");
var $div = $("div");
$btns.eq(0).click(function () {
// 1.添加html, 相當(dāng)于innerHTML
// $div.html("<p>我是p標(biāo)簽</p>");
// $div.html("<p><span>我是span標(biāo)簽</span></p>");
$div.html("我是文本");
});
$btns.eq(1).click(function () {
// 2.獲取html
console.log($div.html());
});
});
</script>
</head>
<body>
<button>添加html</button>
<button>獲取html</button>
<button>添加文本</button>
<button>獲取文本</button>
<div></div>
</body>
</html>
-
text([val|fn])
- 添加或獲取元素中的文本
- text方法能做的html方法都能做,所以一般使用html方法即可
<script>
$(function () {
$btns.eq(2).click(function () {
// 3.添加文本, 相當(dāng)于innerText
// 如下內(nèi)容不會被轉(zhuǎn)換為標(biāo)簽
// $div.text('<p>我是段落</p>');
$div.text('我是文本');
});
$btns.eq(3).click(function () {
// 4.獲取文本
console.log($div.text());
});
</script>
-
val([val|fn|arr])
- 添加或獲取元素value屬性的值
<script>
$(function () {
$btns.eq(4).click(function () {
// 4.添加value值
$("input").val("我是一個輸入框");
});
$btns.eq(5).click(function () {
// 4.獲取value值
console.log($("input").val());
});
});
</script>
