【jQuery】

最新推荐文章于 2024-05-24 02:08:26 发布

远道学java

最新推荐文章于 2024-05-24 02:08:26 发布

阅读量1.4k

点赞数

文章标签： java 前端

本文链接：https://blog.csdn.net/xmcxmc___/article/details/123805187

版权

jQuery介绍

jQuery由美国人John Resig（约翰·莱西格）于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more
实现隔行变色效果，JavaScript要循环加判断，而jQuery只需一句关键代码

jQuery能做什么?

访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

其实，jQuery和JavaScript的之间关系，可以理解为“成语”和“白话文”之间的关系。成语是对白话文的高度压缩，而jQuery也是对JavaScript的高度压缩库

jQuery的优势

体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性

jQuery下载

进入jQuery官网：jQuery官网

jQuery的使用

jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突

在页面中使用传统引入js文件的方式引入即可。

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

基本的语法介绍

<script>
	$(selector).action();
</script>

工厂函数 $() ：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素（用法基本上和css一致）
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法“$”等同于“ jQuery ”

<body>
    <p>hello</p>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    alert( $("p").text() );
</script>

jQuery对象与DOM对象

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

$(“#title”).html();
// 等同于
document.getELementById(“title”).innerHTML;

DOM对象和jQuery对象互相转换

DOM对象转jQuery对象

var a = document.getElementById("name"); // a是DOM对象
var b = $(a); // b是jQuery对象

jQuery对象转DOM对象

var a = $("#name"); // a是jQuery对象
var b = a.get(0); // b是DOM对象

选择器

基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器

<p>中国</p>
<p>北京</p>
<p class="jy">加油</p>
<p id="wan">祖国万岁</p>
<h3 class="jy">祖国万岁</h3>
    
<script src="js/jquery-3.4.1.min.js"></script>
<script>
   $("p").css("color","red"); // 标签选择器，获得所有的p
   $(".jy").css("color","red"); //类选择器
   $("#wan").css("color","red"); //ID选择器,更具备唯一性
   $(".jy,#wan").css("color","red"); // 并集选择器，.jy和#wan
   $("h3.jy").css("color","red"); // 交集选择器，既是h3标签，又拥有.jy的元素
</script>

层次选择器

基本选择器包括后代选择器、子代选择器、相邻元素选择器、同辈元素选择器

<h3>000</h3>
<div id="x">
    111
    <p>p1</p>
    <div>
        <p>p2</p>
    </div>
</div>
<h3>222</h3>
<h3>333</h3>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
        $("#x p").css("color","red"); // 后代选择器，忽略层级
        $("#x>p").css("color","red"); // 子代选择器，只负责子级
        $("#x+h3").css("color","red"); // 相邻元素选择器，下一个紧邻的兄弟h3
        $("#x~h3").css("color","red"); // 同辈元素选择器，下面的所有兄弟h3
</script>

属性选择器

语法结构	说明
[attribute]	选取包含给定属性的元素
[attribute=value]	选取等于给定属性是某个特定值的元素
[attribute!=value]	选取不等于给定属性是某个特定值的元素
[attribute^=value]	选取给定属性是以某些特定值开始的元素
[attribute$=value]	选取给定属性是以某些特定值结尾的元素
[attribute*=value]	选取给定属性是以包含某些值的元素
[s1] [s2] [sN]	选取满足多个条件的复合属性的元素

<a href="www.baidu.com">百度</a>
<a href="www.sina.com.cn">新浪网</a>
<a href="http://www.163.com">网易</a>
<p href="x">哈哈1</p>
<p href="x" title="x">哈哈2</p>

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

    $("[href]").css("color","red"); // 选取拥有href属性的元素
    $("[href='x']").css("color","red"); // 选取拥有href=x的元素
    $("a[href!='x']").css("color","red"); // 选取a标签中href不等于x的元素
    $("[href^='www']").css("color","red"); // 选取href属性以www开头的元素
    $("[href$='com']").css("color","red"); // 选取href属性以com结尾的元素
    $("[href*='a']").css("color","red"); // 选取href属性包含a的元素
    $("p[href][title='x']").css("color","red"); // 选取拥有href属性和title属性，并且title=x的p元素

</script>

过滤选择器

语法结构	说明
:first	选取第一个元素
:last	选取最后一个元素
:even	选取索引是偶数的所有元素（index从0开始）
:odd	选取索引是奇数的所有元素（index从0开始)
:eq(index)	选取索引等于index的元素（index从0开始）
:gt(index)	选取索引大于index的元素（index从0开始）
:lt(index)	选选取索引小于index的元素（index从0开始）

