-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-07-24
来源 ：
阅读 1262
评论 0
摘要：本篇jQuery教程探讨了属性相关的相关内容，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。
属性和属性节点
· 什么是属性?
o 属性就是对象身上的变量
o 只要对象身上都可以添加属性(无论是自定义对象,还是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
· 什么是属性节点?
o 在html中编写的所有标签，里面的属性都是属性节点
§ <span nj = '666'></span> // 这里的class和nj就是属性节点
image.png
· 如果操作属性?
o 添加或修改属性(没有就会添加,有就会修改)
§ 对象.属性名称 = 值;
§ 对象["属性名称"] = 值;
o 获取属性
§ 对象.属性名称
§ 对象["属性名称"]
· 如何操作属性节点?
o 获取属性节点
§ DOM对象.getAttribute("属性节点名称")
o 设置属性节点
§ DOM对象.setAttribute("属性节点名称", "值");
jQuery中的attr和prop方法
· attr(name|pro|key,val|fn)方法
o 用于设置或获取属性节点的值
<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)方法
o 用于删除指定属性节点
<script>
$(function () {
// 1.设置属性节点时,会给所有找到元素设置属性节点
$("span").attr("test", "jonathan");
// 2.删除属性节点时,会删除所有找到元素的属性节点
$("span").removeAttr("test");
});</script>
· prop(n|p|k,v|f)方法
o 用于设置或者获取元素的属性值
<script>
$(function () {
// 1.设置属性
// 1.1.设置属性时,会设置所有找到元素的属性
$("span").prop("demo", "lnj");
// 2.获取属性
// 2.1.获取属性时,只会获取找到第一个元素的属性
console.log($("span").prop("demo"));
});</script>
· removeProp(name)方法
<script>
$(function () {
// 删除所有找到元素的demo属性
$("span").removeProp("demo");
});</script>
· attr方法和prop方法区别
o 既然所有的DOM对象，都有一个attributes属性,而prop可以操作属性,所以也可以操作属性节点
o 官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
o 因为如果具有 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)
o 给元素添加一个或多个类
<!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])
o 删除元素的一个或多个类
<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])
o 添加或删除一个类(存在就删除不存在就添加)
<script>
$(function () {
$("button").eq(2).click(function () {
// 7.切换一个类// $("div").toggleClass("class2");
// 8.切换多个类
$("div").toggleClass("class1 class2");
});
});
</script>
jQuery代码/文本/值
· html([val|fn])
o 添加或获取元素中的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])
o 添加或获取元素中的文本
o 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])
o 添加或获取元素value属性的值
<script>
$(function () {
$btns.eq(4).click(function () {
// 4.添加value值
$("input").val("我是一个输入框");
});
$btns.eq(5).click(function () {
// 4.获取value值
console.log($("input").val());
});
});</script>
本文由职坐标整理发布，学习更多的jQuery相关知识，请关注职坐标WEB前端jQuery频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
