jquery

最新推荐文章于 2023-12-16 12:23:20 发布

香香不学习

最新推荐文章于 2023-12-16 12:23:20 发布

阅读量159

点赞数 1

文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/firenaimal/article/details/130138725

版权

jquery

学习目标

1.jquery概念
2.jquery的常见选择器
3.熟练掌握jquery操作节点的属性、内容、样式
4.熟练掌握jquery的文档处理、筛选
5.熟练掌握jquery的常见事件和效果
6.熟练掌握jquery的ajax

一、jquery概念

1.1 Jquery介绍

jquery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情;采用链式操作。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

1.2 jquery节点和js节点的区别

用jsDOM模型的获得节点是js节点，用jquery选择器获得的节点是jquery节点。js节点无法调用jquery封装方法和属性，jquery节点也无法调用js节点的属性和方法。

但是js节点和jquery节点是可以相互转换的

js转jquery节点 $(js节点)
jquery转js节点 jquery节点.get(0)

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js节点和jquery节点的区别</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="adv">广告</div>
    <script>
        //js节点
        let adv = document.getElementById('adv');
        adv.innerHTML = 'js的内容';
        //jquery节点
        let $adv = $("#adv");
        $adv.html("jquery内容");
        //js节点无法操作jquery节点方法和属性
        //adv.html("js操作jquery方法失败");
        //jquery节点也无法操作js节点的属性和内容
        //$adv.innerHTML = "jquery节点操作js属性失败";

        //js节点可以转换为jquery节点 $(js节点) 转成jquery节点
        $(adv).html("js转jquery节点成功");
        //jquery节点转js节点
        $adv.get(0).innerHTML="jquery节点转js节点成功";
    </script>
</body>
</html>

二、jquery选择器

2.1 基本选择器

jquery基本选择器包含：id选择器、标签选择器、类选择器、通配选择器、并集选择器。

示例如下：

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jquery基本选择器</title>
        <script src="../js//jquery-3.6.0.min.js"></script>
        <script>
            //jquery加载事件
            $(function(){
                //id选择器
                $("#adv").html("id选择器");
                //标签选择器
                $("p").html("标签选择器");
                //类选择器
                $(".p1").html("类选择器");
                //通配选择器
                //$("*").html("通配选择器");//jquery的选择器没有优先级
                //并集选择器
                $(".p1,div").html("并集选择器");
            });      
        </script>
    </head>
    <body>
        <div id="adv"></div>
        <p>这是一个短段落</p>
        <p>这是一个短段落</p>
        <p>这是一个短段落</p>
        <p>这是一个短段落</p>
        <p>这是一个短段落</p>
        <p class="p1">这是具有class的段落</p>
        <p class="p1">这是具有class的段落</p>
        <p class="p1">这是具有class的段落</p>
      
    </body>
    </html>

2.2 层级选择器

层级选择器包含：包含选择器、父子选择器、兄弟选择器、相邻选择器。这里重点掌握包含选择器。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery包含选择器</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="adv">
        <h1><span>logo</span></h1>
    </div>
    <script>
        //包含选择器
        $("#adv span").html("logo内容改变成功")
    </script>
</body>
</html>

2.3 过滤选择器

常见的过滤器选择器包含、过滤第一个元素，最后一个元素、偶数元素、奇数元素、指定元素、大于、小于。

示例如下：

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>过滤选择器</title>
        <script src="../js/jquery-3.6.0.min.js"></script>
        <script>
            //jquery加载事件
            $(function(){
                //获得第一个子节点
                $("#menu li:first").css({"backgroundColor":"red"})
                //获得最后一个子节点
                $("#menu li:last").css("backgroundColor","blue");
                //获得偶数节点
                $("#menu li:even").css("background","pink");
                //获得奇数节点
                $("#menu li:odd").css("background","green");
                //获得第三个节点
                $("#menu li:eq(2)").css("background","yellow");
                //获得大于3节点
                $("#menu li:gt(2)").css("background","red");
                //获得小于3节点
                $("#menu li:lt(2)").css("background","yellow");
            });
        </script>
    </head>
    <body>
        <ul id="menu">
            <li>手机</li>
            <li>手机</li>
            <li>手机</li>
            <li>手机</li>
            <li>手机</li>
            <li>手机</li>
            <li>手机</li>
            <li>手机</li>
            <li>手机</li>
            <li>手机</li>
        </ul>
    </body>
    </html>

2.4内容过滤选择器

内容过滤选择器常用的有查看内容是否为空。示例如下：

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>内容过滤选择器</title>
        <script src="../js/jquery-3.6.0.min.js"></script>
        <script>
            //加载事件
            $(function(){
                $(".adv:empty").html("空的");
            });
        </script>
    </head>
    <body>
        <div class="adv">广告</div>
        <div class="adv"></div>
        <div class="adv"></div>
    </body>
    </html>

