Jquery学习

最新推荐文章于 2024-05-14 07:21:49 发布

加菲猫��

最新推荐文章于 2024-05-14 07:21:49 发布

阅读量216

点赞数 1

文章标签： jquery javascript 学习

本文链接：https://blog.csdn.net/qq_52701502/article/details/130300053

版权

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>

24. 内容过滤选择器

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

<!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）；即浏览器和服务器异步的数据交互方式。

示例图如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mh7Uemza-1682120018130)(assets/1.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KNQ89UyA-1682120018131)(assets/2.png)]

九、总结

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

加菲猫��

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Jquery学习

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 Le
复制链接

扫一扫