JQuery专题(一)-JQuery基础

文章目录

1.JavaScript和JavaScript框架

1.1.JavaScript

在正式介绍jQuery之前，我们有必要再了解一下JavaScript。
JavaScript是Netscape公司开发的一种脚本语言（Script Language）。JavaScript的出现使得网页和用户之间实现了一种实时的、动态的和交互的关系，使网页包含了更多活跃的元素和更加精彩的内容。JavaScript自身存在3个弊端，即复杂的文档对象模型（DOM），不一致的浏览器实现，缺乏便捷的开发、调试工具。

正当JavaScript从开发者的视线中渐渐隐去时，一种新型的基于JavaScript的Web技术——Ajax（Asynchronous JavaScript And XML：异步的JavaScript和XML）诞生了！而使人们真正认识到Ajax技术的强大之处的导火索是Google公司推出的一些新型的Web应用，例如：Gmail、Google Suggest和Google Map等。从此之后，互联网中基于JavaScript的应用也越来越多，JavaScript不再是一种仅仅用于制作Web页面的简单脚本！

1.2.JavaScript框架

尽管Ajax技术赋予了JavaScript新的生命，但是JavaScript的开发依然很复杂，为了简化JavaScript的开发，一些JavaScript框架诞生了！JavaScript框架实际上就是JavaScript语言编写的，是对JavaScript的封装，框架中预定义了一些对象和函数，能帮助使用者轻松建立有高难度交互的Web2.0特性的胖客户端(也称富客户端)页面，并且兼容各大浏览器。

function id(id){
    return document.getElementById(id);
}

下面是目前比较流行的JavaScript框架的简单介绍：

1.2.1.Prototype（http://prototypejs.org/）

Prototype是最早成型的JavaScript框架之一，对JavaScript的内置对象（例如：String对象、Array对象、Date对象等）做了大量的扩展。现在还有很多项目使用Prototype。Prototype可以看做是把很多好的、常用的JavaScript的方法组合在一起而形成的JavaScript框架，使用者可以在需要的时候随时将其中的几段代码抽出来放进自己的脚本里。但是由于Prototype成型较早，从整体上对于面向对象的编程思想把握不是很到位，导致了其结构的松散。不过现在Prototype也在慢慢改进。

1.2.2.Dojo（http://dojotoolkit.org/）

Dojo的强大之处在于它提供了很多其他JavaScript框架所没有提供的功能，例如：离线存储的API、生成图标的组件、基于SVG/VML的矢量图形组件和Comet支持等等。Dojo是一款非常适合企业级应用的JavaScript框架，并且得到了IBM、SUN、BEA等大公司的支持。但是Dojo的缺点也是很明显的：学习曲线陡，文档也不齐全，最严重的就是API不稳定，每次升级都可能导致已有的程序失效。但是自从Dojo的1.0.0版出现以后，情况有所好转，Dojo还是一个很有发展潜力的前端框架。

1.2.3.YUI（http://yuilibrary.com/）

YUI（Yahoo！UI，The Yahoo！User Interface Library），是有Yahoo公司开发的一套完备的、扩展性良好的富交互网页程序工具集。YUI封装了一系列比较丰富的功能，例如DOM操作和Ajax应用等，同时还包括了几个核心的CSS文件。该框架本身文档极其完备，代码编写也非常规范。

1.2.4.Ext JS（https://www.sencha.com/）

Ext JS常简称为Ext，原本是对YUI的一个扩展，主要用于创建前端用户界面，如今已经发展到可以利用包括jQuery在内的多种JavaScript框架作为基础框架，而Ext作为界面的扩展框架来使用。Ext可以用来开发拥有华丽外观的富客户端应用，能使B/S应用更加具有活力。但是由于Ext侧重于界面，本身比较臃肿，所以使用之前请先权衡利弊。另外，需要注意的是，Ext并非完全免费，如果用于商业用途，需要付费获得授权许可。

1.2.5.MooTools（http://mootools.net/）

MooTools是一套轻量、简洁、模块化和面向对象的JavaScript框架。MooTools的语法几乎跟Prototype一样，但却提供了更为强大的功能、更好的扩展性和兼容性、其模块化思想非常优秀，核心代码大小只有8KB。无论用到哪个模块都可即时导入，即便是完整版大小也不超过160KB。MooTools完全彻底的面向对象的编程思想，语法简洁直观，文档完善，是一个非常不错的JavaScript框架。

1.3.小结

