jQuery

###jQuery 简介

####Javascript

JavaScript 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。

同时也是一种广泛用于客户端 Web 开发的脚本语言，常用来给 HTML 网页添加动态功能，比如响应用户 的各种操作。

它由 Netscape（网景公司）设计，Netscape 公司在最初将其脚本语言命名为 LiveScript。

在 Netscape 在与 Sun 合作之后将其改名为 JavaScript。

针对 JavaScript 微软推出了 JScript 以取得技术优势，为了实现两种脚本的互用 Ecma 国际创建了 ECMA-262 标准（ECMAScript），因此现在两者都属于 ECMAScript 的实现。

####JavaScript 库

为了简化 JavaScript 的开发，出现了一些 JavaScript 库。它们封装了很多预定义的对象和 函数，使 web 开发更加轻松便捷。

Prototype

Prototype是最早成型的 Javascript 库之一，它对 Javascript 的内置对象做了大量的拓展，可以看做是一个将大量有用的 Javascript 方法组合在一起形成的库。

Dojo

Dojo 提供了其他 Javascript 库不具备的功能，如离线存储、生成图标等。

它是一款适合企业级应用的 Javascript 库。并且得到了 IBM、SUN 等大公司的支持。

YUI

YUI 是由 yahoo 公司开发的完备的拓展性良好的富交互网页程序工具集，其封装了一系列丰富的功能。

Ext JS

Ext 原本是 YUI 的拓展，现今发展为可以利用其它多种 Javascript 框架作为基础库，来实现华丽的界面。

MooTools

MooTools 是一套轻量、简洁、模块化的面向对象的 Javascript 框架。其语法类似于 Prototype但相比之下其拓展性兼容性以及功能都更加优秀。

####jQuery 简介

Jquery 是继 prototype 之后又一个优秀的 Javascript 框架。它是轻量级的 js 库，兼容 CSS3以及各种浏览器。

jQuery 使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为网站提供 AJAX 交互。同时还有许多成熟的插件可供选择。

jQuery 拥有强大的选择器功能，可以通过 id 来调用 js 函数，从而实现 html 页保持代码和html 内容的分离。

综上其优点为：轻量级、可以方便的实现 DOM 操作、拥有选择器功能、可靠的事件处理机制、完善的 Ajax 操作、不污染顶级变量、兼容各大浏览器、支持链式操作、行为层与结构层分离、富含丰富的插件、拥有完善的文档、开源。

jQuery 对象

每一个 html 页面都可以看做一棵树，其中每一个节点都叫做 DOM 元素节点，jQuery 对象是通过包装 DOM 对象产生的。

其声明如下： var $variable = jQueryObject;

调用 jQuery

<script src="src/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript"> jQuery(function(){....}) </script>

###jQuery 选择器

类似于 Css，jQuery 也是通过选择器定位到特定的 DOM 元素，然后为其添加相应的行为。

####基本选择器

基本选择器是 jQuery 中最常用的选择器，它通过元素 id、class 和标签名来查找 DOM 元素。

选择器	描述	示例
#id	根据 id 匹配返回单个元素	$("#test")
.class	根据 class 匹配返回集合元素	$(".test")
element	根据元素匹配返回集合元素	$("p")
selector1,selector2	匹配 selector1 和 selector2 并返回集合元素	$(".test1, .test2")

####层次选择器

根据 DOM 元素之间的层次结构来获取指定元素，如后代元素、子元素、相邻元素、兄弟元素等。

*其中后代元素范围涵盖了子元素，其涵盖表现在叠加的层次上。

选择器	描述	示例
ancestor descendant	返回 ancestor 下所有 descendant 元素	$("div span")
parent > child	返回 parent 下一层的 child 元素	$("div > span")
prev + next	返回 prev 后的第一个 next 元素	$("div + span")
prev ~siblings	返回 prev 后的所有 siblings 元素	$("div ~ span")

####过滤选择器

过滤选择器按照特定的过滤规则来筛选所需的 DOM 元素，其规则类似与伪类。

按照不同的过滤规则，又分为基本过滤、内容过滤、属性过滤、子元素过滤、表单对象属性过滤以及可见性过滤。

