Jquery__基础

最新推荐文章于 2022-11-11 08:49:16 发布

slom_fxt

最新推荐文章于 2022-11-11 08:49:16 发布

阅读量257

点赞数

分类专栏： jquery 文章标签： jquery javascript html

本文链接：https://blog.csdn.net/slom_fxt/article/details/120783362

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、什么是 jQuery ？

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

1.jQuery 是一个 JavaScript 函数库。[.js]

2.jQuery 极大地简化了 JavaScript 编程。

3.jQuery 很容易学习。

jQuery库包含以下功能：

1.HTML元素选取

2.HTML元素操作

3.CSS 操作

4.HTML 事件函数

5.JavaScript 特效和动画[元素的隐藏和显示]

6.HTML DOM 遍历和修改

7.AJAX请求【获取后台处理程序返回的数据值】高级操作

Jquery下载

jQuery官网https://jquery.com/

Download the compressed, production jQuery 3.6.0---jquery-3.6.0.min.js

Download the uncompressed, development jQuery 3.6.0---jquery-3.6.0.js

Jquery是以“.js”结尾的，说明他是一个javascript文件。可以按照javascript的用法使用。

jquery-3.6.0.min.js--jquery的发布版，它的特点小，节省内存。因为它里面的内容被压缩了。

jquery-3.6.0.js---jquery的开发版，它的特点有注释可以查看具体的内容。它是没有压缩的。

二、jQuery的使用

1.通过script标记导入本地jquery函数库文件到网页中。它是一个javascript文件。

2.通过script标记利用网络地址导入jquery函数库到网页中

例如：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <!--导入本地jquery文件-->
        <!--<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.min.js"></script>-->
        <!--script标记利用网络地址导入jquery函数库到网页中-->
        <script type="text/javascript" src="../JqueryJs/jquery-3.6.0.js"></script>
        <script>
            //javascript页面初始化事件
            //window.onload=function(){}
            //jquery页面初始化事件
            //$(function(){})
            $(function(){
                alert("script标记利用网络地址导入jquery函数库到网页中");
            })
        </script>
    </head>
    <body>
        
    </body>
</html>

三、 jQuery 语法

通过 jQuery，您可以选取HTML 元素【标记】，并对它们执行"操作"（actions）。

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

1.美元符号定义 $ -表示jQuery，jQuery表示$。我们可以使用$代替jQuery。

2.选择符（selector）---"查询"和"查找"需要被控制的 HTML 元素。可以将被控制的 HTML 元素转换成jQuery对象。【 $(selector)--jQuery的构造器--创建jQuery对象】

action()指对得到的jQuery对象调用的函数/属性

例如：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <!--导入本地jquery文件-->
        <!--<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.min.js"></script>-->
        <!--script标记利用网络地址导入jquery函数库到网页中-->
        <script type="text/javascript" src="../JqueryJs/jquery-3.6.0.js"></script>
        <script>
            //javascript页面初始化事件
            //window.onload=function(){}
            //jquery页面初始化事件
            //$(function(){})
            $(function(){
                //alert("script标记利用网络地址导入jquery函数库到网页中");

                //Jquery 语法
                //基本语法：$(select).action()
                  //1.$--美元符号--表示jQuery，我们在使用的时候可以使用“$”代替jQuery
                  //2.$(select)---选择符/器--“查询”和“查找”需要被控制的HTML元素
                  //使用上面的选择器得到的是jQuery对象
                  //jQuery--$("#p1")----jQuery对象
                  //$("#p1").css("color","red");
                  //javascript---document.getElementById("p1")----dom对象
                  //document.getElementById("p1").style.color="red";

                  //jquery--$("p")-----jQuery对象
                  //$("p").css("color","red");//所有p段落都会改变样式
                  //javascript---document.getElementsByTagName("p")----dom对象
                  //document.getElementsByTagName("p").style.color="red";//不能变样式因为得到的是数组
                  //document.getElementsByTagName("p")[0].style.color="red";

                  //jquery--$("p")-----jQuery对象
                  //$(".p2").css("color","red");//所有的p段落都改变样式
                  //javascript---document.getElementsByClassName("p")----dom对象
                  //document.getElementsByClassName("p2").style.color="red";//不能变样式因为得到的是数组
                  document.getElementsByClassName("p2")[0].style.color="red";//变第一个样式

                  //总结: jQuery对象.函数名([参数]);
            })
        </script>
    </head>
    <body>
        <p id="p1" class="p2">测试jQuery 语法</p>
        <p id="p1" class="p2">测试jQuery 语法</p>
    </body>
