jQuery 2

最新推荐文章于 2023-07-07 14:28:52 发布

端脑

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量152

点赞数

分类专栏：前端文章标签： jQuery 2 jQuery冲突问题

本文链接：https://blog.csdn.net/qq_43776742/article/details/107351608

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

jQuery的冲突问题

因为什么引起的冲突？打个比方： $这个符号，如何引入的js代码之中，出现在引入的好几个js文件中。那么将会使用最后引入的js规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-jQuery冲突问题</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/test.js"></script>
    <script>
        // 1.释放$的使用权
        // 注意点: 释放操作必须在编写其它jQuery代码之前编写
        //         释放之后就不能再使用$,改为使用jQuery
        jQuery.noConflict();
        //————————————————————————————————————————————————————————————
        // 2.自定义一个访问符号
        var cr = jQuery.noConflict();


        cr(function () {
            alert("hello lnj");
        });
    </script>
</head>
<body>

</body>
</html>

jQuery核心函数能接收哪些参数？

能接收一个函数
能接收字符串选择器
能接收一个字符串代码片段
能就收一个DOM元素

jQuery的forEach方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-静态方法each方法</title>
    <script src="jQuery-1.8.3.js"></script>
    <script>
        var arr = [1, 3, 5, 7, 9];
        var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
        /*
        第一个参数: 遍历到的元素
        第二个参数: 当前遍历到的索引
        注意点:
        原生的forEach方法只能遍历数组, 不能遍历伪数组
        */
        arr.forEach(function (value, index) {
            console.log(index, value);
        });
        obj.forEach(function (value, index) {
            console.log(index, value);
        });

        // 1.利用jQuery的each静态方法遍历数组
        /*
        第一个参数: 当前遍历到的索引
        第二个参数: 遍历到的元素
        注意点:
        jQuery的each方法是可以遍历伪数组的
        */
        $.each(arr, function (index, value) {
            console.log(index, value);
        });
        
        $.each(obj, function (index, value) {
            console.log(index, value);
        });
    </script>
</head>
<body>

</body>
</html>

jQuery中的Map方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-静态方法map方法</title>
    <script src="jQuery-1.8.3.js"></script>
    <script>
        var arr = [1, 3, 5, 7, 9];
        var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
        // 1.利用原生JS的map方法遍历
        /*
        第一个参数: 当前遍历到的元素
        第二个参数: 当前遍历到的索引
        第三个参数: 当前被遍历的数组
        注意点:
        和原生的forEach一样,不能遍历的伪数组
        */
        arr.map(function (value, index, array) {
            console.log(index, value, array);
        });
        obj.map(function (value, index, array) {
            console.log(index, value, array);
        });
        /*
        第一个参数: 要遍历的数组
        第二个参数: 每遍历一个元素之后执行的回调函数
        回调函数的参数:
        第一个参数: 遍历到的元素
        第二个参数: 遍历到的索引
        注意点:
        和jQuery中的each静态方法一样, map静态方法也可以遍历伪数组
        */

        var Res = $.map(obj, function (value, index) {
            console.log(index, value);
        });
        var mapRes = $.map(obj, function (value, index) {
            console.log(index, value);
            return value + index;
        });



        var res2 = $.each(obj, function (index, value) {
            console.log(index, value);
            return value + index;
        });
        var MapRes2 = $.each(obj, function (index, value) {
            console.log(index, value);
            return value + index;
        });

        /*
        jQuery中的each静态方法和map静态方法的区别:
        each静态方法默认的返回值就是, 遍历谁就返回谁
        map静态方法默认的返回值是一个空数组

        each静态方法不支持在回调函数中对遍历的数组进行处理
        map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回
        */
        console.log(res);
        console.log(mapRes);
        console.log(res2);
        console.log(MapRes2);
    </script>
</head>
<body>

</body>
</html>

jQuery其他静态方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>11-jQuery中的其它静态方法</title>
    <script src="jQuery-1.8.3.js"></script>
    <script>
        /*
        $.trim();
        作用: 去除字符串两端的空格
        参数: 需要去除空格的字符串
        返回值: 去除空格之后的字符串
        */
        /*
        var str = "    lnj    ";
        var res = $.trim(str);
        console.log("---"+str+"---");
        console.log("---"+res+"---");
        */

        // 真数组
        var arr = [1, 3, 5, 7, 9];

        // 伪数组
        var arrlike = {
            0: 1,
            1: 3,
            2: 5,
            3: 7,
            4: 9,
            length: 5
        };

        // 对象
        var obj = {
            "name": "lnj",
            age: "33"
        };

        // 函数
        var fn = function () {};

        // window对象
        var w = window;

        /*
        $.isWindow();
        作用: 判断传入的对象是否是window对象
        返回值: true/false
        */

        var res = $.isWindow(w);
        console.log(res);


        /*
        $.isArray();
        作用: 判断传入的对象是否是真数组
        返回值: true/false
        */

        var res = $.isArray(w);
        console.log(res);

        /*
        $.isArray();
        作用: 判断传入的对象是否是一个函数
        返回值: true/false
        注意点:
        jQuery框架本质上是一个函数
        (function( window, undefined ) {
         })( window );
        */
        var res = $.isFunction(jQuery);
        console.log(res);
    </script>
</head>

<body>

</body>

</html>

hold-ready

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jQuery-1.8.3.js"></script>
    <title>Document</title>

    <script>
        // $.holdReady(true); 作用: 暂停ready执行
        $.holdReady(true);
        $(document).ready(function () {
            alert("ready");
        });
    </script>
</head>

<body>
    <button>回复ready事件</button>


    <script>
        var btn = document.getElementsByTagName("button")[0];
        btn.onclick = function () {
            $.holdReady(false);
        }
    </script>
</body>

</html>

端脑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 2

jQuery的冲突问题因为什么引起的冲突？打个比方： $这个符号，如何引入的js代码之中，出现在引入的好几个js文件中。那么将会使用最后引入的js规则<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>05-jQuery冲突问题</title> <script src="js/jquery-1.12.4.js"&gt
复制链接

扫一扫

专栏目录