2021-03-16——Jquery基础

最新推荐文章于 2022-03-28 23:32:11 发布

伟1314520

最新推荐文章于 2022-03-28 23:32:11 发布

阅读量156

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_53371536/article/details/114891224

版权

Jquery基础

jQuery 是一个 JavaScript 库。[.js]
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。

jQuery 简介

您需要具备的基础知识

在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：

HTML

CSS

JavaScript

jQuery 库可以通过一行简单的标记被添加到网页中。

例如:

1.什么是 jQuery ？

jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件]

jQuery库包含以下功能：

1.HTML 元素选取

2.HTML 元素操作

3.CSS 操作

4.HTML 事件函数

5.JavaScript 特效和动画

6.HTML DOM 遍历和修改

7.AJAX

https://jquery.com/ 官网

jQuery 安装

网页中添加 jQuery

可以通过多种方法在网页中添加 jQuery。您可以使用以下方法：

从 jquery.com 下载 jQuery 库

Download the compressed, production jQuery 3.6.0

Download the uncompressed, development jQuery 3.6.0

如果开发测试使用development jQuery 3.6.0---jquery-3.6.0.js,有注释可以查看具体的内容。

如果发布使用production jQuery 3.6.0---jquery-3.6.0.min.js，小，节省内存。

通过script标记导入到网页中

<html>

         <head>

                  <meta charset="utf-8">

                  <title></title>

                  <script src="jquery-3.5.1.js"></script>

                  <script>

                          $(function(){

                                   alert("测试导入jquery");

                          });

                  </script>

         </head>

         <body>

         </body>

</html>

通过网络地址导入jquery
<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title></title>

                  <!--<script src="jquery-3.5.1.js"></script>-->

                  <!--<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>-->

                  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

                  <script>

                          $(function(){

                                   alert("测试导入jquery");

                          });

                  </script>

         </head>

         <body>

         </body>

</html>

jQuery 语法

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

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

1.美元符号定义 jQuery

2.选择符（selector）"查询"和"查找" HTML 元素

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

实例:

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title></title>

                  <script src="jquery-3.5.1.js"></script>

                  <script>

                          $(function(){

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

                                   $("p").css("background-color","yellow");

                                   $("p.test1").css("color","red");

                                   $("#test2").css("color","blue");

                          });

                  </script>

         </head>

         <body>

                    <p>测试jquery的基础语法1</p>

                    <p class="test1">测试jquery的基础语法2</p>

                    <p>测试jquery的基础语法3</p>

                    <p id="test2">测试jquery的基础语法4</p>

         </body>

</html>

文档就绪事件---就是页面初始化事件

Javascript的页面初始化事件

body中提供οnlοad=“函数”
window.οnlοad=function(){}

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title></title>

                  <!--<script src="jquery-3.5.1.js"></script>-->

                  <script>

                          /*

                          function  testJavascriptonload(){

                                    alert("javascript的页面初始化事件11");

                          }

                          */

                     //可以出现多个，但是只执行最后一个，不会挨个执行

                     window.onload=function(){

                             alert("javascript的页面初始化事件22");

                     }

                  </script>

         </head>

         <!--<body onload="testJavascriptonload()">-->

         <body>

         </body>

</html>

Jquery的页面初始化事件

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title></title>

                  <script src="jquery-3.5.1.js"></script>

                  <script>

                          /*

                          //原始做法

                          $(document).ready(function(){

                                   alert("jquery的页面初始化事件--原始做法");

                          });

                          */

                    

                          //简化版本

                          $(function(){

                                   alert("jquery的页面初始化事件--简化版本11");

                          });

                          $(function(){

                                   alert("jquery的页面初始化事件--简化版本22");

                          });

                          $(function(){

                                   alert("jquery的页面初始化事件--简化版本33");

                          });

                  </script>

         </head>

         <body>

         </body>

</html>

1.jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

1.元素选择器

jQuery 元素选择器基于元素名选取元素。

2.#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