总之，每个JavaScript框架都有各自的优点和缺点，同时也有各自的支持者和反对者。
当然，这里只简单的介绍了众多JavaScript框架中的一小部分，还有很多优秀的框架在这里就不一一列举了。随着时间的推移，众多JavaScript框架之间的竞争已经进入白热化阶段，而jQuery在这场激烈的竞争中，逐渐从其他JavaScript框架中脱颖而出，成为了Web开发人员的最佳选择！接下来，让我们一起来揭开jQuery的神秘面纱！

2.开始jQuery的学习之旅

2.1.jQuery简介

JQuery是继Prototype之后又一款非常优秀的JavaScript框架，由John Resig创建于2006年1月。jQuery体积小，运行速度快，它独有的极为强大的选择器，使得页面元素的查找变得非常简单，其出色的DOM操作、可靠的事件处理、完善的浏览器兼容性和链式操作等优点。

JQuery官方介绍：

2.2.jQuery简介

JQuery的核心理念是：“write less, do more”，即：写得少，做得多!

jQuery独特的选择器、链式的DOM操作、可靠的事件处理机制和封装完善的Ajax都是其他JavaScript框架望尘莫及的。概括起来，jQuery具有以下优势：

1.轻量级
jQuery非常轻巧，采用Dean Edwards编写的Packer（http://dean.edwards.name/packer/）压缩后，大小不到30KB。如果使用Min版并且在服务器端启用Gzip压缩后，大小只有18KB。

2.强大的选择器
jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。由于jQuery支持选择器这一特性，因此有一定CSS经验的开发人员可以很容易的切入到jQuery的学习中来。

id选择器：#zhangsan {…}
类选择器：.mydiv {…}
标签选择器：div{color:red;}

3.出色的DOM操作的封装
jQuery封装了大量常用的DOM操作，使开发者在编写DOM相关程序的时候能够得心应手。使用jQuery能轻松的完成各种原本非常复杂的操作，让JavaScript新手也能写出很出色的程序。

4.可靠的事件处理机制
jQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华，使得jQuery在处理事件绑定的时候相当可靠。在预留退路、循序渐进以及非入侵式编程思想方面，jQuery也做得非常不错。

5.完善的Ajax
jQuery将所有的Ajax操作封装到一个函数中，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容和XMLHttpRequest对象的创建和使用的问题

6.不污染顶级变量
jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权，绝对不会污染其他的对象。该特性使jQuery可以与其他JavaScript框架共存，在项目中放心地引用而不需要考虑到后期可能存在的冲突。

7.出色的浏览器兼容性
作为时下最流行的JavaScript框架，浏览器的兼容性是必须具备的条件之一。jQuery能够在所有的主流浏览器中正常运行，包括IE6.0+。jQuery同时修复了一些浏览器之间的差异，使开发者不必再考虑浏览器兼容的问题。

8.链式操作
jQuery中最具特色的莫过于它的链式操作——即对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。这一特点使得jQuery的代码无比优雅。

9.隐式迭代
所谓隐式迭代，即当用jQuery找到多个元素后，无需循环遍历就可以对所有的元素进行操作。同样，jQuery中的几乎所有方法都被设计成自动操作对象的集合，而不是在循环中对每个单独的对象进行操作，这使得大量的循环结构变得不再必要，从而大幅地减少了代码量。

$(“div”).css(“color”,“red”);

10.行为层与结构层分离
开发者可以使用jQuery选择器选择元素，然后给元素添加事件。这种将行为层与结构层分离的做法，可以使jQuery开发人员和HTML页面的开发人员各司其职，摆脱过去开发冲突或个人单干的开发模式。同时，后期维护也变得非常方便，不需要在HTML代码中寻找某些函数和重复修改HTML代码。

11.丰富的插件支持
jQuery具有非常好的可扩展性，吸引了来自全球的开发者来编写jQuery的扩展插件。目前已经有超过几百种的官方插件支持，而且还会不断有新插件面世。这将使得jQuery变得无比强大！

12.完善的文档
jQuery的开发文档非常丰富，而且简单易用，现阶段多为英文文档，中文文档相对较少。很多热爱jQuery的团队都在努力完善jQuery的中文文档，例如jQuery的中文API，图灵教育翻译的《Learning jQuery》等等。

13.开源、免费
jQuery是一个开源的产品，而且完全免费，任何人都可以自由地使用并提出改进建议。

2.3.jQuery学习方法

问：要学好jQuery，是否需要对JavaScript非常熟悉呢？
答：不是。但是js的基本语法要掌握，例如：变量的定义、函数的定义、算数运算符、逻辑运算符、比较运算符、赋值运算符、分支结构、循环结构等；另外重要的一点就是，能够看懂和定义JSON（JavaScript Object Notation）格式的数据，因为任何js框架都大量使用到了JSON！这将使你更快、更好的掌握jQuery，乃至其它前端框架。

