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文件

 <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代码

 <script>

     $(document).ready(function(){

         //内容

     })

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

jQuery从小白开始---初始jQuery的更多相关文章

  1. 初始jQuery

    JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera ...

  2. 初始jquery(5)

    一.什么是JQuery: JQuery是对JavaScript的封装,简化了JS代码,是主流框架的基础(VUE,EasyUI,Bootstrap) 它是2006年推出的 二.JQuery的优势: 1. ...

  3. jQuery源代码学习之九—jQuery事件模块

    jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...

  4. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  5. jquery.lazyload 实现图片延迟加载jquery插件

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...

  6. jQuery入门（1）jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  7. jQuery入门（4）jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  8. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  9. jQuery原生框架中的jQuery.fn.extend和jQuery.extend

    extend 方法在 jQuery 中是一个很重要的方法,jQuey 内部用它来扩展静态方法或实例方法,而且我们开发 jQuery 插件开发的时候也会用到它.但是在内部,是存在 jQuery.fn.e ...

随机推荐

  1. 死磕 java集合之ConcurrentLinkedQueue源码分析

    问题 (1)ConcurrentLinkedQueue是阻塞队列吗? (2)ConcurrentLinkedQueue如何保证并发安全? (3)ConcurrentLinkedQueue能用于线程池吗 ...

  2. quillJS 富文本编辑器源码分析系列1

    quillJS 富文本编辑器目前是一款很火富文本编辑器,使用广泛,github 上面的 star 有 22,492,虽然说不以 star 论英雄,不过这可以说明它还是比较受欢迎的: 它的特点是:轻量, ...

  3. pandas和spark的dataframe互转

    pandas的dataframe转spark的dataframe from pyspark.sql import SparkSession # 初始化spark会话 spark = SparkSess ...

  4. python爬虫Scrapy(一)-我爬了boss数据

    一.概述 学习python有一段时间了,最近了解了下Python的入门爬虫框架Scrapy,参考了文章Python爬虫框架Scrapy入门.本篇文章属于初学经验记录,比较简单,适合刚学习爬虫的小伙伴. ...

  5. 带你找到五一最省的旅游路线【dijkstra算法推导详解】

    前言 五一快到了,小张准备去旅游了! 查了查到各地的机票 因为今年被扣工资扣得很惨,小张手头不是很宽裕,必须精打细算.他想弄清去各个城市的最低开销. [嗯,不用考虑回来的开销.小张准备找警察叔叔说自己 ...

  6. 使用 Premiere 制作视频简介

    Premiere 简介 经常上B站或其他视频网站,有很多个人制作的有趣视频.也会想要自己制作视频.目前网上常见的视频剪辑软件有很多种,神剪辑.爱剪辑.会声会影.EDIUS等.但在专业视频剪辑师中,使用 ...

  7. TensorFlow读写数据

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 回顾前面: 从零开始学TensorFlow[01-搭 ...

  8. 给WEB初学者一些有效率的建议

    因为IT互联网发展的非常迅速,而web前端这块很火,目前工资水平给的很高,在市场上也是非常的稀缺人才,现在各个行业转行做web前端的很多,今天给大家一些建议,希望新手少走点弯路吧! 建议一:有一个比较 ...

  9. Android studio无法创建类和接口问题解决办法。提示 Unable to parse template "Class"

    重新配置了studio 的工作环境, 没问题,后来加需求要新增java类和接口,这就出现问题了,新建的时候,就会报错: Unable to parse template "Interface ...

  10. Git思维导图

    EBay全程问了我关于Git的原理, 各种命令行:平常依赖Idea的图形化太严重了,今天仔细总结一下常用的工具:   Git学习的链接: https://book.git-scm.com/ http: ...