jQuery-从入门到实践基础语法事件与元素操作全解析
目录
jQuery 从入门到实践：基础语法、事件与元素操作全解析
：
欢迎 👍点赞 ➕关注 ❤️收藏 💬评论
⛅️定义
jQuery是一个快速、简洁的JavaScript库，他简化了HTML文档遍历、事件处理、动画和交互等操作。设计宗旨是“Write Less，Do More”（写的更少，做的更多）
🍓引入依赖
进入这个页面
这什么几个都可以点击，我选的是slim minified，这个是压缩版的更小更快一点。
点击进入下面的界面后右键保存在，你所写带代码的文件下面
<script src="jquery-3.7.1.slim.min.js"></script>🍑基础语法
$(selector).action()- $()是一个函数，是jQuery提供的一个全局函数，用于选择和操作html元素
- selector：选择器，用来“查询”和“查找元素”
- action：执行对元素的操作
🍑选择器
| 语法 | 描述 |
| $（“*”） | 选取所有元素 |
| $（this） | 选择当前html元素 |
| $（“p”） | 所有 元素 |
| $（“p：first”） | 选取第一个 元素 |
| $（“p：last” | 选取最后一个 元素 |
| $（“.box”） | 所有class=“box”的元素 |
| $（“#box”） | 选取id=“box”的元素 |
| $（“p.intro”） | 选取class为intro的 的元素 |
| $（“ul li：first”） | 选取第一个ul元素的第一个li元素 |
| $ (“：input”) | 所有input元素 |
| $（“：text”） | 选取所有type=“text”的元素 |
| $（“：checkbox”） | 所有type=“checkbox”的元素 |
🍑jQuery事件
用户对于页面的一些操作（点击、选择、修改）都会在浏览器中产生一个个事件，被js获取到，从而进行交互。
常见事件
| 事件 | 代码 |
| 文档就绪事件 | $（document）.ready（function） |
| 点击事件 | $（selector）.click（function） |
| 双击事件 | $（selector）.dbclick（function） |
| 元素的值发生改变 | $（selector）.change（function） |
| 鼠标悬停事件 | $（selector）.mouseover（function） |
⛅️操作
🍐添加操作
- append（）：添加在列表内部末尾；
- prepend（）：添加在列表内部开头；
- after（）：添加在外部后面；
- before（）：添加在外部前面。
<body>
<ol>
<li>hello</li>
<li>world</li>
</ol>
<script>
//添加元素
//在ol内部添加
//添加在内部末尾
$("ol").append("append");
//添加在内部开头
$("ol").prepend("prepend");
//在ol外部添加
//添加在外部后面
$("ol").after("after");
//添加在外部前面
$("ol").before("before");
</script>
</body>
🍐删除操作
- remove（）：删除被选元素(及子元素）
- empty（）：删除被选元素的子元素
<script>
//删除被选元素(及子元素)
$("ol").empty();
//删除被选元素的子元素
$("ol").remove();
</script>🍐获取和设置元素
| JQuery方法 | 说明 |
| text（） | 设置元素或返回所选元素的文本内容 |
| html（） | 设置元素或返回所选元素的内容（包括html标签） |
| val（） | 设置或返回表单字段的值 |
🍅text（）
获取文本内容（无参数）:$(selector).text()
作用：返回元素集合的第一个元素的文本内容（去除所有html标签）
<body>
<div id="文本">
你好
<p>这是一个段落标签</p>
</div>
<script>
$(document).ready(function(){
//获取文本
let textContent1=$("#文本").text();
console.log(textContent1);
})
</script>
</body>
设置文本内容（有参数）：$(selector).text(content)
作用：为匹配所有元素设置文本内容，content为要设置的文本（会自动转义html特殊字符）
<body>
<div id="文本">
你好
<p>这是一个段落标签</p>
</div>
<script>
$(document).ready(function(){
//设置文本
$("#文本").text("修改文本");
let textContent2=$("#文本").text();
console.log(textContent2);
})
</script>
</body>
- document：整个文档对象，一个页面就是一个文档对象；
- $(document).ready():等待页面DOM结构加载完成后，在执行函数内的代码；
- #选取id，.选取class。
🍅html（）
获取html元素
<div id="html1">
你好
<p>这是一个段落标签</p>
</div>
<script>
$(document).ready(function(){
//获取html文本
let htmlContent=$("#html1").html();
console.log(htmlContent);
})
</script>
设置html元素
<div id="html1">
你好
<p>这是一个段落标签</p>
</div>
<script>
$(document).ready(function(){
//获取html文本
$("#html1").html("<h1>一级标题</h1>")
let htmlContent=$("#html1").html();
console.log(htmlContent);
})
</script>
🍅val（）
获取表单字段的值：
<input id="23" value="3">
<script>
$(document).ready(function(){
let valContent=$("#23").val();
})
</script>
设置表单字段的值
<input id="23" value="3">
<script>
$(document).ready(function(){
$("#23").val(100);
let valContent=$("#23").val();
})
</script>
🍐获取/置css属性
获取css属性
<div style="font-size: 24px;">你好</div>
<script>
$(document).ready(function(){
let css1=$("div").css("font-size");
console.log(css1);
})
</script>
设置css属性
<div style="font-size: 24px;">你好</div>
<script>
$(document).ready(function(){
$("div").css("font-size","100px");
let css1=$("div").css("font-size");
console.log(css1);
})
</script>
⛅️案例
猜数字
代码：
<!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="jquery-3.7.1.slim.min.js"></script>
</head>
<body>
<!-- 页面效果 -->
<input type="button" id="reset" value="重新开始一局游戏"><br/>
<span>请输入要猜的数字：</span>
<input type="text" id="number">
<input type="button" id="guess" value="猜"><br/>
<span>已经猜的次数:</span><span id="guesscount">0</span><br/>
<span>结果：</span>
<span id="result"></span>
<!-- 功能 -->
<script>
count=0;
//生成数字:1-100
number=Math.floor(Math.random()*100)+1;
console.log(number);
$("#guess").click(function(){
//猜的次数增加
count++;
$("#guesscount").text(count);
//获取猜测的值
let guessNum=$("#number").val();
//判断结果
if(number<guessNum){
$("#result").text("猜大了！！！");
$("#result").css("color","red");
}else if(number>guessNum){
$("#result").text("猜小了！！！");
$("#result").css("color","red");
}else{
$("#result").text("猜对了！！！");
$("#result").css("color","green");
}
} );
//重置
$("#reset").click(function(){
let count=0;
//生成数字:1-100
let number=Math.floor(Math.random()*100)+1;
console.log(number);
$("#number").val("");
$("#guesscount").text(count);
$("#result").text("");
})
</script>
</body>
</html>
表白墙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<style>
.container {
width: 350px;
height: 300px;
margin: 0 auto;
text-align: center;
}
.grey {
color: grey;
}
.container .row {
width: 350px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container .row input {
width: 260px;
height: 30px;
}
#submit {
width: 350px;
height: 40px;
background-color: orange;
color: white;
border: none;
margin: 10px;
border-radius: 5px;
font-size: 20px;
}
</style>
<!-- 页面 -->
<div class="container">
<h1>留言板</h1>
<p class="grey">输入后点击提交，会将信息显示表示在表格中</p>
<div class="row">
<span>谁：</span>
<input type="text" id="from" name="">
</div>
<div class="row">
<span>对谁：</span>
<input type="text" id="to" name="">
</div>
<div class="row">
<span>说什么：</span>
<input type="text" id="say" name="">
</div>
<div>
<input type="button" value="提交" id="submit" onclick="submit()">
</div>
</div>
<!-- 功能 -->
<script>
function submit(){
let from=$("#from").val();
let to=$("#to").val();
let say=$("#say").val();
if(from=="" || to==""||say==""){
return;
}
let html1="<div>"+from+"对"+to+"说:"+say+"</div>"
//重置
$(".container").append(html1);
$("#from").val("");
$("#to").val("");
$("#say").val("");
}
</script>
</body >
</html>实现效果