<h2 id="h2#x">修仙小说</h2>
<ul>
    <li>凡人修仙传</li>
    <li>遮天</li>
    <li>神墓</li>
    <li>残袍</li>
    <li>大主宰</li>
</ul>

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

    $("li:first").css("color","red"); // 第一个li
    $("li:last").css("color","red"); // 最后一个li
    $("li:even").css("color","red"); // 偶数行的li，包括0
    $("li:odd").css("color","red"); // 奇数行的li
    $("li:eq(2)").css("color","red"); // 下标为2的li
    $("li:gt(1)").css("color","red"); // 下标大于1的li
    $("li:lt(2)").css("color","red"); // 下标小于2的li
    $("#h2\\#x").css("color","red"); // 使用转义符
</script>

事件

鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件

方法	说明
click( )	单击鼠标时
mouseover( )	鼠标移过时
mouseout( )	鼠标移出时

<body>
    <img src="img/1.jpg" width="300px"/>
    <img src="img/1.jpg" width="300px"/>
    <img src="img/1.jpg" width="300px"/>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("img").click(function(){
            $(this).attr("src", "img/2.jpg");
        });
        $("img").mouseover(function(){
            $(this).css("border"," 5px solid red");
        });
        $("img").mouseout(function(){
            $(this).css("border"," 5px solid white");
        });
    </script>
</body>

键盘事件

用户每次按下或者释放键盘上的键时都会产生事件

方法	说明
ckeydown( )	按下键盘时
keyup( )	释放按键时

<body>

    <input type="text">
    <h2></h2>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("input").keyup(function() {
            var str = $(this).val(); //获取框中的值
            $("h2").text(str); // 将h2中的内容改为框中的值
        });
    </script>
</body>

表单事件

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件

方法	说明
focus( )	获得焦点
blur( )	失去焦点

<body>
    <p>账号：<input id="username" value="请输入账号..."></p>
    <p>密码：<input id="password"></p>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#username").focus(function() {
            $(this).val("");
        });
        $("#username").blur(function() {
            $(this).val("请输入账号...");
        });
    </script>
</body>

鼠标悬停复合事件

hover()方法相当于mouseover与mouseout事件的组合

<body>
    <img src="img/2.jpg" width="300px"/>
    <img src="img/2.jpg" width="300px"/>
    <img src="img/2.jpg" width="300px"/>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("img").hover(
            function(){
                $(this).css("border", "5px solid red");
                $(this).css("width", "400px");
            }, // 第一个参数相当于mouseover
            function(){
                $(this).css("border", "5px solid white");
                $(this).css("width", "300px");
            } // 第二个参数相当于mouseout
        );
    </script>
</body>

连续点击复合事件

toggle()可以模拟鼠标的连续单击事件

<body>
    <h3>修仙小说</h3>
    <ul>
        <li>凡人修仙传</li>
        <li>遮天</li>
        <li>神墓</li>
        <li>残袍</li>
        <li>大主宰</li>
    </ul>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("h3").click(function() {
            $("li").toggle();
        });
    </script>
</body>

事件的动态绑定

对dom元素绑定事件的另一种写法

<body>
    <h2>Hello</h2>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        /*$("h2").on("click", function() {
            alert("绑定单击事件");
        });*/
        $("h2").on("click mouseover", function() {
            alert("绑定单击事件和鼠标悬停事件");
        });
    </script>
</body>

元素的隐藏和显示

改变元素的宽和高（带动画效果）

通过改变元素的宽和高来实现隐藏和显示

show( speed )：显示
hide( speed )：隐藏
toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<style>
    div{
        width: 300px;
        height: 300px;
        background-color:red;
    }
</style>

<body>
    <button id="btn1">显示</button>
    <button id="btn2">隐藏</button>
    <button id="btn3">切换</button>
    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function() {
            $("div").show("fast");
        });
        $("#btn2").click(function() {
            $("div").hide("slow");
        });
        $("#btn3").click(function() {
            $("div").toggle(2000);
        });
    </script>
</body>

改变元素的高（拉伸效果)

