jQuery
是 JavaScript 的第三方模块
0.1 下载
点此下载 jQuery,放在 static/js/
中,在 body
标签中加上
<script src="static/js/jquery-3.6.0.min.js"></script>
0.2 示例
<span id="world">hello world</span>
<script>
//找到 id 为 world 的标签,修改其文本为 goodbye world,jQuery的做法是
$("#world").text("goodbye world")
/*
$("#world") //找到 id 为 world 的标签
$("#world").text() //获取标签文本
$("#world").text("goodbye world") //修改其文本为 goodbye world
*/
</script>
比 DOM 快多了
1.1 直接寻找标签
种类 | 语法 | 备注 |
---|---|---|
ID选择器 | $("#txt") | |
样式选择器 | $(".c1") | |
标签选择器 | $("h1") | |
层级选择器 | $(".c1 .c2 a") | |
多选择器 | $("#c1,#c2,li") | 可以选很多 |
属性选择器 | $input[name='n1'] | 选出input 标签且name 为"n1" 的 |
1.2 间接寻找标签
$("#txt").prev()
前一个兄弟
$("#txt").next()
后一个兄弟
$("#txt").siblings
所有的兄弟
$("#txt").parent()
找父亲
$("#txt").children()
获取所有孩子
$("#txt").children(".p10")
获取所有孩子,且样式为p10的
$("#txt").find(".p10")
找子孙里样式为p10的
2 操作样式
<style>
.hide{
display: none;
}
</style>
<button class="abab" onclick="clickMe(this);">点我就消失</button>
<!-- this 表示当前对象的一个引用 -->
<script>
function clickMe(self) {
$(self).addClass("hide") // 添加样式
//$(self).removeClass("hide") // 删除样式
//$(self).hasClass("hide") // 返回布尔值
}
</script>
3 操作值
$("#c1").text() //获取文本内容
$("#c1").text("abc") //修改文本内容
$("#c1").val() //获取用户输入的值
$("#c1").val("abc") //设置用户输入的值
4 创建标签
$("li") // 找 li 标签
$("<li>") // ⭐创建 li 标签对象
$("#一个ul的ID").append($("<li>").text("内容")) //就可以实现添加了
5 事件
-
DOM 方式的事件
<input type="button" value="提交" onclick="getInfo()"> <script> function getInfo(){ } </script>
-
jQuery 方式的事件
<input type="button" value="提交"> <script> $("input").click(function(){ // 对所有的<input>加上点击响应 // 点击li标签时,自动执行这个函数 $(this) //当有多个input时,$(this)可以取出当前点击的标签, }) </script>
-
点击就删除
<input class="abab" type="button" value="点我就消失"> <script> $(".abab").click(function(){ $(this).remove() //⭐ }) </script>
6 小 trick
<body>
<!-- 加载内容 -->
<div></div>
<img src="" alt="">
<div></div>
<!------------->
<script>
js内容
</script>
</body>
简单来说,就是js默认会在框架及内容都加载完成后再加载。若img过大加载时间过长,js的一些功能就不会起作用。
<body>
<!-- 加载内容 -->
<div></div>
<img src="" alt="">
<div></div>
<!------------->
<script>
$(function () {
js内容
})
</script>
</body>
$(function () {js代码放这里})
这样写的话,js会在框架加载完成后直接加载,加载会更快一些。