2.5 隐藏显示过滤选择器

获取隐藏或者显示的选择器是

:hidden 隐藏
:visible 显示

示例如下：

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>隐藏显示过滤选择器</title>
        <script src="../js/jquery-3.6.0.min.js"></script>
        <script>
            $(function(){
                //获得隐藏的节点   show显示 1s后显示
                $("#menu li:hidden").show(1000);
                //获得显示的节点
                $("#menu li:visible").css("background","red");
    
            })
        </script>
    </head>
    <body>
        <ul id="menu">
            <li style="display:none;">手机</li>
            <li>手机</li>
            <li>手机</li>
        </ul>
    </body>
    </html>

2.6 属性选择器

常见属性选择器包含：属性选择、属性等于某个值选择、属性不等于某个值选择。

示例如下：

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>属性选择器</title>
        <script src="../js/jquery-3.6.0.min.js"></script>
        <script>
            $(function(){
                $("input[name]").css("background","red");
                $("input[name='username']").css("background","blue");
                $("input[name!='username']").css("background","green");
            })
        </script>
    </head>
    <body>
        <input type="text" name="">
        <input type="text" name="username">
        <input type="password" name="passord">
    </body>
    </html>

2.7 表单对象选择器

通过表单元素的状态获取元素节点，常见的选择器有：

:enabled 可用
:disabled 不可用
:checked input选中
:selected option选中

示例：

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表单对象选择器</title>
        <script src="../js/jquery-3.6.0.min.js"></script>
        <script>
            $(function(){
                $("#myform input:enabled").css("background","red");
                $("#myform input:disabled").css("background","blue");
                $("#myform input:checked").css({"width":"100px","height":"100px"});
                $("#myform option:selected").html("hello");
            });
        </script>
    </head>
    <body>
        <form action="" id="myform">
            <input type="text" disabled="disabled">
            <input type="text" >
            爱好：
            <input type="checkbox" checked name="hob" />
            <input type="checkbox" name="hob" />
            地址：
            <select>
                <option>北京</option>
                <option selected>上海</option>
            </select>
        </form>
    </body>
    </html>

三、操作元素的内容、属性、样式

操作元素节点的内容、属性、样式；示例如下：

3.1 操作元素内容

操作元素的内容方法有：html()、text()、val();

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素的内容</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            //操作html内容
            $("#adv").html("<h1>logo</h1>");
            //获取html内容
            console.log($("#adv").html());
            // 操作文本内容
            // $("#adv").text("<h1>logo</h1>");
            //获取文本内容
            console.log($("#adv").text());
            //操作表单标签的value属性值
            $("input").val("张三");
            //获取表单标签的value属性值
            console.log($("input").val());
        });
    </script>
</head>
<body>
   <div id="adv"></div> 
   姓名：<input type="text" name="username" value="" />
</body>
</html>

3.2 操作元素属性

操作元素属性的方法有：

attr() 设置、获取属性
removeAttr()删除属性
prop() 设置、获取属性（checked selected disabled）
removeProp()删除属性

示例1：attr()应用

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>操作元素属性</title>
        <script src="../js/jquery-3.6.0.min.js"></script>
        <script>
            $(function(){
                //设置属性 多个属性可以设置为json对象格式/js对象格式
                $("#myImg").attr({"src":"../imgs/1.jpg","title":"这是一张图片"});
                $("#myImg").attr({src:'../imgs/1.jpg'});
                //设置一个属性可以直接写两个参数
                $("#myImg").attr("src","../imgs/1.jpg");
                //获取属性
                console.log($("#myImg").attr("src"));
                //删除属性
                $("#myImg").removeAttr("src");
            });
        </script>
    </head>
    <body>
        <img id="myImg" src="" />
    </body>
    </html>

示例2：prop()和attr的区别

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>全选/全不选案例</title>
        <script src="../js/jquery-3.6.0.min.js"></script>
        <script>
            $(function(){
                //全选/全不选
                $("#checkAllBtn").click(function(){
                    $("input[name='hob']").prop("checked",$(this).prop("checked"));     
                });
                //反选
                $("#reverseBtn").click(function(){
                    let hobs = $("input[name='hob']"); 
                    //上面的数组一遍历 就自动转为js节点  
                    for(let i=0;i<hobs.length;i++){
                        //将js节点转为jquery节点
                        let hob = $(hobs[i]);
                        hob.prop("checked",!hob.prop("checked"));
                    }  
                });
            })
        </script>
    </head>
    <body>
        全选/全不选 <input type="checkbox" id="checkAllBtn" /><br>
        <button id="reverseBtn">反选</button>
        <br/>
        爱好：
        抽烟：<input type="checkbox" name="hob" value="chouyan" />
        喝酒：<input type="checkbox" name="hob" value="hejiu" />
        烫头：<input type="checkbox" name="hob" value="tangtou" />
    </body>
    </html>