3..class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title></title>

                  <script src="jquery-3.5.1.js"></script>

                  <script>

                          $(function(){

                                   //元素选择器

                                   $("p").css("background-color","black");

                                   //.class选择器

                                   $("p.test1").css("color","red");

                                   //id选择器

                                   $("#test2").css("color","blue");

                                   $("p:first").css("color","green");

                                   $("ul li:first").css("font-size","30px");

                                   $("ul li:last-child").css("font-size","40px");

                                   $("[href]").css("font-size","20px");

                                   $(":button").css("width","180px");

                                   $("table").css("width","480px");

                                   $("tr:even").css("background-color","red");

                                   $("tr:odd").css("background-color","blue");

                          });

                  </script>

         </head>

         <body>

                  <p>测试jquery的基础语法1</p>

                  <p class="test1">测试jquery的基础语法2</p>

                  <p>测试jquery的基础语法3</p>

                  <p id="test2">测试jquery的基础语法4</p>

                  <ul>

                          <li>name=zhangsan</li>

                          <li>age=23</li>

                          <li>address=xian</li>

                  </ul>

                  <ul>

                          <li>name=lisi</li>

                          <li>age=23</li>

                          <li>address=xian</li>

                  </ul>

                  <ul>

                          <li><a href="#">name=wangwu</a></li>

                          <li><a href="#">age=23</a></li>

                          <li><a href="#">address=xian</a></li>

                  </ul>

                  <input type="button" value="测试button1"/>

                  <input type="button" value="测试button2"/>

                  <table border="1px">

                          <tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>

                          <tr><td>1003</td><td>王五</td><td>24</td><td>西安</td></tr>

                          <tr><td>1002</td><td>lisi</td><td>25</td><td>西安</td></tr>

                          <tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>

                          <tr><td>1003</td><td>王五</td><td>24</td><td>西安</td></tr>

                          <tr><td>1002</td><td>lisi</td><td>25</td><td>西安</td></tr>

                  </table>

         </body>

</html>

2.jQuery HTML

1.jQuery获取/设置文本元素的值

jQuery获取元素的值 text()、html() 以及 val()

text()---返回所选元素的文本内容

html()--返回所选元素的内容（包括 HTML 标记）

val()----返回表单字段的值

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title></title>

                  <script  src="js/jquery-3.5.1.js"></script>

                  <script>

                          $(function(){

                                   $("#but1").click(function(){

                                            //alert($("#div1").text());

                                            //alert($("#but1").text()); //错误

                                            //alert($("#text1").text());//错误

                                            //alert($("#div1").html());

                                            //alert($("#but1").val());

                                   });

                          });                     

                  </script>

         </head>

         <body>

                   <h1>jQuery获取元素的值  text()、html() 以及 val()</h1>

                   <h2>text()---返回所选元素的文本内容</h2>

                   <h2>html()--返回所选元素的内容（包括 HTML 标记）</h2>

                   <h2>val()----返回表单字段的值</h2>

                   <hr>

                   <input id="but1"  type="button" value="测试" />

                    <input id="text1"  type="text" value="测试text" />

                   <div id="div1">

                            <h1>测试jQuery获取元素的值1</h1>

                            <h1>测试jQuery获取元素的值2</h1>

                   </div>   

         </body>

</html>

2. jQuery设置元素的值 text(value)、html(value) 以及 val(value)

text(value)---设置所选元素的文本内容

html(value)--设置所选元素的内容（包括 HTML 标记）

val(value)----设置表单字段的值

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title></title>

                  <script  src="js/jquery-3.5.1.js"></script>

                  <script>

                          $(function(){

                                   $("#but2").click(function(){

                                            //$("#div2").text("hello,world");

                                            //$("#div2").text("<h1>hello,world</h1>");

                                            $("#div2").html("<h1>hello,world</h1>");

                                            $("#but1").val("测试jqueryh获取元素值");

                                   });

                          });                      

                  </script>

         </head>

         <body>

                   <input id="but2"  type="button" value="测试" />

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

         </body>

