jQuery入门基础

142 阅读 0 评论 94 点赞

我是靠谱客的博主感性溪流，这篇文章主要介绍jQuery入门基础，现在分享给大家，希望可以做个参考。

jQuery 是⼀套兼容多浏览器的 javascript 脚本库。

1.在官网中下载jquery 
2.在html页面中引入,使用script标签对引入jquery 
3.在html页面中使用jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js入门</title>
    <!--引入jquery-->
    <!--<script src="js/jquery-3.6.0.min.js"></script>-->
    <script src="js/js.js"></script>
</head>
<body>
    <div id="box">div</div>
    <!--
        1.在官网中下载jquery
        2.在html页面中引入,使用script标签对引入jquery
        3.在html页面中使用jquery
    -->
    <script>
        /*获取DOM对象*/
        var box1 = document.getElementById("box");

        /*jquery对象*/
        /*var jq_obj = $("#box");
        console.log(box1);
        console.log(jq_obj);*/

        var box = $("box");
    </script>
</body>
</html>

通过css实现背景色隔行换色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .datalist{
            border:1px solid #007108;
            font-family:Arial;
            border-collapse:collapse;
            /*background-color:#d9ffdc;*/
            font-size:14px;
        }

        .datalist th{
            border:1px solid #007108;
            /*background-color:#00a40c;*/
            color:#FFFFFF;
            font-weight:bold;
            padding-top:4px; padding-bottom:4px;
            padding-left:12px; padding-right:12px;
            text-align:center;
        }

        .datalist td{
            border:1px solid #007108;
            text-align:left;
            padding-top:4px;
            padding-bottom:4px;
            padding-left:10px;
            padding-right:10px;

        }

        /*1）通过css实现背景色隔行换色*/
     /*   tr:nth-child(odd){!*odd基数*!
            background:palegoldenrod;
            font-size: 30px;
        }
        tr:nth-child(even){!*even奇数*!
            background:darkturquoise;
            font-size: 30px;
        }*/



    </style>
    <!--引入jq-->
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
      /*  /!*1) 通过js的DOM操作实现隔行换色*!/
        window.οnlοad=function (){
            /!*获取到所有的tr*!/
            var trs = document.getElementsByTagName("tr");
             for(var i=0;i<=trs.length-1;i++){
                 if(i%2==0){
                     trs[i].style.background="red";
                 }else {
                     trs[i].style.background="green";
                 }
             }

        }*/

      //2) 通过jquery 实现隔行换色
      $(function (){
          /*获取所有的奇数行设置背景色*/
          $("tr:odd").css("background","palegoldenrod")
          /*获取所有的奇数行设置背景色*/
          $("tr:even").css("background","darkturquoise")
      });
    </script>
