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

个人主页：♡喜欢做梦

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

---

目录

​编辑

⛅️定义

引入依赖

​编辑⛅️语法 

基础语法

选择器

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（）：添加在外部前面。

hello
world
<script>//添加元素//在ol内部添加//添加在内部末尾$("ol").append("append");//添加在内部开头$("ol").prepend("prepend");//在ol外部添加//添加在外部后面$("ol").after("after");//添加在外部前面$("ol").before("before");</script>

删除操作

•  remove（）：删除被选元素(及子元素）
• empty（）：删除被选元素的子元素

    <script>//删除被选元素(及子元素)$("ol").empty();//删除被选元素的子元素$("ol").remove();</script>

获取和设置元素

JQuery方法	说明
text（）	设置元素或返回所选元素的文本内容
html（）	设置元素或返回所选元素的内容（包括html标签）
val（）	设置或返回表单字段的值

text（）

获取文本内容（无参数）:$(selector).text()

作用：返回元素集合的第一个元素的文本内容（去除所有html标签）

你好
这是一个段落标签
<script>$(document).ready(function(){//获取文本let textContent1=$("#文本").text();console.log(textContent1);})</script>

设置文本内容（有参数）：$(selector).text(content)

作用：为匹配所有元素设置文本内容，content为要设置的文本（会自动转义html特殊字符）

你好
这是一个段落标签
<script>$(document).ready(function(){//设置文本$("#文本").text("修改文本");let textContent2=$("#文本").text();console.log(textContent2);})</script>

• document：整个文档对象，一个页面就是一个文档对象；
• $(document).ready():等待页面DOM结构加载完成后，在执行函数内的代码；
• #选取id，.选取class。

html（）

获取html元素

   
你好
这是一个段落标签
<script>$(document).ready(function(){//获取html文本let htmlContent=$("#html1").html();console.log(htmlContent);})</script>

设置html元素

  
你好
这是一个段落标签
<script>$(document).ready(function(){//获取html文本$("#html1").html("
一级标题
")let htmlContent=$("#html1").html();console.log(htmlContent);})</script>

val（）

获取表单字段的值：

 <script>$(document).ready(function(){let valContent=$("#23").val();})</script>

设置表单字段的值

    <script>$(document).ready(function(){$("#23").val(100);let valContent=$("#23").val();})</script>

获取/置css属性

获取css属性

 
你好
<script>$(document).ready(function(){let css1=$("div").css("font-size");console.log(css1);})</script>

设置css属性

  
你好
<script>$(document).ready(function(){$("div").css("font-size","100px");let css1=$("div").css("font-size");console.log(css1);})</script>

⛅️案例

猜数字

代码：

<script src="jquery-3.7.1.slim.min.js"></script>
请输入要猜的数字：
已经猜的次数:0
结果：<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(numberguessNum){$("#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>

表白墙

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
留言板
输入后点击提交，会将信息显示表示在表格中
谁：
对谁：
说什么：

<script>function submit(){let from=$("#from").val();let to=$("#to").val();let say=$("#say").val();if(from=="" || to==""||say==""){return;}let html1="
"+from+"对"+to+"说:"+say+"
"//重置$(".container").append(html1);$("#from").val("");$("#to").val("");$("#say").val("");}</script>

实现效果