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%"});