var obj = {
name: “xx”,
age: 20
}

jQuery和JavaScript，两者的对象和用法不太相同。因此，可以将jQuery当成一种基于js的全新技术来学习。
建议学习方法：官方api（重点）。

经常翻阅API文档，自己理解函数用法并自行实现一些常用的效果。
对Java的后端开发人员来说，表单元素的选择、赋值、取值、异步请求等操作是必须要掌握的！

2.4.jQuery下载

• jQuery官方网站：http://jquery.com/
• 下载地址：https://code.jquery.com/
  
  

【版本问题】
现在官网上有3个系列的版本：1.x、2.x、3.x

1.x系列：
该系列为浏览器兼容版，主要是兼容IE6-IE8的浏览器，正因如此，该系列是企业开发中的主流版本
目前比较稳定的版本是1.8.3，也是我们课程使用的版本，除非有特殊要求，推荐大家以后都使用这个版本！
从1.9.0开始，jquery在整体的设计上有了重大变革，几乎相当于重写了！主要是为了解决查询性能下降的问题

2.x系列：
专门为新一代浏览器设计，不再兼容IE9以下的浏览器！

3.x系列：
该系列只是版本的全新命名法，在功能上没有太大的变化，主要是为了解决jquery版本太多太乱的问题！
该系列有2组不同的发布文件：现在的1.x版本的继任者将称为jQuery Compat 3.x，而jQuery 2.x则由jQuery 3.x接棒。

可是，所谓的兼容版jQuery Compat 3.x的下载地址并没有出现在官网上，这点着实让jquery的爱好者有些失望！只能静观其变了。。。

【软件包问题】
下载的软件包有两种：发布版（压缩版，迷你版）和开发版（未压缩版、完整版）

两种软件包的运行效果是一样的，发布版只是把开发版中多余的空白符(空格、制表符)和注释去掉了，并且缩短了一些变量名称、方法中的参数名称和函数名称的定义，这样做的目的是压缩软件包的体积，从而加快网页的加载和脚本的执行速度。

3.jQuery快速入门

3.1.第1个jQuery程序

需求：当页面加载完成之后，alert弹出"Hello World!"。
准备：新建Web工程：jquery，新建测试目录和html文件

3.1.1.window.onload加载

部署到tomcat，测试
​​​ http://127.0.0.1:8080/jquery/a_quickstart/01_helloworld.jsp​​

3.1.2.jQuery的ready加载

1.引入jQuery
a.在项目中加入jQuery的js文件

b.将文件引入到页面

3.1.3.window.onload和jQuery的ready区别

1.执行时机不同
window.onload 会在DOM（Document Object Model：文档对象模型）载入就绪（整个文档的架子已加载完成，可以获取到所有的DOM节点），并且DOM中的所有内容全部加载完毕后才执行，举个典型的例子：当页面中有大量的图片时，浏览器会先载入 DOM，而当DOM载入完成时，DOM中的图片内容还没有完全加载到页面中，此时，window.onload并不会执行。而实际上此时已经可以执行你想要执行的脚本了，很显然，window.onload的执行时机在大多数情况下不是我们想要的。

而jQuery 提供的jQuery(document).ready(回调函数);会在页面 DOM 加载就绪后，回调函数便会立即执行！
因此，jQuery的ready会先于window.onload执行。

2.编写个数不同
window.onload采用js中的赋值操作，为其指定了一个函数：window.οnlοad=function(){…};
当再次为window.onload赋值一个新的函数时，之前的函数会被新的函数覆盖，因此window.onload的方式只能编写一个加载事件

而jQuery采用其特有的ready方法，可以同时编写多个加载事件，不会产生覆盖的问题，而且会按照编写的顺序依次执行！

代码示例：

<script type="text/javascript">
  // 页面加载完成之后执行
  window.onload = function() {
    alert("Hello World！---------传统js方式");
  };
  // 赋值操作，会覆盖之前的onload
  window.onload = function() {
    alert("Hello World！---------传统js方式2");
  };
  
  /*
    代码解析：
    
    jQuery()
      这是jQuery的核心函数，可以把这个函数理解为一个工厂，生产出来的是一个jQuery对象
    
    jQuery(document)
      把document转换为jQuery对象
    
    jQuery(document).ready(回调函数);
      既然是jQuery对象，就可以调用jQuery对象中的方法！
      ready(回调函数)，这个方法的作用是：DOM载入就绪后，执行回调函数中的代码
   */
  
  // 不会覆盖windown.onload
  jQuery(document).ready(function() {
    alert("Hello World！---------jquery方式");
  });
  
  // 不会覆盖之前的ready
  jQuery(document).ready(function() {
    alert("Hello World！---------jquery方式2");
  });
