jquery-等待加载-显示隐藏-遍历

最新推荐文章于 2023-01-15 03:14:13 发布

鲸鱼编程pyhui

最新推荐文章于 2023-01-15 03:14:13 发布

阅读量658

点赞数

本文链接：https://blog.csdn.net/ifubing/article/details/99674463

版权

页面载入事件

让js先加载整个页面，然后处理相关的标签就可以识别的到

方式一：
$(document).ready(匿函）；

方式二，简写，推荐：
$(匿函)；
$(函数名）;


我们的主代码，是写在匿函的函数体中的

》对比试验

没有页面载入事件的情况

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        var $a = $("a");
        document.title = $a.length;

    </script>
</head>
<body>
<a href="">aaa</a>
</body>
</html>

数据为0

》有页面载入事件

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
       $(main);

       function main() {
            var $a = $("a");
            document.title = $a.length;
       }


    </script>
</head>
<body>
<a href="">aaa</a>
</body>
</html>

数据为1

显示与隐藏

对象.方法（豪秒数）

》基本显示与隐藏

show
hide
toggle

》滑动

slideDown
slideUp
slideToggle

》淡入淡出

fadeIn
fadeOut
fadeTo
fadeToggle

fadeTo补充说明

fadeTo（豪秒数，透明度）

遍历循环

以前遍历一个数组

在这里插入图片描述
使用each方法来遍历

jq对象.each（匿函）

匿函中不传参数
匿函中可使用变量this
this就是dom对象（因为jquery对象就是dom对象的容器啊）

在这里插入图片描述

this是遍历出来的每一个元素

它是一个dom元素

小结

each可以作为对象的方法来进行遍历

演示代码

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
       $(main);

       function main() {
           // 拿到所有的div标签
           // 遍历他们
           $divs = $("div");  // [dom1,dom2,domn]
           $divs.each(show_content);

           function show_content() {
               // console.log(this.innerText);
               // console.log(this.innerText);
               // 1,转换为jquery对象
               // 2，jqeury对象获取标签内包裹的纯文本内容
               var text = $(this).text()
               console.log(text,'from jquery obj');
           }



       }


    </script>
</head>
<body>
<div>第1个div</div>
<div>第2个div</div>
<div>第3个div</div>
<div>第4个div</div>
<div>第5个div</div>
<div>第6个div</div>
</body>
</html>

》 each的另外的用法



$.each（对象， 匿函）

如果匿函有一个参数，那它就是索引值。如果匿函有两个参数。参一是索引，参二是数据值。
如果匿函有两个参数，参一是键或索引，参二是值

在这里插入图片描述

试一试，对字典态的对象进行遍历，传一参，传两个参，看看效果。

遍历字典的时候，匿函中，参数一是键，参数二是值
在这里插入图片描述

鲸鱼编程pyhui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery-等待加载-显示隐藏-遍历

页面载入事件让js先加载整个页面，然后处理相关的标签就可以识别的到方式一：$(document).ready(匿函）；方式二，简写，推荐：$(匿函)；显示与隐藏对象.方法（豪秒数）》基本显示与隐藏showhidetoggle》滑动slideDownslideUpslideToggle》淡入淡出fadeInfadeOutfadeTofadeTo...
复制链接

扫一扫