jQuery基本静态方法详解

jQuery中文文档:https://www.jquery123.com/

http://jquery.cuishifeng.cn/index.html

jquery冲突问题:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery-1冲突问题</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        // $(function () {
        //     alert("hello inj");
        // });
        //1、接收一个函数
        $(function () {
            alert("hello world");
            //2、接收一个字符串
            //2.1接收一个字符串选择器
            //返回一个Jquery对象,对象中保存了找到的DOM元素
            var $box1=$(".box1");
            var $box2=$("#box2");
            console.log($box1);
            console.log($box2);
            //3、接收一个字符串代码片段
            //返回一个Jquery对象,对象中保存了创建的DOM元素
            var $p=$("<p>我是段落</p>");
            console.log($p);
            $box1.append($p);
            //4、接收一个DOM元素
            //会被包装成一个JQuery对象返回给我们
            var span=document.getElementsByTagName("span")[0];
            // console.log(span);原生dom元素
            var $span=$(span);
            console.log($span);
            $box1.append($span);
        })



    </script>
</head>
<body>
<div class="box1">nihao</div>
<div id="box2">nihaotwo</div>
<span>我是span</span>
</body>
</html>

jquery静态方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery静态方法</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        // 1.定义一个类
        function Aclass() {

        }
        //2.给这个类添加一个静态方法
        //直接添加给类的就是静态方法
        Aclass.staticMethod=function () {
            alert("staticMehtod");
        }
        //静态方法通过类名调用
        Aclass.staticMethod();
        //3.给这个类添加一个实例方法
        Aclass.prototype.instanceMethod=function () {
            alert("实例方法");
        }
        //实例方法通过类的实例调用
        //创建一个实例(创建一个对象)
        var a=new Aclass();
        a.instanceMethod();
    </script>
</head>
<body>

</body>
</html>

each、map方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态方法each方法</title>
    <script src="js/jquery-3.3.1.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);
        // })
        //1.利用jQuery的each静态方法遍历数组
        /*
        第一个参数:当前遍历到的索引,
        第二个参数:遍历到的元素
        注意点:jquery的each方法是可以遍历伪数组的
        obj为伪数组
         */
        $.each(arr,function (index,value) {
            console.log(index,value);
        });
        $.each(obj,function (index,value) {
            console.log(index,value);
        })
    </script>
    
</head>
<body>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态方法map方法</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        var arr=[1,3,5,7,9];
        //1.利用原生Js的map方法遍历
        /*
        第一个参数:当前遍历的元素
        第二个参数:当前遍历到的索引
        第三个参数:当前遍历到的数组
        注意点:和原生forEach一样,不能遍历伪数组
        arr.map(function (value,index,array) {
            console.log(index,value,array);
        })
         */
        var obj={0:1,1:3,2:5,3:7,4:9,length:5};
        /*
        第一个参数:要遍历的数组
        第二个参数:每遍历一个元素之后执行的回调函数
        回调函数的参数:
        第一个参数:遍历到的元素
        第二个参数:遍历到的索引
        注意点:和jquery中的each静态方法一样,map静态方法也可以遍历伪数组
         */
        $.map(obj,function (index,value) {
            console.log(index,value);
        });
        var res=$.map(obj,function (index,value) {
            console.log(index,value);
            return index+value;//返回了index+value
        });
        var res1=$.each(obj,function (index,value) {
            console.log(index,value);
            return index+value;//没有任何变化
        });
        console.log(res);
        console.log(res1);
        /*
        jquery中的each静态方法和map静态方法的区别:
        each静态方法默认的返回值就是,遍历谁就返回谁
        map静态方法默认的返回值是一个空数组
        each静态方法不支持在回调函数中对遍历的数组进行处理
        map静态方法可以在回调函数中通过return对遍历的数组进行处理,
        然后生成一个新的数组返回
         */

    </script>
</head>
<body>

</body>
</html>

jquery其他静态方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery中的其他静态方法</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        var str="         inj        ";
        var res=$.trim(str);//去除字符串前后的字符串
        console.log("----"+str+"----");
        console.log("----"+res+"----");
        var arr=[1,2,3,4,5];//真数组
        var arrlike={0:1,1:2,2:3,3:4,4:5,length:5};//伪数组
        var obj={"name":"inj",age:"33"};//对象
        var fun=function(){};//函数
        var w=window;//windows对象
        var res=$.isWindow(w);
        console.log(res);
        var res1=$.isArray(arrlike);
        console.log(res1);//伪数组不是真数组,只有真数组返回true
        var res2=$.isFunction(fun);
        console.log(res2); //jQuery本质就是一个方法

    </script>
</head>
<body>

</body>
</html>

holdReady方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态方法holdReady方法</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $.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);//只是用来暂停回复ready事件
    }
</script>
</body>
</html>

 

posted @ 2019-01-09 15:05  yorkmass  阅读(403)  评论(0编辑  收藏  举报