</html>

jQuery - 添加元素

append() - 在被选中元素中插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title></title>

                  <style>

                          #div1{

                                    background-color: red;

                                   width: 300px;

                                   height: 300px;

                          }

                  </style>

                  <script  src="js/jquery-3.5.1.js"></script>

                  <script>

                          $(function(){

                                  

                                   $("#but1").click(function(){

                                            $("#div1").append("hello");

                                            $("#div1").append("<h2>hello</h2>");

                                            $("#div1").append("<img src='imgs/avatar5.png'/>");

                                   });

                                  

                            

                                   $("#but2").click(function(){

                                            $("#div1").prepend("hello");

                                            $("#div1").prepend("<h2>hello</h2>");

                                            $("#div1").prepend("<img src='imgs/avatar5.png'/>");

                                    });

                                  

                                   $("#but3").click(function(){

                                            //$("#div1").after("hello");

                                            //$("#div1").after("<h2>hello</h2>");

                                            $("#div1").after("<img src='imgs/avatar5.png'/>");

                                   });

                                  

                                   $("#but4").click(function(){

                                            //$("#div1").before("hello");

                                            //$("#div1").before("<h2>hello</h2>");

                                            $("#div1").before("<img src='imgs/avatar5.png'/>");

                                   });

                          });

                  </script>

         </head>

         <body>

                  <input id="but1" type="button" value="测试append"  />

                  <input id="but2" type="button" value="测试prepend"  />

                  <input id="but3" type="button" value="测试after"  />

                  <input id="but4" type="button" value="测试before"  /><br>

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

         </body>

</html>

jQuery - 删除元素

remove() - 删除被选元素（及其子元素）【有过滤功能】

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

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title></title>

                  <style>

                          #div1{

                                   background-color: red;

                                   width: 300px;

                                   height: 300px;

                          }

                  </style>

                  <script  src="js/jquery-3.5.1.js"></script>

                  <script>

                          $(function(){

                                   $("#but1").click(function(){

                                            $("#div1").empty();

                                   });

                                   $("#but2").click(function(){

                                            $("#div1").remove();

                                   });

                          });

                  </script>

         </head>

         <body>

                  <input id="but1" type="button" value="测试empty()" />

                  <input id="but2" type="button" value="测试remove()" /><br>

                  <div id="div1">

                          <img src='imgs/avatar5.png'/>

                  </div>

         </body>

</html>

3.jquery的CSS 操作

1.为元素添加已经存在的样式

addClass() - 向被选元素添加一个或多个样式类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作

2.设置/获取元素样式

css() - 设置或返回样式属性

css(样式属性名称) 返回被选元素的指定样式属性值。

css(样式属性名称，属性值) 设置被选元素的具有这个样式。

