论如何把JS踩在脚下 —— JQuery基础及Ajax请求详解

时间：2023-03-08 18:09:54

一、什么是JQuery？

JQuery是一种JavaScript框架，是一堆大神搞出来的能够让前端程序猿敲更少代码、实现更多功能的工具（在此，跪谢各位JQuery开发大大们！！！）。JQuery的使用给优化HTML文档操作、事件处理、动画设计和Ajax交互提供了巨大的便利。而且，其特有的链式语法也较与JS更为清晰。

二、JQuery入门

想要使用JQuery框架，就必须在html文档中导入JQuery插件，导入方式和日常导入外部JS文件的方式是相同的。但要注意，在同一html文档中插入多个外部JS文件是一定要格外注意引入的位置与不同文件的顺序！！！（JQuery官方下载地址在这里，宣传费就不用给了：http://jquery.com/）

下面我们就以代码的形式来了解一下JQuery的语法与部分注意事项。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>JQuery笔记</title>

        <script language="JavaScript" src="js/jquery-1.10.2.js"></script>

    </head>

    <body>

        <p name="p" id="p">这是P1标签的文字</p>

        <p>这是P2标签的文字</p>

        <p>这是P3标签的文字</p>

        <select id="select">

            <option>123</option>

            <option>456</option>

            <option>789</option>

        </select>

        <input type="checkbox" value="1" />1

        <input type="checkbox" value="2" />2

        <input type="checkbox" value="3" />3

        <input type="checkbox" value="4" />4

    </body>

    <script type="text/javascript">

        //JQuery语法

            //1、jQuery("选择器").action();通过选择器调用事件函数

            //        但jQuery中，jQuery可以用$代替，即$("选择器").action();

                //①选择器可以直接使用css选择器，选中元素；

                //②.action()表示对元素执行的操作；

            //2、文档就绪函数：防止文档在完全加载（就绪）之前运行jQuery代码

                //        $(document).ready(function(){

                //            // JQuery代码

                //        });

                //        $(function(){

                //            //文档就绪函数的简写方式

                //        });

                //[文档就绪函数 与 window.onload 区别]

                //①    window.onload需要在网页所有内容加载完成后执行（包括图片和音频）；

                //        文档就绪函数，只需要在网页DOM结构加载以后便执行。

                //②    window.onload只能写一个，写多个只会执行最后一个；

                //        文档就绪函数，可以写多个，也不会被覆盖。

            //3、JQuery对象与原生DOM对象互转

                //①    原生DOM对象转JQuery对象：$(DOM对象)

                    //        var p = document.getElementsByTagName("p");

                    //        $(p);

                //② JQuery对象转原生DOM对象：$("p").get(0) 或 $("p")[0]

                    //        $("p").get(0).style.color = "#00ff00";

        $("p").hide();

        $("p").fadeIn(5000);

        $("#select").val(["123"]);

        $("input[type='checkbox']").val(["1","2","3","4"])

        $("#p").attr({"name":"pppppppp","class":"aaa"})

    </script>

</html>

三、JQuery中的事件与动画

JQuery在前端开发中带给我们很多便利，其中就有其自带的部分动画与事件，下面是这一部分比较常用的代码讲解。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>笔记-JQuery事件与动画</title>

        <script src="js/jquery-1.10.2.js" language="JavaScript"></script>

        <style type="text/css">

            p{

                width: 50px;

                height: 50px;

                background-color: #00FFFF;

            }

            div{

                width: 150px;

                height: 75px;

                color: #FFFFFF;

                background-color: #00FFFF;

                text-align: center;

                line-height: 75px ;

                white-space: nowrap;

                overflow: hidden;

                text-overflow: ellipsis;

            }

        </style>

    </head>

    <body>

        <button>点击我触发事件</button>

        <p>12345</p>

        <div style="display: none;" id="div1">这个原来是隐藏的div</div>

        <div id="div2">这个是显示的div</div>

    </body>

        <script type="text/javascript">

            //    事件绑定快捷方式

//            $("button:first").click(function(){

//                alert("1");

//            })

            //使用on绑定事件

            //① 使用on进行单事件绑定

//            $("button:first").on("click",function(){

//                console.log($(this).html());

//            })

            //② 使用on同时为多个事件，绑定同一函数

//            $("button:first").on("click mouseover",function(){

//                console.log($(this).html());

