JQuery

于 2023-09-27 22:30:09 发布
阅读量44 收藏
点赞数
文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48114126/article/details/133364874
版权

1. 概念

JQuery是一个JavaScript函数库，jQuery是一个写得少，做得多的JavaScript库

包含以下功能：

  • HTML元素提取

  • HTML元素操作

  • CSS操作

  • HTML事件函数

  • JavaScript特效和动画

  • HTML DOM遍历和修改

  • AJAX

  • Utilities

除此之外，JQuery还提供了大量的插件，jQuery 是目前最流行的 JS 框架

2. JQuery的安装

2.1 JQuery的版本

jQuery版本有很多，分为1.x 2.x 3.x

1.x版本：能够兼容IE678浏览器，国内多数网站还在使用1.x的版本

2.x版本：不兼容IE678浏览器

1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。

3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

2.2 JQuery的下载

Production version - 用于实际的网站中，已被精简和压缩。

Development version - 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从 jquery.com 中下载

2.3 JQuery的使用

JQuery库是一个JavaScript文件，可以在HTML页面通过script标签引用。（可直接拖拽到头标签中）

<head>
    <script src = "jquery-1.11.1.js"></script>
</head>

3. JQuery语法结构

JQuery语法就是通过选取HTML元素，并对选取的元素执行某些操作（actions）

3.1 基础语法： $(selector).action()

说明：美元符号定义 jQuery

选择符（selector）“查询"和"查找” HTML 元素

jQuery 的 action() 执行对元素的操作

3.2 文档就绪事件

就是文件加载事件，为了防止文档在完全加载之前就运行了JQuery代码，即在dom加载完之后才可以对dom进行操作，否则选中的元素可能没加载完，找不到操作对象

$(document).ready(function(){
   //JQuery代码 
});

简写
$(function(){
    
})

JQuery中的ready与JS中的onload区别：

window.onload$(document).ready()
执行次数只会执行一次，如果执行第二次，第一次执行的会被第二次覆盖可执行多次，不会覆盖之前执行结果
执行时机等待网页全部(包括图片)加载完之后执行包裹的代码只需等待网页中的dom结果加载完就可以执行
简写方式$(function(){});

4. JQuery选择器

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存

在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

4.1 元素/标签选择器：$(“tag名”)

$(“标签名”)

<div>div1</div>
<div id="div2">div2</div>
<div class="mydiv">div3</div>

<script>
    //文档就绪事件：
    $(document).ready(function () {
    //编写jQuery
    });
    $(function () {
    //1、标签选择器：
    //获取所有的div元素（集合）
        var divList = $("div");
        console.log(divList);//jQuery的对象
        console.log(divList.length);
        for (var i = 0; i < divList.length; i++) {
            console.log(divList[i]);//js的对象
            //将js对象转换为jQuery的对象
            console.log($(divList[i]));
        }
    });
</script>