</html>

四、页面初始化事件

JavaScript的页面初始化事件：

1.body中提供οnlοad=“函数”

2.window.οnlοad=function(){}

jQuery的页面初始化事件：

1.$(document).ready(function( ){ 执行代码})

例如：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <!--导入本地jquery文件-->
        <!--<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.min.js"></script>-->
        <!--script标记利用网络地址导入jquery函数库到网页中-->
        <script type="text/javascript" src="../JqueryJs/jquery-3.6.0.js"></script>
        <script>
            //页面初始化事件
            
            //javasc的页面初始化事件
              //1.body中提供onload="函数"
              //2.window.onload=function(){}
              //特点:1.执行时机，必须等到整个html加载完毕以后，在执行包裹代码
              //2.只能执行一次，如果执行第二次，那么就会覆盖第一次的执行结果
            /*window.onload=function(){
                alert("第一次执行！");
            }
            window.onload-function(){
                alert("第二次执行！");
            }
            */

            //jQuery的页面初始化事件
              //特点:1.执行时机，必须等到整个html页面加载完毕以后，在执行包裹代码
              //2.可以执行多次，不会覆盖之前的执行
              $(document).ready(function(){
                  alert("第一次执行！")
              })
            $(function(){
                alert("第二次执行！")
            })
            //简写
            $(function(){
                alert("第一次执行");
             })
             $(function(){
                alert("第二次执行");
             })
        </script>
    </head>
    <body>
    </body>
</html>

五、Jquery对象与javascript对象的转换

1.javascript对象----》Jquery对象-------【$(javascript对象)】

2.Jquery对象------》javascript对象-----【Jquery对象.get()】

例如：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <!--导入本地jquery文件-->
        <!--<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.min.js"></script>-->
        <!--script标记利用网络地址导入jquery函数库到网页中-->
        <script type="text/javascript" src="../JqueryJs/jquery-3.6.0.js"></script>
        <script>
            //Jquery对象与javascript对象的转换
            //通过$(" ")得到的是jQuery对象
            //jQuery对象只能调用jQuery函数，不能使用JavaScript对象的方法
            //JavaScript对象就是我们通过document.getElemen...()得到的dom对象
            //dom对象只能调用JavaScript对象的方法，不能使用jQuery函数
            $(document).ready(function(){

                //将JavaScript对象转换成jQuery对象----$(dom对象)
                var jsobj= document.getElementsByTagName("p")[0];
                alert(jsobj);//[object HTMLParagraphElement]JavaScript对象
                var jqobj=$(jsobj);
                alert(jqobj);//[object Object]
                jqobj.css("font-size","30px");

                //Jquery对象---转换---javascript对象
                //jqobj.get();
                var jqobj1=$("p");
                alert(jqobj1);//[object Object]
                var jsobj1= jqobj1.get();
                alert(jsobj1);//[object HTMLParagraphElement]
                jsobj1[0].style.color="red";

            })



        </script>
    </head>
    <body>
        <p>测试Jquery对象与javascript对象的转换</p>
    </body>
</html>

六、jQuery 选择器

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

1.元素选择器 $("html元素名称")

2.jQuery id 选择器通过 HTML 元素的 id 属性选取指定的元素。$("#id")

3.jQuery 类选择器可以通过指定的 class 查找元素。$(".class")

