JQuery入门
1 jQuery的概述
1.1 jQuery简介
jQuery是一个 JavaScript函数库，它是一个“写的更少，但做的更多”的轻量级 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。学习jQuery需要前期知识：HTML、CSS、JavaScript。
jQuery库具有的特性：HTML 元素选取和操作；CSS 操作；HTML 事件函数；JavaScript 特效和动画；HTML DOM 遍历和修改；AJAX；Utilities
一个简单的应用实例：单击<p>中的文字，其中的文字将被隐藏
1.2 jQuery的使用方法
（1）在http://jquery.com/下载jQuery库文件包，包括两个版本：一份是精简过的（jquery min.js），另一份是未压缩的（供调试或阅读jquery.js）。
（2）将jQuery库文件加入网页中
（3）编写javascript代码
在javascript中jQuery代码的形式：
为了防止文档在完全加载（就绪）之前运行 jQuery 代码，所有 jQuery 函数位于一个 document ready() 函数中。
2 jQuery的应用
2.1 jQuery的基本语法
一、核心函数
（1）jQuery基础语法是：
$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
例如：
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p.test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作，其语法是XPath与CSS的结合形式。
利用jquery的$()可以引用HTML元素，包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），jQuery对象不能直接调用dom定义的方法。
在jQuery中还支持方法的连写。所谓连写，即可以对一个jquery对象连续调用各种不同的方法。
例如：
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});
小知识：jQuery对象与dom对象的转换。
jQuery和DOM对象是有区别的，不能交换调用对方的方法，即dom对象只能调用dom对象的方法，类似地，jQuery也只能调用jQuery定义的方法。普通的dom对象一般可以通过$()转换成jquery对象。如：$(document.getElementById("msg"))，即为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合，若jquery对象要转换为dom对象，则必须取出其中的某一项来实现，一般可通过索引取出，如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get(0)，$("td")[5]，这些都是dom对象，可以使用dom中的方法，此时，则不能再使用Jquery的方法。
二、jQuery选择器
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对单个 HTML 元素或HTML元素组进行选择和操作。
1、元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取 id="demo" 的第一个 <p> 元素。
2、属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
2.2 jQuery的应用
一、选择器的应用
1、选择器处理HTML元素
（1）改变 HTML 内容
语法：$(selector).html(content)
（2）在当前内容之后添加 HTML 内容
语法：$(selector).append(content)
（3）向所有匹配元素内部的开始处插入内容
$(selector).prepend(content)
（4）当前内容之前添加HTML内容
$(selector).before(content)
（5）当前内容之后添加HTML内容
$(selector).after(content)
2、jQuery集合中对象的获取
jQuery本身是集合对象，对于jQuery集合中元素的提取，可通过索引指定的方法，即使用eq或get(n)方法或者索引号获取，要注意的是，eq返回的是jquery对象，而get(n)和索引返回的是dom对象。例如，要获取第三个<div>元素的内容。有如下两种方法：
因此，获取jQuery集合中对象采用以下几种写法都是正确的：
3、jQuery的集合处理功能
对于jQuery返回的集合内容，无需通过循环遍历对每个对象分别做处理，jQuery已经为集合处理提供相应的方法。
方法一：
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i];})
//实现表格的隔行换色效果
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2] ;})
方法二：
//为每个p元素增加了click事件，单击某个p元素则弹出其内容
$("p").click(function(){alert($(this).html());})
另外，对于任何集合对象的遍历可采用$.each()方法，语法：$.each(data,callback)。
//为一个json对象的每个属性进行遍历
$.each({name:’jie’,age:20},function(i,n){alert(‘objectName:’ + i+ ‘ objectValue:’ + n);})
4、操作元素的方式
主要包括以下几种方式：
$("#msg").css("background"); //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select"); //为元素增加名称为select的class
$("#msg").removeClass("select"); //删除元素名称为select的class
$("#msg").toggleClass("select"); //如果存在（不存在）就删除（添加）名称为select的class
二、jQuery中的事件
1、元素的事件绑定
（1）直接调用元素的事件函数绑定
事件是指页面上的元素对某项操作的响应过程。利用jQuery无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。
如：
$("#msg").click(function(){alert("good")}) //为元素添加了单击事件
//为三个不同的p元素单击事件分别设定不同的处理
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
（2）通过bind()为元素绑定事件
jQuery自定义了事件处理函数bind()，可为HTML元素添加一个或多个事件。
2、事件冒泡
事件在触发后会有两种策略：事件捕获和事件冒泡，大多数浏览器仅支持事件冒泡，jQuery同样也只支持事件冒泡。
事件冒泡的基本原理：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理 程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次 的最顶层，即document对象（有些浏览器是window）。下面通过一个例子来说明。
分为三层：divOne是第外层，divTwo中间层，hr_three是最里层；他们都有各自的click事件，最里层a标签还有href属性。
运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层---->然后再链接到百度。这就是事件冒泡，本来只点击ID为hr_three的标签，但是确执行了三个alert操作。事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne 。即从最里层冒泡到最外层。
事件冒泡的阻止：
（1）调用方法event.stopPropagation()：
当再点击“点击我”，会弹出：我是最里层，然后链接到百度。
Event.stopPropagation()的作用是，在事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（例子中的超链接的跳转）。
（2）通过return false
当再点击“点击我”，会弹出：我是最里层，但不会执行链接到百度页面。
return false的作用是：事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如例子中它就没有执行超链接的跳转）。
还有一个与事件冒泡相关的函数：event.preventDefault(); ，如果把它放在头部<a>的click事件中，点击“点击我”。执行时依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度。
event.preventDefault()的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）
事件冒泡对应触发的是上一层的同一事件。对于事件冒泡，如果父子级元素定义的相同事件时，可通过阻止要求只执行子元素的事件，但也可利用事件冒泡对于父子级元素添加不同事件。
有一个特殊情况：如果#hr_three元素设置成双击事件，则在你单击#hr_three的时候就会冒泡触发#divTwo单击的事件。
小知识：事件处理的两种策略。
当事件发生后，因为事件源本身并没有处理事件的能力，因此，这个事件将开始传播。例如，我们点击一个按钮时，就会产生一个click事件，但按钮本身不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数处理当前的click事件）。 在事件传播过程中，一旦找到一个能够处理它的函数，称这个函数捕捉到了这个事件。
1、事件捕获： 允许多个元素响应事件的一种策略。在事件捕获的过程中，事件首先会交给最外层的元素，接着再交给更具体的元素。
2、事件冒泡：另外一种相反的策略叫时间冒泡。当事件发生时，会首先发送给最具体的元素，在这个元素获得响应机会之后，事件会向上冒泡到更一般的元素。事件冒泡有时候会产生副作用，导致始料不及的行为。
假设一个元素element1，它有一个下级元素element2。如图：
这两个元素都绑定了click事件，如果用户点击了element2，它在element1和element2上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？
事件捕获：当你使用事件捕获时，父级元素先触发，子级元素后触发，即element1先触发，element2后触发。如图：
当你使用事件冒泡时，子级元素先触发，父级元素后触发，即element2先触发，element1后触发。如图：
jQuery中几个自定义的事件：
（1）ready(fn)：当DOM载入就绪时立刻调用所绑定的函数。
返回值：Object
参数-fn：要在DOM载入就绪时执行的参数
在进行事件捕获的时候，常常需要捕获组合的用户操作，并且以多个函数作为响应，这些事件我们称为复合事件。Ready就是常用的复合事件之一。
这是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。可以看作是对window.onload注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪时,而几乎所有的javaScript函数都是需要在那一刻执行。
$(document).ready(function(){alert("Load Success")})
//页面加载完毕提示“Load Success”
就绪事件函数的三种写法：
$(document).ready(function() { //this is the coding... });
$().ready(function() { //this is the coding... });
$(function() { //this is the coding... });
小知识：ready(fn)和onload()事件的区别。
1、当一个文档完全下载到浏览器中时，会触发window.onload事件。而使用$(document).ready()注册的事件处理程序，将在html下载完成并解析为Dom树之后，代码就可以运行，但并不意味着所有关联文件都已经下载完毕。
2、一个页面中一般只有一个onload事件处理程序，而且只能一次保存对一个函数的引用；而$(document).ready()是可以有多个。
3、一般来说$(document).ready()都要优于使用onload事件处理程序。但是如果关联文件还没有加载完成，则类似图像高度、宽度的属性的调用就会有问题，因此需要在不同的时候选择合适的方法。
需要注意的是，如果body标签的onload事件已经注册了某个函数 则$()事件注册的函数将不会被执行。
（2）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定
对每一个匹配的元素中（添加）删除绑定的事件。
语法：bind(type, [data], fn)
参数data：是作为event.data属性值传递给事件对象的额外数据对象。
参数fn：是绑定到每个选择元素的事件中的处理函数。
如果要在一个元素中绑定多个事件，可以将事件用空格隔开。
例如：
$("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件
$("p").unbind(); //删除所有p元素上的所有事件
$("p").unbind("click") //删除所有p元素上的单击事件
（3）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。它是进行交互处理的时候用到复合事件。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over，离开时置为out。
$("tr").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
});
（4）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。它是进行交互处理的时候用到复合事件。
如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
//每次点击时轮换添加和删除名为selected的class。
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
（5）trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如：
$("p").trigger("click"); //触发所有p元素的click事件
三、同一函数实现get()和set()方法
jQuery一些函数是可重载的，通过参数传递方式不同，可实现get()和set()两个方法的功能。如：html()、text()、height()、width()、val()，还有事件函数click()、blur()、focus()、select()、submit() 等。
//返回id为msg的元素节点的html内容。
$("#msg").html();
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
$("#msg").html("<b>new content</b>");
//返回id为msg的元素节点的文本内容。
$("#msg").text();
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中，页面显示<b>new content</b>
$("#msg").text("<b>new content</b>");
$("#msg").height(); //返回id为msg的元素的高度
$("#msg").height("300"); //将id为msg的元素的高度设为300
$("#msg").width(); //返回id为msg的元素的宽度
$("#msg").width("300"); //将id为msg的元素的宽度设为300
$("input").val("); //返回表单输入框的value值
$("input").val("test"); //将表单输入框的value值设为test
$("#msg").click(); //触发id为msg的元素的单击事件
$("#msg").click(fn); //为id为msg的元素单击事件添加函数
四、Ajax
Ajax让用户页面丰富起来, 增强用户体验，对于Ajax的实现有可能因开发人员而有所差异。jQuery提供一系列Ajax函数来帮助统一这种差异, 并且让调用Ajax更加简单。jQuery提供了几个用于发送Ajax请求的函数，其中最核心也是最复杂的是jQuery.ajax(),所有的其他Ajax函数都是它的一个简化调用,如：$.get、$.post和$().load()，除非需要操作不常用的选项，以获得更多的灵活性，才需要使用jQuery.ajax()。
1、load()
用于载入远程 HTML 文件代码并插入至 DOM 中。默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。
语法：$(selector).load(url,[data,[callback]])
使用load()以get方式进行ajax调用，加载html页面内容到指定HTML元素。
使用load()以post方式进行ajax调用，加载html页面到指定HTML元素。
2、get()
通过远程 HTTP GET 请求载入信息。
语法：$.get( url, [data], [callback], [type] )
Returns: XMLHttpRequest。
此函数发送Get请求, 参数可以直接在url中拼接, 比如:
或者通过data参数传递:
回调函数
3、post()
通过远程 HTTP POST 请求载入信息。
语法：jQuery.post( url, [data], [callback], [type] )
Returns: XMLHttpRequest
具体用法和get相同，只是提交方式由"GET"改为"POST"。
4、$.ajax()
通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。
语法：url,[settings]
Returns: XMLHttpRequest
其中settings是指设置选项，如：
async（默认true）；
contentType：(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型；
data：发送到服务器的数据，将自动转换为请求字符串格式(key/value)。GET 请求中将附加在 URL 后；
dataType：预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。
success(data,[[textStatus,] jqXHR])：请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。
type： 请求方式 ("POST" 或 "GET")，默认: "GET"。
下面是使用$.ajax()采用post()进行ajax调用的例子。
小知识：json和json的使用。
JavaScript 对象表示法（JavaScript Object Notation）。JSON 是存储和交换文本信息的语法。类似 XML。JSON 比 XML 更小、更快，更易解析。
3 jQuery的扩展
jQuery插件的开发包括两种：
一种是类级别的插件开发，jQuery.extend(object); 为扩展jQuery类本身。即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法，也可理解为添加静态方法，使用时如：$.add(3,4); jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，jQuery.fn.extend(object);即给jQuery对象添加方法，使用时如：$(“#myTxt”).add(3,4)。
小知识：jQuery.fn.extend()中fn。
在jQuery源码中可以发现fn即是prototype：
3.1 类级别插件
类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：
//定义一个全局函数
$.foo()
//定义多个全局函数
//使用jQuery.extend(object);
虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此，可将一些方法封装到另一个自定义的命名空间。
使用命名空间函数例1：
使用命名空间定义函数例2：
3.2 对象级别插件
对象级别的插件开发需要如下的两种形式:
//形式一
//形式二
//接收参数来控制插件的行为
//提供公有方法访问插件的配置项值
//提供公有方法来访问插件中其他的方法
开发一个插件的基本过程：
一个插件的基本框架：
（1）在JQuery命名空间内声明一个特定的命名
在例子中，我们将声明一个名为“hilight”的插件。
1 $.fn.tableUI = function() {
2 // Our plugin implementation code goes here.
3 };
可以这样调用：$(“#myTable”).tableUI();
(2)接收参数来控制插件的行为
定义奇偶数行的参数：evenRowClass、oddRowClass和activeRowClass。
同时写了接收参数以控件插件的行为。
var options=$.extend(default,options);
其实就是合并多个对象为一个。如果你在调用的时候写了新的参数，就用你新的参数，如果没有写，就用默认的参数。
现在，插件可以这样来调用：
$(’#myTable’).tableUI({
evenRowClass: ‘otherRow’
});
(3)加入插件功能代码
（4）加上版本、作者等信息
四、几个jQuery方法的注解
1、$.browser.浏览器类型
检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。
2、$.each(obj, fn)：通用的迭代函数。
可用于近似地迭代对象和数组（代替循环）。
如
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
等价于：
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
alert("Item #"+i+": "+tempArr[i]);
}
也可以处理json数据，如
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
结果为：
Name:name, Value:John
Name:lang, Value:JS
3、$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。
如：
$.extend(settings, options);
//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数（合并多项并返回）
4、$.map(array, fn)：数组映射。
把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。
如：
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为：[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为：[2,3]
5、$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
$.trim(str)：删除字符串两端的空白字符。
如：$.trim(" hello, how are you? "); //返回"hello,how are you? "
4.jqzoom插件更换图片
官方的代码：
[javascript] view plaincopy
1 var options =
2 {
3 zoomWidth: 400,
4 zoomHeight: 300,
5 xOffset: 5,
6 title: false,
7 lens: true
8
9 };
10
11 $(function() {
12 $(".jqzoom").jqzoom(options);
13 });
自定义的动态更换放大图的代码（也用的jquery）：
[javascript] view plaincopy
14 function changeImg(imgFileName) {
15
16 $(".jqZoomWindow").remove();//关键操作1
17 $(".jqZoomPup").remove(); //关键操作2
18
19 $("img[id=img_productMainImg]").attr("src",imgFileName);
20 $("a[id=a_productMainImg]").unbind(); //关键操作3
21 $("img[id=img_productMainImg]").unbind(); //关键操作4
22
23 $("a[id=a_productMainImg]").attr("href",imgFileName).jqzoom(options);
24 }
http://blog.csdn.net/changbird/article/details/5444562
2.jquery-ui
2.1注意事项: 使用jquery-ui的脚本,都必需在 文档准备好之后调用,即:
$(function(){
});
Dialog show方法本身不会显示,要让让其显示需要调用
Dialog(“open”);