通过改变元素的高来实现拉伸

slideDown( speed ) ：显示
slideUp( speed )：隐藏
slideToggle( speed )等价于slideDown+slideUp

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<style>
    div{
        width: 300px;
        height: 300px;
        background-color:red;
    }
</style>

<body>
    <button id="btn1">拉</button>
    <button id="btn2">伸</button>
    <button id="btn3">拉伸切换</button>
    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function() {
            $("div").slideUp("fast");
        });
        $("#btn2").click(function() {
            $("div").slideDown("slow");
        });
        $("#btn3").click(function() {
            $("div").slideToggle(2000);
        });
    </script>
</body>

不改变元素的大小（淡入淡出效果）

（个人理解）通过改变元素的透明度来实现隐藏和显示

fadeIn( speed ) 显示
fadeOut( speed ) 隐藏
fadeToggle( speed ) 等价于fadeIn+fadeOut动画
fadeTo( speed , 透明度 ) 渐变为给定的不透明度（值介于 0 与 1 之间）

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<style>
    div{
        width: 300px;
        height: 300px;
        background-color:red;
    }
</style>

<body>
    <button id="btn1">淡入</button>
    <button id="btn2">淡出</button>
    <button id="btn3">淡入淡出切换</button>
    <button id="btn4">透明度</button>
    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function() {
            $("div").fadeIn("fast"); //显示
        });
        $("#btn2").click(function() {
            $("div").fadeOut("slow"); //隐藏
        });
        $("#btn3").click(function() {
            $("div").fadeToggle(2000);
        });
        $("#btn4").click(function() {
            $("div").fadeTo(2000, 0.2); //变成0.2的不透明度
        });
    </script>
</body>

链式编程

链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起；

例如：点击一次按钮，让div完成4个指定动作

背景变粉
字体变绿
收缩
拉伸

<style>
    div{
        width: 300px;
        height: 300px;
        background-color:red;
        font-size: 3em;
    }
</style>

<body>
    <button id="btn1">试试</button>

    <div>hello</div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function() {
            $("div").css("background-color", "pink").css("color", "green").css("border-radius", "50%").slideToggle();
        });
    </script>
</body>

DOM和CSS的操作

属性函数

attr( “属性” ); 获得元素的属性值
attr( “属性” , “新值” ); 修改元素的属性值
attr( 样式参数 ) ：样式参数可以写成json格式

  <body>
    <button>试试</button>
    <img src="img/1.jpg" alt="动漫大图" width="200px" height="200px" />

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
      $("button").click(function() {
        alert($("img").attr("src"));
        $("img")
          .attr("src", "img/2.jpg")
          .attr("title", "人物大图")
          .attr({ width: "300px", height: "300px" });
      });
    </script>
  </body>

val() ; 获得表单元素中的value值
val(“x”) 修改表单元素中的value值
html(); 获得元素中的内容（标签+文本）
html(“x”) 修改元素中的内容（标签+文本）
text(); 获得元素中的文本
text(“x”) 修改元素中的文本

  <body>
    <button>试试</button>
    <hr />
    <input id="username" />

    <div>
      <h1><i>前端学习</i></h1>
      <h2></h2>
      <h3></h3>
    </div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function() {
            alert($("#username").val());
            $("h2").html($("h1").html());// 获取h1中<i>前端学习</i>并放入h2中,放入h2中带有标签效果
            $("h2").text($("h1").html());// 获取h1中<i>前端学习</i>并放入h2中,放入h2中没有标签效果，此时标签也算内容
            $("h3").text($("h1").text());
        });
    </script>
  </body>

样式函数

css( “属性”); 获得该属性值
css( “属性”,“值”); 设置属性的值
css( { json} ); 设置多个属性的值
width(); 获得元素的宽度
width( number ); 修改元素的宽度
height(); 获得元素的高度
height( number ); 修改元素的高度

  <style>
      #div1{
          width: 300px;
          height: 300px;
          background-color: red;
      }
      #div2{
          width: 300px;
          height: 300px;
          background-color: black;
      }
  </style>

  <body>
      <button id="btn1">试试</button>
      <button id="btn2">试试</button>

    <div id="div1"></div>
    <div id="div2"></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function() {
            alert($("#div1").css("background-color"));
            $("#div1").css("background-color","orange").width("100px").height("100px");
        });
        $("#btn2").click(function() {
            $("#div2").css({
                width:"500px",
                height:"500px",
                borderRadius:"50%",
            });
        });
    </script>
  </body>