例如：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <!--导入本地jquery文件-->
        <!--<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.min.js"></script>-->
        <!--script标记利用网络地址导入jquery函数库到网页中-->
        <script type="text/javascript" src="../JqueryJs/jquery-3.6.0.js"></script>
        <script>
            //1.HTML元素的获取
            //jQuery对象的创建方式
            $(function(){
                //1.$(select)---将被选中的HTML标记构造成jQuery对象
                //$("#idname")----根据HTML元素的id属性得到HTML元素转换成的jQuery对象
                //$("#p1").css("color","red");
                 //等价于document.getElementById("id")---dom对象
                //$("标记名称")----根据HTML元素的标记名称得到HTML元素转换成的jQuery对象
                //$("p").css("color","red");
                //等价于document.getElementsByTagName("标记名称")---dom对象
                //$(".classname")---根据html元素的class属性得到html元素转换成Jquery对象
                $(".p2").css("color","red");
                //等价于document.getElementsByClassName("classname")---dom对象


            })
           
        </script>
    </head>
    <body>
        <p id="p1" class="p2">测试jQuery 语法</p>
        <p id="p1" class="p2">测试jQuery 语法</p>
    </body>
</html>

七、jquery中HTML元素操作

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

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

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

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

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

例如：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <!--导入本地jquery文件-->
        <!--<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.min.js"></script>-->
        <!--script标记利用网络地址导入jquery函数库到网页中-->
        <script type="text/javascript" src="../JqueryJs/jquery-3.6.0.js"></script>
        <script>
            $(function(){
                //1.HTML元素的操作
                //javascript中HTML元素操作
                //innerHTML属性---可以修改元素以及元素中的内容
                //可以解释运行html标记
                //innerText属性---可以修改html元素中的内容
                //不可以解释运行html标记，可以操作html元素中的内容
                //value属性--专门控制表单元素的值

                //jQuery中和HTML元素操作
                //html(内容)函数---可以修改HTML元素以及元素中的内容
                    //得到HTML元素内容
                    var htmlnode= $("#p1").html();
                    alert(htmlnode);//测试<a href="#">jquery</a>对HTML元素操作
                    //修改HTML元素内容
                    $("#p1").html("<h4>修改HTML元素内容<h4>");//修改HTML元素内容
                //text(内容)函数---可以修改和得到html元素的内容
                    //得到HTML元素中的内容
                    var p2=$("#p2").text();
                    alert(p2);//测试jquery对HTML元素操作
                    //修改HTML元素中的内容
                    $("#p2").text("<h1>测试<a href=\"#\">jquery</a>对HTML元素操作</h1>");//<h1>测试<a href="#">jquery</a>对HTML元素操作</h1>
                //val(内容)函数----专门控制表单元素的值
                    //得到表单元素的值
                    var val3=$("[name]").val();
                    alert(val3);//默认值
                    //修改表单的值
                    $("[name]").val("文本默认值");

            })
           
        </script>
    </head>
    <body>
        <p id="p1">测试<a href="#">jquery</a>对HTML元素操作</p>
        <p id="p2">测试<a href="#">jQuery</a>对HTML元素得控制</p>
        <input type="text" value="默认值" name="">
    </body>
</html>

八、jQuery - 添加元素 jQuery - 删除元素

jQuery - 添加元素

append() - 在被选中元素中插入内容

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

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

jQuery - 删除元素

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

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