//            })

            //③ 调用函数时，传入自定义参数

//            $("button:first").on("click",{name:"wk"},function(event){

//                //使用event.data.属性名 找到传入的参数

//                console.log(event.data.name);

//            })

            //④ 使用on进行多事件多函数绑定

//            $("button:first").on({

//                click:function(){

//                    console.log("click");

//                },

//                mouseover:function(){

//                    console.log("mouseover");

//                }

//            })

            //⑤ 使用on进行事件委派

                //>>>将原本需要绑定到某元素上的事件改为绑定在父元素乃至根节点上，然后委派给当前元素生效

                //>>>作用：默认的绑定方式，只能绑定到页面初始时已有的元素，当页面新增p元素时，无法绑定到新元素上；

                //                    使用事件委派方式，当页面新增元素时，可以为所有新元素绑定事件

//            $("body").on("click","button",function(){

//                alert("1");

//            })

//            $("button").on("click",function(){

//                var p = $("<p>44444</p>");

//                $("p").after(p);

//            })

//            $(document).on("click","p",function(){

//                alert(1);

//            })

            //off 取消事件绑定

            //1、$("p").off() 取消所有事件

            //2、$("p").off("click") 取消点击事件

            //3、$("p").off("click mouseover") 取消多个事件

            //4、$(document).off("click","p") 取消事件委派

            //one 绑定唯一一次事件

//            $("button").one("click",function(){

//                alert(1);

//            })

            //trigger 自动触发某元素的事件

//            $("p").click(function(event,arg1,arg2){

//                alert("触发了p的click事件"+arg1+arg2);

//            })

//            $("button").click(function(){

//                $("p").trigger("click",["呵呵呵","哈哈哈"]);//触发事件时，传递参数

//            })

            //动画效果

            // .show()：让隐藏元素显示，效果为同时修改元素的宽度，高度，opacity属性

                //① 不传参数，让隐藏的元素直接显示，不进行动画

                //② 传入时间，多少毫秒之内完成动画

                //③ 传入时间、函数，完成动画之后完成回调函数

            // .hidden()：让显示元素隐藏，与show相反

//            $("#div1").show(1000,function(){

//                alert("动画")

//            });

//            $("#div2").hide(1000);

            // .slideDown()：让隐藏元素显示，效果为从上往下增加高度

            // .slideUp()：让显示元素隐藏，效果为从下往上减小高度

            // .slideToggle()：让隐藏元素显示，让隐藏的显示

            //.fadeIn()：让隐藏元素显示，淡入

            //.fadeOut()：让显示元素隐藏，淡出

            //.fadeToggle()：让隐藏元素显示，让隐藏的显示，淡入、淡出

            //.fadeTo(时间,透明度,函数)：让隐藏元素显示，让隐藏的显示，淡入、淡出，但是多了必选的透明度参数，可以指定显示的最终透明度

//            $("#div1").fadeIn(1000,function(){

//                alert("动画")

//            });

//            $("#div2").fadeOut(1000,function(){

//                alert("动画")

//            });

            //.animate({最终的样式属性键值对},动画时间,动画效果linear和swing,回调函数)：自定义动画

//            $("#div2").animate({

//                width:"150px",

//                opacity:"0"

//            },2000,"linear")

        </script>

</html>

四、Ajax请求

哈哈哈，重头戏来了。Ajax请求是JQuery给我们带来的最大最大的福利，通过Ajax，我们可以免除很多不必要的工作，下面依然是这一部分重点的讲解，虽然内容很少，但是其精华就在于其中小小一部分。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>JQuery高级Ajax</title>

        <script language="JavaScript" src="js/jquery-1.10.2.js"></script>

        <script type="text/javascript">

            $(function(){

                //JSON对象

                    //1、JSON对象时键值对的集合，键与值间用":"分割，多个键值对之间用","分割；

                    //2、多个JSON对象，可以放到数组中去；JSON对象和数组可以相互嵌套；

                    //JSON对象的键必须是字符串

                $("button").click(function(){

                   　　 $.ajax({

                        type:"post",

                        url:"http://192.168.4.172:8080/json/h51701.json",

                        dataType:"JSON",

                        success:function(data){

//                            console.log(data);

                            $("div").html(data[0].age);

                        }

                    });

                })

            })

        </script>

    </head>

    <body>

        <button>点击请求JSON文件</button>

        <div></div>

    </body>

</html>