JQuery专题(一)-JQuery基础
JQuery专题(一)-JQuery基础
文章目录
1.JavaScript和JavaScript框架
1.1.JavaScript1.2.JavaScript框架
1.2.1.Prototype（JS（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（Yahoo！User Interface Library），是有Yahoo公司开发的一套完备的、扩展性良好的富交互网页程序工具集。YUI封装了一系列比较丰富的功能，例如DOM操作和Ajax应用等，同时还包括了几个核心的CSS文件。该框架本身文档极其完备，代码编写也非常规范。
1.2.4.Ext JS（JS常简称为Ext，原本是对YUI的一个扩展，主要用于创建前端用户界面，如今已经发展到可以利用包括jQuery在内的多种JavaScript框架作为基础框架，而Ext作为界面的扩展框架来使用。Ext可以用来开发拥有华丽外观的富客户端应用，能使B/S应用更加具有活力。但是由于Ext侧重于界面，本身比较臃肿，所以使用之前请先权衡利弊。另外，需要注意的是，Ext并非完全免费，如果用于商业用途，需要付费获得授权许可。
1.2.5.MooTools（当然，这里只简单的介绍了众多JavaScript框架中的一小部分，还有很多优秀的框架在这里就不一一列举了。随着时间的推移，众多JavaScript框架之间的竞争已经进入白热化阶段，而jQuery在这场激烈的竞争中，逐渐从其他JavaScript框架中脱颖而出，成为了Web开发人员的最佳选择！接下来，让我们一起来揭开jQuery的神秘面纱！
2.开始jQuery的学习之旅
2.1.jQuery简介
JQuery是继Prototype之后又一款非常优秀的JavaScript框架，由John Resig创建于2006年1月。jQuery体积小，运行速度快，它独有的极为强大的选择器，使得页面元素的查找变得非常简单，其出色的DOM操作、可靠的事件处理、完善的浏览器兼容性和链式操作等优点。
2.2.jQuery简介
1.轻量级 jQuery非常轻巧，采用Dean Edwards编写的Packer（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 }
2.4.jQuery-
【版本问题】 现在官网上有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程序
3.1.1.window.onload加载
3.1.2.jQuery的ready加载
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的方式只能编写一个加载事件
运行结果：
alert("Hello World！---------jquery方式111");alert("Hello World！---------jquery方式222");alert("Hello World！---------传统js方式222");
结论：先按顺序执行jQuery的每一个ready事件，最后执行最后一次绑定的window.onload事件
3.1.4.jQuery的别名$
3.2.jQuery的核心函数
jQuery(callback) //页面onload函数，相当于jQuery(document).ready(callback)jQuery(html[, prop]) //将html片段转换为jQuery对象$(“ 1 ”)jQuery(selector [, context]) //根据选择器查找页面元素，默认查找整个文档documentjQuery.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标签中
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"%>