基本过滤选择器

选择器	描述	示例
:first :last	选取第一个/最后一个元素	$("div:first")/$("div:last")
:not(selector)	排除 selector 元素	$("input:not(.myclsaa)")
:even :odd	选取索引为奇数/偶数的所有元素	$("input:even")/$("input:odd")
:eq(index)	选取索引为 index 的元素	$("input:eq(1)")
:gt(index) :lt(index)	选取索引大于/小于 index 的元素	$("input:gt(1)")/$("input:lt(1)")

内容过滤选择器

选择器	描述	示例
:contains(text)	选取文本内容为 text 的元素	$("div:contains(‘我’)")
:empty	选取不包含子元素/文本的元素	$("div:empty")
:has(selector)	选取含有 selector 的元素	$("div:has(p)")
:parent	选取含有子元素/文本的元素	$("div:parent")

可见性过滤选择器

选择器	描述	示例
:hidden	选取不可见元素	$("*:hidden")
:visible	选取可见元素	$("div:visible")

属性过滤选择器

选择器	描述	示例
[attribute]	选取含有此属性的元素	$("div[id]")
[attribute=value]	选取属性值为 value 的元素	$("div[title=test]")
[attribute!=value]	选取属性值不为 value 的元素	$("div[title!=test]")
[attribute^=value]	选取值以 value 开始的元素	$("div[title^=test]")
[attribute$=value]	选取值以 value 结束的元素	$("div[title$=test]")
[attribute*=value]	选取值含有 value 的元素	$("div[title*=test]")

子元素过滤选择器

选择器	描述	示例
:first-child	选取第一个子元素	$("ul li:first-child")
:last-child	选取最后一个子元素	$("ul li:last-child")
:only-child	选取唯一一个子元素	$("ul li:only-child")

表单对象属性过滤选择器

选择器	描述	示例
:enabled	选取所有可用对象	$("#form :enabled")
:disabled	选取所有不可用对象	$("#form :disabled")
:checked	选取所有被选中对象(单/复选框)	$("input :checked")
:selected	选取所有被选中对象(下拉列表)	$("select :selected")

####表单选择器

表单选择器可用方便的获取表单中某个或某些元素。

选择器	描述	示例
:input :image :password	选取表单中对应 html 元素	`$(":input")`
:text :submit :checkbox		$(":text")
:radio :reset :button		$(":radio")

###DOM 操作

####DOM

介绍

DOM 是 Document Object Model 的缩写，即文档对象模型，DOM 是一种与浏览器、平台、语言无关的接口。使用该接口可用轻松的访问页面中所有的标准组件。

简单的说 DOM 解决了 Javascript 和 Jscript 之间的冲突。

操作分类

DOM 操作一般分为三个方面:DOM Core、HTML-DOM、CSS-DOM。

DOM Core可用任何一种支持 DOM 的程序设计语言处理任何一种标记语言写的文档，其中操作方法就是 DOM Core(核心)的组成部分。

如 document.getElementsByTagName("form"); 来获取表单对象。

HTML-DOM 提供了一些简明的记号来描述各种 html 元素的属性。

如 document.forms 提供一个 forms 对象。

CSS-DOM 是针对 CSS 的操作，CSS-DOM 主要用来获取和设置 style 对象的各种属性，从而使网友特呈现出不同的效果。

如 element.style.color="red";

####jQuery&DOM

#####节点操作

查找节点

jQuery 可以通过选择器轻松的查找文档树中的节点，然后用 attr 方法获取元素各种属性值。

查找元素节点

var $li = $("ul li:eq(1)");
var li_txt = $li.text(); alert(li_txt);

查找属性节点

var $para = $("p"); var p_txt = $para.attr("title"); alert(p_txt);

创建节点

创建元素节点

var $li_1 = $("<li></li>"); var $li_2 = $("<li></li>"); //创建元素
$("ul").append($li_1); $("ul").append($li_2); //将元素插入文档中

创建文本节点

var $li_1 = $("<li>banana</li>");
var $li_2 = $("<li>apple</li>"); //创建包含文本的元素
$("ul").append($li_1);
$("ul").append($li_2); //将文本元素插入文档中