例如：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
            #div1{
                width: 280px;
                height: 200px;
                background-color: red;
            }

            #div2{
                width: 280px;
                height: 200px;
                background-color: red;
            }
        </style>
        <!--导入本地jquery文件-->
        <!--<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.min.js"></script>-->
        <!--script标记利用网络地址导入jquery函数库到网页中-->
        <script type="text/javascript" src="../JqueryJs/jquery-3.6.0.js"></script>
        <script>
            $(function(){
                //jQuery - 添加元素
                //javascript中创建添加html元素
                //document.createElement("元素名称");
                //document.createTextNode("文本内容");
                //父元素的dom对象.appendchild(nide);
                //创建标记
                var h4dom=document.createElement("h4");
                //创建内容
                var textdom=document.createTextNode("文本内容");
                //将内容添加进标记中
                var text= h4dom.appendChild(textdom);
                //将元素追加到div中
                var h5dom= document.getElementById("div2");
                h5dom.appendChild(text)

                //jQuery中创建添加HTML元素
                document.getElementById("but1").onclick=function(){
                    //创建元素---$("元素以及元素内容")
                    var hobj=$("<h5>创建元素-h1</h1>");
                    //alert(hobj)
                    //添加html元素  jQuery对象.append()  / after()  / before()
                    //append()---指定元素的里面
                     //before()--指定元素的前面
                      //after()--指定元素的后面
                    $("#div1").append(hobj);
                    //$("#div1").before(hobj)
                    //$("#div1").after(hobj);
                }

                //删除元素
                //javascript中删除元素
                //父元素的dom对象.removeChild(子元素的dom对象);

                //jquery中删除元素
                document.getElementById("but2").onclick=function(){
                    //remove() - 删除被选元素（及其子元素）【有过滤功能】
                    $("#div1").remove();
                }
                document.getElementById("but3").onclick=function(){
                    //empty() - 从被选元素中删除子元素
                    $("#div1").empty();
                }
            })
           
        </script>
    </head>
    <body>
        <input id="but1" type="button" value="添加元素">
        <input id="but2" type="button" value="删除元素remove()">
        <input id="but3" type="button" value="删除元素empty()">
        <div id="div1"></div><br>
        <div id="div2"></div>
    </body>
</html>

九、jquery的CSS 操作

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

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

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

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

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

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

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

3.获取元素样式

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

例如：添加不存在的样式

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        
        <!--导入本地jquery文件-->
        <!--<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.min.js"></script>-->
        <!--script标记利用网络地址导入jquery函数库到网页中-->
        <script type="text/javascript" src="../JqueryJs/jquery-3.6.0.js"></script>
        <script>
            $(function(){
                 //javascript中css的控制
                 //JavaScript中为元素添加不存在的样式
                 //document.getElementById("p1").style.color="red"; 

                 //jQuery中css的控制
                 /*为元素添加不存在的样式*/
                //css("css属性名称","属性值")---设置一个css属性
                 $("#p1").css("color","red");
                //css({"css属性名称":"属性值","css属性名称":"属性值"})---设置一组css属性
                 $("#p2").css({"color":"blue","font-size":"30px"});
                //得到css样式
                //javascript中css的控制---得到css样式
                //行内样式设置
                //document.getElementById("p1").style.css属性名称
                //jquery得到css样式
                //css("css属性名称")
                var cssvalue=$("#p2").css("font-size");
                alert(cssvalue)


            })
        </script>
    </head>
    <body>
        <p id="p1">测试jquery控制css</p>
        <p id="p2">测试jquery控制css</p>
    </body>
</html>

例如：添加存在的样式

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
            .pclass{
                color: red;
                font-size: 50px;
                background-color: royalblue;
            }
        </style>
        
        <!--导入本地jquery文件-->
        <!--<script type="text/javascript" src="../JqueryJs/jquery-3.6.0.min.js"></script>-->
        <!--script标记利用网络地址导入jquery函数库到网页中-->
        <script type="text/javascript" src="../JqueryJs/jquery-3.6.0.js"></script>
        <script>
            $(function(){
            //jquery中css的控制
            //控制已经存在的样式
            //元素的样式是通过class选择器设置
            document.getElementById("bu1").onclick=function(){
                //添加样式addClass()
                $("#p1").addClass("pclass");
            }
            document.getElementById("bu2").onclick=function(){
                //添加样式removeClass()
                $("#p1").removeClass("pclass");
            }
            document.getElementById("bu3").onclick=function(){
                //toggleClass()
                $("#p1").toggleClass("pclass");
            }
            })
        </script>
    </head>
    <body>
        <input id="bu1" type="button" value="添加样式">
       <input id="bu2" type="button" value="删除样式">
       <input id="bu3" type="button" value="切换【有/无】样式">
       <p id="p1">测试控制已经存在的样式</p>
    </body>
