jQuery对内容，元素，属性，class的操作

今天在写开发者部分功能时被前端的几个点给难住了，比如我给某个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

版权声明：如无特殊说明，文章均为本站原创，转载请注明出处

本文链接：https://www.yangyingqi.com/34.html

jQuery