4.2 id选择器：$(“#id名”)

$(“#div2”) //id唯一

4.3 class选择器：$(“.class名”)

$(“.mydiv”)

4.4 全局选择器：$(“*”)

匹配所有元素

4.5 并集选择器 ：$(“div,ul,li,.mydiv”)

将每一个选择器匹配到的元素集合一并返回

4.6 后代选择器 ：$(“ancestor descendant”)

在指定祖先元素下匹配所有后代元素

4.7 子选择器：$(“parent > child”)

再给定的父元素下匹配所有子元素

4.8 相邻选择器：$(“prev + next”)

匹配所有紧接在 prev 元素后的 next 元素

4.9 同辈选择器：$(“prev ~ siblings”)

匹配 prev 元素之后的所有同辈 siblings 元素

image-20230911190101769

4.10 属性选择器

匹配包含给定属性的元素

$("div[id]");//获取所有有id属性的div的元素集合
$("div[class]");//获取所有有class属性的div的元素集合
$("input[name='userName']");//获取所有input标签中name属性是userName元素的集合
$("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合
$("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合
$("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合
$("input[id][name^='user']");//选择器将选取所有具有非空 id 属性并且 name 属性以 'user' 开头的 <input> 元素

= / !=

image-20230911190854082

4.11 可见性选择器

匹配所有可见或不可见的元素

$("div:visible");

$("input:hidden");

5. JQuery常用函数

5.1 标签内容、标签属性、标签样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        .redBg {
            background-color: red;
        }

        .fontColor {
            color: gold;
        }
    </style>
    <script src="../jquery/js/jquery-1.12.4.js"></script>
    <script>
        //1、与内容相关的函数
        function textFun() {
            var str1 = $("div").html();//获取的是第一个匹配元素的围堵标签中的所有内容，包括了嵌套在内部的标签
            console.log(str1);
            var str2 = $("div").text();//获取的是第一个匹配元素的围堵标签中的所有文本，不包含标签的内容
            console.log(str2);
            var str3 = $("div").val();//val()只能用在表单项元素中，div不是表单元素，所以val()获取不到任何内容
            var str4 = $("input").val();//input是表单项元素，val()可以获取到
            console.log(str3);
            console.log(str4);
        }

        //2、与属性相关的函数
        function attrFun() {
            var img = $("img");
//设置属性
            img.attr("src", "../img/cat.jpg");
            img.attr("title", "不服！");
//移除属性
            img.removeAttr("title");
            //获取属性
            var src = img.attr("src");
            var title = img.attr("title");
            console.log(src + "====" + title);
//获取checked属性使用prop函数，获取到的值是boolean类型，表示是否被选中
            var list = $("input[type='radio']");
            for (var i = 0; i < list.length; i++) {
                var flag = $(list[i]).prop("checked");
                console.log("checked=" + flag);
            }
        }

        //3、与css相关的函数
        function cssFun() {
//给获取的元素添加、删除、切换已有的样式 PS：样式一定是在样式表中提前定义好的
            $("div").addClass("redBg");
            $("div").addClass("redBg fontColor");
            $("div").removeClass("fontColor");
            $("div").removeClass();//没有参数的时候直接移除所有的样式

//给所有的元素添加样式，样式直接添加，无需提前定义
            $("input").css("border-color", "blue");
            $("input").css({"color": "red", "border-color": "green"});
        }

        function changeCss() {
            $("div").toggleClass("fontColor");//匹配元素如果有当前的样式就删除，如果没有就添加
        }

        $(function () {
            cssFun();
        });
    </script>

</head>
<body>
    <button type="button" onclick="changeCss()">切换div样式</button>
    性别：<input type="radio" value="0" name="gender" checked="checked"/>
    女
    <input type="radio" value="1" name="gender"/>男
    <img src="../jquery/img/10.jpg" height="300" width="289" title="服不服"/>
    <div>div1
        <button type="button">普通按钮1</button>
    </div>
    <div>div2
        <button type="button">普通按钮2</button>
    </div>
    <input name="userName" value="贾宝玉"/>
    <input name="password" value="123456"/>
</body>
</html>

.html() 是一个 jQuery 方法，用于获取或设置指定元素的 HTML 内容。

如果不传递参数，.html() 方法将返回首个匹配元素的 HTML 内容。例如：

javascript复制代码var htmlContent = $('.my-element').html();
console.log(htmlContent);

上述代码将获取 class 为 “my-element” 的第一个元素的 HTML 内容，并将其打印到控制台上。

如果传递一个参数，.html() 方法将设置指定元素的 HTML 内容为提供的参数。例如：

javascript复制代码$('.my-element').html('<p>This is the new HTML content.</p>');

上述代码将把 class 为 “my-element” 的所有元素的 HTML 内容替换为 <p>This is the new HTML content.</p>。

需要注意的是，.html() 方法会覆盖元素原有的 HTML 内容。如果您想要在元素的内容末尾添加新的 HTML，可以使用 .append() 方法。而如果您只想获取纯文本内容，可以使用 .text() 方法。

6. jQuery与js对象的转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery与js对象的转换</title>
    <script type="text/javascript" src="../jquery/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //获取所有的div元素的集合
            var list = $("div");
            //遍历集合
            for (var i = 0; i < list.length; i++) {
                //list[i] 是js对象，打印出来是HTMLxxxElement格式的对象都是js对象，
                //操作的时候都要遵循js对象的操作方法,
                console.log(list[i]);
                //获取元素内容,使用innerHTML属性
                console.log(list[i].innerHTML)
                //将js对象转换为jQuery对象，可以使用所有jQuery方法
                console.log($(list[i]));
                //获取元素内容使用html()函数
                console.log($(list[i]).html())

            }
        });
    </script>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

image-20230911200459495

7. JQuery中的事件

页面对不同访问者的响应叫做事件、事件处理程序指的是当html中发生某些事件时所调用的方法

7.1 常用DOM事件列表

鼠标事件键盘事件表单事件文档/窗口事件
clickkeydownsubmitload
dblclickkeyupchange
mouseoverfocus
mouseoutblur
hover

7.2 常用的JQuery事件方法

在JQuery中，大多数DOM事件都有一个等效的jquery方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件</title>
  <script type="text/javascript" src="../jquery/js/jquery-1.12.4.js" ></script>
  <script>
    //页面加载事件
    $(function(){
      //给所有的button绑定单击事件
      $("button").click(function(){
        //alert(this);//this是当前对象，哪个按钮触发的单击事件this就是那个按钮，this此时是JS对象
        $(this).css("color","red");//给当前的触发对象添加一个css
      });
      //给所有的超链接绑定鼠标移上事件
      $("a").mouseover(function(){
        var str=$(this).html();
        $(this).html("鼠标移上-"+str);
      });

      $("a").hover(function(){
        $(this).css("color","red");
      });

      //给所有的超链接绑定鼠标移出事件
      $("a").mouseout(function(){
        var str=$(this).html();
        $(this).html(str.substr(5));
        $(this).css("color","black");
      });
    });
  </script>
</head>
<body>
<a href="#">首页</a> &nbsp;
<a href="#">零食</a> &nbsp;
<a href="#">鲜花</a> &nbsp;
<button type="button">普通按钮1</button>
<button type="button">普通按钮2</button>
<button type="button">普通按钮3</button>
</body>
</html>

mouseenter鼠标移入、mouseover鼠标移上、hover鼠标悬停

  1. mouseenter

  • 当鼠标指针从一个元素的外部进入该元素时触发。

  • 仅在鼠标从外部进入元素时触发一次，不会在元素内部移动时重复触发。

  • 不会冒泡到元素的父元素。

  • 是一个冒泡事件。

示例代码：

javascript复制代码$('.my-element').on('mouseenter', function() {
  // 处理鼠标移入事件的代码
});
  1. mouseover
  • 当鼠标指针从一个元素的外部进入该元素或者进入元素的子元素时触发。
  • 在鼠标从外部进入元素时触发一次，但在元素内部移动时会重复触发。
  • 会冒泡到元素的父元素。
  • 是一个冒泡事件。

示例代码：

javascript复制代码$('.my-element').on('mouseover', function() {
  // 处理鼠标移上事件的代码
});
  1. hover

  • hover 是一个用于处理鼠标悬停事件的 jQuery 快捷方法。它实际上是将 mouseenter 和 mouseleave 事件结合起来使用。

  • hover 方法接受两个函数作为参数，第一个函数在鼠标进入选定元素时触发，第二个函数在鼠标离开选定元素时触发。

示例代码：

javascript复制代码$('.my-element').hover(
  function() {
    // 处理鼠标进入事件的代码
  },
  function() {
    // 处理鼠标离开事件的代码
  }
);

上述代码中，当鼠标进入 class 为 “my-element” 的元素时，第一个函数将被触发；当鼠标离开该元素时，第二个函数将被触发。hover 方法的优势在于简洁明了，同时也提供了对鼠标悬停事件的完整处理。它使得在处理悬停事件时更加方便和简单。

总结来说，“鼠标移入”（mouseenter）只在鼠标从外部进入指定元素时触发一次，不会在元素内部移动时重复触发，而“鼠标移上”（mouseover）在鼠标从外部进入指定元素或者进入其子元素时触发，并在元素内部移动时重复触发。

8. JQuery操作DOM

8.1 元素的增加

  • append() - 在被选元素的结尾插入内容

  • prepend() - 在被选元素的开头插入内容

  • after() - 在被选元素之后插入内容

  • before() - 在被选元素之前插入内容

  • appendTo 是一个 jQuery 方法，用于将指定的元素添加到目标元素内部的末尾位置。

    语法如下：

    javascript复制代码$(element).appendTo(target);
    • $(element)：要添加的元素，可以是 HTML 字符串、DOM 元素或 jQuery 对象。
    • target：目标元素，将成为 element 的父级元素。

    示例代码：

    html复制代码<div id="targetElement">目标元素</div>
javascript复制代码var newElement = $('<p>新元素</p>');
newElement.appendTo('#targetElement');

    上述代码将创建一个 <p> 元素，并将其添加到 id 为 “targetElement” 的 <div> 元素中。结果会使得 <div> 元素的内容为：

    html复制代码<div id="targetElement">
  目标元素
  <p>新元素</p>
</div>

    使用 appendTo 方法时，被添加的元素会成为目标元素的最后一个子元素。如果需要将元素添加到其他位置，可以使用类似的方法（例如 prependTo、insertBefore、insertAfter）来实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档处理</title>
    <style>
        div {
            background: lavenderblush;
            padding: 20px;
        }

        p {
            background: lemonchiffon;
            padding: 20px;
        }
    </style>
    <script type="text/javascript" src="../jquery/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
// append() - 在被选元素的结尾插入内容
            $("#btn1").click(function () {
                $("div").append("<br/>新添加的文本<br/>");
                $("div").append("<p>新添加的段落</p>");
            });
//prepend() - 在被选元素的开头插入内容
            $("#btn2").click(function () {
                $("div").prepend("<br/>新添加的文本<br/>");
                $("div").prepend("<p>新添加的段落</p>");
            });
//after() - 在被选元素之后插入内容
            $("#btn3").click(function () {
                $("div").after("<br/>新添加的文本<br/>");
                $("div").after("<p>新添加的段落</p>");
            });
//before() - 在被选元素之前插入内容
            $("#btn4").click(function () {
                $("div").before("<br/>新添加的文本<br/>");
                $("div").before("<p>新添加的段落</p>");
            });
        });
    </script>
</head>
<body>
<button id="btn1">append</button>
<button id="btn2">prepend</button>
<button id="btn3">after</button>
<button id="btn4">before</button>
<div>
    div1
</div>
<p>p1</p>
</body>
</html>

设置一个按钮，点击按钮生成新的按钮，并且新按钮具有同样的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery/js/jquery-1.12.4.js"></script>
    <script>
      $(function () {
		// 复制原按钮的功能到新按钮
        $("#btn1").click(function () {
          var btn = $('<button class="btn">点击</button>')
          btn.click(function () {
            $(this).clone(true).insertAfter($(this));
          })
         /*
             // 使用事件委托，在父级元素上监听子元素的点击事件
   			 $('#buttonContainer').on('click', '.generatedButton', function() {
      		 $(this).clone(true).insertAfter($(this));
   			 });
          */     
          //将新按钮添加到容器中
          btn.appendTo("#div")
        })
      })
    </script>
</head>
<body>
  <button id="btn1">点击</button>
<div id="div"></div>
</body>
</html>

8.2 元素的克隆

clone(boolean) 克隆匹配的DOM元素并选中这些克隆的副本

语法： $(selector).clone(includeEvents);

参数：可选。布尔值，规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档处理</title>
    <style>
        div {
            background: lavenderblush;
            padding: 20px;
        }

        p {
            border: solid 1px red;
            background: lemonchiffon;
            padding: 20px;
        }
    </style>
    <script type="text/javascript" src="../jquery/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $("#btn3").click(function () {
                alert("试试就试试！");
            });
            // clone(true)
            $("#btn1").click(function () {
                $("p").clone(true).appendTo("div");
            });
            //clone(false)
            $("#btn2").click(function () {
                $("p").clone(false).appendTo("div");
            });
        });
    </script>