</html>

十、 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="../../20211015_Js高级Jquery/JqueryJs/jquery-3.6.0.min.js"></script>
        <script>
            //JavaScript事件
            //1.在html元素中通过事件来设置对应事件
            //function  事件处理函数( ){}
            //<input type="button" value="按钮" onclick="事件处理函数">
            //2.得到html元素的dom对象，调用方法的设置
            /*window.onload=function(){
                var btn1dom=document.getElementById("btn1");
                btn1dom.onclick=function(){alert("执行函数");}
            }
            <input id="btn1" typeof="button" value="按钮">
           */

            //jQuery  事件
            //页面初始化事件---文档完全加载完后执行函数
            //原始做法
            //$(document).ready(function(){})
            //简写做法
            //$(function(){})

            $(function(){
                //2.点击事件
                /*$("[type]").click(function(){
                    alert("jQuery的点击事件");
                })*/
                //3.双击事件
                /*$("[type]").dblclick(function(){
                alert("双击事件！")
                })*/
                //4.当鼠标指针穿过元素时，会发生 mouseenter 事件。
                /*$("[type]").mouseenter(function(){
                    alert("当鼠标指针穿过元素时，会发生 mouseenter 事件。")
                })*/
                //5.mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。
                /*$("[type]").mouseleave(function(){
                    alert("mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件")
                })*/
                //6.hover(function)方法用于模拟光标悬停事件。
                /*$("p").hover(function(){
                    alert("光标悬停事件")
                })*/
                //7.focus(function)当元素获得焦点时，发生 focus 事件。
                //8.blur(function)当元素失去焦点时，发生 blur 事件。
                $("[placeholder]").focus(function(){
                    $("[placeholder]").val("获得焦点时文本变为此时的。")
                })
                $("[placeholder]").blur(function(){
                    $("[placeholder]").val("失去焦点时文本变为默认")
                })
            })
            
           
        </script>
    </head>
    <body>
        <input type="button" value="按钮">
        <p>测试事件</p>
        <input type="text" placeholder="默认值">
    </body>
</html>

十一、元素的隐藏和显示动画【就是元素的隐藏和显示】

hide([毫秒数],[success-function]) 隐藏元素

show([毫秒数],[success-function]) 显示元素

fadeIn([毫秒数],[success-function]) 显示元素。

fadeOut([毫秒数],[success-function]) 隐藏元素。

slideDown([毫秒数],[success-function]) 显示元素

slideUp([毫秒数],[success-function]) 隐藏元素

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../../20211015_Js高级Jquery/JqueryJs/jquery-3.6.0.min.js"></script>
        <script>
            /*
            元素的隐藏和显示动画【就是元素的隐藏和显示】
            hide([毫秒数],[uccess - function])隐藏元素
            show([毫秒数], [success - function]) 显示元素
            fadeIn([毫秒数], [success - function]) 显示元素。
            fadeOut([毫秒数], [success - function]) 隐藏元素。
            slideDown([毫秒数], [success - function]) 显示元素
            slideUp([毫秒数], [success - function]) 隐藏元素
            */
            $(function(){
                $("[type]").click(function(){
                    if($("[type]").val()=="隐藏"){
                       /*$("img").hide(2000,function(){
                           alert("已经隐藏成功")
                       });*/
                       /*$("img").fadeOut(2000,function(){
                           alert("已经隐藏成功")
                       });*/
                        $("img").slideUp(2000,function(){
                           alert("已经隐藏成功")//动画完成后得到函数结果
                       });
                        $("[type]").val("显示")
                    }else{
                        //$("img").show(2000);
                        //$("img").fadeIn(3000)
                        $("img").slideDown(3000);
                        $("[type]").val("隐藏")
                    }
                    
                })
            })
        </script>
    </head>
    <body>
        <input type="button" value="隐藏"><br>
        <img src="../imgs/avatar2.png" alt="">
    </body>
