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. python中报错"json.decoder.JSONDecodeError: Expecting value:"的解决

    在学习python语言中用json库解析网络数据时,我遇到了两个编译错误:json.decoder.JSONDecodeError: Expecting property name enclosed ...

  2. Python-炫酷二维码

    一.环境 首先是安装python环境,如果没有安装python环境看此处 二.myqr     myqr 其实是一个 python 的脚本,可以生产二维码图片,作者也对python脚本进行了打包,在 ...

  3. [区块链] 密码学——椭圆曲线密码算法（ECC）

    今天在学椭圆曲线密码(Elliptic Curve Cryptography,ECC)算法,自己手里缺少介绍该算法的专业书籍,故在网上查了很多博文与书籍,但是大多数博客写的真的是...你懂的...真不 ...

  4. Java 在PDF 中添加超链接

    对特定元素添加超链接后,用户可以通过点击被链接的元素来激活这些链接,通常在被链接的元素下带有下划线或者以不同的颜色显示来进行区分.按照使用对象的不同,链接又可以分为:文本超链接,图像超链接,E-mai ...

  5. iftop命令使用范例

    iftop 介绍 iftop是一款实时流量监控工具,监控TCP/IP连接等,缺点就是无报表功能.必须以root身份才能运行. 实例 默认是监控第一块网卡的流量 iftop 监控eth1 iftop - ...

  6. SQLServer之修改数据库架构

    修改数据库架构注意事项 用户与架构完全分离. ALTER SCHEMA 仅可用于在同一数据库中的架构之间移动安全对象. 若要更改或删除架构中的安全对象,请使用特定于该安全对象的 ALTER 或 DRO ...

  7. 一文让你明白Redis主从同步

    今天想和大家分享有关 Redis 主从同步(也称「复制」)的内容. 我们知道,当有多台 Redis 服务器时,肯定就有一台主服务器和多台从服务器.一般来说,主服务器进行写操作,从服务器进行读操作. 那 ...

  8. Ubuntu16 FTP的安装，基本配置与权限控制

    1.ftp与sftp 大致了解下: ftp是一个文件传输协议,linux环境需要它才能支持文件的传输与查看,它的默认端口是21. sftp是加密/解密的文件传输协议,因为它每次传输都有加密解密的步骤, ...

  9. SpringBoot基础系列一

    SpringBoot基础知识概览 特性 核心理念:约定优于配置 特点: 1. 开箱即用,根据项目依赖自动配置 2. 功能强大的服务体系,如嵌入式服务.安全 3. 绝无代码生成,不用写.xml配置,用注 ...

  10. 让你用 Chrome 上网快到想哭：Vimium

    Chrome 已经成了很多人的主力浏览器,你可能被它的简洁快速所吸引,但它日益丰富的「扩展」,你可能从来都没有接触过,而事实上,很多扩展可以挖掘出 Chrome 的潜能,让它变得前所未有的强大.有哪些 ...