</head>
<body>
<button id="btn1">克隆元素-true</button>
<button id="btn2">克隆元素-false</button>
<p>
    要被克隆的段落
    <button id="btn3">点击我试试</button>
</p>
<div>
    div1
</div>
</body>
</html>

8.3 元素的替换

  • replaceWith() -将所有匹配的元素替换成指定的HTML或DOM元素。

  • replaceAll()-用匹配的元素替换掉所有 selector匹配到的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档处理--元素替换</title>
    <style>
        div {
            background: lavenderblush;
            padding: 20px;
        }

        p {
            background: lemonchiffon;
            padding: 20px;
        }
    </style>
    <script type="text/javascript" src="../jquery/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //replaceWith() -将所有匹配的元素替换成指定的HTML或DOM元素。
            $("#btn1").click(function () {
                //$("div").replaceWith("<br/>新替换的文本<br/>");
                $("div").replaceWith("<p>新替换的段落</p>");//所有的div被后面的参数替换掉
            });
            //replaceAll()-用匹配的元素替换掉所有 selector匹配到的元素。
            $("#btn2").click(function () {
                $("<div>新的div</div>").replaceAll("p");//用前面的内容替换掉所有的段落p
            });
        });
    </script>
</head>
<body>
<button id="btn1">replaceWith</button>
<button id="btn2">replaceWithAll</button>
<div>
    div1
