零.前言
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%"});