jQuery操作指南-优快云博客

本文链接：https://blog.youkuaiyun.com/l954758514/article/details/78023151

1、内容操作
（1）文本内容的捕获和设置text()
作用：获取或设置文本内容（等价于DOM操作中的innerText属性）

<body>
    <p id="p1">土豆土豆呼叫地瓜</p>
</body>
<script>
     $("#p1").text("哈哈");//更换内容
    alert($("#p1").text());//捕获内容
</script>

（2）html():获取元素中的所有内容（html的标签）
（3）val():获取或设置表单中的值
（4）attr()：获取或设置元素的属性

2、（1）append():在元素的最后边添加内容。
可以同时添加多个内容，这些内容可以是通过HTML、Jquery、DOM创建的
（2）prepend():在元素的最前边添加内容
可以同时添加多个内容，这些内容可以是通过HTML、Jquery、DOM创建的
（3）after()和befor():
两组添加的区别：append()和prepend()添加后成为了其子元素，
after()和befor()添加后成为了其兄弟元素。

3、元素的移除
（1）remove()：删除的是被选的元素及其子元素。

//删除被选中的元素
$("#btn1").click(function () {
    $("#div1").remove();
});

（2）empty():

//仅删除被选元素的子元素
$("#btn2").click(function () {
    $("#div2").empty();
});

注意：remove()还有过滤删除的作用，可以删除指定元素，里边的参数就是指定元素的名字。

//删除class为p1的所有元素
$("#btn3").click(function () {
    $("p").remove(".p1");
});

这个代码块的作用就是删除所有p标签中class为p2的元素。

4.操作css类
（1）添加： addClass()

//添加样式
$("#btnAdd1").click(function () {
    $("#p1").addClass("style1");
});

（2）删除：removeClass():

$("#btnAdd3").click(function () {
    $("#p1").removeClass("style1");
});

（3）切换：toggleClass();

//切换
$("#btnAdd4").click(function () {
    $("#p1").toggleClass("style1");
});

5、操作css方法
css()：里面要传两个参数：第一个参数是要设置的属性名，第二个参数是设置属性。

$("#benAdd4").click(function () {
      $("p").css("color","yellow");
});

$("p").css({"color":"blue","font-size":"30px"});

注意：CSS()：也可以设置多个属性，不同属性用“，”隔开，属性名和属性值用“：”，最外层用“{}”括起来。

JQuery--DOM