jQuery 属性操作
标准属性
prop()
获取与设置jQuery对象中元素的标准属性值
标准属性是指一些
DOM元素自带的属性或window对象，如<a>的title、href、target等等可以单个设置标准属性的值，也可以使用
{}一次性设置多个标准属性的值
<body>
<a>博客园</a>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
$("a").prop({"href":"https://www.cnblogs.com/","title":"博客园主页"}); // 设置多个
$("a").prop("target","_blank"); // 单一设置
// <a href="https://www.cnblogs.com/" title="博客园主页" target="_blank">博客园</a>
</script>
removeProp()
将一个标准属性的值设置成undefined
个人测试：该方法只在
jQuery1.x版本中有效，新的标准属性值为undefined
1.6新增，2和3中设置均无效
<body>
<a>这是一个链接</a>
<button type="button">点我添加标准属性</button>
<button type="button">点我删除标准属性</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
"use strict";
$("button").eq(0).on("click", (event) => {
$("a").prop("title","已添加");
// <a title="已添加">这是一个链接</a>
});
$("button").eq(1).on("click", (event) => {
$("a").removeProp("title");
// <a title="undefined">这是一个链接</a>
});
</script>
特征属性
attr()
获取与设置jQuery对象中元素的特征属性值
特征属性是值一些用户自定义的属性，在设置时应该注意与标准属性的命名冲突问题
可以单个设置特征属性的值，也可以使用
{}一次性设置多个特征属性的值
<body>
<div></div>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
$("div").attr({"data-color":"red","data-size":"w:100,h:50"}); // 设置多个
$("div").attr("data-show","true"); // 单一设置
// <div data-color="red" data-size="w:100,h:50" data-show="true"></div>
</script>
removeAttr()
将一个特征属性及其属性值删除
<body>
<a>这是一个链接</a>
<button type="button">点我添加标准属性</button>
<button type="button">点我删除标准属性</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
$("button").eq(0).on("click", (event) => {
$("a").attr("data-linkName","链接");
// <a data-linkname="链接">这是一个链接</a>
});
$("button").eq(1).on("click", (event) => {
$("a").removeAttr("data-linkName");
// <a>这是一个链接</a>
});
</script>
属性集
建议对特征属性进行特殊命名操作，如添加上data-前缀，与标准属性区分。
如果您这样做，可以利用属性集对特征属性进行更加方便的管理。
data()
所有的以data-开头的特征属性都会存放进行data()属性集中，我们可以通过data()进行获取与设置其属性值。
<body>
<div class="show top" data-color="red" data-font_size="15"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
console.log($("div").data()); // {font_size: 15, color: "red"} 获取所有
console.log($("div").data("color")); // red 获取一个
$("div").data("font_size","100"); // 设置一个属性集属性 这不会在HTML文档中显示。但是确实已经设置了
console.log($("div").data()); // {font_size: "100", color: "red"}
$("div").data({"font-size":"120","color":"black"}); // 设置多个 同样的不会再HTML文档中显示
console.log($("div").data()); // {{font_size: "100", color: "black", fontSize: "120"}
</script>
removeData()
删除属性集中的一个属性。不能是由HTML文档上设置的特征属性，必须由data()所设置
<body>
<div></div>
<button id="btn1">向 div 元素添加数据</button><br />
<button id="btn2">从 div 元素删除数据</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
$(document).ready(function () {
$("#btn1").click(function () {
$("div").data("greeting", "Hello World"); // 必须由data所设置
alert("Greeting is: " + $("div").data("greeting"));
});
$("#btn2").click(function () {
$("div").removeData("greeting");
alert("Greeting is: " + $("div").data("greeting"));
});
});
</script>
节点内容
html()
获取jQuery对象DOM标签中的HTML内容，并且也可以向标签中添加HTML内容，同时触发浏览器的解析器重绘DOM。
与JavaSctip中的innerHTML属性效果相同。
<body>
<div><span>获取</span></div>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
console.log($("div").html()); // 获取内容 <span>获取</span>
$("div").html("<mark>设置</mark>"); // 设置内容
console.log($("div").html()); // 获取内容 <mark>设置</mark>
</script>
text()
访问或添加文本内容到jQuery对象里的元素中。
与JavaScript中的innerText和textContentd属性效果相同。
获取时忽略所有标签
设置时将内容中的标签当文本对待不进行解析
<body>
<div><span>获取</span></div>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
console.log($("div").text()); // 获取内容 获取
$("div").text("<mark>设置</mark>"); // 设置内容，会当做普通文本添加，而不是标签元素
console.log($("div").text()); // 获取内容 <mark>设置</mark>
</script>
表单内容
val()
获得jQuery对象中第一个元素的当前值，常用于表单标签。
<body>
<input type="text" value="云崖先生">
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
"use strict";
console.log($(":text").val()); // 云崖先生
</script>
浙公网安备 33010602011771号