类样式函数

addClass(); 为元素添加类样式
removeClass(); 将元素的类样式移除
toggleClass(); 样式的切换（有->无，无->有）

  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .a {
      background-color: orange;
      border-radius: 50%;
    }
    .b {
      border: 3px dashed black;
      opacity: 0.6;
    }
    .c{
        color: blue;
        font-family: 行书;
    }
  </style>

  <body>
    <button id="btn1">试试</button>
    <button id="btn2">切换</button>
    <div></div>
    <h1><i>前端学习</i></h1>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
      $("#btn1").click(function() {
        $("div").addClass("a b");
      });
      $("#btn2").click(function() {
        $("h1").toggleClass("c");
      });
    </script>
  </body>

节点操作

工厂函数$()用于获取或创建节点；如：var newli = $(“<li>” + content + “<li/>”);

插入子节点

语法	功能
append(content)	$(A).append(B)表示将B追加到A中，如：$(“ul”).append($newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中，如：$newNode1.appendTo(“ul”);
prepend(content)	$(A). prepend (B)表示将B前置插入到A中，如：$(“ul”). prepend ($newNode1);
prependTo(content)	$(A). prependTo (B)表示将A前置插入到B中，如：$newNode1. prependTo (“ul”);

  <body>
    <input type="text" placeholder="请输入添加的内容" />
    <button id="btn1">从后添加</button>
    <button id="btn2">从前添加</button>

    <ul>
      <li>金瓶梅</li>
      <li>貂蝉往事</li>
      <li>东京热不热</li>
    </ul>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
      $("#btn1").click(function() {
        var liContent = $("input").val();
        var newli = $("<li>" + liContent + "</li>"); // 通过工厂函数创建li新节点
        $("ul").append(newli);
        // newli.appendTo("ul");
      });
      $("#btn2").click(function() {
        var liContent = $("input").val();
        var newli = $("<li>" + liContent + "</li>"); // 通过工厂函数创建li新节点
        $("ul").prepend(newli);
        // newli.prependTo("ul");
      });
    </script>
  </body>

插入同辈节点

语法	功能
after(content)	$(A).after (B)表示将B插入到A之后，如：$(“ul”).after($newNode1);
insertAfter(content)	$(A). insertAfter (B)表示将A插入到B之后，如：$newNode1.insertAfter(“ul”);
before(content)	$(A). before (B)表示将B插入至A之前，如：$(“ul”).before($newNode1);
insertBefore(content)	$(A). insertBefore (B)表示将A插入到B之前，如：$newNode1.insertBefore(“ul”);

  <body>
    <input type="text" placeholder="请输入添加的内容" />
    <button id="btn1">从后添加</button>
    <button id="btn2">从前添加</button>

    <ul>
      <li>金瓶梅</li>
      <li>貂蝉往事</li>
      <li>东京热不热</li>
    </ul>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
      $("#btn1").click(function() {
        var liContent = $("input").val();
        var newli = $("<li>" + liContent + "</li>"); // 通过工厂函数创建li新节点
        $("li:last").after(newli);
        // newli.insertAfter("li:last");   
      });
      $("#btn2").click(function() {
        var liContent = $("input").val();
        var newli = $("<li>" + liContent + "</li>"); // 通过工厂函数创建li新节点
        $("li:first").before(newli);
        // newli.insertBefore("li:first");
      });
    </script>
  </body>

替换节点
replaceWith()
replaceAll() 不是替换所有节点的意思，与上面的方法功能相同，对象不同

  <body>
    <input type="text" placeholder="请输入添加的内容" />
    <button id="btn1">替换节点</button>

    <ul>
      <li>金瓶梅</li>
      <li>貂蝉往事</li>
      <li>东京热不热</li>
    </ul>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
      $("#btn1").click(function() {
        var liContent = $("input").val();
        var newli = $("<li>" + liContent + "</li>"); // 通过工厂函数创建li新节点
        // $("li:last").replaceWith(newli);
        newli.replaceAll($("li:last"));  
      });
    </script>
  </body>

复制节点
clone()

  <body>
    <button id="btn1">克隆</button>

    <ul>
      <li>金瓶梅</li>
      <li>貂蝉往事</li>
      <li>东京热不热</li>
    </ul>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
      $("#btn1").click(function() {
        $("li:first").clone().insertAfter("li:last"); // 复制第一个并添加到最后一个节点后面
      });
    </script>
  </body>

删除节点
remove()删除整个节点
empty()清空节点内容

  <body>
    <button id="btn1">清空</button>
    <button id="btn2">删除</button>

    <ul>
      <li>金瓶梅</li>
      <li>貂蝉往事</li>
      <li>东京热不热</li>
    </ul>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
      $("#btn1").click(function() {
        $("li:first").empty();// 清空第一个节点中的内容，节点还在
      });
      $("#btn2").click(function() {
		$("li:first").remove(); // 删除第一个节点
      });
    </script>
  </body>

遍历节点

祖先元素

用于向上遍历 DOM 树的方法

parent() 返回被选元素的直接父元素，仅仅是上一级（找爸爸）
parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分

  <body>
    <p><button>测试</button></p>
    <ul>
      <li>a</li>
      <li>
        b
      </li>
      <li><b>c</b></li>
    </ul>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function() {
            alert($("b").parent().html());
            alert($("b").parents("ul").html());
        });
    </script>
  </body>

