jQuery中each方法以及多库共存技术(兼容不同的JavaScript库)

each方法的使用

    • 隐式迭代—内部帮助我们循环遍历操作
    • 当对每个元素做不同的操作的时候,each方法能够帮助我们遍历jQuery中的对象
    • each方法中第一个参数为索引值,第二个参数为索引元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
    
    
            margin: 0;
            padding: 0;
        }
        ul{
    
    
            list-style-type: none;
        }
        li{
    
    
            width: 100px;
            height: 100px;
            background-color: green;
            margin-right: 10px;
            float: left;
        }
    </style>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        $(function () {
    
    
            $("#uu>li").each(function (index,ele) {
    
    
                //console.log(arguments[0]+"===="+arguments[1]);
                var opacity=(index+1)/10;
                $(ele).css("opacity",opacity);
            });
        });
    </script>
</head>
<body>
<ul id="uu">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

在这里插入图片描述

多库共存技术

  • 当一个页面中引入多个js文件库时,每个js文件库的顶级对象又都是 , 为 了 防 止 ,为了防止 冲突,可以使用noConflict
// 把$的权利给了w了,$就可以作为其他的用法出现在代码中
        var w=jQuery.noConflict();
        var $=10;
        console.log($);
        w(function () {
    
    
            w("#btn").click(function () {
    
    
                console.log("那是我日夜思念深深爱着的人啊!");
            });
        });

猜你喜欢

转载自blog.csdn.net/dwjdj/article/details/106086573