</head>
<body>
    <table class="datalist">
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Class</th>
            <th scope="col">Birthday</th>
            <th scope="col">Constellation</th>
            <th scope="col">Mobile</th>
        </tr>
        <tr>               <!-- 奇数行 -->
            <td>isaac</td>
            <td>W13</td>
            <td>Jun 24th</td>
            <td>Cancer</td>
            <td>1118159</td>
        </tr>
        <tr class="altrow">       <!-- 偶数行 -->
            <td>fresheggs</td>
            <td>W610</td>
            <td>Nov 5th</td>
            <td>Scorpio</td>
            <td>1038818</td>
        </tr>
        <tr>               <!-- 奇数行 -->
            <td>girlwing</td>
            <td>W210</td>
            <td>Sep 16th</td>
            <td>Virgo</td>
            <td>1307994</td>
        </tr>
        <tr class="altrow">       <!-- 偶数行 -->
            <td>tastestory</td>
            <td>W15</td>
            <td>Nov 29th</td>
            <td>Sagittarius</td>
            <td>1095245</td>
        </tr>
        <tr>               <!-- 奇数行 -->
            <td>lovehate</td>
            <td>W47</td>
            <td>Sep 5th</td>
            <td>Virgo</td>
            <td>6098017</td>
        </tr>
        <tr class="altrow">       <!-- 偶数行 -->
            <td>slepox</td>
            <td>W19</td>
            <td>Nov 18th</td>
            <td>Scorpio</td>
            <td>0658635</td>
        </tr>
        <tr>               <!-- 奇数行 -->
            <td>smartlau</td>
            <td>W19</td>
            <td>Dec 30th</td>
            <td>Capricorn</td>
            <td>0006621</td>
        </tr>
        <tr class="altrow">       <!-- 偶数行 -->
            <td>shenhuanyan</td>
            <td>W25</td>
            <td>Jan 31th</td>
            <td>Aquarius</td>
            <td>0621827</td>
        </tr>
        <tr>               <!-- 奇数行 -->
            <td>tuonene</td>
            <td>W210</td>
            <td>Nov 26th</td>
            <td>Sagittarius</td>
            <td>0091704</td>
        </tr>
        <tr class="altrow">       <!-- 偶数行 -->
            <td>ArthurRivers</td>
            <td>W91</td>
            <td>Feb 26th</td>
            <td>Pisces</td>
            <td>0468357</td>
        </tr>
        <tr>               <!-- 奇数行 -->
            <td>reconzansp</td>
            <td>W09</td>
            <td>Oct 13th</td>
            <td>Libra</td>
            <td>3643041</td>
        </tr>
        <tr class="altrow">       <!-- 偶数行 -->
            <td>linear</td>
            <td>W86</td>
            <td>Aug 18th</td>
            <td>Leo</td>
            <td>6398341</td>
        </tr>
        <tr>               <!-- 奇数行 -->
            <td>laopiao</td>
            <td>W41</td>
            <td>May 17th</td>
            <td>Taurus</td>
            <td>1254004</td>
        </tr>
        <tr class="altrow">       <!-- 偶数行 -->
            <td>dovecho</td>
            <td>W19</td>
            <td>Dec 9th</td>
            <td>Sagittarius</td>
            <td>1892013</td>
        </tr>
        <tr>               <!-- 奇数行 -->
            <td>shanghen</td>
            <td>W42</td>
            <td>May 24th</td>
            <td>Gemini</td>
            <td>1544254</td>
        </tr>
        <tr class="altrow">       <!-- 偶数行 -->
            <td>venessawj</td>
            <td>W45</td>
            <td>Apr 1st</td>
            <td>Aries</td>
            <td>1523753</td>
        </tr>
        <tr>               <!-- 奇数行 -->
            <td>lightyear</td>
            <td>W311</td>
            <td>Mar 23th</td>
            <td>Aries</td>
            <td>1002908</td>
        </tr>
    </table>
</body>
</html>

获取jquery包装集对象获取jsDOM对象 jsDOM对象转为jquery对象 jquery对象转为jsDOM对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jq-->
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!--
       获取jquery包装集对象
            $("选择器")
            如果元素不存在,不会返回null,会返回空的query对象,根据length==0来判断是否获取成功

        获取jsDOM对象
            document.getElement....
            如果元素不存在,返回null,根据==null判断是否获取到DOM对象

        jsDOM对象转为jquery对象
            $(js对象)

        jquery对象转为jsDOM对象
            jq对象[索引]
            jq对象.get()

        注意:
            1.jsDOM对象与jq对象不能互相调用其方法
            2.jq的函数只能jq对象能够调用
    -->
    <div id="box">box</div>

    <script>
        //DOM
       var js_obj = document.getElementById("box");
       console.log(js_obj);

       //jq
        var jq_obj =$("#box");
        console.log(jq_obj.length);

        //js-jq
        console.log($(js_obj));

        //jq-js
        console.log(jq_obj[0]);
        console.log(jq_obj.get(0));
    </script>
</body>
</html>