</div>
<br/>
<div>
    div2
</div>
<p>p1</p>
<p>p2</p>
</body>
</html>

8.4 元素的删除

  • remove() - 删除被选元素（及其子元素）

  • empty() - 从被选元素中删除子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档处理--元素删除</title>
    <style>
        div {
            background: lavenderblush;
            padding: 20px;
        }

        p {
            background: lemonchiffon;
            padding: 20px;
        }
    </style>
    <script type="text/javascript" src="../jquery/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //remove() - 删除被选元素（及其子元素）
            $("#btn1").click(function () {
                $("div").remove();//所有的div元素及其子元素被删除
            });
            //remove(筛选条件) - 删除符合筛选条件的元素
            $("#btn2").click(function () {
                $("div").remove(".test");//所有的div元素中引用了class="test"的div被删除
            });
            //empty() - 从被选元素中删除子元素
            $("#btn3").click(function () {
                $("div").empty();//删除div中的所有子元素
            });
        });
    </script>
</head>
<body>
<button id="btn1">remove()</button>
<button id="btn2">remove(筛选条件)</button>
<button id="btn3">empty()</button>
<div>
    div1
    <p>div1中的段落1</p>
    <p>div1中的段落2</p>
    <span style="background: lightblue; padding: 10px;">div1中的span</span>
