今天在写开发者部分功能时被前端的几个点给难住了,比如我给某个button自定义了一个属性,但是用jquery拿的时候却不知道该怎么拿,这就很难受,所以特地学习了一波Jquery对元素的操作
1、对元素内容的操作:
获取内容:
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值。
添加新内容:
- text("新内容") - 设置所选元素的文本内容
- html("新内容") - 设置所选元素的内容(包括 HTML 标记)
- val("新内容") - 设置表单字段的值
添加新内容的同时,通过回调函数,拿到旧的内容和当前元素的下标:
<html>
<body>
<p>baidu.com</p>
<p>baidu.com</p>
<p>baidu.com</p>
<button>添加新内容</button>
</body>
</html>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").html(function(i, origValue) {
//回调函数中i是当前被选元素的下标,origValue是原来的文本
return i + "," + origValue + "/articles";
});
});
});
</script>
2、对元素的操作:
添加元素:添加新的 HTML 内容
- append() - 在被选元素的内部结尾插入内容
- prepend() - 在被选元素的内部开头插入内容
- after() - 在被选元素外部之后插入内容
- before() - 在被选元素外部之前插入内容
删除元素:
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除其子元素
属性操作:
获取属性:attr() 方法用于获取属性值。
< a href = "https://www.yyqblog.com"
id = "link" />
$("button").click(function() {
alert($("#link").attr("href"));
});
设置属性:
attr("属性名", "属性值") 方法也用于设置属性值。
多个属性:
$("button").click(function() {
$("#link").attr({
"href": "http://www.baidu.com",
"title": "百度"
});
});
删除属性:removeAttr() 从所有匹配的元素中移除指定的属性。
3、class类的操作:
- addClass() 向匹配的元素添加指定的类名。
- hasClass() 检查匹配的元素是否拥有指定的类。
- removeClass() 从所有匹配的元素中删除全部或者指定的类。
- toggleClass() 从匹配的元素中添加或删除一个类。
最后修改于2020年4月8日 21:58
©允许规范转载
jQuery版权声明:如无特殊说明,文章均为本站原创,转载请注明出处
本文链接:https://www.yangyingqi.com/34.html