css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title>jquery的CSS 操作</title>

                  <style>

                          .div1{

                                   width: 200px;

                                   height: 200px;

                                   background-color: red;

                          }

                          #div2{

                                   width: 200px;

                                   height: 200px;

                                   background-color: blue;

                          }

                          #div3{

                                   width: 200px;

                                   height: 200px;

                                   background-color: yellow;

                          }

                  </style>

                  <!-- 导入jquery函数库 -->

                  <script src="js/jquery-3.5.1.js"></script>

                  <script>

                          $(function(){

                                   $("#but1").click(function(){

                                            //addClass() - 向被选元素添加一个或多个样式类

                                            $("#div1").addClass("div1");

                                   });

                                   $("#but2").click(function(){

                                            //removeClass() - 从被选元素删除一个或多个类

                                            $("#div1").removeClass("div1");

                                   });

                                   $("#but3").click(function(){

                                            //toggleClass() - 对被选元素进行添加/删除类的切换操作

                                            $("#div1").toggleClass("div1");

                                   });

                                  

                                   $("#but11").click(function(){

                                            //css(样式属性名称) 返回被选元素的指定样式属性值

                                            alert($("#p1").css("font-size"));

                                   });

                                   $("#but22").click(function(){

                                            //css(样式属性名称，属性值) 设置被选元素的具有这个样式。

                                            $("#p2").css("font-size","50px");

                                   });

                                   $("#but33").click(function(){

                                            //css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。

                                            $("#p3").css({"font-size":"50px","color":"red"});

                                   });

                          });

                  </script>

         </head>

         <body>

                  <input id="but1" type="button" value="测试addClass()">

                  <input id="but2" type="button" value="测试removeClass()">

                  <input id="but3" type="button" value="测试toggleClass()">

                  <h1>1.为元素添加已经存在的样式</h1>

                  <h2>addClass() - 向被选元素添加一个或多个样式类</h2>

                  <h2>removeClass() - 从被选元素删除一个或多个类</h2>

                  <h2>toggleClass() - 对被选元素进行添加/删除类的切换操作</h2>

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

                  <h1>2.设置/获取元素样式</h1>

                  <h2>1.css(样式属性名称) 返回被选元素的指定样式属性值。</h2>

                  <h2>2.css(样式属性名称，属性值) 设置被选元素的具有这个样式。</h2>

                  <h2>3.css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。</h2>

                  <input id="but11" type="button" value="测试获取元素指定的样式值">

                  <input id="but22" type="button" value="测试设置被选元素的具有某个样式">

                  <input id="but33" type="button" value="测试设置被选元素具有一组样式">

                  <p id="p1" style="font-size: 30px;color: red;">测试获取元素指定的样式值</p>

                  <p id="p2" >测试设置被选元素的具有某个样式</p>

                  <p id="p3" >测试设置被选元素具有一组样式</p>

         </body>

</html>

4.jQuery 事件

jQuery 事件方法语法

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

页面中指定一个点击事件：