创建属性节点

var $li_1 = $("<li titler="banana">banana</li>");
var $li_2 = $("<li title="apple">apple</li>"); //创建含有属性的元素
$("ul").append($li_1); $("ul").append($li_2); //将节点插入文档中

插入节点

插入节点方法除 append 外还有：appendTo、prepend、prependTo、after、insertAfter、before 以及 insertBefore。

删除节点

可以通过 empty 清空节点，通过 remove 删除节点。

$("ul li:eq(1)").empty(); //清空第二个 li 元素的内容，此时页面会显示·
$("ul li:eq(1)").remove(); //删除第二个 li 元素，此时页面中无任何显示

复制节点 通过 clone 方法复制节点。

$("ul li").clone().appendTo("ul"); //复制 ul li 节点并添加到 ul 下

替换节点

通过 replaceAll、replaceWith 方法替换节点。

$("<p>替换前的内容</p>").replaceWith("<strong>替换的内容</strong>");

包裹节点

可以通过 wrap 方法将节点包裹起来。以及 warpall 全部包裹，warpinner 反向包裹。

$("strong").warp("<br></br>"); //用<br></br>把<strong></strong>包裹起来。

#####属性操作

获取属性和设置属性

通过选择器获取元素。

var $para = $("p");
var p_txt = $para.attr("title"); //获取 P 元素的 title 属性
$("p").arrt("title","your title"); //设置 P 元素的 title 值

删除属性

通过 removeAttr 方法删除属性。

$("p").removeAttr("title");

#####样式操作

获取样式和设置样式

所谓的获取和设置样式是针对元素绑定的样式而言，因为样式也是元素的一个属性，所有可用通过属性的获取和设置实现相应样式的操作。

$("p").attr("class","hight"); //设置 p 元素的 class 为 hight

追加样式

样式作为可用叠加使用的属性，可以通过 addClass 方法追加。

$("p").addClass("another"); //给<p>元素追加 another 样式

移除样式

和属性操作类似可以通过 removeClass 方法移除样式。

$("p").removeClass(); //移除 P 元素所有样式

切换样式

切换样式可以通过 toggle()方法实现。

