JQuery入门

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”);