</div>
<br/>
<div class="test">
    div2
</div>
<p>p1</p>
</body>
</html>

9. JQuery效果

9.1 隐藏与显示

语法：

  • $(selector).hide([speed,callback]);

  • $(selector).show([speed,callback]);

  • $(selector).toggle([speed,callback]);

参数说明：

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

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档处理</title>
    <script type="text/javascript" src="../jquery/js/jquery-1.12.4.js"></script>
    <style>
        div {
            background: lightblue;
            padding: 20px;
        }

        p {
            background: lavenderblush;
            padding: 20px;
        }
    </style>
    <script>
        $(function () {
            $("#btnHide").click(function () {
//$("div").hide();
//$("div").hide(2000);
                $("div").hide(2000, function () {
                    alert("隐藏完成！");
                });
            });
            $("#btnShow").click(function () {
//$("div").show();
//$("div").show(2000);
                $("div").show(2000, function () {
                    alert("显示完成！");
                });
            });
            $("#btnToggle").click(function () {
//$("p").toggle();
//$("p").toggle(2000);
                $("p").toggle(2000, function () {
                    alert("切换完成！");
                });
            });
        });
    </script>
</head>
<body>
<button id="btnHide">隐藏-div</button>
<button id="btnShow">显示-div</button>
<button id="btnToggle">切换显示和隐藏-p</button>
<div>div1</div>
<br/>
<div>div2</div>
<p style="display: none;">p1</p>
<p>p2</p>
</body>
</html>

9.2 淡入和淡出

语法

  • $(selector).fadeIn([speed,callback]);

  • $(selector).fadeOut([speed,callback]);

  • $(selector).fadeToggle([speed,callback]);