jquery选择器: 基础选择器层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jq-->
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="box">
        <div class="item1">
            我是div1
            <p class="red">div1的p1</p>
            <p>div1的p2</p>
        </div>
        <div>
            我是div2
            <p class="red">div2的p1</p>
            <p>div1的p2</p>
        </div>
        <div>
            我是div3
            <p class="red">div3的p1</p>
            <p>div3的p2</p>
        </div>
    </div>
    <!--
       jquery选择器:
        选中某个|组元素

        分类:
            基础选择器
                id选择器 #id $("#testDiv")选择id为testDiv的元素
                元素名称选择器 element $("div")选择所有div元素
                类选择器 .class $(".blue")选择所有class=blue的元素
                选择所有元素 * $("*")选择⻚⾯所有元素
                组合选择器 selector1,selector2,selectorN $("#testDiv,span,.blue")同时选中多个选择器匹配的元素

            层次选择器
                后代选择器 ancestor descendant $("#parent div")选择id为parent的元素的所有div元素
                ⼦代选择器 parent > child $("#parent>div")选择id为parent的直接div⼦元素
                相邻选择器 prev + next $(".blue + img")选择css类为blue的下⼀个img元素
                同辈选择器 prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元素

            
    -->

    <script>
        /*基础选择器*/
        /*id选择器*/
        console.log($("#box"));
        //元素名称选择器
        console.log($("div"));
        /*类选择器*/
        console.log($(".red"));
        /*通配符选择器*/
        console.log($("*"));
        //组合选择器
        console.log($("#box,.red"));

        //层次选择器
        //后代选择器 : 所有满足条件的子元素
        console.log($("body div"));
        //⼦代选择器  : 满足条件的直接子元素
        console.log($("body>div"));
        //相邻选择器
        console.log($(".item1+div"));
        //同辈选择器
        console.log($(".item1~div"));
    </script>
</body>
</html>

jquery选择器: 表单选择器: 属性选择器: 过滤选择器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jq-->
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        /*html中主要存在abc属性的元素就被选中*/
        /*[abc]{
            background: red;
        }*/

        /*input标签中主要存在abc属性的元素就被选中*/
        input[abc]{
            background: red;
        }
    </style>
</head>
<body>
    <form id='myform' name="myform" method="post">
        <input type="hidden" name="uno" value="9999" disabled="disabled" />
        姓名:<input type="text" id="uname" name="uname" abc="123"/><br />
        密码:<input type="password" id="upwd" name="upwd" value="123456" abc="567"/><br />
        年龄:<input type="radio" name="uage" value="0" checked="checked"/>⼩屁孩
        <input type="radio" name="uage" value="1"/>你懂得 <br />
        爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
        <input type="checkbox" name="ufav" value="爬床"/>爬床
        <input type="checkbox" name="ufav" value="代码"/>代码<br />
        来⾃:<select id="ufrom" name="ufrom" abc="123">
        <option value="-1" selected="selected">请选择</option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        </select ><br />
        简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
        头像:<input type="file" /><br />
        <input type="image" src="http://www.baidu.com/img/bd_logo1.png"
               width="20" height="20"/>
        <button type="submit" οnclick="return checkForm();">提交</button>
        <button type="reset" >重置</button>

    </form>
    <!--
    表单选择器
        表单选择器 :input
        查找所有的input元素：$(":input")；
        注意：会匹配所有的input、textarea、select和button元素。
        ⽂本框选择器 :text 查找所有⽂本框：$(":text")
        密码框选择器 :password 查找所有密码框：$(":password")
        单选按钮选择器 :radio 查找所有单选按钮：$(":radio")
        复选框选择器 :checkbox 查找所有复选框：$(":checkbox")
        提交按钮选择器 :submit 查找所有提交按钮：$(":submit")
        图像域选择器 :image 查找所有图像域：$(":image")
        重置按钮选择器 :reset 查找所有重置按钮：$(":reset")
        按钮选择器 :button 查找所有按钮：$(":button")
        ⽂件域选择器 :file 查找所有⽂件域：$(":file")


    属性选择器:
        [属性名]包含这个属性的被选中
        [属性名="属性值"] 包含指定属性=指定值的元素被选中

    过滤选择器:

    -->


    <script>
        /*表单选择器*/
        console.log($(":input"));
        //单选框
        console.log($(":radio"));

        //属性选择器
        console.log($("[abc]"));
        console.log($("input[abc]"));
        console.log($("input[abc=123]"));
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jq-->
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        /*html中主要存在abc属性的元素就被选中*/
        /*[abc]{
            background: red;
        }*/

        /*input标签中主要存在abc属性的元素就被选中*/
        input[abc]{
            background: red;
        }
    </style>
