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. 【Android】自己动手做个扫雷游戏

    1. 游戏规则 扫雷是玩法极其简单的小游戏,点击玩家认为不存在雷的区域,标记出全部地雷所在的区域,即可获得胜利.当点击不包含雷的块的时候,可能它底下存在一个数,也可能是一个空白块.当点击中有数字的块时 ...

  2. php多进程模型 开箱即用

    仓库地址 https://github.com/xieyong1023/MultiProcess 安装 使用composer 将仓库加到你的项目composer.json的repositories下 ...

  3. this指向和apply，call，bind三者的区别

    一.前言 this指向,apply,call,bind的区别是一个经典的面试问题,同时在项目中会经常使用到的原生的js方法.同时也是ES5中的众多坑的一个.ES6中可能会极大的避免了this产生的错误 ...

  4. 理解 Node.js 的 Event loop

    问题 考察如下代码,脑回路中运行并输出结果: console.log("1"); setTimeout(function setTimeout1() { console.log(& ...

  5. MongoDB之基本操作与日常维护

    MongoDB基本操作 MongoDB的基本操作主要是对数据库.集合.文档的操作,包括创建数据库.删除数据库.插入文档.更改文档.删除文档.和查询文档. 操作 描述 show dbs 查看当前实例下的 ...

  6. 关于静态注册BroadcastReceiver接收不到广播的问题

    1.背景&解决方法 最近碰到一个需求,app监听特定的广播,接收到广播后启动自己再进行处理.需求很简单,静态注册就好,不过,在自测的时候遇到一个问题,app安装后没启动过的状态下,什么广播都收 ...

  7. Android Studio 受不了了

    今天遇到一个问题,受不了了,来吐槽一下: Android Studio 里面创建两个工程:app, baselib.一个是App 一个是库.编译不过去. targetSdkVersion 26 imp ...

  8. Linux（CentOS 7）安装测试svn服务

    1.yum install subversion,通过yum安装svn服务 2.svnserve --version,查看是否安装成功 3.mkdir -p /home.svn,创建svn仓库目录 4 ...

  9. Docker 容器与宿主机网段冲突导致网络无法 ping 通的解决方案

    docker 容器网络默认使用 bridge 桥接模式,正常情况下,容器会使用 daemon.json 中定义的虚拟网桥来与宿主机进行通讯. 最近更新 Docker for mac 之后,发现以前容器 ...

  10. spring boot 2.0 集成 shiro 和 pac4j cas单点登录

    新开的项目,果断使用  spring boot  最新版本  2.0.3 ,免得后期升级坑太多,前期把雷先排了. 由于对 shiro 比较熟,故使用 shiro 来做权限控制.同时已经存在了 cas  ...