当前位置：首页 > news >正文

jQuery 从入门到实践：基础语法、事件与元素操作全解析

news 2025/8/29 5:23:47

个人主页：♡喜欢做梦

欢迎 👍点赞 ➕关注 ❤️收藏 💬评论

编辑

⛅️定义

🍓引入依赖

编辑⛅️语法

🍑基础语法

🍑选择器

🍑jQuery事件

⛅️操作

🍐添加操作

🍐删除操作

🍐获取和设置元素

🍅text（）

🍅html（）

🍅val（）

🍐获取/置css属性

⛅️案例

⛅️定义

jQuery是一个快速、简洁的JavaScript库，他简化了HTML文档遍历、事件处理、动画和交互等操作。设计宗旨是“Write Less，Do More”（写的更少，做的更多）

🍓引入依赖

jQuery CDN

进入这个页面

这什么几个都可以点击，我选的是slim minified，这个是压缩版的更小更快一点。

点击进入下面的界面后右键保存在，你所写带代码的文件下面

随后引入你们所下载的对应的库名，否则写JQuery语法的时候，会直接报错。

<script src="jquery-3.7.1.slim.min.js"></script>

⛅️语法

🍑基础语法

$(selector).action()

$()是一个函数，是jQuery提供的一个全局函数，用于选择和操作html元素
selector：选择器，用来“查询”和“查找元素”
action：执行对元素的操作

🍑选择器

语法	描述
$（“*”）	选取所有元素
$（this）	选择当前html元素
$（“p”）	所有<p>元素
$（“p：first”）	选取第一个<p>元素
$（“p：last”	选取最后一个<p>元素
$（“.box”）	所有class=“box”的元素
$（“#box”）	选取id=“box”的元素
$（“p.intro”）	选取class为intro的<p>的元素
$（“ul li：first”）	选取第一个ul元素的第一个li元素
$ (“：input”)	所有input元素
$（“：text”）	选取所有type=“text”的<input>元素
$（“：checkbox”）	所有type=“checkbox”的<input>元素

🍑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-100number=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-100let 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>

实现效果