</script>

运行结果：

alert("Hello World！---------jquery方式111");
alert("Hello World！---------jquery方式222");
alert("Hello World！---------传统js方式222");

结论：先按顺序执行jQuery的每一个ready事件，最后执行最后一次绑定的window.onload事件

3.1.4.jQuery的别名$

为了简化代码，jQuery定义了一个全局的变量$作为别名来代替jQuery，即$=jQuery，$是jQuery的别名
例如，jQuery(document).ready(回调函数); 可以简写为 $(document).ready(回调函数);

3.2.jQuery的核心函数

• jQuery(callback) //页面onload函数，相当于jQuery(document).ready(callback)
• jQuery(html[, prop]) //将html片段转换为jQuery对象$(“ 1 ”)
• jQuery(selector [, context]) //根据选择器查找页面元素，默认查找整个文档document
• jQuery.holdReady(hold) //暂停或恢复.ready() 事件的执行。（了解）

3.2.1.$(callback)：页面加载完成事件

用法：

简化过程：

jQuery(document).ready(callback) ——> $(document).ready(callback) ——> $(callback)

3.2.2.$(html代码)：将html转换为jQuery对象

用法：

3.2.3.$(selector)：根据选择器查找页面元素

用法：

3.2.4.$.holdReady(hold)：暂停或恢复ready事件的执行

用法：此方法不要写在ready事件中，直接写在javascript标签中

<button id="first">点击测试弹出</button>
<button id="second">解除延迟</button> 
<script>
$.holdReady(true);      
$(document).ready(function(){ 
    $("#first").click(function(){ 
        alert("解除延迟后被弹出"); 
    }) 
}) 
$("#second").click(function(){ 
    $.holdReady(false); 
})
</script>

3.3.jQuery对象和DOM对象

3.3.1.jQuery对象和DOM对象的区别

什么是jQuery对象？
jQuery对象是jQuery框架独有的，通过jQuery的核心函数$(selector)获取。
selector也可以是一个DOM对象，jquery会把DOM对象转换为jQuery对象

什么是DOM对象？
DOM的全称是"Document Object Model"，即文档对象模型，而DOM对象指的是
某个或某些具体的节点对象，通过document.getElementXXX()获取。

两者之间的区别？
jQuery对象只能使用jQuery对象的属性和方法，不能直接使用DOM对象的属性和方法；
同样，DOM对象只能使用DOM对象的属性和方法，不能直接使用jQuery对象的属性和方法。
两种对象的属性和方法不通用！
jQuery对象在使用其属性和方法的时候，实际上底层使用的依然是DOM对象中的属性和方法。

那么，在页面中如何区分jQuery对象和DOM对象呢？在开发中有个约定：在jQuery对象的前面加$，例如：

var $mydiv = $("#mydiv"); // $mydiv是jQuery对象
var mydiv = document.getElementById(“mydiv”); // mydiv是DOM对象

3.3.2.jQuery对象和DOM对象的相互转换

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
  /*页面加载完成事件：相当于jQuery(document).ready(fn);****/
  jQuery(function($) {
    // 1. DOM对象 ===> jQuery对象
    var mydiv = document.getElementById("mydiv");
    //alert(  mydiv.html()  ); // Uncaught TypeError: mydiv.html is not a function
    var $mydiv = $(mydiv);
    //alert(  $mydiv.html()  );
    // alert(  $mydiv.innerHTML  ); // 没有该属性，但不会报错！
    
    // jQuery对象 ===> DOM对象
    // 方式1：获取jQuery对象中指定索引的DOM对象
    var mydiv = $mydiv[0];
    // alert(mydiv.innerHTML);
    // 方式2：获取jQuery对象中指定索引的DOM对象
    var mydiv = $mydiv.get(0);
    //alert(mydiv.innerHTML);
    
    // 方式3：真正将jQuery对象转为DOM对象的数组
    // 上面介绍的两种方式，只适用于jQuery中只匹配一个元素的jQuery对象的转换
    var domArr = $mydiv.get();
    // alert(domArr.length); // 1
    alert(domArr[0].innerHTML);
  });
</script>
</head>
<body>
  <div class="abc" id="mydiv"><span>123123</span></div>
</body>
</html>

【最后特别强调】

jQuery对象和DOM对象的属性和方法的调用不通用！
如果要使用jQuery对象的属性和方法，就必须使用jQuery对象来调用。