参数说明：

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

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>效果</title>
    <script type="text/javascript" src="../jquery/js/jquery-1.12.4.js"></script>
    <style>
        div {
            background: lightblue;
            padding: 20px;
        }

        p {
            background: lavenderblush;
            padding: 20px;
        }
    </style>
    <script>
        $(function () {
            $("#btnIn").click(function () {
                //$("div").fadeIn();
                //$("div").fadeIn(2000);
                $("div").fadeIn(2000, function () {
                    alert("淡入完成！");
                });
            });
            $("#btnOut").click(function () {
                //$("div").fadeOut();
                //$("div").fadeOut(2000);
                $("div").fadeOut(2000, function () {
                    alert("淡出完成！");
                });
            });
            $("#btnToggle").click(function () {
                //$("p").fadeToggle();
                //$("p").fadeToggle(2000);
                $("p").fadeToggle(2000, function () {
                    alert("切换完成！");
                });
            });
        });
    </script>
</head>
<body>
<button id="btnIn">淡入-div</button>
<button id="btnOut">淡出-div</button>
<button id="btnToggle">切换淡入淡出-P</button>
<div>div1</div>
<br/>
<div>div2</div>
<p style="display: none;">p1</p>
<p>p2</p>
</body>
</html>

/

小悟空GK
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery选择器
m0_57774967的博客
06-16 4552
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
jquery1.8.3
09-26
jquery1.8.3官方包，包含jquery-1.8.3.min.js和jquery-1.8.3.js两个文件。
jQuery
CJW的博客
07-28 9515
jQuery jQuery是一个JavaScript函数库，是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能： HTML 元素 选取 HTML 元素 操作 CSS 操作 HTML 事件函数 JavaScript 特效 动画 HTML DOM 遍历和修改 AJAX 除此之外，JQuery还提供了大量的插件。目前兼容于所有主流浏览器。 jQuery 语法 通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。jQu
JQuery的引用
zwjl1017的博客
04-01 3954
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery基础
luckyboy!的博客
11-16 3313
jQuery由美国人John Resig于2006年创建。jQuery是目前最流行的JavaScript程序，它是对JavaScript对象和函数的封装。它的设计思想是write less,do more。
jQuery 遍历对象
m0_67458498的博客
03-28 4147
遍历对象 $.each(对象，function(k 对象属性变量，v对象属性值变量） var cat={ name:'kitty'; age:5 climb:function(){ console.log('在爬树') } $.each (cat,function(k,v){ console.log(k+':'+v); }) 遍历数组 $.each(数组，function(k元素下标变量，v元素值变量{});) var color=['red','blu
jquery移除标签
qq_35086941的博客
04-28 3623
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function
jquery在线引用
jiufu_的博客
07-15 4976
直接引如下的即可 <scripttype="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQuery的下载及安装
weixin_64812436的博客
10-17 4902
1、下载地址：https://jquery.com/，点击Download jQuery下载 2、继续点击如下图所示 3、点击后会出现如图所示清况，先Ctrl+A全选，再Ctrl+C复制 4、在 vs code 新建js文件，名字自己取，我取的是jquery.js 5、使用时，用script标签导入jquery.js文件，即可正常调用jquery里面的方法
jQuery-3.4.1下载
cheng1a的博客
02-11 5006
jQuery-3.4.1下载 链接：https://pan.baidu.com/s/1Z1mjG00jzSzXEmXNtvFT8g 提取码：0430
jQuery引入方式
最新发布
m0_67388537的博客
07-07 2750
jQuery的两种引入方式
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery版本2.2.4
03-04
1、原生js使用太繁琐，使用jquery。 2、免费下载，希望大家爱上学习。 3、后面会出一个简单的使用方法。
jquery-migrate3.4版本
05-17
jquery-migrate3.4版本
前端+jQuery+实现烟花特效
05-02
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery验证码
10-19
jQuery实现web开发验证码，无需后台验证。简单方便实用
jquery1.7.2
08-28
jquery1.7.2中文文档，这是一个chw格式的中文文档，方便查询

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值