$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$("p").click(function(){ // 动作触发后执行的代码!! });

常用的 jQuery 事件方法

$(document).ready(function) 文档完全加载完后执行函数
click(function) 方法是当按钮点击事件被触发时会调用一个函数
dblclick(function)双击元素时，会发生 dblclick 事件。
mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。
hover(function)方法用于模拟光标悬停事件。
focus(function)当元素获得焦点时，发生 focus 事件。
blur(function)当元素失去焦点时，发生 blur 事件。

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title></title>

                  <script src="jquery-3.5.1.js"></script>

                  <script>

                          $(document).ready(function(){

                                   alert("$(document).ready(function) 文档完全加载完后执行函数");

                          });

                          $(document).ready(function(){

                                   $("#but1").click(function(){

                                            alert("click(function) 方法是当按钮点击事件被触发时会调用一个函数");

                                   });

                                  

                                   $("#but2").dblclick(function(){

                                            alert("dblclick(function)双击元素时，会发生 dblclick 事件。");

                                   });

                                  

                                   $("#h2").mouseenter(function(){

                                            alert("4.mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。");

                                   });

                                   $("#h2").mouseleave(function(){

                                            alert("5.mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。");

                                   });

                                    $("#a1").hover(function(){

                                            alert("6.hover(function)用于模拟光标悬停事件。");

                                   });

                                  

                                   $("#text1").focus(function(){

                                            $(this).val("background-color");

                                   });

                                   $("#text1").blur(function(){

                                      alert($(this).val());

                                   });

                          });

                  </script>

         </head>

         <body>

                  <input id="but1" type="button" value="测试单击事件"><br>

                  <input id="but2" type="button" value="测试双击事件"><br>

                  <h2 id="h2">测试鼠标进入和移出事件</h2>

                  <a id="a1" href="#">测试光标悬停事件</a><br><br><br>

                  <input id="text1" type="text" value="测试获得焦点和失去焦点事件"><br>

         </body>

</html>

5.JavaScript 特效和动画【就是元素的隐藏和显示】

jQuery hide() 隐藏元素

jQuery show() 显示元素

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title></title>

                  <script  src="js/jquery-3.5.1.js"></script>

                  <script>

                          $(function(){

                                   $("#but2").click(function(){

                                            var buttext=$("#but2").val();

                                            if(buttext=="隐藏"){

                                                     //$("#img2").hide();

                                                     //$("#img2").hide(3000);

                                                     $("#img2").hide(5000,function(){

                                                             $("#but2").val("显示");

                                                     });

                                            }

                                            if(buttext=="显示"){

                                                     //$("#img2").show();

                                                     //$("#img2").show(3000);

                                                     $("#img2").show(5000,function(){

                                                             $("#but2").val("隐藏");

                                                     });    

                                            }

                                   });

                          });

                  </script>

         </head>

         <body>

                  <input  id="but2" type="button" value="隐藏"/><br>

                  <img id="img2" src="imgs/avatar.png"/>

         </body>

</html>

jQuery fadeIn() 用于淡入已隐藏的元素。

jQuery fadeOut() 方法用于淡出可见元素。

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title></title>

                  <script  src="js/jquery-3.5.1.js"></script>

                          <script>

                          $(function(){

                                   $("#but3").click(function(){

                                            var buttext=$("#but3").val();

                                            if(buttext=="淡出"){

                                                     //$("#img3").fadeOut();

                                                     //$("#img3").fadeOut(3000);

                                                     //$("#but3").val("淡入");

                                                    

                                                     $("#img3").fadeOut(5000,function(){

                                                             $("#but3").val("淡入");

                                                     });                                          

                                            }

                                            if(buttext=="淡入"){

                                                     //$("#img3").fadeIn();

                                                     //$("#img3").fadeIn(3000);

                                                     //$("#but3").val("淡出");

                                                     $("#img3").fadeIn(5000,function(){

                                                             $("#but3").val("淡出");

                                                     });

                                                    

                                            }

                                   });

                          });

                  </script>

         </head>

         <body>

                  <input  id="but3" type="button" value="淡出"/><br>

                  <img id="img3" src="imgs/avatar.png"/>

         </body>

</html>



jQuery slideDown() 方法用于向下滑动元素。

jQuery slideUp() 方法用于向上滑动元素。

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title></title>

                  <script  src="js/jquery-3.5.1.js"></script>

                  <script>

                          $(function(){

                                   $("#but4").click(function(){

                                            var buttext=$("#but4").val();

                                            if(buttext=="滑出"){

                                                     //$("#img4").slideUp();

                                                     $("#img4").slideUp(3000);

                                                     $("#but4").val("滑入");

                                                     /*

                                                     $("#img4").slideUp(5000,function(){

                                                             $("#but4").val("滑入");

                                                     });

                                                     */

                                            }

                                            if(buttext=="滑入"){

                                                     //$("#img4").slideDown();

                                                     $("#img4").slideDown(3000);

                                                     $("#but4").val("滑出");

                                                     /*

                                                     $("#img4").slideDown(5000,function(){

                                                             $("#but4").val("滑出");

                                                     });

                                                */

                                            }

                                   });

                          });

                  </script>

         </head>

         <body>

                  <input  id="but4" type="button" value="滑出"/><br>

                  <img id="img4" src="imgs/avatar.png"/>

         </body>

</html>

jQuery 效果- 动画

jQuery animate() 方法允许您创建自定义的动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性.
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title></title>

                  <script  src="js/jquery-3.5.1.js"></script>

                  <script>

                          $(function(){

                                   $("#but1").click(function(){

                                            $("#div1").animate({left:"300px",top:"300px",width:"200px",height:"200px"},5000,function(){

                                                     alert("动画执行结束");

                                            });

                                   });

                          });

                  </script>

         </head>

         <body>

                  <h1>jQuery animate() 方法允许您创建自定义的动画。</h1>

                  <h2>语法：$(selector).animate({params},speed,callback);</h2>

                  <h2>必需的 params 参数定义形成动画的 CSS 属性.</h2>

                  <h2>可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。</h2>

                  <h2>可选的 callback 参数是动画完成后所执行的函数名称。</h2>

                  <input id="but1" type="button"  value="开始动画"/>

                  <div id="div1" style="background:#98bf21;height:100px;width:100px;position:absolute;">

                  </div>

         </body>

</html>

jQuery 停止动画

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

#panel,#flip,#updiv{

         padding:5px;

         text-align:center;

         background-color:#e5eecc;

         border:solid 1px #c3c3c3;

}

#panel

{

         padding:50px;

         display:none;

}

#updiv{

         display:none;

}

