当前位置： 移动技术网 > IT编程>开发语言>Jquery > jQuery从小白开始---初始jQuery

jQuery从小白开始---初始jQuery

2018年12月27日  | 移动技术网IT编程  | 我要评论

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对遍历的数组进行处理，然后生成一个新的数组返回

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网