</head>
<body>
    <form id='myform' name="myform" method="post">
        <input type="hidden" name="uno" value="9999" disabled="disabled" />
        姓名:<input type="text" id="uname" name="uname" abc="123"/><br />
        密码:<input type="password" id="upwd" name="upwd" value="123456" abc="567"/><br />
        年龄:<input type="radio" name="uage" value="0" checked="checked"/>⼩屁孩
        <input type="radio" name="uage" value="1"/>你懂得 <br />
        爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
        <input type="checkbox" name="ufav" value="爬床"/>爬床
        <input type="checkbox" name="ufav" value="代码"/>代码<br />
        来⾃:<select id="ufrom" name="ufrom" abc="123">
        <option value="-1" selected="selected">请选择</option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        </select ><br />
        简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
        头像:<input type="file" /><br />
        <input type="image" src="http://www.baidu.com/img/bd_logo1.png"
               width="20" height="20"/>
        <button type="submit" οnclick="return checkForm();">提交</button>
        <button type="reset" >重置</button>

    </form>
    <!--
    表单选择器
        表单选择器 :input
        查找所有的input元素：$(":input")；
        注意：会匹配所有的input、textarea、select和button元素。
        ⽂本框选择器 :text 查找所有⽂本框：$(":text")
        密码框选择器 :password 查找所有密码框：$(":password")
        单选按钮选择器 :radio 查找所有单选按钮：$(":radio")
        复选框选择器 :checkbox 查找所有复选框：$(":checkbox")
        提交按钮选择器 :submit 查找所有提交按钮：$(":submit")
        图像域选择器 :image 查找所有图像域：$(":image")
        重置按钮选择器 :reset 查找所有重置按钮：$(":reset")
        按钮选择器 :button 查找所有按钮：$(":button")
        ⽂件域选择器 :file 查找所有⽂件域：$(":file")


    属性选择器:
        [属性名]包含这个属性的被选中
        [属性名="属性值"] 包含指定属性=指定值的元素被选中

    过滤选择器:

    -->


    <script>
        /*表单选择器*/
        console.log($(":input"));
        //单选框
        console.log($(":radio"));

        //属性选择器
        console.log($("[abc]"));
        console.log($("input[abc]"));
        console.log($("input[abc=123]"));
    </script>
</body>
</html>

操作属性: 分类: 区别: attr 与 prop 获取属性值设置属性值移出属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jq-->
    <script src="js/jquery-3.6.0.min.js"></script>