</style>

<script  src="js/jquery-3.5.1.js"></script>

<script>

$(function(){

  $("#flip").click(function(){

    $("#panel").slideDown(5000,function(){

                   $("#updiv").show();

         });

  });

  $("#stop").click(function(){

    $("#panel").stop();

  });

 

  $("#updiv").click(function(){

    $("#panel").slideUp(5000,function(){

                   $("#updiv").hide();

         });

  });

});

</script>



</head>

<body>

         <button id="stop">停止滑动</button>

         <div id="flip">点我向下滑动面板</div>

         <div id="panel">Hello world!</div>

         <div id="updiv">点我向上滑动面板</div>

</body>

</html>

jQuery - 链(Chaining)

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

         #div1{

                  background-color: red;

                  width: 200px;

                  height: 200px;

                  border-radius: 100px;

         }

         #div2{

                  background-color: yellow;

                  width: 200px;

                  height: 200px;

                  border-radius: 100px;

         }

</style>

<script  src="js/jquery-3.5.1.js"></script>

</script>

<script>

$(function(){

  $("#but1").click(function(){

           //延迟执行的函数

            setTimeout(function(){

                     for(var i=1;i<=10;i++){

                              $("#div1").fadeOut(500).fadeIn(500);

                     }

            },0); 

           setTimeout(function(){

                           for(var i=1;i<=10;i++){

                                     $("#div2").fadeOut(500).fadeIn(500);

                           }

           },10000);

  });

});

</script>

</head>

<body>

         <input id="but1" type="button"  value="红灯亮"/>

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

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

</body>

</html>

6.HTML DOM 遍历和修改

jQuery each() 方法

语法

$(selector).each(function(index,element){ })

必需。为每个匹配元素规定运行的函数。

index - 被遍历出的每一个元素在数组中的位置

element - 当前的元素【javascript的DOM对象】（也可使用 "this" 选择器）

each() 方法为每个匹配元素规定要运行的函数。

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title>HTML DOM 遍历和修改</title>

                  <!-- 导入jquery函数库 -->

                  <script src="js/jquery-3.5.1.js"></script>

                  <script>

                  $(function(){

                    $("#but1").click(function(){

                          $("p").each(function(index,element){

                                   var si=index*10+10;

                                   $(element).css("font-size",si+"px");

                          });

                    });

                  });

                  </script>

         </head>

         <body>

                  <h1>HTML DOM 遍历和修改</h1>

                  <h2>jQuery each() 方法</h2>

                  <h2>语法</h2>

                  $(selector).each(function(index,element){   })</h2>

                  <h2>必需。为每个匹配元素规定运行的函数。</h2>

                  <h2>index - 被遍历出的每一个元素在数组中的位置</h2>

                  <h2>element - 当前的元素【javascript的DOM对象】（也可使用 "this" 选择器）</h2>

        <input id="but1" type="button" value="each" />

        <p>测试用的p元素1</p>

        <p>测试用的p元素2</p>

        <p>测试用的p元素3</p>

        <p>测试用的p元素4</p>

         </body>

</html>

伟1314520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-03-16——Jquery基础

Jquery基础jQuery 是一个 JavaScript 库。[.js] jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。jQuery简介您需要具备的基础知识在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：HTMLCSSJavaScriptjQuery 库可以通过一行简单的标记被添加到网页中。例如:<script src=”js/jquery.js”></script>1.什..
复制链接

扫一扫