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