</html>

十二、jQuery 效果- 动画

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

语法：

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

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

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

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

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../../20211015_Js高级Jquery/JqueryJs/jquery-3.6.0.min.js"></script>
        <style>
            img{
                position: absolute;
                top: 50px;
                left: 0px;
            }
        </style>
        <script>
           //jQuery 效果--动画
           //animate() 方法允许您创建自定义的动画
           //$(selector).animate({params},apeed,callback);
           //必须的params参数定义形成动画的css属性
           //可选的speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。
           //可选的callback参数是动画完成后所执行的函数名称
           //jQuery stop( )方法用于停止动画或效果，在他们完成之前
           $(function(){
               //开始动画绑定点击事件
               $("#bnt1").click(function(){
                   //给img添加开始动画事件，第三个参数是执行动画动作的函数
                   $("[src]").animate(
                       { "position":"absolute","top":"50px","left":"500px"},
                        5000,
                        function(){
                            alert("动画执行结束");
                   })
               })
               //停止动画绑定事件
               $("#btn2").click(function(){
                   //用于停止动画或效果，在他们完成之前
                    $("img").stop()
               })

           })
        </script>
    </head>
    <body>
        <input id="bnt1" type="button" value="开始动画">
        <input id="btn2" type="button" value="停止动画"><br>
        <img src="../imgs/avatar2.png">
    </body>
</html>

十三、HTML DOM 遍历和修改

jQuery each() 方法

语法

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

each函数中的function的

参数1-index--被遍历出的每一个元素在数组中的位置[下标]

参数2-element--被遍历出的每一个元素具体元素【DOM对象】

each函数中的function中没有element时，可以被this代替

例如:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../../20211015_Js高级Jquery/JqueryJs/jquery-3.6.0.min.js"></script>
        <script>
            //javascript的foreach方法
            window.onload=function(){
                var pdom=document.getElementsByTagName("p");
                //因为for循环遍历的数组dom对象得到的是Java对象和其他所以不能用for循环遍历的到里面的元素内容
                /*for(index in pdom){
                    console.log(pdom[index]);//[object HTMLParagraphElement],length 4,function item() { [native code] },function namedItem() { [native code] }
                }*/
                //forEach()只能遍历不通的数组,并且直接拿到里面的值
                /*var arr=[1001,1002,1003]
                arr.forEach(function(res){
                    alert(res)
                });*/
                //可以使用for循环
                for(var index=0;index<pdom.length;index++){
                   //alert(pdom[index]);//[object HTMLParagraphElement]
                    //因为的到的是dom对象所以可以直接使用dom对象的样式设置方法
                    pdom[index].style.color="red";
                }
            }

            //jquery的each()
            //$(selector).each(function(index,[element]){  })
            //index---元素下标
            //element---当前元素的dom对象,可以使用this代替
           $(function(){
                $("p").each(function(index){
                    //得到的是里面的下标值但是里面每个对应的值是一个dom对象
                    //可以让他转化为jQuery对象进行样式设置
                    $(this).css("font-size","30px")
                })
           })
        </script>
    </head>
    <body>
        <p>测试遍历元素</p>
        <p>测试遍历元素</p>
        <p>测试遍历元素</p>
        <p>测试遍历元素</p>
    </body>
</html>

总结：

1.jQuery 选择器

2.jQuery对象与javascriptDOM对象转换

3.jQuery控制html元素内容【text([content]) /html([content]) / val([content]) 】

4.jQuery添加html元素[append()/ after() / before()]

5.jQuery删除html元素[remove()/empty()]

6.jQuery控制css 【css(“css属性名”)

        / css(“css属性名”,”属性值”)

        /css({“css属性名”:”属性值”,....}) 设置一组

        /addClass(class类型样式)

        /removeClass(class类型样式)

1.jQuery控制事件  【jquery对象.事件名称(function(){/* 事件处理动作 */})】

2.jQuery的each方法