zoukankan      html  css  js  c++  java
  • jQuery从小白开始---初始jQuery

    jQuery是什么?

        

    • jQuery是一款优秀的JavaScript库,从命名可以看出jQuery最主要的用途就是用来做查询(jQuery=js+Query),正如jQuery官方Logo副标题所说(write less,do more)使用jQuery能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单。

    jQuery的版本

      通过jQuery官网我们可以看到,目前jQuery有三个版本:

    • jQuery 1x
    • jQuery 2x
    • jQuery 3x

      那么我们在使用时,到底该选哪一个版本呢?说到这就该看一下这三个版本的区别:

    • jQuery 1x :兼容IE678,但相对其它版本文件较大,官方只做BUG维护,功能不再新增,最终版本为:1.12.4。
    • jQuery 2x :不兼容IE678,相对1x文件较小,官方只做BUG维护,功能不再新增,最终版本为:2.2.4。
    • jQuery 3x :不兼容IE678,只支持最新浏览器,很多老的jQuery插件不支持这个版本,相对1x文件较小,提供不包含Ajax/动画API版本。

      我们可以从他的性能和查看百度、淘宝等网站去判断,现在多用的是jQuery1x版。

      (注:可根据自身需求去下载jQuery版本

    jQuery类型

      我们在下载时可以看到jQuery不论哪个版本,它都有两种类型:

    1. 带min       这个是压缩过后的版本,它是去掉了我们的代码中的空格和换行,并且自行变更了参数
    2. 不带min   这个是生产版,利于开发人员去审查和更改

    引入jQuery文件

    1 <script src="js/jquery-1.11.3.min.js"></script>

    或者在线引用

    百度压缩版引用地址:
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    
    微软压缩版引用地址:
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js"></script>
    
    官网jquery压缩版引用地址:
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

     jQuery的核心函数就是:$()

    编写jQuery代码

    1 <script>
    2     $(document).ready(function(){
    3         //内容
    4     })
    5 </script>

    jQuery和原生JS的区别

      话不多说,上代码:

    现在body里面写一个img

     <body>
         <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=904985312,1131631846&fm=26&gp=0.jpg"/>
     </body>

    然后我们用原生JS来看看

    window.onload = function (event){
        var img = document.getElementsByTagName("img")[0];
    console.log(img);
    }

    通过原生JS入口函数可以拿到DOM元素

    同样用jQuery来试试

    $().ready(function(){
        var $img = $("img")[0];
        console.log($img);
    })

    通过jQuery入口函数可以拿到DOM元素

    那我们在试试分别获取DOM元素的宽高

    JS

    var width = window.getComputedStyle(img).width;
    var height = window.getComputedStyle(img).height;
        console.log("onload",width,height);

    通过原生JS可以得到DOM元素的宽高

    jQuery

    var $width = $img.width;
    var $height = $img.height;
    console.log("ready",$width,$height);

     

    注意,在运行这一个代码时需要清除浏览器的历史记录

    从这些可以看出

    • 原生JS和jQuery入口函数的加载模式不同
    • 原生JS会等到DOM元素加载完毕,并且也会等图片加载完毕才执行
    • jQuery会等到DOM元素加载完毕,但不会等图片加载完毕就执行

    如果编写多个入口函数呢?

    window.onload = function(event){
        alert("这是第一个");
    }
    window.onload = function(event){
        alert("这是第二个");
    }
    $().ready(function(){
        alert("这是第一个")
    })
    $().ready(function(){
        alert("这是第二个")
    })
    • 原生JS编写多个入口函数,后面的会覆盖前面的
    • jQuery编写多个入口函数,后面的不会覆盖前面的

    jQuery入口函数的其它几种写法(了解一下就好了)

    //第一种
    $(document).ready(function(){
        alert("one");
    })
    //第二种
    jQuery(document).ready(function(){
        alert("tow");
    })
    //第三种
    $(function(){            
        alert("three");
    })
    //第四种
    jQuery(function(){
        alert("four");
    })

    在使用中,我们通常使用第三种,因为write less嘛

     静态方法和实例方法

      什么是静态方法和实例方法?

    <script type="text/javascript">
        //1、定义一个类
        function AClass(){
        }
        //2、给这个类添加一个静态方法
            //直接添加给类的就是静态方法
            AClass.staticMethod = function(){
                alert("hello")
            }
                //静态方法通过类名调用
            AClass.staticMethod();
                
            //3、给这个类添加一个实例方法
        AClass.prototype.instanceMethod = function(){
            alert("world");
        }
        //实例方法通过类的实例调用
        //创建一个实例(创建一个对象)
        var a = new AClass();
        //通过实例调用实例方法
        a.instanceMethod();
    </script>

     jQuery-each方法与原生JS的forEach方法

    用数组和伪数组举例

    <script type="text/javascript">
        var arr = [1,3,5,7,9];
        var obj = {0:2,1:4,2:6,3:8,4:10,5:12,length:6}
        arr.forEach(function(value , index){
            console.log(index,value)
        })
        obj.forEach(function(value , index){
        console.log(index,value)
        })
    </script>

    用原生JS的forEach静态方法遍历数组

    1. 第一个参数:遍历到的元素
    2. 第二个参数:当前遍历到的索引
    3. 注意:原生JS的forEach方法只能遍历数组,不能遍历伪数组
    <script type="text/javascript">
        var arr = [1,3,5,7,9];
        var obj = {0:2,1:4,2:6,3:8,4:10,5:12,length:6}
        $.each(arr,function(index,value){
        console.log(index,value);
        })
        $.each(obj,function(index,value){
        console.log(index,value);
        })
    </script>

    用jQuery的each方法遍历伪数组

    1. 第一个参数:当前遍历到的索引
    2. 第二个参数:遍历到的元素
    3. 注意:jQuery的each方法可以遍历数组和伪数组

     jQuery-each方法与原生JS的map方法

    <script>
        var arr = [1,3,5,7,9];
        var obj = {0:2,1:4,2:6,3:8,4:10,5:12,length:6};
            arr.map(function(value,index,array){
        console.log(index,value,array);
        })
        obj.map(function(value,index,array){
            console.log(index,value,array);
        })    
    </script>

    用原生JS的map方法遍历

    1. 第一个参数:当前遍历到的元素
    2. 第二个参数:当前遍历到的索引
    3. 第三个参数:当前被遍历的数组
    4. 注意:原生JS的map方法跟它的forEach一样,不能遍历伪数组
    <script>
        var arr = [1,3,5,7,9];
        var obj = {0:2,1:4,2:6,3:8,4:10,5:12,length:6};
            $.map(arr, function(value,index) {
            console.log(index,value);
        });
        $.map(obj, function(value,index) {
            console.log(index,value);
        });
    </script>

    用jQuery的map方法遍历

    1. 第一个参数:要遍历的数组
    2. 第二个参数:每遍历一个元素之后执行的回调函数
    • 回调函数
    1. 第一个参数:遍历到的元素
    2. 第二个参数:遍历到的索引
    3. 注意:jQuery的map方法和它的each方法一样,数组跟伪数组都可以遍历

    既然jQuery的map方法和each方法都可以遍历数组和伪数组,那么它们有什么区别呢?

    <script>
        var arr = [1,3,5,7,9];
        var obj = {0:2,1:4,2:6,3:8,4:10,5:12,length:6};
        var res = $.map(obj, function(value,index) {
            console.log(index,value);
        });
        var res1 = $.each(obj, function(value,index) {
            console.log(index,value);
        });
            console.log(res);
        console.log(res1);
    </script>    

      区别:

    • each静态方法默认的返回值就是,遍历谁就返回谁
    • map静态方法默认的返回值是一个空数组
    • each静态方法不支持在回调函数中对遍历的数组进行处理
    • map静态方法支持在回调函数中通过return对遍历的数组进行处理,然后生成一个新的数组返回
  • 相关阅读:
    常用博客Metaweblog Api地址
    如何在Mac下配置Github和Bitbucket的SSH
    Java内部类持有外部类的引用详细分析与解决方案
    java 静态变量生命周期(类生命周期)
    比较List和ArrayList的性能及ArrayList和LinkedList优缺点
    List和ArrayList的区别
    hashmap可以用null为键值
    iOS各种调试技巧豪华套餐
    Split()[1]中的[1]是什么意思
    windows安装TortoiseGit详细使用教程
  • 原文地址:https://www.cnblogs.com/zhen-prz/p/10185470.html
Copyright © 2011-2022 走看看