从零玩转jQuery-属性相关
2018-04-20 本文已影响199人
极客江南
属性和属性节点
-
什么是属性?
- 属性就是对象身上的变量
- 只要对象身上都可以添加属性(无论是自定义对象,还是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
-
什么是属性节点?
- 在html中编写的所有标签，里面的属性都是属性节点
<span class = 'box' nj = '666'></span> // 这里的class和nj就是属性节点
- 在html中编写的所有标签，里面的属性都是属性节点
image.png
-
如果操作属性?
- 添加或修改属性(没有就会添加,有就会修改)
对象.属性名称 = 值;对象["属性名称"] = 值;
- 获取属性
对象.属性名称对象["属性名称"]
- 添加或修改属性(没有就会添加,有就会修改)
-
如何操作属性节点?
- 获取属性节点
DOM对象.getAttribute("属性节点名称")
- 设置属性节点
DOM对象.setAttribute("属性节点名称", "值");
- 获取属性节点
jQuery中的attr和prop方法
-
attr(name|pro|key,val|fn)方法
- 用于设置或获取属性节点的值
<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>
-
removeAttr(name)方法
- 用于删除指定属性节点
<script>
$(function () {
// 1.设置属性节点时,会给所有找到元素设置属性节点
$("span").attr("test", "jonathan");
// 2.删除属性节点时,会删除所有找到元素的属性节点
$("span").removeAttr("test");
});
</script>
-
prop(n|p|k,v|f)方法
- 用于设置或者获取元素的属性值
<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属性节点的值
-
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, 相当于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([val|fn])
- 添加或获取元素中的文本
- 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>
-
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>
