JQuery(二)---【使用JQuery对HTML、CSS进行操作】

零.前言

JQuery(一)---【JQuery简介、安装、初步使用、各种事件】-CSDN博客

一.使用JQuery对HTML操作

1.1获取元素内容、属性

使用JQ可以操作元素的“内容”

text()：设置或返回元素的文本内容
html()：设置或返回元素的内容(包括HTML标记)
val()：设置货返回表单字段的值

我们来看一个例子，用来区分“text()”和“html()”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <p id="sample">这是一个<b>示例</b>文本</p>
    <button id="b1">点我显示p的文本内容(text)</button>
    <button id="b2">点我显示p的内容(html)</button>
    <script>
        $(document).ready(function(){
            $("#b1").click(function(){
                alert("文本内容(text)是:" + $("#sample").text())
            });
            $("#b2").click(function(){
                alert("内容(html)是:" + $("#sample").html())
            });
        });
    </script>
</body>
</html>

效果图：

点击(text)按钮显示：

点击(html)按钮显示：

结论：“text”返回的只有元素的“文本内容”(除标签以外的普通字符)，而“html”会将元素的“所有内容”(不管有没有特殊字符)完整返回。

再来看看“val”的使用，“val”常与<input>输入框搭配使用，“val”用来获取输入字段的值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <input type="text" id="sample" value="鞠婧祎">
    <button id="b1">点我获取val的值</button>
    <script>
        $(document).ready(function(){
            $("#b1").click(function(){
                alert("val的值是:" + $("#sample").val());
            })
        });
    </script>
</body>
</html>

效果：

点击后：

1.2获取元素属性

使用“attr()”方法获取属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <button id="b1">点我获取我的id</button>
    <script>
        $(document).ready(function(){
            $("#b1").click(function(){
                alert("按钮的id属性值是:" + $("#b1").attr("id"));
            })
        });
    </script>
</body>
</html>

效果：

点击后：

二.使用JQuery改变元素内容

2.1无返回值的改变元素内容

我们仍然使用上面所说的：“text()”、“html()”、“val()”、“attr()”来对应的改变内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <p id="test1">这是一个文本内容</p>
    <p id="test2">这是一个<b>标签内容</b></p>
    <input type="text" id="test3" value="鞠婧祎">
    <br><br>
    <button id="bt1">改变文本内容</button>
    <button id="bt2">改变标签内容</button>
    <button id="bt3">改变输入框内容</button>
    <button id="bt4">点我改变输入框的属性为“密码”格式</button>
    <script>
        $(document).ready(function(){
            $("#bt1").click(function(){
                $("#test1").text("文本内容被改变了");
            })
            $("#bt2").click(function(){
                $("#test2").html("标签内容被<b>改变了</b>");
            })
            $("#bt3").click(function(){
                $("#test3").val("输入框内容被改变了");
            })
            $("#bt4").click(function(){
                $("#test3").attr("type","password");
            })
        });
    </script>
</body>
</html>

点击前：

点击后：

2.2有返回值的改变元素内容（使用回调函数）

上面四种改变元素的方法，都有回调函数

回调函数由两个参数：

备选元素列表中当前元素的下标，以及原始值

然后以函数新值返回您希望使用的字符串

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

其中：“i”是当前元素下标，“origText”是原始(旧)值

具体可参考：jQuery 设置内容和属性 (w3school.com.cn)

三.使用JQuery添加元素

3.1四种添加元素的JQ方法

append()：在被选元素的结尾插入内容
prepend()：在被选元素的开头插入内容
after()：在被选元素之后插入内容
before()：在备选元素之前插入内容

append()、prepend()方法可以在“<p>、<h1-h6>”等“文本标签”前后添加内容，也可以在“<ol>”前后添加“<li>”标签

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
});
</script>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>

效果：

值得注意的是：append()、prepend()方法可以一次接受无限数量的元素并添加。

使用方法：

append/prepend(element1,element2,element3,......)

after()、before()在元素的前面或者后面插入新内容(ps:这里是在整个元素的前面或者后面，与append、pretend在元素内容的开头或结尾插入有本质区别，这里相当于插入了新的元素标签)

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#123").before("<b>Before</b>");
  });

  $("#btn2").click(function(){
    $("#123").after("<i>After</i>");
  });
});
</script>
</head>

<body>
<p id="123">6666</p>
<br><br>
<button id="btn1">在前面添加文本</button>
<button id="btn2">在后面添加文本</button>
</body>
</html>

点击前：

点击后：

“after”与“before”同样可以一次接收多个参数来添加多个内容：

after/before(element1,element2,element3,....)

四.使用JQuery删除元素

删除元素和内容，一般可以使用以下两个JQ方法：

remove()：删除被选元素(及其子元素)
empty()：从被选元素中删除子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="div1" style="height: 200px;width: 300px;border: 1px solid black;background-color: yellow;">
        <p>这是一个段落</p>
        <p>这是另一个段落</p>
        <p>这是最后一个段落</p>
    </div>
    <button id="bt1">点击删除div元素</button>
    <button id="bt2">点击清空div元素</button>
    <script>
        $(document).ready(function(){
            $("#bt1").click(function(){
                $("#div1").remove();
            })
            $("#bt2").click(function(){
                $("#div1").empty();
            })
        });
    </script>
</body>
</html>

点击前：

点击删除div元素后：

点击清空div元素后：

五.使用JQ操作CSS

5.1使用JQ操作CSS类

addClass()：给被选元素添加一个或多个CSS类
removeClass()：对被选元素删除一个或多个CSS类
toggleClass()：对被选元素进行添加/删除类的切换操作

使用方法：

$(element).addClass("class1,class2,class3,....")

$(element).removeClass("class1,class2,class3,....")

“element”表示元素，“class”表示类名字

下面我们创建两个CSS类(选择器)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .n{
            font-weight: bold;
            font-size: large;
        }
        .color{
            color: blue;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
    <h1>这是一个段落</h1>
    <h2>这是一个段落</h2>
    <button id="bt1">点击向p,h1,h2添加"n"类</button>
    <button id="bt2">点击向p,h1,h2添加"color"类</button>
    <script>
        $(document).ready(function(){
            $("#bt1").click(function(){
                $("p,h1,h2").addClass("n");
            })
            $("#bt2").click(function(){
                $("p,h1,h2").addClass("color");
            })
        });
    </script>
</body>
</html>

点击前：

点击后：

5.2使用JQ操作CSS()

css()方法设置或返回元素的一个或多个样式属性：

“返回CSS属性”：

css("propertyname");

"设置CSS属性"：

css("propertyname","value");

“设置多个CSS属性”：

css({"propertyname":"value","propertyname":"value",...});

例如：

$("p").css({"background-color":"yellow","font-size":"200%"});