</head>
<body>
    <form action="" id="myform">
        <input type="checkbox" name="ch" value="aaaa" haha="hahahahha"/> aa
        <input type="checkbox" name="ch" value="bbbb" haha="hehehehhe" checked="checked"/> bb
    </form>
    <!--
        操作属性:
            分类:
                固有属性 : 标签提供的属性
                    固有属性 : src,href...
                    共有属性 : id,class,name...
                自定义属性 : abc  haha
                boolean属性 : checked selected  disabled

            区别: attr 与 prop
                1.attr可以操作固有属性,自定义属性
                  prop只能操作固有属性
                2.attr 操作布尔属性(checked),得到的属性值为属性设置的值 checked = 'checked'
                  prop 操作布尔属性(checked),得到的结果为true|false

            获取属性值
                attr(属性名称) 获取指定的属性值，操作 checkbox 时，选中返回 checked，没有选中返回 undefined。attr('checked')attr('name')
                prop(属性名称) 获取具有true和false两个属性的属性值 prop('checked')

            设置属性值
                attr(属性名称，属性值)设置指定的属性值，
                    操作 checkbox 时，
                    选中返回 checked，
                    没有选中返回 undefined。
                    attr('checked',’checked’)
                    attr('name',’zs’)
            prop(属性名称，属性值) 设置具有true和false的属性值 prop('checked',’true

            移出属性
            removeAttr(属性名) 移除指定的属性 removeAttr('checked')


    -->
    <script>
        //获取属性值
        //操作布尔属性
        console.log($("input[type='checkbox']:even").attr("checked"));  //checked
        console.log($("input[type='checkbox']:odd").attr("checked"));  //undefined
        console.log($("input[type='checkbox']:even").prop("checked"));  //true
        console.log($("input[type='checkbox']:odd").prop("checked"));  //false

        //固有属性
        console.log($("input[type='checkbox']:even").attr("value"));  //aaaa
        console.log($("input[type='checkbox']:odd").attr("value"));  //bbbb
        console.log($("input[type='checkbox']:even").prop("value"));  //aaaa
        console.log($("input[type='checkbox']:odd").prop("value"));  //bbbb

        //自定义属性
        console.log($("input[type='checkbox']:even").attr("haha"));  //hahahaha
        console.log($("input[type='checkbox']:odd").attr("haha"));  //hahahaha
        console.log($("input[type='checkbox']:even").prop("haha"));  //undefined
        console.log($("input[type='checkbox']:odd").prop("haha"));  //undefined

        //设置属性
        //设置默认选中
        //$("input[type='checkbox']:even").attr("checked","checked");
        //$("input[type='checkbox']:odd").prop("checked",true);

        //取消被选中状态
        //$("input[type='checkbox']:odd").prop("checked",false);
        //$("input[type='checkbox']:odd").prop("checked",null);

        $("input[type='checkbox']:odd").removeAttr("checked");
        $("input[type='checkbox']:odd").removeAttr("haha");
        $("input[type='checkbox']:odd").removeAttr("name");
    </script>
</body>
</html>

操作元素样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作元素样式</title>
    <!--引入jq-->
    <script src="js/jquery-3.6.0.min.js"></script>
    <style type="text/css">
        div{
            padding: 8px;
            width: 180px;
        }
        .blue{
            background: skyblue;
        }
        .larger{
            font-size: 30px;
        }
        .green {
            background : green;
        }
        .weight{
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <h3>css()⽅法设置元素样式</h3>
    <div id="conBlue" class="blue larger">天蓝⾊</div>
    <div id="conRed">⼤红⾊</div>
    <div id="remove" class="blue larger">天蓝⾊</div>
    <!--
        attr("class") 获取class属性的值，即样式名称
        attr("class","样式名") 修改class属性的值，修改样式
        addClass("样式名") 添加样式名称
        css() 添加具体的样式
        removeClass(class) 移除样式名称
    -->
    <script>
        console.log($("#conBlue").attr("class"));
        //addClass
        $("#conBlue").addClass("weight");
        //添加指定属性,如果原标签中已经存在,覆盖原有的值列表
        //$("#conBlue").attr("class","weight");

        $("#conBlue").removeClass("larger");

        $("#conBlue").css("font-style","italic");

    </script>
</body>
</html>

获取元素的html内容获取元素的⽂本内容，不包含html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h3 id="title"><span>html()和text()⽅法设置元素内容</span></h3>
  <div id="html"></div>
  <div id="text"></div>
  <input type="text" name="uname" value="oop" />
  <!--
    html() 获取元素的html内容
    text() 获取元素的⽂本内容，不包含html

    html("html, 内容") 设定元素的html内容
    text("text 内容") 设置元素的⽂本内容，不包含html

    val() 获取元素value值
    val("值") 设定元素的value值

    html 与 text之间的区别:
      html可以识别纯文本,以及html标签结构
      text只能识别存储本
  -->
  <script>
    //操作纯文本
    $("#html").html("你好html");
    $("#text").text("你好text");

    //带有html标签结构
    $("#html").html("<h3 style='background: salmon'>你好html</h3>");
    $("#text").text("<h3 style='background: salmon'>你好text</h3>");

    console.log( $("#title").html());
    console.log( $("#title").text());

    $("[type='text']").val("哈哈哈");
    console.log( $("[type='text']").val());
  </script>
</body>
</html>

创建于添加删除元素遍历元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        #box{
            border : 3px saddlebrown dashed;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="item1">内容1</div>
        <div class="item2">内容2</div>
    </div>
    <!--
        创建于添加
            创建元素
                $('创建内容')

            添加元素
                prepend(content) 在被选元素内部的开头插⼊元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
                $(content).prependTo(selector) 把 content 元素或内容加⼊ selector 元素开头
                append(content) 在被选元素内部的结尾插⼊元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
                $(content).appendTo(selector) 把 content元素或内容插⼊selector 元素内，默认是在尾部
                before() 在元素前插⼊指定的元素或内容:$(selector).before(content)
                after() 在元素后插⼊指定的元素或内容:$(selector).after(content)

            删除元素
                remove() 删除所选元素或指定的⼦元素，包括整个标签和内容⼀起删。
                empty() 清空所选元素的内容

            遍历元素
                $(selector).each(function(index,element)) :遍历元素
                参数 function 为遍历时的回调函数，
                index 为遍历元素的序列号，从 0 开始。
                element是当前的元素，此时是dom元素。
    -->
    <script>
        //创建元素
        var ele = $('<p id="p1"><span>你好span</span>你好p1</p>');

        //添加元素
        //$("#box").prepend(ele);
        $("#box").prepend("<p>p2</p>");

        ele.prependTo($("#box"));

        $("#box").before("<div>box前面</div>");

        //删除元素
        //$("#box").empty();
        //$("#box").remove();

        //遍历所有div
        $("div").each(function (index,element) {
            console.log(index+'---->'+element);
            console.log($(element));
        });

    </script>
</body>
</html>

链式绑定 1.ready 加载事件-> window.onload 2.bind 绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        /*js*/
        window.onload = function(){
            document.getElementById("btn").style.background = "red";
        }
        /*jq*/
        //1)
        $(function(){
            $("#btn").css("background","green");

            //bind
            /*$("#btn").bind("click",function(){
                alert("hahaha");
            })*/

            //链式绑定
            $("#btn").bind("click",function(){
                alert("hahaha");
            }).bind("mouseover",function(){
                console.log("移入");
            });

            $("#btn").bind({
                "click":function(){
                    console.log("点击事件");
                },
                "mousemove":function(){
                    console.log("移动了");
                }
            })
        })

    </script>
</head>
<body>
    <!--
        1.ready 加载事件-> window.onload
            $(function(){})
            $(document).ready(function(){})

          window.onload : 待DOM结构,与资源全部加载完成之后触发
          ready  : 待DOM结构载完成之后触发
        2.bind 绑定事件
            bind("事件名称",function(){
                触发函数
            })
    -->
   <button id="btn" type="button">按钮</button>
    <img src="images/pexels-photo-5957341.jpeg" alt="">

</body>
</html>

ajax 异步请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!--
        ajax 异步请求  *****

            $.ajax({ -> 配置请求的参数设置
                type : 请求方式 "GET|POST",
                url : "请求服务器的位置",
                data : 请求数据,
                dataType : 预期的服务器响应数据的类型 json,text,html,
                success : function(data){
                    请求成功后的回调函数
                    参数data: 服务器响应的数据
                },
                error : function(){
                    请求失败后的回调函数
                }
            });
    -->
   <button id="btn" type="button">按钮</button>
    <form action="">
        <input type="text" name="uname" value="zhangsan"> 用户名
        <input type="password" name="upwd" value="1234"> 用户密码
    </form>
   <script>
        $("#btn").bind("click",function(){
            console.log($("form").serialize());
            $.ajax({
                type : "GET",
                url : "js/data.json",
                /*data : {
                    "name" : "zhangsan",
                    age : 18
                },*/
                data :$("form").serialize() , /*表单提交*/
                dataType : "JSON",
                success : function (data) {
                    console.log(data);
                    console.log(data.code);
                    console.log(data.message);
                    console.log(data.result);
                },
                error : function () {
                    console.log("请求失败!!!!");
                }
            });
            /*
            //GET : 请求json⽂件,传递参数,拿到返回值
            $.get('js/data.json',{name:"tom",age:100},function(data){
                console.log(data);
            });

            //POST : 请求json⽂件,传递参数,拿到返回值
            $.post('js/data.json',{name:"tom",age:100},function(data){
                console.log(data);
            });*/

            //响应结果固定为json
            /*$.getJSON('js/data.json',{name:"tom",age:100},function(data){
            console.log(data); // 要求返回的数据格式是JSON格式
            })*/
        });

   </script>
</body>
</html>