3.3 操作元素样式

操作元素样式的方法是：jquery节点.css()；

示例1：

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>操作元素样式</title>
        <script src="../js/jquery-3.6.0.min.js"></script>
        <script>
            $(function(){
                $("#adv").css({"width":"120px","height":"120px"});
                $("#adv").css({background:"red",border:"1px solid blue"});
                $("#adv").css("height","200px");
            })
        </script>
    </head>
    <body>
        <div id="adv"></div>
    </body>
    </html>

四、文档处理

jquery的文档处理是封装js的复杂的DOM操作，常见的方法有

append() 在内部的结尾处追加
prepend()在内部的最前面追加
after()在外部追加到后面
before()在外部追加的前面

示例：节点操作

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>文档处理</title>
        <script src="../js/jquery-3.6.0.min.js"></script>
        <script>
            $(function(){
                //$("标签") 是创建jquery节点的语法
                //在内部尾部追加
                $("#menu").append($("<li>最后一个手机</li>"));   
                //在内部最前面追加
                $("#menu").prepend($("<li>第一个手机</li>"));
                //在外部前面加
                $("#menu").before($("<h1>手机列表</h1>"));
                //在外部后面加
                $("#menu").after($("<span>xxxxx</span>"));
            });
        </script>
    </head>
    <body>
        <ul id="menu">
            <li>手机1</li>
            <li>手机2</li>
            <li>手机3</li>
            <li>手机4</li>
            <li>手机5</li>
        </ul>
    </body>
    </html>

五、筛选

jqury的筛选功能是jquery链式操作的基础。常见的筛选方法如下：

eq()
first()
last()
children()
find()

示例1:链式操作

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/jquery-3.6.0.min.js"></script>
        <script>
            $(function(){
                $("#menu").css({"width":"100px","height":"600px","background":"red"})
                .children().first().html("<a>手机A</a>").
                parent().children().last().css("background","blue");
            });
        </script>
    </head>
    <body>
        <ul id="menu">
            <li><a href="">手机1</a></li>
            <li><a href="">手机2</a></li>
            <li><a href="">手机3</a></li>
            <li><a href="">手机4</a></li>
            <li><a href="">手机5</a></li>
            <li><a href="">手机6</a></li>
        </ul>
    </body>
    </html>

六、效果

jquery提供很多动态效果的方法，但是这并不是我们后端关系的地方。这里简单介绍几个方法

hide() 隐藏
show()显示
fadeIn() 淡入
fadeOut()淡出

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery动态效果</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $("#adv").hide(1000);
            $("#adv").show(2000);
            $("#adv").fadeOut(3000);
            $("#adv").fadeIn(4000);
        });
    </script>
</head>
<body>
    <div id="adv" style="width:100px;height:100px;background:red;"></div>
</body>
</html>

七、事件

7.1 页面加载事件

当前页面加载完毕后才会运行页面加载事件内的代码；解决js加载顺序问题。它的标准语法

$(document).ready(function(){
  // 在这里写你的代码...
});

可以简写为

$(function(){
   // 在这里写你的代码...
});

示例：

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>页面加载事件</title>
        <script src="../js/jquery-3.6.0.min.js"></script>
        <script>
            //页面加载事件的标准写法
            $(document).ready(function(){
                alert($("#adv").html());
            });
            //简写
            $(function(){
                alert($("#adv").html());
            })
        </script>
    </head>
    <body>
        <div id="adv">广告</div>
    </body>
    </html>

7.2 常见的事件

常见事件如下：

click 点击事件
mouseover 移入事件
mouseout 移出事件
keyup 键盘弹起事件
keydown 键盘按下事件
change 内容改变事件
submit 提交事件

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见事件</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        // 1. click 点击事件
        // 2. mouseover 移入事件
        // 3. mouseout 移出事件
        // 4. keyup 键盘弹起事件
        // 5. keydown 键盘按下事件
        // 6. change 内容改变事件
        // 7. submit 提交事件 
        $(function(){
            //点击事件
            $("#btn").click(function(){
                alert('点击事件');
            });
            //鼠标移入事件
            $("#adv").mouseover(function(){
                $(this).css("background","blue");
            });
            //鼠标移出事件
            $("#adv").mouseout(function(){
                $(this).css("background","pink");
            });
            //键盘按下事件
            $("input").keydown(function(){
                $(this).css("background","pink");
            });
            //键盘弹起事件
            $("input").keyup(function(){
                $(this).css("background","blue");
            });
            //内容改变事件
            $("#province").change(function(){
                alert('省变了，要更改市的数据')
            })
            //表单提交事件
            $("#loginForm").submit(function(){
                let username = $("#loginForm input[name='username']").val();
                let password = $("#loginForm input[name='password']").val();
                if(username.length>0 && password.length>0){
                    return true;
                } else {
                    return false;
                }
            })
        });
    </script>