同辈元素

next() 获取紧邻匹配元素之后的元素
prev() 获取紧邻匹配元素之前的元素
siblings( [选择器] ) 获取位于匹配元素前面和后面的所有同辈元素

  <body>
    <p><button>测试</button></p>
    <ul>
      <li>a</li>
      <li>
        b
      </li>
      <li><b>c</b></li>
    </ul>
    <h1>我是ul的同辈下面第一个元素</h1>
    <h1>我是ul的同辈下面第二个元素</h1>
    <p id="x">p3</p>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function() {
            alert($("b").parent().html());
            alert($("b").parents("ul").html());
            alert($("ul").next().text()); // 紧邻的下一个元素
            alert($("ul").prev().html());// 紧邻的上一个元素
            alert($("ul").siblings("#x").text()); // 所有的兄弟中，id=x的
            var arr = $("ul").siblings();
            for(var i=0; i<arr.length; i++) {
                console.log(arr[i]);
            }
        });
    </script>
  </body>

后代元素

children( [selector] ) 方法返回被选元素的所有直接子元素，“孩子”

<button>测试</button>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
       //var x =  $("ul").children().text(); //所有子节点：abc
       var x =  $("ul").children("li:first").text();  //ul中的第一个子节点
       alert(x);
    });
</script>

find( 选择器 ) 方法返回被选元素的后代元素，一路向下直到最后一个后代。必须指定选择器，不然不知道要找什么元素

<button>测试</button>
<ul>
    <li>盘古</li>
    <li>蚩尤</li>
    <li>刑天
        <p>龚工</p>
    </li>
    <h3>祝融</h3>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        //var x = $("ul").find("p").text(); //在ul中查找p元素，忽略层级
        //var x = $("ul").find("h3").text(); //在ul中查找h3元素，忽略层级
        var x = $("ul").find().text(); // 找什么？不知道！
        alert(x);
    });
</script>

元素的过滤

first()：过滤第一个元素
last()：过滤最后一个元素
eq(index)：过滤到下标为index的元素
not()：除了什么之外的元素
is()：返回布尔，判断是不是这种元素

<button>测试</button>
<ul>
    <li>盘古</li>
    <li>蚩尤</li>
    <li>刑天</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        //var x = $("li").first().text(); // 第一个li
        //var x = $("li").last().text(); // 最后一个li
        //var x = $("li").eq(1).text(); // 下标为1的li
        //var x = $("li").not("li:eq(1)").text(); // 除了下标为1的其余所有li
        var x = $("li").parent().is("ul"); // 返回布尔型，li的父节点是不是ul

        alert(x);
    });
</script>

远道学java

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【jQuery】

jQuery介绍jQuery由美国人John Resig（约翰·莱西格）于2006年创建jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装它的设计思想是write less,do more实现隔行变色效果，JavaScript要循环加判断，而jQuery只需一句关键代码jQuery能做什么?访问和操作DOM元素控制页面样式对页面事件进行处理扩展新的jQuery插件与Ajax技术完美结合jQuery能做的JavaScript也都能做，
复制链接

扫一扫