yanguz123

jQuery总结

一、简介

1.1、概述

随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等，通过将这些JS框架应用到我

们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。

jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的，它有助于简化 JavaScript™ 以及Ajax 编程。有人使用这样的一比喻来比较prototype和jQuery：

prototype就像Java，而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。

它具有如下一些特点：

1、代码简练、语义易懂、学习快速、文档丰富。

2、jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。

3、jQuery支持CSS1-CSS3,以及基本的xPath。

4、jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。

5、可以很容易的为jQuery扩展其他功能。

6、能将JS代码和HTML代码完全分离，便于代码和维护和修改。

7、插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。

jQuery的设计会改变你写JavaScript代码的方式，降低你学习使用JS操作网页的复杂度，提高网页JS开发效率，无论对于js初学者还是资深专家，jQuery都将是您的首选。

jQuery适合于设计师、开发者以及那些爱好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不同的Web应用程序中。

官方站点：http://jquery.com/ 中文站点：http://jquery.org.cn/

1.2、目的

通过学习本文档，能够对jQuery有一个简单的认识了解，清楚JQuery与其他JS框架的不同，掌握jQuery的常用语法、使用技巧及注意事项。

二、使用方法

在需要使用JQuery的页面中引入JQuery的js文件即可。

例如：<script type="text/javascript" src="js/jquery.js"></script>

引入之后便可在页面的任意地方使用jQuery提供的语法。

三、学习教程及参考资料

请参照《jQuery中文API手册》和http://jquery.org.cn/visual/cn/index.xml

推荐两篇不错的jquery教程：《jQuery的起点教程》和《使用 jQuery 简化 Ajax 开发》

(说明：以上文档都放在了【附件】中)

四、语法总结和注意事项

1、关于页面元素的引用

通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。

普通的dom对象一般可以通过$()转换成jquery对象。

如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。

由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。

以下几种写法都是正确的：

$("#msg").html();

$("#msg")[0].innerHTML;

$("#msg").eq(0)[0].innerHTML;

$("#msg").get(0).innerHTML;

3、如何获取jQuery集合的某一项

对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用

jquery的方法，而dom对象只能使用dom的方法，如要获取第三个<div>元素的内容。有如下两种方法：

$("div").eq(2).html(); //调用jquery对象的方法

$("div").get(2).innerHTML; //调用dom的方法属性

4、同一函数实现set和get

Jquery中的很多方法都是如此，主要包括如下几个：

$("#msg").html(); //返回id为msg的元素节点的html内容。

$("#msg").html("<b>new content</b>"); //将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$("#msg").text(); //返回id为msg的元素节点的文本内容。

$("#msg").text("<b>new content</b>"); //将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<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的元素单击事件添加函数

同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能

对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。

包括两种形式：

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f']})

//为索引分别为0，1，2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})

//实现表格的隔行换色效果

$("p").click(function(){alert($(this).html())})

//为每个p元素增加了click事件，单击某个p元素则弹出其内容

6、扩展我们需要的功能

$.extend({

min: function(a, b){return a < b?a:b; },

max: function(a, b){return a > b?a:b; }

}); //为jquery扩展了min,max两个方法

使用扩展的方法（通过“$.方法名”调用）：

alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

7、支持方法的连写

所谓连写，即可以对一个jquery对象连续调用各种不同的方法。

例如：

$("p").click(function(){alert($(this).html())})

.mouseover(function(){alert('mouse over event')})

.each(function(i){this.style.color=['#f00','#0f0','#00f']});

8、操作元素的样式

主要包括以下几种方式：

$("#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

9、完善的事件处理功能

Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。

如：

$("#msg").click(function(){alert("good")}) //为元素添加了单击事件

$("p").click(function(i){this.style.color=['#f00','#0f0','#00f']})

//为三个不同的p元素单击事件分别设定不同的处理

jQuery中几个自定义的事件：

（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的

第二个函数。

//当鼠标放在表格的某行上时将class置为over，离开时置为out。

$("tr").hover(function(){

$(this).addClass("over");

},function(){

$(this).addClass("out");

});

（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){alert("Load Success")})

//页面加载完毕提示“Load Success”,不同于onload事件，onload需要页面内容加载完毕（图片等），而ready只要页面html代码下载完毕即触发。与$(fn)等价

（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两

个函数的轮番调用。

//每次点击时轮换添加和删除名为selected的class。

$("p").toggle(function(){

$(this).addClass("selected");

},function(){

$(this).removeClass("selected");

});

（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。

例如：

$("p").trigger("click"); //触发所有p元素的click事件

（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定

从每一个匹配的元素中（添加）删除绑定的事件。

例如：

$("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件

$("p").unbind(); //删除所有p元素上的所有事件

$("p").unbind("click") //删除所有p元素上的单击事件

10、几个实用特效功能

其中toggle()和slidetoggle()方法提供了状态切换功能。

如toggle()方法包括了hide()和show()方法。

slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法

$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。

$.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);

}

也可以处理json数据，如

$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });

结果为：

Name:name, Value:John

Name:lang, Value:JS

$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。

如：

$.extend(settings, options);

//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。

var settings = $.extend({}, defaults, options);

//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。

可以有多个参数（合并多项并返回）

$.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]

$.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? "

12、解决自定义方法或其他类库与jQuery的冲突

很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解

决此问题。

使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法

$("#msg")改为jQuery("#msg")。

如：

jQuery.noConflict();

// 开始使用jQuery

jQuery("div p").hide();

// 使用其他库的 $()

$("content").style.display = 'none';

1>.jquery中的eq()和get()

eq()返回的是一个jquery对象

get()返回的是一个dom对象

举个例子:

使用eq()来获得第一个p标签的color值：$("p").eq(0).css("color"); //因为eq(num)返回的是个jq对象,所以可以用jq的方法css

使用get来获得第一个p标签的color值：$("p").get(0).style.color; //因为get(num)返回的是个html对象,所以要使用传统的HTML对象方法,jq对象此时就没用了

当然也可以get(num)后把对象转化为jquery对象再进行操作：$($("p").get(0)).css("color");

2>.获取文本框的值

$("#txtuname").val(); or $("input[@name='txtuname']").val();

$.map(array, fn):数组映射.把一个数组中的项目(处理转换后)保存到到另一个新数组中,返回生成的新数组.

eg: var tempArr1=$.map([0,1,2],function(i){ return i + 4; });

tempArr1为[4,5,6]

由于jquery对象本身是一个集合所以如果jquery对象要转换为dom对象则必须取出其中的某一项一般可通过索引取出

如：$("#msg")[0]，$("div").eq(1)[0]，$("td")[5]这些都是dom对象

toggle();

1.切换元素的可见状态，隐藏则显示，显示则隐藏

2.每次点击时切换要调用的函数

eg:

$("p:eq(0)").toggle(function()

{

$(this).css("color","red");

function()

{

$(this).css("color","yellow");

});

$(document).ready()是在DOM结构载入完后执行的，

而window.onload是在所有文件都加载完后执行的，

注意区别,一个是DOM加载完,一个是所有文件加载完

function test()

{

$("#zc li:eq(0)").fadeOut("slow",function()

{

$(this).clone().appendTo($(this).parent()).fadeIn("slow");

$(this).remove();

});

}

setInterval("test()",1000);

<ul>

</ul>

jquery中判断浏览器的类型

$.browser.msie

$.browser.mozilla

$.browser.safari

$.browser.opera

$('#faq').find('dd').hide().end().find('dt').click(function() {

1> var answer = $(this).next();

2> if (answer.is(':visible'))

3> {

4> answer.slideUp();

5> }

6> else

7> {

8> answer.slideDown();

9> }

});

</dl>

补充:1>-9> 可以写为 $(this).next().slideToggle();

empty() 删除匹配对象的所有子节点

<p>after</p>

</div>

<a href="#" onClick="jq()">jQuery</a>

function jq(){

$("#test").empty();

}

执行后相当于

<div id="test"></div><a href="#" onClick="jq()">jQuery</a>

remove([expr]) 删除匹配对象--参数可选

1.<p>Hello</p> how are <p>you?</p>

$("p").remove();

执行后相当于

how are

2.<p class="hello">Hello</p> how are <p>you?</p>

$("p").remove(".hello");

执行后相当于

how are <p>you?</p>

:first 只匹配一个元素

:first-child 为每个父元素匹配一个子元素

:last

:last-child 同理

eg:

<ul>

<li>Brandon</li>

</ul>

<ul>

<li>Ralph</li>

</ul>

$("ul li:first") //[<li>John</li>]

$("ul li:first-child") //[<li>John</li>,<li>Glen</li>]

排除第一行

$("tr:not(:first)").css("color","red");

提问：

<input id="remember" name="remember" type="checkbox">Test

JS：

var remember = $("#remember").val();

为什么我无论是否选中该复选框 remember的值都是on

answer:

因为checkbox的默认value值是on,你checked or unchecked只是改变了checked这个属性而已

解说$("div [a]")与$("div a")

$("div[a]") 表示包含a标签的div,返回的是div标签对象

$("div a") 表示div中的a标签,返回的是a标签对象

表格中的每一个空列中都添加一个横杠可以使用:empty伪选择器

$('td:empty').html('-');

表格的隔行换色

$("tr").each(function(i)

{

this.style.backgroundColor=['red'][i%2] //表示偶数行为红色奇数行色不变

});

==>

$("tr:even").each(function()

{

this.style.backgroundColor='red'

});

注意:

this.style.backgroundColor=['#ccc','#fff'][i%2]

对i%2取余数，要么为0要么为1，

所以要么是['#ccc','#fff'][0] 要么是['#ccc','#fff'][1]

所以要么是#ccc,要么是#fff -->即奇数行为#ccc,偶数行为#fff

next() next(expr) 返回匹配对象剩余的兄弟节点

<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>

jQuery代码及功能

function jq(){

alert($("p").next().html());

alert($("p").next(".selected").html());

}

$("p").next()返回 [ <p id="a">Hello Again</p> , <p class="selected">And Again</p> ]两个对象

$("p").next(".selected)只返回 [<p class="selected">And Again</p> ]一个对象

1. :nth-child(index/even/odd/equation)用法

定义：匹配其父元素下的第N个子或奇偶元素 ':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！

可以使用如下语法：

:nth-child(2) //索引为2的元素

:nth-child(even) //索引为偶数元素

:nth-child(odd) //索引为奇数元素

:nth-child(3n) //索引为3 * n的元素，n=0,1,2,3,4...，呃...3不是死的，你可以换成如1,2,4,5,6...之类的，下同

:nth-child(3n+1) //索引为3 * n + 1的元素，n=0,1,2,3,4...

:nth-child(3n+2) //索引为3 * n + 2的元素，n=0,1,2,3,4...

返回值：Array<Element>

参数：index (Number) : 要匹配元素的序号，从1开始

2. :first-child用法

定义:匹配第一个子元素 ':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

3. :last-child用法

定义:匹配最后一个子元素 ':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

4. :only-child用法

定义:如果某个元素是父元素中唯一的子元素,那将会被匹配如果父元素中含有其他元素,那将不

会被匹配

工具函数是指在jQuery对象(即变量"$")上定义的函数，这些函数都是工具类函数。比如C#中最常用的trim()函数

JSON 基础

简单地说，JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者

在异步应用程序中将字符串从 Web 客户机传递给服务器端程序

jQuery教程－函数学习之Ajax部分

函数：$.ajax(properties)

功能：用一个http请求访问一个远程页面

返回：XMLHttpRequest

参数；

(String)url请求地址，

(String)type请求类型(”GET”,”POST”)

(String)dataType:从服务器端返回的数据类型(”xml”,”html”,”script”,”json”)

(Boolean)ifModified:根据Last-Modified header判断返回内容是否改变

(Number)timeout：请求超时

(Boolean)global:对此次请求是否引起全局的ajax事件出来，默认true

(Function)error:错误处理函数

(Function)complete:请求完成后的处理函数

(Object|String)data:发送到服务器端的数据

(String) contentType ：默认”application/x-www-form-urlencoded”

(Boolean) processData ：传输到服务器端的数据默认被转换到query string中以适合默认”application/x-www-form-urlencoded”

方式，如果你想以DOMDocuments方式传输数据，就将该选项设为false

(Boolean)aysnc:是否异步传输，默认为true

(Function)beforeSend:请求前响应函数

==========================================================================================

$(function()

{

var divleft=0,divtop=0,b=false;

$("#test").mousedown(function(e)

{

divleft = e.pageX-parseInt($(this).css('left'));

divtop = e.pageY-parseInt($(this).css('top'));

b=true;

}).mouseup(function()

{

b=false;

}).mousemove(function(e)

{

if(b)

{

$(this).css('left',e.pageX-divleft);

$(this).css('top',e.pageY-divtop);

}

});

</script>

拖动我试试看

</div>

================================================================================================

禁止右键

$(document).ready(function()

{

$(document).bind("contextmenu",function(e)

{

return false;

});

================================================================================================

bind();

可以一次绑定多个事件事件与事件之间用空格隔开

eg:

$("p").bind("mouseover mouseout",function()

{

alert("hello");

});

=================================================================================================

$(function()

{

$("a").click(function()

{

$(this).hide("slow");

return false;

});

程序解释：

点击超链接,超链接就会慢慢的消失。

return false 表示保留默认行为，因此页面不会跳转。

=========================================================================================

$("p").toggle();

注:

切换元素的可见状态

如果元素是可见的,切换为隐藏的；如果元素是隐藏的,切换为可见的.

=========================================================================================

$("p").toggle(function() //每次点击时切换要调用的函数

{

//to do

function()

{

//to do

});

==========================================================================================

hover(function()

{

});

hover(function()

{

function()

{

});

===========================================================================================

filter(".selected,:first");

=>保留第一个以及带有selected类的元素

hasClass(class);

=>hasClass("protected") 返回值为true/false

replaceAll();

eg:$("<b>Paragraph.</b>").replaceAll("p");

把所以的段落标记替换为加粗标记

replaceWith();

eg:$("p").replaceWith("<b>Paragraph.</b>");

同上

:header 匹配如h1,h2,h3之类的标题元素

eg:$(":header").css("color","red");

addClass();

removeClass();

hasClass();

toggleClass(); 存在则删除,不存在则添加

var t1=$("#a").width();

var t2=$("#a").css("width");

t1 => 200 不带单位

t2 => 200px 带单位

$("p").find("span");

=>$("p > span");

empty();删除匹配对象(元素)的所有子节点

=====================================================

<table>

<tr><td>Value 1</td><td></td></tr>

<tr><td>Value 2</td><td></td></tr>

</table>

:empty 匹配所有不包含子元素或者文本的空元素

eg: $("td:empty");

结果

:parent 匹配含有子元素或者文本的元素

eg: $("td:parent");

结果

<td>Value 1</td>, <td>Value 2</td>

:animated用法

匹配所有正在执行动画效果的元素

实例：将ID为"div_2"的DIV中没有执行动画效果的元素的背景色改为红色

代码： $("#div_2 :not(:animated)").css("background-color","red");

==================================================================================================

//为索引分别为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]})

==================================================================================================

trigger(eventtype)

在每一个匹配的元素上触发某类事件。

例如：

$("p").trigger("click"); //触发所有p元素的click事件

=================================================================================================

live(type,fn);

jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。也能绑定自定义事件。

目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。

还不支持 blur, focus, mouseenter, mouseleave, change, submit

与bind()不同的是，live()一次只能绑定一个事件。

这个方法跟传统的bind很像，区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说，如果你给页面上所有的li用live绑定了click事件。那么当在以后增

加一个li到这个页面时，对于这个新增加的li，其click事件依然可用。而无需重新给这种新增加的元素绑定事件。

==================================================================================================

$(document).ready(function(){

$("input").keyup(function () {

var value = $(this).val();

$("p").text(value);

}).keyup();

});

</script>

<p></p>

解说:

如果去掉后一个keyup看似也没有问题

但是当你在input中写入些东西后再刷新页面

就会发现input中的内容还在但p中的内容已经不复存在了

这就是input的特殊之处

所以要用第二个keyup来进行页面的初始化

让两者内容在一开始就保持同步

================================================================================================

$("table > tr").html(); 会输入null

为什么会输入null 因为table的子节点并不是tr而是tbody

可以用$("table").html() 看看

================================================================================================

获取鼠标移动坐标

$(document).mouseover(function()

{

$("p").html(e.pageX+"\n"+e.pageY);

});

================================================================================================

after(html) 在匹配元素后插入一段html

================================================================================================

注意区分empty()，empty()移出匹配对象的子节点，remove()，移出匹配对象

================================================================================================

jQuery中的任何动画效果，都可以指定3种速度参数，即"slow"、"normal"、"fast"(时间长度分别是0.6秒、 0.4秒和0.2秒)。

当使用速度关键字时要加引号，例如show("slow")，如果用数字作为时间参数时就不需要加引号，例如 show(1000)。

================================================================================================

$("#id").get(0)=$("#id")[0]返回的是DOM对象.

当使用方法而不带参数时,结果将是触发操作而不是绑定行为如:

$(document).ready(function()

{

$("#id").click();

});

等价于

$(document).ready(function()

{

$("#id").trigger("click");

});

================================================================================================

选择器

常用的方法

jQuery插件

jquery文件有智能提示版本（开发时用）、源码版本、压缩版本（发布时用）

★判断对象是否存在：if($("#d1").length>0){}

jQeury顶级对象缩写$

$() 里面可以拼字符串

1、$(document).ready(function(){

})

缩写

$(function(){

})

dom加载完成后触发，比onload提前执行

window.onload

只能注册一个方法，如果注册多个方法，最后一次会把之前的覆盖

页面所有内容加载完成后触发（图片，css，js都加载）

2、jQuery对象(包装集) dom对象

var txt= document.getElementById("id") dom对象

//dom对象-》jQuery对象

var $txt=$(txt);

$txt.val("123");//这样就可以使用jquery对象的属性和方法

var $txt = $("#id") jQuery对象，包装集,对dom对象包装，返回的是很多个dom对象

//jQuery对象-》dom对象

var txt = $txt[0];//var txt=$txt.get(0);

txt.value="123";//这样就可以使用dom对象的方法和属性了

3、each 函数(处理字典)

$.each(array,fn)对数组arry每个元素调用fn函数进行处理，没有返回值。猜猜内部实现。

var arr = { "tom": "汤姆", "jerry": "杰瑞", "lily": " 莉莉" };

$.each(arr, function(key, value) { alert(key +"="+value); });

map 函数（只能对数组进行操作，并返回新的数组）

$.map()

4、jQeury选择器

一般选择器：

$("#id")

$(".class")

$("input")

复合选择器 $("#id,.class,input")

5、$(who).when(what) $("#btn").click(function(){})

6、层次选择器

$("div p") 包含选择器 div中所有的p 子元素子子元素..

$("div > p") 子后代选择器 div中直接子后代

7、常用的方法html()

text() 读取或设置标签之间的内容

val() 读取或设置表单的值

css() （）里面可以是json数据

attr() ★

使用attr()方法获取或者设置元素的属性，对于JQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。

alert($(“#btn1").attr("href")); //获取href属性

$("#btn1").attr("href", "http://www.rupeng.com");

removeAttr() 删除属性

节点遍历的方法：

prev() prevAll() ()里可以加选择器进行约束

next() nextAll() 都是兄弟节点（同一级别的）

自己除外

sibling() 兄弟姐妹节点（自己除外）

★end() 返回最近一次对包装集的破坏之前的状态

★andSelf()

addClass()

removeClass()

toggleClass()

this是当前dom对象要转换为jquery对象使用 $(this)

8、简单选择器（索引都是从0开始的）

:first 选取第一个元素 $("div:first")

:last 选取最后一个元素

:not(选择器) 选取不满足“选择器”条件的元素$("div:not(#id)")

:even、:odd，选取索引是奇数、偶数的元素

:eq(索引序号)、:gt(索引序号)、:lt(索引序号)

不仅可以使用选择器进行进行绝对定位，还可以进行相对定位，只要在$()指定第二个参数，第二个参数为相对的元素. $("ul", $(this)).css("background", "red");

9、设置样式（一般使用类样式设置style时使用）

css() 设置行内样式设置标签的style属性

attr("class","c1") 对class属性赋值设置标签的所有属性

addClass("myclass")(不影响其他样式)

removeClass("myclass")移除样式

toggleClass("myclass")如果存在样式则去掉样式，如果没有样式则添加样式

hasClass("myclass")判断是否存在样式

10、链式编程

$(this).css("background-color", "red").siblings().css("background-color", "white");

---------------------------

11、属性过滤选择器

$("div[id]")选取有id属性

$("div[title=test]")选取title属性为test的元素

$("div[title!=test]")选取title属性不为test的元素

etc....查看帮助

12、表单选择器

$(":input")匹配所有 input, textarea, select 和 button 元素

$(":text")匹配所有匹配所有的单行文本框

$(":checkbox")匹配所有复选框

$(":password")选取所有密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button 、:file、:hidden。

etc.....查看帮助

12.1表单对象选择器

$(":checkbox:checked")

$("select option:selected") 下拉列框

$("input:disabled")

$("input:enabled")

13、动态创建Dom

var link = $("<a href='http://www.baidu.com'>百度</a>");动态创建jquery对象，只是在内存中

$("div:first").append(link); 把动态创建的jquery对象，加到第一个div中

（★）动态创建dom注意：

var some = $("<div id='d1'>a<p></p>c</div>")

当把动态创建的节点添加到窗体前，不能通过$("#d1")访问到它

必须先把some追加到窗体

$("div:first").append(some);

才可以通过$("#d1") 中找到它

（★）不仅可以使用选择器进行进行绝对定位，还可以进行相对定位，只要在$()指定第二个参数，第二个参数为相对的元素. $("ul", $(this)).css("background", "red");

给动态生成的控件的子控件注册事件需要用到this

append 把link元素追加到哪$("div:first").append(link);

appendTo link.appendTo("div:first")

在结束标签之前添加元素

prepend

prependTo

在开始标签之后添加元素

after

在结束标签外添加元素

before

在开始标签前添加元素

14、删除节点

remove() 删除当前节点(标签) 删除的对象还在内存中

empty() 清空当前节点之间的内容，节点保留会把对象的事件移除

设置RadioButton的选中值：

$("input[name=gender]").val(["女"]);

或者

$(":radio[name=gender]").val(["女"]);

----------------------

15、绑定事件

绑定事件 $("#id").bind("click",function(){})

绑定多个事件：

$(":button[value=bind]").bind({

"click": function () { alert("click"); },

"mouseover": function () { alert("mouseover"); }

})

解除绑定 $("#id").unbind("click")

让事件只执行一次 $("#id").one("click",function(){})

合成事件hover toggle

（★）hover(enterfn,leavefn) 当鼠标放上时执行enterfn，当鼠标离开时执行leavefn（内部封装了mouseover 和 mousout）

toggle(fn1,fn2) 当鼠标第一次点击时执行fn1，第二次点击执行fn2，以后依次执行

16、事件冒泡

mouseover、mouseenter mouseover会事件冒泡，mouseenter不会

mouseout、mouseleave

阻止事件冒泡(★) ）

$("#d1").click(function(e){ e.stopPropagation();})

阻止默认行为：有的元素有默认行为，比如超链接点击后会转向新链接、提交按钮默认会提交表单，如果想阻止默认行为只要调用事件对象的preventDefault()方法和Dom中的

window.event.returnValue=false效果一样。

$("a").click(function(e) { alert("所有超链接暂时全部禁止点击"); e.preventDefault(); });

（return false 只是在事件响应函数中使用）

17、*事件参数（都通过e参数传过来）

pageX、pageY 设置坐标位置

eg: $div.css("top",e.pageX);

target 获得触发事件的元素(冒泡的起始，和this不一样)

altKey、shiftKey、ctrlKey

keyCode 键盘码、charCode ascii码

which如果是鼠标事件获得按键（1左键，2中键，3右键）。

18、动画（★）

show()、hide() （）里可带设置速度的参数

toggle() 切换显示/隐藏

slideDown、slideUp、 fadeOut、fadeIn、slideToggle

animate 复杂动画

animate：anmite内部设置的多个值是同步变化的，链式的animate是依次动画的。

例子：animate({ left: 0, top: 0, width: 300, height: 300 })、.animate({ opacity: 0 }).animate({ opacity: 1 })。

还可以指定增量，$(“#div1”).animate({ height: “+=100” }); //如果是+=、-=等增量形式要写成字符串，因为JavaScript不认识这种语法

先调用非动态的在执行动态的（解决方案：使用callback）

19、插件

使用JQueryUI

1、引用jquery的css（注意不要忘了image文件夹）

2、引用jquery.js，引用jqueryui.js（如果想减小尺寸，可以引用单独的每个插件的js）

3、查看文档，根据说明使用，一般就是在ready里面加一句类似于$("#aa").draggle();

“development-bundle\demos”是例子，development-bundle\docs是每个控件的详细用法。

jQuery validate：

1、 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

2、设置元素的class="required" minlength等属性加name属性

3、窗体加载时候调用$("#f1").validate();

4、提示内容显示为中文messages_cn.js 在开发包的localization文件夹下

5、自定义出错样式和成功样式

自定义出错样式和成功样式

//提示出错文本样式

label.error

{

background: url(../images/access_disallow.gif) no-repeat 0px 0px;

color: Red;

padding-left: 20px;

}

//提示成功样式

label.checked

{

background: url(../images/access_allow.gif) no-repeat 0px 0px;

}

//出错控件样式

input.error

{

border: dashed 1px red;

}

当验证成功后，给当前提示label加上提示成功样式

$("#f1").validate({

success: function(label) {

// set   as text for IE6

label.html(" ").addClass("checked");

}

});

6、自定义提示内容

View Code

1 $("#signupForm").validate({

2 rules: {

3 firstname: "required",

4 lastname: "required",

5 username: {

6 required: true,

7 minlength: 2

8 },

9 password: {

10 required: true,

11 minlength: 5

12 },

13 confirm_password: {

14 required: true,

15 minlength: 5,

16 equalTo: "#password"

17 },

18 email: {

19 required: true,

20 email: true

21 },

22 agree: "required"

23 },

24 messages: {

25 firstname: "Please enter your firstname",

26 lastname: "Please enter your lastname",

27 username: {

28 required: "Please enter a username",

29 minlength: "Your username must consist of at least 2 characters"

30 },

31 password: {

32 required: "Please provide a password",

33 minlength: "Your password must be at least 5 characters long"

34 },

35 confirm_password: {

36 required: "Please provide a password",

37 minlength: "Your password must be at least 5 characters long",

38 equalTo: "Please enter the same password as above"

39 },

40 email: "Please enter a valid email address",

41 agree: "Please accept our policy"

42 }

43 });

jquery cookie的使用：

1、添加对jquery.cookie.js

2、设置值，$.cookie('名字', '值')。cookie中保存的值都是文本。

3、读取值，var v=$.cookie('名字')

一、核心:$是jquery类的一个别名,$()构造一个jquery对象,jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。

1、 ${表达式}：根据这个表达式来查找所有匹配的元素。

eg:$("div>p"); 查找所有p元素，且这些p元素都是div的子元素.

$("input:radio",document.forms[0]); 查找文档第一个表单中，所有的单选按钮。

$("div",xml.responseXML);在一个由ajax返回的xml文档中，查找所有的div元素。

2、$(html标记字符串) :根据提供的html字符串，创建jquery对象包装的dom元素。

eg: $("<div><p>Hello</p></div>").appendTo("body");

创建一个 <input> 元素必须同时设定 type 属性

$("<input type='text'>")

3、$(dom元素):将一个或多个dom元素转换为jquery对象。

eg: $(document.body).css( "background", "black" ); 设置页面背景色

4、$(document).ready(function(){})==$(function(){})；在页面加载完成后自动执行的代码。

二、jquery对象访问。eq返回的是jquery对象，只能使用jquery方法，get返回的是dom元素对象，只能使用dom方法.

1、$(dom元素).each(function(){}):以每一个匹配的元素作为上下文来执行一个函数

2、$(dom元素).size()==$(dom元素).length;对象中元素的个数。eg:<img src="test1.jpg"/> <img src="test2.jpg"/>,jquery代码：$("img").size(); 返回2

3、context：返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。

4、$(dom元素).get()：取得所有匹配的dom元素的集合。如果你想要直接操作 DOM 对象而不是 jQuery 对象，这个函数非常有用。

5、$(dom元素).get(index)：取得其中一个匹配的元素.

6、$(dom元素).index():搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。

三、插件机制:

1、jQuery.fn.extend(object);扩展 jQuery 元素集来提供新的方法,针对某一个dom元素。

eg:jQuery.fn.extend({

check: function() { return this.each(function() { this.checked = true; });},

uncheck: function() { return this.each(function() { this.checked = false; });}

});

调用：

$("input[type=checkbox]").check();

$("input[type=radio]").uncheck();

2、$.extend(object);用来在jQuery命名空间上增加新函数,针对所有dom元素。

$.extend({

min:function(a,b){return a<b?a:b;},

max:function(a,b){return a>b?a;b;}

});

调用：$.max(10,20);

四、选择器

基本：

1、$("#id"): 根据给定的ID匹配一个元素。

2、$("dom元素名")：根据给定的元素名匹配所有元素

3、$(".Class类名"): 根据给定的类匹配元素。

4、$("*") ：匹配所有元素。

5、$("dom元素.class类名")：选择所有class属性为指定类名的dom元素。

6、$(".stripe tr"): 获取class属性为stripe的table元素下的所有行

层级：

1、$("ancestor descendant"):在给定的祖先元素下匹配所有的后代元素

2、$("parent > child"):在给定的父元素下匹配所有的子元素

3、$("prev + next"):匹配所有紧接在 prev 元素后的 next 元素

4、$("prev ~ siblings"):匹配 prev 元素之后的所有 siblings(同级) 元素

简单:

1、$("tr:first") 匹配找到的第一个元素

2、$("tr:last") 匹配找到的最后一个元素

3、$("input:not(:checked)") 去除所有与给定选择器匹配的元素

4、$("tr:even") 匹配所有索引值为偶数的元素，从 0 开始计数

5、$("tr:odd") 匹配所有索引值为奇数的元素，从 0 开始计数

6、$("tr:eq(1)") 匹配一个给定索引值的元素

7、$("tr:gt(0)") 匹配所有大于给定索引值的元素

8、$("tr:lt(2)") 匹配所有小于给定索引值的元素

内容：

1、$("div:contains('John')") 匹配包含给定文本的元素

2、$("div:has(p)") 匹配所有包含 p 元素的 div 元素

3、$("td:empty") 查找所有不包含子元素或者文本的空元素

可见性：

1、$("tr:visible") 查找所有可见的 tr 元素

2、$("tr:hidden") 匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到

属性：

1、$("div[id]") 查找所有含有 id 属性的 div 元素

2、$("input[name='newsletter']") 查找所有 name 属性是 newsletter 的 input 元素

3、$("input[name!='newsletter']") 查找所有 name 属性不是 newsletter 的 input 元素

4、$("input[name^='news']") 查找所有 name 以 'news' 开始的 input 元素

5、$("input[name$='letter']") 查找所有 name 以 'letter' 结尾的 input 元素

6、$("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素

7、$("input[id][name$='man']") 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的

子元素：

1、nth-child(even)/:nth-child(odd)/:nth-child(3n)/:nth-child(2)/:nth-child(3n+1)/:nth-child(3n+2) 匹配其父元素下的第N个子或奇偶元素

2、$("ul li:first-child") 在每个 ul 中查找第一个 li

3、$("ul li:last-child") 在每个 ul 中查找最后一个 li

4、$("ul li:only-child") 在 ul 中查找是唯一子元素的 li

表单：

1、$(":input") 查找所有的input元素

2、$("text") 匹配所有的单行文本框

3、$(":password") 匹配所有密码框

4、$("radio") 匹配所有单选按钮

5、$("checkbox") 匹配所有复选框

6、$("submit") 匹配所有提交按钮

7、$("image") 匹配所有图像域

8、$("button") 匹配所有按钮

9、$("file") 匹配所有文件域

10、$("hidden") 匹配所有不可见元素，或者type为hidden的元素

表单对象属性：

1、$("input:checked") 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

2、$("input:enabled") 匹配所有可用元素

3、$("input:disabled") 匹配所有不可用元素

4、$("select option:selected") 匹配所有选中的option元素

五、属性操作

操作属性：

1、$("img").attr("src"); 返回文档中第一个图像的src属性值。

2、$("img").attr("src","test.jpg"); 为所有匹配的元素设置一个属性值

3、$("img").attr("title", function() { return this.src }); 为所有匹配的元素设置一个计算的属性值

4、$("img").removeAttr("src"); 从每一个匹配的元素中删除一个属性

5、$("img").attr({ src: "test.jpg", alt: "Test Image" }); 将一个“名/值”形式的对象设置为所有匹配元素的属性。

操作CSS:

1、$("p").addClass("selected"); 为每个匹配的元素添加指定的类名

2、$("p").removeClass("selected"); 从所有匹配的元素中删除全部或者指定的类。一个或多个要删除的CSS类名，请用空格分开$("p").removeClass();删除匹配元素的所有类

3、$("p").toggleClass("selected"); 如果存在（不存在）就删除（添加）一个类

4、 var count = 0;

$("p").click(function(){

$(this).toggleClass("highlight", count++ % 3 == 0);

}); 每点击三下加上一次 'selected' 类

HTML代码:

1、$("div").html(); 取得第一个匹配元素的html内容

2、$("div").html("<p>Hello Again</p>"); 设置每一个匹配元素的html内容

文本：

1、$("p").text(); 取得所有匹配元素的内容

2、$("p").text("<b>Some</b> new text."); 设置所有匹配元素的文本内容

值：

1、 $("#single").val() 获得第一个匹配元素的当前值。

2、$("input").val("hello world!"); 设置每一个匹配元素的值

六、筛选

过滤：

1、$("p").eq(1) 获取第N个元素，这个元素的位置是从0算起

2、 if ( $(this).hasClass("protected") ) 检查当前的元素是否含有某个特定的类，如果有，则返回true。

3、$("p").filter(".selected") 筛选出与指定表达式匹配的元素集合

4、is(expr) 用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

5、$("p").not( $("#selected")[0] ) 删除与指定表达式匹配的元素

查找：

1、$("div").children();取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

2、$("p").find("span");搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

3、$("p").next();取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合

4、$("p").prev();取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

5、$("div").parent;取得一个包含着所有匹配元素的唯一父元素的元素集合。

6、$("span").parents;找到每个span元素的所有祖先元素

7、$("div").siblings();取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

七、文档处理

内部插入：

1、$("p").append("<b>Hello</b>"); 向每个匹配的元素内部尾部追加内容

2、$("p").prepend("<b>Hello</b>"); 向每个匹配的元素内部前部追加内容

3、$("p").appendTo("#foo"); 把所有段落追加到ID值为foo的元素中。

外部插入：

1、$("p").after("<b>Hello</b>"); 在每个匹配的元素之后插入内容

2、$("p").before("<b>Hello</b>"); 在每个匹配的元素之前插入内容

包裹

1、$("p").wrap("<div class='wrap'></div>"); 把所有匹配的元素用其他元素的结构化标记包裹起来。

替换：

1、$("p").replaceWith("<b>Paragraph. </b>"); 将所有匹配的元素替换成指定的HTML或DOM元素。

删除：

1、$("p").empty(); 删除匹配的元素集合中所有的子节点。

2、$("p").remove(); 从DOM中删除所有匹配的元素

八、CSS操作

CSS:

1、$("p").css("color"); 取得第一个段落的color样式属性的值

2、$("p").css({ color: "#ff0011", background: "blue" }); 把一个“名/值对”对象设置为所有匹配元素的样式属性。

3、$("p").css("color","red"); 在所有匹配的元素中，设置一个样式属性的值

位置：

1、var offset = p.offset();获取匹配元素在当前视口的相对偏移，返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。

2、var position = p.position();获取匹配元素相对父元素的偏移

尺寸：

1、$("p").height(); 取得第一个匹配元素当前计算的高度值（px）。

2、$("p").height(20); 为每个匹配的元素设置CSS高度(hidth)属性的值

3、$("p").width(); 取得第一个匹配元素当前计算的宽度值（px）。$(window).width(); 获取当前窗口的宽

4、$("p").width(20); 为每个匹配的元素设置CSS宽度(width)属性的值

九、效果

基本：

1、$("p").show() 显示隐藏的匹配元素

2、$("p").hide() 隐藏显示的元素

3、$("p").show("slow"); 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。

speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

callback (Function) : (Optional) 在动画完成时执行的函数，每个元素执行一次。

用迅速的动画将隐藏的段落显示出来，历时200毫秒。并在之后执行反馈！

<p style="display: none">Hello</p>

jQuery 代码:

$("p").show("fast",function(){

$(this).text("Animation Done!");

});

4、$("p").hide("slow"); 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。

5、$("p").toggle() 切换元素的可见状态

6、$("p").toggle("slow"); 以优雅的动画切换所有匹配的元素，并在显示完成后可选地触发一个回调函数

淡入淡出:

1、$("p").fadeIn("slow"); 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数

2、$("p").fadeOut("slow"); 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

3、$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66); 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数

自定义：

1、$("#block").animate({

width: "90%",

height: "100%",

fontSize: "20em",

borderWidth: 10

201}, 1000 );用于创建自定义动画的函数。

十、事件

事件处理：

1、$("p").bind("click", function(){ alert( $(this).text() );}); 为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数

2、$("p").one("click",function(){alert(${this}.text());}) 当所有段落被第一次点击的时候，显示所有其文本

3、trigger(type,[data])在每一个匹配的元素上触发某类事件

事件委派：$("p").live("click", function(){$(this).after("<p>Another paragraph!</p>");});。给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。也能绑定自定义事件

。与bind()不同的是，live()一次只能绑定一个事件

事件切换:一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法

$("td").hover(

function () {

$(this).addClass("hover");

function () {

$(this).removeClass("hover");

}

);鼠标悬停的表格加上特定的类

4、每次点击后依次调用函数。

$("td").toggle(

function () {

$(this).addClass("selected");

function () {

$(this).removeClass("selected");

}

);

5、事件:

1、$("p").blur(); 触发每一个匹配元素的blur事件

2、$("p").blur( function () { alert("Hello World!"); } ); 在每一个匹配元素的blur事件中绑定一个处理函数

3、change()；change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触

4、change(fn);在每一个匹配元素的change事件中绑定一个处理函数。

5、$("p").click(); 触发每一个匹配元素的click事件

6、$("p").click(function(){});在每一个匹配元素的click事件中绑定一个处理函数

7、dblclick()；dblclick事件会在元素的同一点双击时触发。

8、$("p").dblclick( function () { alert("Hello World!"); }); 在每一个匹配元素的dblclick事件中绑定一个处理函数。

9、$(document).ready(function(){ $("#login").focus();}); 触发每一个匹配元素的focus事件。

10、$("input[type=text]").focus(function(){this.blur();}); 在每一个匹配元素的focus事件中绑定一个处理函数。

11、keydown()；keydown事件会在键盘按下时触发。

12、keydown(fn)；在每一个匹配元素的keydown事件中绑定一个处理函数。

13、keypress()；触发每一个匹配元素的keypress事件

14、keypress(fn)；在每一个匹配元素的keypress事件中绑定一个处理函数。

15、keyup()；触发每一个匹配元素的keyup事件

16、keyup(fn)；在每一个匹配元素的keyup事件中绑定一个处理函数。

17、mousedown();

18、mouseup();

19、mousemove();

20、mouseover();

21、mouseout();

22、$("form:first").submit();提交本页的第一个表单。

23、$("form").submit(function(){return false;});阻止页面提交。

十一、ajax

ajax请求：

1、通有方式：$.ajax(prop);prop是一个hash表，它可以传递的key/value有以下几种:

(String)type：数据传递方式(get或post)。

((String)url：数据请求页面的url

((String)data：传递数据的参数字符串，只适合post方式

((String)dataType：期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")

((Boolean)ifModified：当最后一次请求的相应有变化是才成功返回，默认值是false

((Number)timeout:设置时间延迟请求的时间。可以参考$.ajaxTimeout

((Boolean)global：是否为当前请求触发ajax全局事件，默认为true

((Function)error：当请求失败时触发的函数。

((Function)success：当请求成功时触发函数

((Function)complete：当请求完成后出发函数

2、$.get(url, params, callback) 用get方式向远程页面传递参数，请求完成后处理函数，除了url外，其它参数任意选择！

eg:$.get( "ajax.asp",

{ name: "young", age: "25" },

function(data){ alert("Data Loaded: " + data); }

)

3、$.getJSON(url, params, callback) 用get方式向远程json对象传递参数，请求完成后处理函数callback

4、$.post(url, params, callback) 用post方式向远程页面传递参数，请求完成后处理函数callback

十二、工具类

数组和对象操作：

1、$.each(obj,callback); 通用例遍方法，可用于例遍对象和数组。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。

$.each( [0,1,2], function(i, n){alert( "Item #" + i + ": " + n );});

2、jQuery.grep(array,callback,[invert])；使用过滤函数过滤数组元素，此函数至少传递两个参数：待过滤数组和过滤函数

3、$.map(array,callback);将一个数组中的元素转换到另一个数组中

4、$.inArray(value,array);确定第一个参数在数组中的位置(如果没有找到则返回 -1 ),从0开始。

5、$.merge( [0,1,2], [2,3,4] ) ；合并两个数组。返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素，不去掉重复项。

6、$.unique(array);删除数组中重复元素

7、$.trim(" hello, how are you? "); 去掉字符串起始和结尾的空格

8、$.isArray(obj);测试对象是否为数组。

9、$.isFunction(obj); 测试对象是否为函数

URL:

1、$.param(obj);将表单元素数组或者对象序列化。是.serialize()的核心方法。

eg:var params = { width:1680, height:1050 }; var str = jQuery.param(params);

2、$("form").serialize() ；序列表单内容为字符串，用于 Ajax 请求

十三、jquery操作单选框

if($("input[type='radio']:checked")){

var tt=$("input[name='chk']:checked").val();

}

十四、jquery操作复选框

var chkArr="";

$(".cc:checked").each(function(){

chkArr+=$(this).val()+"|";

});

十五、jquery实现复选框全选

var checked=$("#allchk").attr("checked");

$(".ww").each(function(){

if($(this).attr("checked")!=checked){$(this).click();}

});

JQuery总结

jquery, 官网：http://jquery.com/。目前最新版本：jquery-1.4.4，可在官网上下载，有两种：jquery-1.4.4.js和jquery-1.4.4.min.js，前者比较全，后者只包含一些主要的功能。

一、DOM

document object model，即文档对象模型，可以看成是层次结构组织的节点或者信息的组合。该层次结构允许开发人员在树中导航寻找特定信息。网页中的各个元素可以看成是一个dom元素，从某种意

义上看，DOM可以说是专门为了解决各种不同版本的javascript之间冲突百产生的。

二、jQuery选择器：

$("#theId")根据一个id得到一个dom对象

$(".theClass")根据一个class得到一个dom对象

$(document).ready(function(){ }); //在页面加载时运行的函数

$("#theId").click(function(){ }); //点击事件，不只是按钮，还有其它很多种dom都可以响应

$(".cls1,.cls2").addClass("green"); //其中green是css，完整：.green{background-color:green; }

$("form label") //得到form里面的所有label

$("form > label") //得到form里面的直接label子孩子

$("form + label") //得到form相邻的label元素

$("form ~ label") //得到form之后所有平级的label元素

$("tr:first") //得到表格第一行，即第一个tr

同样还有$("tr:last") , $("tr:even")偶数行 , $("tr:odd")奇数行, $("tr:eq(1)")第二行, $("tr:gt(2)")大于第二行, $("tr:lt(1)")小于第二行, $("tr:empty")空行，与之相反的

$("tr:parent")所有非空行，$("tr:hidden")隐藏行，$("tr:visible")可以行

内容过滤：

$("div .test:contains('mycontent')")//所有包含mycontent内容的都会被选中。

$("div .test:has(p)")//class="test"的div中内含<p>元素的都会被选中

$("div .test:not(.mycls)")

$("ul li:nth-child(2)") //选中ul里面的第二个li

$("ul li:nth-child(3n)") //选中ul里面的第三、六、九……个li

$("ul li:first-child") //选中ul里面的第一个li

$("ul li:last-child") //选中ul里面的最后一个li

$("ul li:even") //选中ul里面的偶数li，index以0开始

$("ul li:odd") //选中ul里面的奇数li，index以1开始

$("ul:nth-child(even)") //ul下是偶数的子元素，index以1开始

$("ul:nth-child(odd)") //ul下是奇数的子元素，index以1开始

$("ul:nth-child(2)") //如果ul下有子元素或嵌套子元素，取出第二个，index以1开始

$("ul:nth-child(2n)") //如果ul下有子元素或嵌套子元素，取出第2n个，index以1开始

$(":empty") //选中所有的独一的，没有children的元素

$("p:parent") //选中所有含有<p>的父级元素

$("#mydiv ul li:only-child") //选中mydiv里只有一个li的ul

$(":input") //选中所有的input元素

$("input：enabled")

$("input：disabled")

$("input：checked")

$("select option:selected")

$("input[class]") //有class属性的input

$("input[name=thename]")

$("input[name!=thename]")

$("input[name^=first]") //以first开头

$("input[name$=name]") //以name结尾

$("input[name*=stna]") //模糊匹配

三、设置属性

$("input").attr("name")//得到name属性

$("#mydiv").css("margin") //得到css

$("input").attr("value","内容") //设置属性

$("#mydiv").css("margin-top","10px") //添加css

$("#mydiv").css({

"margin-top":"10px",

"color":"green"

})

$("input").attr("value",function(){return this.name})

移除属性

$("input").removeAttr("value")

操作css

$("input").addClass("myclass")

$("input").removeClass("myclass")

$("input").toggleClass("myclass") //添加或删除

$("#content p#second").offset().top //取得坐标的上位置

$("#content p#second").height() //获得

$("#content p#second").height(80) //设置

设置内容

$("#content").html()

$("#content").html("这是新加上的文字")

$("#content").text() //只得到文本内容

$("#userName").val("ling")

$("#multiple").val(["青岛","北京"])//设置列表中的选中项

加上filter

$("p").filter(".first").css("background-color","green")

$("p").not(".first").css("background-color","green")

$("input #firstname").next().addClass("green")

$("input #firstname").next("#city").addClass("green")

四、dom操作

插入

$("#testbtn").append("<b>测试</b>");

$("#testbtn").prepend("<b>测试</b>");

$("#testbtn").after("<b>测试</b>"); //插入到后面

$("#testbtn").before("<b>测试</b>"); //插入到前面

包裹

$("#testbtn").wrap("<div class='wrapped'></div>");

$("#testbtn").wrap("<b></b>");

替换

$("#mydiv .test").replaceAll($("p")); //用class="test"的dom替换<p>

$("#mydiv .second").replaceWith($("#mydiv .test"));

删除

$("#mydiv .second").empty();

$("p").remove("#second")

empty()是只移除了指定元素中的所有子节点，拿$("p").empty()来说，他只是把<p>dsfsd</p>中的文本给移除了，而留下了<p></p>,仍保留其在dom中所占的位置。

remove([expr])则是把其从dom中删除，而不会保留其所占的位置。

例:

<p>Hello</p>

World

<p>welcome</p>

执行$("p").empty()其结果是

<p></p>

World

<p></p>

执行$("p").remove()其结果是

World

clone

$("#myBtn").clone().prependTo($("p #second")); //可以把按钮及其所有相关的属性等一起复制过去

$("#myBtn").clone().insertAfter(this);

五、事件

绑定事件

$("#myBtn").bind("click",function(){ $(this).val(""); }); //绑定事件，清空

$("#myBtn").unbind(）

触发

(1)$("form").bind("submit",function(){……});

(2)$("#test").click(function(){ $("form").trigger("submit");}) //当点击test内容时，会触发form的提交

或

(1)$("#test").click(function(event,par1,par2){……})

(2)$("#test").trigger("click",["Hello","World"]);

$("#test").show() //还有hide()

$("#test").toggle(

function(){alert("第一次点击")},

function(){alert("第二次点击")},

function(){alert("第三次点击")},

function(){alert("第四次点击")}

);

其它事件：

dblclick

mousedown

mousemove

mouseout

mouseover

mouseup

keydown

keypress

keyup

blur

focus

六、动画与效果

$("test").hide("slow") //"normal","fast"

$("test").hide(2000) //2s

还可以加函数：$("test").hide(2000,funtion(){ });

show也和上面一样

一样的还有：

slideUp() //向上卷起

slideDown()

slideToggle()

fadeIn() //淡入

fadeOut() //淡出

自定义透明度：fadeTo(2000,0.2)或fadeTo(2000,0.2,function(){ })

$("test").animate({height:'toggle', opacity:'toggle'},"slow"); //toggle表示在有和无之间切换

动画队列

会按顺序依次执行

$("test").animate({height:'70%'},{queue:false, duration:2000}) //queue:false表示不按队列的顺序来

.animate({font-size:'5em'},{queue:false, duration:2000})

.animate({paddingLeft:'20px'},{queue:false, duration:2000})

现在的公司做的项目应用的是JQuery框架，正好在学习这方面的知识，以后会经常总结一些这方面的技巧，其实说实在的这个脚本框架，只要用的多了就熟能生巧了。

JQuery特点：

代码简练、语义易懂、学习快速、文档丰富。

jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。

jQuery支持CSS1-CSS3,以及基本的xPath。

jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。

可以很容易的为jQuery扩展其他功能。

能将JS代码和HTML代码完全分离，便于代码和维护和修改。

插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。

1、jQuery对象与dom对象的转换

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。

普通的dom对象一般可以通过$()转换成jquery对象。

如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。

由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。

以下几种写法都是正确的：

$("#msg").html();

$("#msg")[0].innerHTML;

$("#msg").eq(0)[0].innerHTML;

$("#msg").get(0).innerHTML;

2、如何获取jQuery集合的某一项

jquery的方法，而dom对象只能使用dom的方法，如要获取第三个<div>元素的内容。有如下两种方法：

$("div").eq(2).html(); //调用jquery对象的方法

$("div").get(2).innerHTML; //调用dom的方法属性

3、同一函数实现set和get

Jquery中的很多方法都是如此，主要包括如下几个：

$("#msg").html(); //返回id为msg的元素节点的html内容。

$("#msg").html("<b>new content</b>");

//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$("#msg").text(); //返回id为msg的元素节点的文本内容。

$("#msg").text("<b>new content</b>");

//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<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的元素单击事件添加函数

同样blur,focus,select,submit事件都可以有这两种调用方法

4、集合处理功能

对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。

包括两种形式：

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})

//为索引分别为0，1，2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})

//实现表格的隔行换色效果

$("p").click(function(){alert($(this).html())})

//为每个p元素增加了click事件，单击某个p元素则弹出其内容

5、扩展我们需要的功能

$.extend({

min: function(a, b){return a < b?a:b; },

max: function(a, b){return a > b?a:b; }

}); //为jquery扩展了min,max两个方法

使用扩展的方法（通过“$.方法名”调用）：

alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

6、支持方法的连写

所谓连写，即可以对一个jquery对象连续调用各种不同的方法。

例如：

$("p").click(function(){alert($(this).html())})

.mouseover(function(){alert('mouse over event')})

.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});

7、操作元素的样式

主要包括以下几种方式：

$("#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

8、完善的事件处理功能

Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。

如：

$("#msg").click(function(){alert("good")}) //为元素添加了单击事件

$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]}) //为三个不同的p元素单击事件分别设定不同的处理

jQuery中几个自定义的事件：

第二个函数。

//当鼠标放在表格的某行上时将class置为over，离开时置为out。

$("tr").hover(function(){

$(this).addClass("over");

function(){

$(this).addClass("out");

});

（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){alert("Load Success")})

//页面加载完毕提示“Load Success”,不同于onload事件，onload需要页面内容加载完毕（图片等），而ready只要页面html代码下载完毕即触发。与$(fn)等价

个函数的轮番调用。

//每次点击时轮换添加和删除名为selected的class。

$("p").toggle(function(){

$(this).addClass("selected");

},function(){

$(this).removeClass("selected");

});

（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。

例如：

$("p").trigger("click"); //触发所有p元素的click事件

（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定

从每一个匹配的元素中（添加）删除绑定的事件。

例如：

$("p").bind("click", function(){alert($(this).text());});

//为每个p元素添加单击事件

$("p").unbind(); //删除所有p元素上的所有事件

$("p").unbind("click") //删除所有p元素上的单击事件

9、几个实用特效功能

其中toggle()和slidetoggle()方法提供了状态切换功能。

如toggle()方法包括了hide()和show()方法。

slideToggle()方法包括了slideDown()和slideUp方法。

10、几个有用的jQuery方法

$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。

$.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

$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。

如：

$.extend(settings, options);

//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。

var settings = $.extend({}, defaults, options);

//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。

可以有多个参数（合并多项并返回）

$.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]

$.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? "

11、解决自定义方法或其他类库与jQuery的冲突

决此问题。

$("#msg")改为jQuery("#msg")。

如：

jQuery.noConflict();

// 开始使用jQuery

jQuery("div p").hide();

// 使用其他库的 $()

$("content").style.display = 'none';

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})

//为索引分别为0，1，2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})

//实现表格的隔行换色效果

$("p").click(function(){alert($(this).html())})

//为每个p元素增加了click事件，单击某个p元素则弹出其内容

jQuery总结

你可能感兴趣的:(jquery)