</head>
<body>
    <button id="btn">点击1</button>
    <div id="adv" style="width:100px;height:100px;background:red"></div>
    <input type="text"><br>
    地址：
    <select id="province">
        <option>北京</option>
        <option>河北省</option>
    </select>
    <select id="city">
        <option>石家庄市</option>
        <option>廊坊市</option>
    </select>

    <form action="http://www.baidu.com" id="loginForm" method="get">
        姓名:<input type="text" name="username" value="" /><br>
        密码:<input type="password" name="password" value="" />
        <input type="submit" value="登录" />
    </form>
</body>
</html>

7.3 事件的处理方式

常见的事件处理方式如下：

bind 每次都会触发事件
one 只有第一次会触发世家
on 能够为生成的代码绑定事件

示例：

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>事件的处理方式</title>
        <script src="../js/jquery-3.6.0.min.js"></script>
        <script>
            $(function(){
                // $("#btn").bind("click",function(){
                //     alert('默认绑定方式，每次都会触犯事件')
                // })
                //如上方式的简写为：
                $("#btn").click(function(){
                    alert('默认绑定方式，每次都会触犯事件')
                })
                //只绑定一次事件
                $("#btn2").one("click",function(){
                    alert('只有第一次点击触发');
                })
                $("#adv").append($("<button class=\"btn3\">点击3</button>"));
                //动态绑定事件
                $("#adv").on("click",".btn3",function(){
                    alert("给jquery生成的代码绑定事件");
                })
                
            });
            
        </script>
    </head>
    <body>
        <button id="btn">点击1</button>  
        <button id="btn2">点击2</button>  
        <div id="adv"></div>
    </body>
    </html>

八、ajax

8.1 ajax概述

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）；即浏览器和服务器异步的数据交互方式。

示例图如下：

8.2 ajax常见方式

ajax常见的写法有四种

ajax
get
post
getJson

示例1：

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ajax</title>
        <script src="../js/jquery-3.6.0.min.js"></script>
        <script>
            $(function(){
                $.ajax({
                    //路径
                    url:'user.json',
                    //请求方式
                    type:'get',
                    //向服务器提交的数据
                    data:{},
                    //服务器响应给我们数据格式
                    dataType:"json",
                    //响应成功后返回的数据
                    success:function(data){
                        data.forEach(user => {
                            let $user = $(`<tr>
                                <td>${user.id}</td>
                                <td>${user.name}</td>
                                <td>${user.age}</td>
                            </tr>`);
                            $("#tbody").append($user);
                        });
                       
                    }
    
                })
    
                $.get('user.json',{"name":"提交服务器的数"},function(data){
                    data.forEach(user => {
                        let $user = $(`<tr>
                            <td>${user.id}</td>
                            <td>${user.name}</td>
                            <td>${user.age}</td>
                        </tr>`);
                        $("#tbody2").append($user);
                    });
                },"json");
    
                $.getJSON('user.json',function(data){
                    data.forEach(user => {
                        let $user = $(`<tr>
                            <td>${user.id}</td>
                            <td>${user.name}</td>
                            <td>${user.age}</td>
                        </tr>`);
                        $("#tbody3").append($user);
                    });
                })
            })
        </script>
    </head>
    <body>
        <table id="mytable" border="1px">
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tbody id="tbody">
    
            </tbody>
            <!-- <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr> -->
        </table>
    
        <table id="mytable2" border="1px">
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tbody id="tbody2">
    
            </tbody>
            <!-- <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr> -->
        </table>
        <table id="mytable3" border="1px">
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tbody id="tbody3">
    
            </tbody>
            <!-- <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr> -->
        </table>
    </body>
    </html>

注意：一定要在启动服务器的环境下运行，一定要安装live server插件

九、总结

jquery节点与js节点
jquery选择器
操作元素内容、属性、样式
节点操作文档处理
筛选链式操作
动态效果隐藏与显示
常见事件
事件的处理方式 bind one on
ajax

香香不学习

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery

学习目标一、jquery概念1.1 Jquery介绍jquery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情;采用链式操作。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。用jsDOM模型的获得节点
复制链接

扫一扫