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. 【.NET异步编程系列3】取消异步操作

    在.Net和C#中运行异步代码相当简单,因为我们有时候需要取消正在进行的异步操作,通过本文,可以掌握 通过CancellationToken取消任务(包括non-cancellable任务).  早期 ...

  2. hive新建分区表

    hive新建分区表语句如下: create table table_name (col1_name string comment '备注1', col2_name string comment '备注 ...

  3. SpringCloud学习系列之四-----配置中心(Config)使用详解

    前言 本篇主要介绍的是SpringCloud中的分布式配置中心(SpringCloud Config)的相关使用教程. SpringCloud Config Config 介绍 Spring Clou ...

  4. 【译】在C#中实现单例模式

    目录 介绍 第一个版本 --不是线程安全的 第二个版本 -- 简单的线程安全 第三个版本 - 使用双重检查锁定尝试线程安全 第四个版本 - 不太懒,不使用锁且线程安全 第五版 - 完全懒惰的实例化 第 ...

  5. Web前端-Ajax基础技术(下)

    Web前端-Ajax基础技术(下) 你要明白ajax是什么,怎么使用? ajax,web程序是将信息放入公共的服务器,让所有网络用户可以通过浏览器进行访问. 浏览器发送请求,获取服务器的数据: 地址栏 ...

  6. Android开发利器之stetho

    文章同步自javaexception Stetho是什么? github上地址https://github.com/facebook/stetho stetho是facebook出品的一款开发调试工具 ...

  7. SQLServer之创建链接服务器

    创建链接服务器注意事项 当我们要跨本地数据库,访问另外一个数据库表中的数据时,本地数据库中就必须要创建远程数据库的DBLINK,通过DBLINNK数据库可以像访问本地数据库一样访问远程数据库表中的数据 ...

  8. oracle和mysql批量合并对比

    orm框架采用mybatis,本博客介绍一下批量合并merge用oracle和mysql来做的区别, oracle merge合并更新函数的详细介绍可以参考我以前的博客:https://blog.cs ...

  9. .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9977862.html 写在前面 千呼万唤始出来,首先,请允许我长吸一口气!真没想到一份来自28岁老程序员 ...

  10. Spring Boot 中的静态资源到底要放在哪里？

    当我们使用 SpringMVC 框架时,静态资源会被拦截,需要添加额外配置,之前老有小伙伴在微信上问松哥Spring Boot 中的静态资源加载问题:"松哥,我的HTML页面好像没有样式?& ...