属性和属性节点
什么是属性?
属性就是对象身上的变量
只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象)
<script>
// 1.自定义一个对象
var obj = {}; console.log(obj); // 2.动态给自定义对象添加属性
obj.name = "lnj"; // name就是对象obj的一个属性
obj.age = 33; // age就是对象obj的一个属性
console.log(obj);</script>
image.png
什么是属性节点?
<span class = 'box' nj = '666'></span> // 这里的class和nj就是属性节点
在html中编写的所有标签，里面的属性都是属性节点
image.png
如果操作属性?
对象.属性名称对象["属性名称"]
对象.属性名称 = 值;对象["属性名称"] = 值;
添加或修改属性(没有就会添加,有就会修改)
获取属性
如何操作属性节点?
DOM对象.setAttribute("属性节点名称", "值");
DOM对象.getAttribute("属性节点名称")
获取属性节点
设置属性节点
jQuery中的attr和prop方法
用于设置或获取属性节点的值
<script>
$(function () { // 1.获取指定属性节点值
var $res = $(".span1").attr("nj"); console.log($res); // 2.设置属性节点
$(".span1").attr("nj", "666");
$(".span2").attr("id", "box1 box2"); // 3.注意点:
// 3.1.获取属性节点时,只会获取找到所有元素中第一个元素的属性节点
$res = $("span").attr("class"); console.log($res);
$("span").attr("class", "lnj");
});</script>用于删除指定属性节点
<script>
$(function () { // 1.设置属性节点时,会给所有找到元素设置属性节点
$("span").attr("test", "jonathan"); // 2.删除属性节点时,会删除所有找到元素的属性节点
$("span").removeAttr("test");
});</script>用于设置或者获取元素的属性值
<script>
$(function () { // 1.设置属性
// 1.1.设置属性时,会设置所有找到元素的属性
$("span").prop("demo", "lnj"); // 2.获取属性
// 2.1.获取属性时,只会获取找到第一个元素的属性
console.log($("span").prop("demo"));
});</script><script>
$(function () { // 删除所有找到元素的demo属性
$("span").removeProp("demo");
});</script>attr方法和prop方法区别
既然所有的DOM对象，都有一个attributes属性,而prop可以操作属性,所以也可以操作属性节点
官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
因为如果具有 true 和 false 两个属性的属性节点,如果没有编写默认attr返回undefined,而prop返回false
<script>
$(function () { // 1.可以通过prop获取属性节点
console.log($("input").prop("class")); // 2.可以通过prop设置属性节点
$("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设置选中// $("input[type=checkbox]").attr("checked", true);
// 6.通过prop设置选中
$("input[type=checkbox]").prop("checked", true)
});</script>jQuery增删Class
jQuery CSS类相关方法都是用于操作DOM对象的class属性节点的值
给元素添加一个或多个类
<!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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="代码/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>删除元素的一个或多个类
<script>
$(function () {
$("button").eq(1).click(function () { // 4.删除一个类// $("div").removeClass("class2");
// 5.再删除一个类// $("div").removeClass("class1");
// 6.一次性删除多个类(用空格隔开)
$("div").removeClass("class1 class2");
});
});</script>添加或删除一个类(存在就删除不存在就添加)
<script>
$(function () {
$("button").eq(2).click(function () { // 7.切换一个类// $("div").toggleClass("class2");
// 8.切换多个类
$("div").toggleClass("class1 class2");
});
}); </script>jQuery代码/文本/值
添加或获取元素中的HTML
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>09-jQuery代码文本值</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="代码/js/jquery-1.12.4.js"></script>
<script>
$(function () { var $btns = $("button"); var $div = $("div");
$btns.eq(0).click(function () { // 1.添加html, 相当于innerHTML// $div.html("<p>我是p标签</p>");// $div.html("<p><span>我是span标签</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方法能做的html方法都能做,所以一般使用html方法即可
<script>
$(function () {
$btns.eq(2).click(function () { // 3.添加文本, 相当于innerText
// 如下内容不会被转换为标签// $div.text('<p>我是段落</p>');
$div.text('我是文本');
});
$btns.eq(3).click(function () { // 4.获取文本
console.log($div.text());
});</script>添加或获取元素value属性的值
<script>
$(function () {
$btns.eq(4).click(function () { // 4.添加value值
$("input").val("我是一个输入框");
});
$btns.eq(5).click(function () { // 4.获取value值
console.log($("input").val());
});
});</script>
作者：极客江南
链接：https://www.jianshu.com/p/598111c5610e
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