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

个人主页：♡喜欢做梦

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

编辑

⛅️定义

⛅️定义

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

🍓引入依赖

jQuery CDN

进入这个页面

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

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

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

html 复制代码

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

⛅️语法

🍑基础语法

html 复制代码

$(selector).action()

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

🍑选择器

|------------------|-------------------------------|
| 语法 | 描述 |
| $（"\*"） | 选取所有元素 | |$ （this） | 选择当前html元素 |
| $（"p"） | 所有\元素 | |$ （"p：first"） | 选取第一个<p>元素 |
| $（"p：last" | 选取最后一个\元素 | |$ （".box"） | 所有class="box"的元素 |
| $（"#box"） | 选取id="box"的元素 | |$ （"p.intro"） | 选取class为intro的<p>的元素 |
| $（"ul li：first"） | 选取第一个ul元素的第一个li元素 | |$ ("：input") | 所有input元素 |
| $（"：text"） | 选取所有type="text"的\元素 | |$ （"：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（）：添加在外部前面。

html 复制代码

<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（）：删除被选元素的子元素

html 复制代码

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

🍐获取和设置元素

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

🍅text（）

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

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

html 复制代码

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

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

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

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元素

html 复制代码

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

设置html元素

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（）

获取表单字段的值：

html 复制代码

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

设置表单字段的值

html 复制代码

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

🍐获取/置css属性

获取css属性

html 复制代码

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

设置css属性

html 复制代码

  <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>

⛅️案例

猜数字

代码：

html 复制代码

<!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>

表白墙

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>

实现效果