$toggleBtn.toggle(function(){ //显示元素 },function(){ //隐藏元素 })

该方法可以实现两个函数之间显示隐藏的切换。

判断是否含有样式

通过 hasClass 方法可以判断某个元素是否包含特定的样式。

$("p").hasClass("another"); //判断 p 元素是否含有 another 样式

#####设置获取 html、文本和值

html()

html 方法用于设置 html 代码。

$("p").html("<strong>设置 html 代码</strong>");

text()

用户获取设置元素的文本信息。

var p_text = $("p").text();
alert(p_text); //获取元素的文本信息并输出
$("p").text("设置文本内容");

val()

用于获取设置元素的值。

var txt_value = $("#address").val(); //获取地址文本框的值
$("#address").val("设置地址文本框的值");

#####Css-DOM

和样式操作不同，Css-DOM 是指对真正的样式细节进行设置。

$("p").css("color"); //获取 P 元素 css 样式的颜色
$("p").css("color","red"); //设置 P 元素 css 样式颜色为 red

###事件

Javascript和 html 之间交互是通过用户操作浏览器上的页面引发事件来实现的。

jQuery 拓展了 Javascript 的事件处理机制，简化了事件处理语法并增强了事件处理能力。

####加载 DOM

当页面加载完毕后，浏览器或通过 Javascript 为 DOM 元素添加事件。在 Javascript 中通过window.onload 方法实现，而在 jQuery 中则是通过$(document).ready()实现。

两者区别在于前者是将所有元素都加载到浏览器后才会执行，而后者是 DOM 就绪后即可，此时可能有些元素并未加载到浏览器，因为将网页解析为 DOM 树的速度要快于页面中所有相关元素都加载完毕。

$(document).ready(function(){...})方法可以简写作：$(function(){})

####事件绑定

在 DOM 解析完成后，可以在加载方法中调用 bind 以将元素和特定的事件绑定。

$(function(){$("#panel h5 .head").bind("mouseover",function(){...鼠标滑过执行事件...})})

同样事件绑定也支持简写形式，形式如下：

$(function(){$("#panel h5 .head").mouseover(function(){...鼠标滑过执行事件...})})

绑定多个事件时，每个事件后用 ; 间隔，作为加载方法的参数写入即可。

$(function(){$("selector1").click(function(){...})};
$("selector2").click(function(){...}))

####合成事件

jQuery 可以通过 hover 和 toggle 方法合成事件。

hover 中有两个函数参数，一个是鼠标进入(enter)一个是鼠标离开(leave)，其写法如下：

$(function(){$(".class").hover(function(){..//鼠标进入..},function(){..//鼠标离开..})})

toggle 用于模拟鼠标连续单击事件，每次单击鼠标都会处罚对应的事件。

####事件冒泡

当多个元素绑定同一个事件后，可能会导致触发事件后影响多个元素。

比如某内层 class 和外层 class 都绑定了 click 事件，当在内层元素上点击鼠标时，外层绑定的 click 事件也会被执行，从而造成页面混乱。针对这样的问题需要一个标识来唯一确定事件触发后要影响哪个具体的元素，因此引入了事件对象概念。

用法如下：

$("element").bind("click",function(event){...//event:事件对象...})

通过事件对象调用停止事件冒泡方法可以防止其他对象的事件处理函数被执行：

$("span").click(function(event){ ... event.stopPropagation();})

#####阻止默认行为

页面中的某些元素具有默认的行为，如点击 submit 按钮会提交页面，有时我们需要阻止类似的行为。

可以通过事件对象的 preventDefault()方法实现。

$(function(){$("#sub").click(function(event){....event.preventDefault();})})

#####移除事件

通过 unbind 方法可以解除元素和事件的绑定，也可以根据参数指定特定的要移除的某事件。

$("#delAll").click(function(){$("button").unbind("click");});
//移除元素 button 的全部 click 事件
$("#del").click(function(){$("button").unbind("click",funName)})
//移除元素 button click 事件下的 funName 操作

#####事件对象

jQuery 在 W3C 的规范下对事件对象常用的属性和方法进行封装，使得事件对象可以在各大浏览器正常运行，省去了判断浏览器类型的麻烦。

|属性名| 说明| 属性名| 说明 |:--|:--|:-- |pageX/pageY|获取当前鼠标位置的横/纵坐标 |which| 获取鼠标按键：123-左中右 |type| 获取事件类型 |target| 获取触发事件的元素

|方法名| 说明| 方法名| 说明 |:--|:--|:-- |preventDefault |阻止默认事件执行 |stopPropagation| 停止事件冒泡

#####模拟操作

可以用模拟操作模拟用户和浏览器的交互操作，从而自动触发事件执行操作。

$(function(){ $("button").trigger("click"); })
//计算机自动触发 button 的 click 事件
$(function(){ $("button").click();})
//模拟操作的简写形式

模拟操作也可以触发自定义操作，自定义操作也可以通过 bind 方法定义。示例如下：

$("button").bind("myOperate",function(event,para){....});
//绑定自定义操作
$("button").trigger("myOperate",["传递的参数"]) //触发自定义操作

#####其他用法

一个元素绑定多个事件类型。

$(function($("div").bind("mouseover mouseout",function(){...})))

用命名空间区别同名事件。

$(function($("div").bind("click",function(){});$("div").bind("click.namespace",function(){...})))

###动画

通过 jQuery 的动画方法可以轻松的为网页添加经常的视觉效果。

####常用动画

show()&hide()

show/hide 用于操作元素的 display 属性，实现元素的显示和隐藏。

会同时修改元素的多个属性，如宽度、高度、不透明度。

$("element").hide(); //隐藏元素

可以通过参数实现元素显隐缓动的效果，其中参数为毫秒。

$("element").show("slow"); //实现元素缓慢显示
$("element").hide(1000); //1000毫秒实现元素不透明度 100-0 的过渡

fadeIn()&fadeOut()

fadeIn/fadeOut 用于改变元素的不透明度。

sildeUp()&sildeDown()

sildeUp/sildeDown 用于改变元素的高度。

####自定义动画

jQuery 可以通过 animate 方法自定义动画，从而实现更多的控制。

animate({params},speed,callback); //样式属性，速度，动画完成调用的函数。

#####简单动画

$(function(){$("#div").animate({left: "500px"},3000)}) //3 秒内向右移动 500像素

#####累加动画

$(function(){$("#div").animate({left: "+=50px"},3000)})
//在当前位置的基础上向右移动

#####多重动画

同时执行多个动画。

$(function(){$("div").animate({left: "5px",height: "2px"},3000)})

按顺序执行多个动画。

$(function(){$("div").animate({left: "5px"},3000).animate({height: "2px"},3000)})

####动画方法

callback

callback 一般用于更改 css 样式 如：$(this).css("5px solid blue");

#####常用方法

stop 停止动画 is(":animated") 判断元素是否执行动画中。

#####其他方法

toggle 切换元素的显隐状态 fadeTo 调整元素不透明度到确定的值。

###Ajax 应用

####Ajax Ajax 即异步 Javascript 和 XML(Asynchronous Javascript and XML)，是利用一系列交互式网页应用相关的技术所形成的结合体，实现了页面无刷新更新的功能。

#####Ajax 优点

1. 不需要浏览器插件。
2. 优秀的用户体验。
3. 提高 web 程序的性能。
4. 减轻服务器和带宽的负担。

#####Ajax 不足

1. 浏览器对 XMLHttpRequest 对象的支持度不足。
2. 破坏浏览器前进后退按钮的功能。
3. 对搜索引擎支持不足 4.开发调试工具缺乏。

####XMLHttpRequest

XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。

XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM文档形式返回内容。

遗憾的是 XMLHttpRequest 对象还没有标准化，但是 W3C 已经开始了标准化的工作。

####jQuery&Ajax

jQuery对 Ajax 进行了封装，在jQuery中$.ajax()是最底层的方法，其次是load()、$.get()、$.post()最后是$.getScript()和$.getJson()。

load()

load方法能载入远程的 html文档并插入DOM 中。其中通过选择器指定加载的远程html文档的位置。

<div class="position"></div>
$(function(){$("send").click(function(){$("position").load("target.html");});});

load 方法的第二个参数可以实现筛选载入 html 文档。

$("position").load("target.html .class");
//载入 target 文档中类名为 class 的区块

$get() & $post()

get 和 post 都可以获取表单中的数据，提交到服务器并返回到响应页面，不同的是：

1. get 请求会将参数跟在 URL 后进行传递，post 请求则作为 http 消息实体发给服务器。
2. get 传输的数据不能超过 2k，而 post 数据大小理论上没有限制。
3. get 方式请求的数据会被浏览器储存，存在安全问题。post 不存在。

下面以$.post 为例说明函数的使用。

$("send").click(function()
{$.post("target.php",{username:$("username").val(),content:$("contnet").val() },
function(data,textStatus){ $("text").append(data) ;});})
//其中点击 send 按钮将表单中数据传输到 target.php 页面，将表单中 username 文本框中
//的值赋给 username 变量，将记录所有变量信息的 data作为参数传递给函数使用

$.getScript()&$.getJson()

jQuery 提供了一种加载 js 文件的方法即：$.getScript()。同理$.getJSON()用于加载 Json文件，不同的是 Json 文件记录的数据可以通过 data 变量作为参数传递给 function 供页面使用。

相应实例如下：

$(function(){$.getScript("target.js",function(){ ...//成功加载 js 文件后执行的代码段 });})
$(function(){$.getJSON("target.json",function(data){...//调用 json 数据的代码段});})

$.ajax()

$.ajxa()是 jQuery 最底层的 ajax 实现，可以根据$.ajax()参数的不同完全实现以上所有方法。

示例如下：

$.ajax({ type:"POST", url:"target.json", dataType:"json", success : function(data){...} });

###jQuery 插件

插件作用	名称	插件作用	名称
表单验证插件	Validation	UI 插件	jQuery UI
表单插件	Form cookie	管理插件	Cookie
动态绑定插件	livequery