实用指南：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-100
        number=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-100
        let 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>

实现效果