jQuery reference manual

来源：互联网发布：网狐荣耀源码编辑：程序博客网时间：2024/06/09 23:03

1.学习网站推荐

博客园：http://kb.cnblogs.com/page/67967/

入门指南-翻译+实例：http://www.k99k.com/jQuery_getting_started.html

http://www.phpfans.net/manu/jQuery/

英文部分：http://jquery.com/

http://api.jquery.com/

http://visualjquery.com/

2.JQuery:

一个基于js的轻量级框架。

3.UI:

即UserInterface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

4.用Jquery优势：

用jQuery不需要在每个标签上写onclick事件,拥有一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像使用CSS追求的一样.

轻量级的JS库，兼容CSS3；

链式编程；

隐式迭代；

屏蔽浏览器差异，跨浏览器兼容性好；

插件丰富、开源、免费。

【选择器写法】

基本选择器：通过元素id,class和tagName来查找dom元素

$("#id") : id选择器,document.getElementById("id");

$("div") :元素选择器 document.getElementByTagName("div");

$(".myClass") : 类选择器,返回所有class="myClass"的元素

$("*") : 返回所有元素,多用于结合上下文搜索

$("div,span,p.myClass") : 多条件选择器,返回所有查到的元素

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

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

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

还可以选择开头、结束、包含等，条件还可以复合。（*）

复合选择器

$("#id,.class,input")

属性过滤选择器

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

$("div[title=test]")选取title属性为“test”的<div>，JQuery中没有对getElementsByName进行封装，用$("input[name=abc]")

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

表单属性选择器

$(":checkbox:checked") 所有选中的checkbox

表单对象选择器（过滤器）：

$("#form1:enabled")选取id为form1的表单内所有启用的元素

$("#form1:disabled")选取id为form1的表单内所有禁用的元素

$("input:checked")选取所有选中的元素（Radio、CheckBox）

$("select option:selected")选取所有选中的选项元素（下拉列表）

$(":input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样，$("input")只获得<input>

$(":text")选取所有单行文本框，等价于$("input[type=text]")

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

例子：

$("td",$("#mytr")).css("background","green")，$("td",$("#mytr"))是相对该行tr下的搜有td

层次选择器：

如果想通过DOM元素之间的层次关系来获取特定的元素，如后代元素,子元素,相邻元素，兄弟元素等，则需要使用层次选择器

1.ancestor descendant

$("form input") : 获得后代所有子元素；

2.parent > child

$("form > input") : 只获得直属子元素；

3.prev + next

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

4.prev ~ siblins

$("form ~ input") : 匹配prev元素之后的所有siblings元素注意:在匹配之后的元素,不包含该元素在内，并且siblings匹配的是和prev同辈的元素，其后辈元素不被匹配。

ready方法，是当dom树完全生成后才执行。

var $divs=$("div");获得所有div对象，并存储于divs中；

var div2=$divs.get(1);获得div标签中索引数为1的div对象；

filter()以过滤表达式来减少不符合的被选择项；

not()则用来取消所有符合过滤表达式的被选择项;

如果获取的是JQuery对象，要在变量前加上$:

eg：var $va=$(#div3);

将一个dom元素对象，转成JQuery对象

eg: var div1=document.getElementById("div1");

var $div1=$(div1);

将JQuery对象，转换成dom元素对象

eg: var div2=$div1.get(0);

简单选择器

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

:last 选取最后一个元素。$("div:last")选取最后一个<div>

:not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClass的<input>

:even、:odd，选取索引是奇数、偶数的元素， $("input:even")选取索引是奇数的<input>

:eq(索引序号)、:gt(索引序号)、:lt(索引序号) ，选取索引等于、大于、小于索引序号的元素，比如$("input:lt(5)")选取索引小于5的<input>

1. 基础选择器 Basics

名称说明举例#id根据元素Id选择$("divId") 选择ID为divId的元素element根据元素的名称选择,$("a") 选择所有<a>元素.class根据元素的css类选择$(".bgRed") 选择所用CSS类为bgRed的元素*选择所有元素$("*")选择页面所有元素selector1,
selector2,
selectorN可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容.$("#divId, a, .bgRed")

2.层次选择器 Hierarchy

名称说明举例ancestor descendant使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input.$(".bgRed div") 选择CSS类为bgRed的元素中的所有<div>元素.parent > child选择parent的直接子节点child. child必须包含在parent中并且父类是parent元素.$(".myList>li") 选择CSS类为myList元素中的直接子节点<li>对象.prev + nextprev和next是两个同级别的元素. 选中在prev元素后面的next元素.$("#hibiscus+img")选在id为hibiscus元素后面的img对象.prev ~ siblings 选择prev后面的根据siblings过滤的元素
注:siblings是过滤器$("#someDiv~[title]")选择id为someDiv的对象后面所有带有title属性的元素

3.基本过滤器 Basic Filters

名称说明举例:first匹配找到的第一个元素查找表格的第一行:$("tr:first"):last匹配找到的最后一个元素查找表格的最后一行:$("tr:last"):not(selector)去除所有与给定选择器匹配的元素查找所有未选中的 input 元素: $("input:not(:checked)"):even匹配所有索引值为偶数的元素，从 0 开始计数查找表格的1、3、5...行:$("tr:even"):odd匹配所有索引值为奇数的元素，从 0 开始计数查找表格的2、4、6行:$("tr:odd"):eq(index)匹配一个给定索引值的元素
注:index从 0 开始计数查找第二行:$("tr:eq(1)"):gt(index)匹配所有大于给定索引值的元素
注:index从 0 开始计数查找第二第三行，即索引值是1和2，也就是比0大:$("tr:gt(0)"):lt(index)选择结果集中索引小于 N 的 elements
注:index从 0 开始计数查找第一第二行，即索引值是0和1，也就是比2小:$("tr:lt(2)"):header选择所有h1,h2,h3一类的header标签.给页面内所有标题加上背景色: $(":header").css("background", "#EEE");:animated匹配所有正在执行动画效果的元素只有对不在执行动画效果的元素执行一个动画特效:

$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});

4. 内容过滤器 Content Filters

名称说明举例:contains(text)匹配包含给定文本的元素查找所有包含 "John" 的 div 元素:$("div:contains('John')"):empty匹配所有不包含子元素或者文本的空元素查找所有不包含子元素或者文本的空元素:$("td:empty"):has(selector)匹配含有选择器所匹配的元素的元素给所有包含 p 元素的 div 元素添加一个 text 类: $("div:has(p)").addClass("test");:parent匹配含有子元素或者文本的元素查找所有含有子元素或者文本的 td 元素:$("td:parent")

5.可见性过滤器 Visibility Filters

名称说明举例

:hidden

匹配所有的不可见元素

注:在1.3.2版本中, hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSS visibility属性让其不显示但是占位,则不输入hidden.

查找所有不可见的 tr 元素:$("tr:hidden"):visible匹配所有的可见元素查找所有可见的 tr 元素:$("tr:visible")

6.属性过滤器 Attribute Filters

名称说明举例[attribute]匹配包含给定属性的元素查找所有含有 id 属性的 div 元素:
$("div[id]")[attribute=value]匹配给定的属性是某个特定值的元素查找所有 name 属性是 newsletter 的 input 元素:
$("input[name='newsletter']").attr("checked", true);[attribute!=value]匹配给定的属性是不包含某个特定值的元素查找所有 name 属性不是 newsletter 的 input 元素:
$("input[name!='newsletter']").attr("checked", true);[attribute^=value]匹配给定的属性是以某些值开始的元素$("input[name^='news']")[attribute$=value]匹配给定的属性是以某些值结尾的元素查找所有 name 以 'letter' 结尾的 input 元素:
$("input[name$='letter']")[attribute*=value]

匹配给定的属性是以包含某些值的元素

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

[attributeFilter1][attributeFilter2][attributeFilterN]复合属性选择器，需要同时满足多个条件时使用。找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的:
$("input[id][name$='man']")

7.子元素过滤器 Child Filters

名称说明举例:nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素

':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！

可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

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

匹配第一个子元素

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

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

匹配最后一个子元素

':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

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

如果某个元素是父元素中唯一的子元素，那将会被匹配

如果父元素中含有其他元素，那将不会被匹配。

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

8.表单选择器 Forms

名称说明解释:input匹配所有 input, textarea, select 和 button 元素查找所有的input元素:
$(":input"):text匹配所有的文本框查找所有文本框:
$(":text"):password匹配所有密码框查找所有密码框:
$(":password"):radio匹配所有单选按钮查找所有单选按钮:checkbox匹配所有复选框查找所有复选框:
$(":checkbox"):submit匹配所有提交按钮查找所有提交按钮:
$(":submit"):image

匹配所有图像域

匹配所有图像域:
$(":image"):reset匹配所有重置按钮查找所有重置按钮:
$(":reset"):button匹配所有按钮查找所有按钮:
$(":button"):file匹配所有文件域查找所有文件域:
$(":file")

9.表单过滤器 Form Filters

名称说明解释:enabled

匹配所有可用元素

查找所有可用的input元素:
$("input:enabled"):disabled匹配所有不可用元素查找所有不可用的input元素:
$("input:disabled"):checked匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)查找所有选中的复选框元素:
$("input:checked"):selected匹配所有选中的option元素查找所有选中的选项元素:
$("select option:selected")

以jQuery(v1.3.2)为基础from：http://bbs.chinaandroid.com/showtopic-89.aspx

1).基本

·#id 根据给定的ID匹配一个元素。例如：$("#id")
·element 根据给定的元素名匹配所有元素。例如：$("div")
·.class 根据给定的类匹配元素。例如：$(".style1");
·* 匹配所有元素。例如：$("*")
·selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。例如：$("#id,div,.style1")

2).表单

·:button 匹配所有按钮。例如：$(":button")
·:checkbox 匹配所有复选框。例如：$(":checkbox")
·:file 匹配所有文件域。例如：$(":file")
·:hidden 匹配所有不可见元素，或者type为hidden的元素。例如：$("input:hidden")
·:image 匹配所有图像域。例如：$(":image")
·:input 匹配所有 input, textarea, select 和 button 元素。例如：$(":input")
·:password 匹配所有密码框。例如：$(":password")
·:radio 匹配所有单选按钮。例如：$(":radio")
·:reset 匹配所有重置按钮。例如：$(":reset")
·:submit 匹配所有提交按钮。例如：$(":submit")
·:text 匹配所有的单行文本框。例如：$(":text")
·:header 匹配如 h1, h2, h3之类的标题元素。例如：$(":header").css("background", "#EEE");

2.筛选条件

1).属性筛选

·[attribute*=value] 匹配给定的属性是以包含某些值的元素。例如：$("input[name*='man'")
·[attribute!=value] 匹配所有含有指定的属性，但属性不等于特定值的元素。例如：$(input[name!='man');
·[attribute$=value] 匹配给定的属性是以某些值结尾的元素。例如：$("input[name$='man']")
·[attribute=value] 匹配给定的属性是某个特定值的元素。例如：$("input[name='man']");
·[attribute] 匹配包含给定属性的元素。例如：$("div[id]")
·[attribute^=value] 匹配给定的属性是以某些值开始的元素。例如：$("input[name^='man']")
·[selector1][selector2][selectorN] 同时满足多个条件。例如：$("input[id][name$='man']")
·:hidden 匹配所有的不可见元素。例如：$("tr:hidden")
·:visible 匹配所有的可见元素。例如：$("tr:visible")
·:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)。例如：$("input:checked")
·:disabled 匹配所有不可用元素。例如：$("input:disabled")
·:enabled 匹配所有可用元素。例如：$("input:enabled")
·:selected 匹配所有选中的option元素。例如：$("select option:selected")

2).内容筛选

·:contains(text) 匹配包含给定文本的元素。例如：$("div:contains('John')")
·:empty 匹配所有不包含子元素或者文本的空元素。例如：$("td:empty")
·:has(selector) 匹配含有选择器所匹配的元素的元素。例如：$("div:has(p)");
·:parent 匹配含有子元素或者文本的元素。例如：$("td:parent")

3).层级筛选

·ancestor descendant 在给定的祖先元素下匹配所有的后代元素。例如：$("form input")
·parent > child 在给定的父元素下匹配所有的子元素。例如：$("form > input")
·prev + next 匹配所有紧接在 prev 元素后的 next 元素。例如：$("label + input")
·prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素。例如：$("form ~ input")
·:first-child 匹配第一个子元素。例如：$("ul li:first-child")
·:last-child 匹配最后一个子元素。例如：$("ul li:last-child")
·:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素。例如：$("ul li:nth-child(2)")
·:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配。例如：$("ul li:only-child")

4).方法筛选

·:animated 匹配所有正在执行动画效果的元素。例如：$("div:animated");
·:eq(index) 匹配一个给定索引值的元素。例如：$("tr:eq(1)")
·:even 匹配所有索引值为偶数的元素，从 0 开始计数。例如：$("tr:even")
·:first 匹配找到的第一个元素。例如：$("tr:first")
·:gt(index) 匹配所有大于给定索引值的元素，从 0 开始计数。例如：$("tr:gt(0)")
·:last 匹配找到的最后一个元素。例如：$("tr:last")
·:lt(index) 匹配所有小于给定索引值的元素。例如：$("tr:lt(2)")
·:not(selector) 去除所有与给定选择器匹配的元素。例如：$("input:not(:checked)")
·:odd 匹配所有索引值为奇数的元素，从 0 开始计数。例如：$("tr:odd")

【方法】

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

})

dom加载完成后触发

window.onload只能注册一个方法页面所有内容加载完成后触发（图片，css，js）

缩写

$(function(){

})

两种方式：[index]和.get(index)

1.JQuery对象内部包含一个数组对象，可以通过[index]的方法，来得到相应的DOM对象

var $txtName=$("#txtName");alert($txtName.val());

var txtName= $txtName[0];alert(txtName.value);

2.Jquery本身提供，通过.get(index)方法，得到相应的DOM对象

var txtName=$txtName.get(0);alert(txtName.value);

回车默认事件

document.onkeydown = function (e) {

var theEvent = window.event || e;

var code = theEvent.keyCode || theEvent.which;

if (code == 13) {

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

}

$(":input").bind("keyup", function (event) {

if (event.keyCode == "13") {

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

}

})

绑定事件

$("#id").bind("click",function(){})

解除绑定

$("#id").unbind("click",function(){})

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

合成事件hover toggle

hover(enterfn,leavefn) 当鼠标放上时执行enterfn，当鼠标离开时执行leavefn 封装mouseover，mouseout

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

事件冒泡

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

mouseout、mouseleavemouseleave会阻止事件冒泡

阻止事件冒泡

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

事件参数

pageX、pageY、target 获得触发事件的元素(事件冒泡的起始，和this不一样) 相当于event.srcElement

altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下，为bool值。

当键盘按下 keyCode 键盘码、which ascii码

当鼠标按下的时候which可以获取鼠标左右键(1,3)

移除事件绑定：bind()方法即可移除元素上所有绑定的事件，如果unbind("click")则只移除click事件的绑定。bind:+=；unbind:-=

一次性事件：如果绑定的事件只想执行一次随后立即unbind可以使用one()方法进行事件绑定。

常用的方法

html() text() val() attr() css() removeAttr() addClass() removeClass() toggleClass() hasClass() val()

获取节点对象

next()方法用于获取节点之后的挨着的第一个兄弟元素，$(".menuitem").next("div")、nextAll()方法用于获取节点之后的所有兄弟元素，$(".menuitem").nextAll("div")

prev()、prevAll()兄弟中之前的元素。 siblings()方法用于获取所有同辈元素(前后都拿到)，siblings、next等所有能传递选择器的地方能够使用的语法都和$()语法一样。$(".menuitem").siblings("li")。

直接把元素移动过去，并且包含所有事件

prepend

prependTo

在开始标签之后添加元素加子节点

after

afterTo

在结束标签外添加元素加兄弟节点

before

beforeTo

在开始标签前添加元素加兄弟节点

删除节点

remove() 删除当前节点

empty() 清空当前节点之间的内容，节点保留

替换节点：

$("br").replaceWith("<hr/>")，将<br/>替换为<hr/>

包裹节点

wrap()将所有元素逐个用指定标签包裹，$("b").wrap("<fontcolor='red'></font>") 将所有粗体字红色显示

动画

show()、hide()

toggle() 切换显示隐藏

slideDown、slideUp、 fadeOut、fadeIn

复杂动画

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

链式编程

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

案例：选中的p变色 $(this).css();$(this).siblings().css()

案例：评分控件。prevAll,this,nextAll

重申问题，不要$().click=function；好多时候能.出来；不要在引用js的代码里再写代码。

$.map(array,fn):

用来将一个数组，转成另一个数组。

对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数组。

例子:得到一个元素值是原数组值二倍的新数组

回调函数：自己定义，系统调用。(你赚的钱，由你老婆负责花—注：你自己不能花)

var arr = [3, 5, 9];

var arr2 = $.map(arr, function(item) { return item * 2; });//联想C#委托的例子。函数式编程。

$.map不能处理Dictionary风格的数组(jason)。

$.each(array,fn):

对数组arry每个元素调用fn函数进行处理，没有返回值。

var arr = { "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" };//json格式的对象(dict)

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

如果是普通风格的数组，则key的值是序号。

还可以省略function的参数，这时候用this可以得到遍历的当前元素：

var arr = [3, 6, 9];

$.each(arr, function() { alert(this); });

普通数组推荐用无参，用dict风格的就用key、value。

hover(over,out) 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测

eg： $("td").hover(

function () {

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

function () {

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

}

);

mouseover(fn) mouseover事件会在鼠标移入对象时触发。

mouseout(fn) mouseout事件在鼠标从元素上离开后会触发。

mouseup(fn) mouseup事件会在鼠标点击对象释放时

表单验证

$('form:input').blur(function(){

var regEmail = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; //email验证

var regTxt=/^[\u4e00-\u9fa5\da-zA-Z\-\_]+$/; //非特殊字符验证

var regMoney=/^([0-9]{1,}\.[0-9]{1,2}|[0-9]{1,})$/; //金额验证（至多两位小数）

var regPattern = / ^ [`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&;—|{}【】‘；：”“'。，、？] $/; //常见特殊字符

var regName = /^[a-zA-Z0-9_]{4,32}$/; //用户名验证（4-32个英文大小写字母、下划线、数字）

if($(this).is('#email')){

if(!regEmail .test(this.value)){

}

}).keyup(function(){

$(this).triggerHandler("blur");

}).focus(function(

$(this).triggerHandler("blur");

))

表格隔行变色

CSS

.even{background:#FFF38F;}

.odd{background:#FFFFEE;}

$(function(){

$("tbody>tr:odd").addClass("odd");

$("tbody>tr:even").addClass("even");

$("tr:contains('王武')").addClass("odd");

//另外一种用法

$('tr').filter(":contains('李')").addClass('odd');

})

单选框控制表格高亮

$('tbdoy>tr').click(function(){

$(this).addClass('selected').siblings().removeClass('selected').end()

.find(':radio').attr('checked',true);

})

复选框控制表格行高亮

$('tbdoy>tr').click(function(){

if($(this).hasClass('selected')){

$(this).removeClass('selected').find(':checkbox').attr('checked',false);

}else{

$(this).addClass('selected').find(':checkbox').attr('checked',true);

}

三元运算----添加或移除selected类

var hasSelected=$(this).hasClass('selected');

$(this)[hasSelected?"removeClass":"addClass"]('selected');

表格展开关闭

<tbody>

<tr class='child_row_01'><td>第一行子集</td></tr>

</tbody>

$('tr.parent').click(function(){

$(this).toggleClass("selected")//添加、删除高亮

.sibings('.clild_'+this.id).toggle();影藏、显示所谓的子行

})

遍历checkbox

var a="";

$('input[type="checkbox"][name="chk"]:checked').each(

function() {

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

}

);

$('input[type="checkbox"][name="chk"]').each(

function() {

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

}

);

JQuery操作checkbox、radio例：将多个选中的checkbox的值组装成一个字符串

function addMem(){

//var followers = document.getElementsByName("followers");

var f_str = '0';

$("input[@name='followers']").each(function(){

if($(this).attr("checked")==true){

f_str += ","+$(this).attr("value");

}

})

alert(f_str);

}

</script>

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

例：取选中的radio的值

var gender = $('input[@name=gender][@checked]').val();

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

转别人的一些东西：

jquery判断checkbox是否被选中

在html的checkbox里，选中的话会有属性checked="checked"。

如果用一个checkbox被选中，alert这个checkbox的属性"checked"的值alert($"#xxx".attr("checked"))，会打印出"true"，而不是"checked"！

如果没被选中，打印出的是"undefined"。觉得很奇怪是吗？继续看下去～

不要尝试去做这样的判断：if($"#xxx".attr("checked")=="true")

因为这么做是错的，jQuery的API手册上写，attr(name)的返回值是object。

所以，应该是if($"#xxx".attr("checked")==true)

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

jquery全选/取消选择checkbox示例：

<!--

$(function() {

$("#checkedAll").click(function() {

if ($(this).attr("checked") == true) { // 全选

$("input[@name='checkbox_name[]']").each(function() {

$(this).attr("checked", true);

});

} else { // 取消全选

$("input[@name='checkbox_name[]']").each(function() {

$(this).attr("checked", false);

});

}

});

//-->

</script>

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

jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中项的值

var item = $('input[@name=items][@checked]').val();

获取select被选中项的文本

var item = $("select[@name=items] option[@selected]").text();

select下拉框的第二个元素为当前选中值

$('#select_id')[0].selectedIndex = 1;

radio单选组的第二个元素为当前选中值

$('input[@name=items]').get(1).checked = true;

获取值：

文本框，文本区域：$("#txt").attr("value")；

多选框checkbox：$("#checkbox_id").attr("value")；

单选组radio： $("input[@type=radio][@checked]").val();

下拉框select： $('#sel').val();

控制表单元素：

文本框，文本区域：$("#txt").attr("value",'');//清空内容

$("#txt").attr("value",'11');//填充内容

多选框checkbox： $("#chk1").attr("checked",'');//不打勾

$("#chk2").attr("checked",true);//打勾

if($("#chk1").attr('checked')==undefined) //判断是否已经打勾

单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项

下拉框select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项

$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option

$("#sel").empty()；//清空下拉框

最下端滚轮加载事件

$(function () {

$(window).scroll(function () {

if (arrivedAtBottom()) {

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

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

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

var load = '<tr class="re"><td><img src="images/3271623453203.gif" /></td><td class="td1"></td></tr>';

if (parseInt(index) * 100 < parseInt(count))

$.ajax({

type: "Post",

url: "ashx/LinksFangZhiS.ashx",

data: { "wid": wid, "index": parseInt(index) + 1 },

beforeSend: function () {

$(".listable").append(load);

complete: function () {

$("tr").remove(".re");

success: function (back) {

$(".listable").append(back);

$("#index").val(parseInt(index) + 1);

}

});

}

});

var arrivedAtBottom = function () {

return $(document).scrollTop() + $(window).height() == $(document).height();

}

});

网页选项卡切换

var $ div_li=$("div.tab_menu ul li");

$div_li.click(function(){

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

var index=$div_li.index(this);

$("div.tab_box>div").eq(index).show().sibings().hide();

}).hover(function(){

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

},function(){

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

})

序列化与反序列化

serialize()、serializeArray()和param()

serialize()方法也是作用于一个JQuery对象，它能够将DOM元素内容序列化为字符串，用于ajax请求。通过使用serialize()方法，可以提交本页面的所有域，代码如下：

$("#send").click(function(){

$.get("get1.jsp", $("#form1").serialize(), function(data, textStatus)

$("#resText").html(data);

});

当单击“提交”按钮后，所有属于1gvddddform1的表单元素都能提交到后台，即使在表单中再增加字段，脚本仍然能够使用，并且不需要做其他多余工作。

用字符串方式时，需要注意对字符编码（中文问题），如果不希望编码带来麻烦，可以使用serialize()方法，它会自动编码。

因为serialize()方法作用于JQuery对象，所以不光只有表单能使用它，其他选择器选取的元素也都能使用它，如以下JQuery代码：

$(":checkbox,:radio").serialize();

把复选框和单选框的值序列化为字符串形式，只会将选中的值序列化。

在JQuery中还有一个与serialize()类似的方法--serializeArray()，该方法不是返回字符串，而是将DOM元素序列化后，返回JSON格式的数据。JQuery代码如下：

var fields = $(":checkbox,:radio").serializeArray();

console.log(fields); //用FireBug输出

$.param()方法是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。

比如将一个普通的对象序列化：

var obj = {a:1,b:2,c:3};

var k = $.param(obj);

alert(k); //输出a=1&b=2&c=3

获取网站根路径(站点及虚拟目录)，获得网站的根目录或虚拟目录的根地址

//js获取网站根路径(站点及虚拟目录)，获得网站的根目录或虚拟目录的根地址

function getRootPath1() {

var strFullPath = window.document.location.href;

var strPath = window.document.location.pathname;

var pos = strFullPath.indexOf(strPath);

var prePath = strFullPath.substring(0, pos);

var postPath = strPath.substring(0, strPath.substr(1).indexOf('/') + 1);

return (prePath + postPath);

}

//js获取网站根路径(站点及虚拟目录)，获得网站的根目录或虚拟目录的根地址

function getRootPath2() {

var pathName = window.location.pathname.substring(1);

var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));

//return window.location.protocol + '//' + window.location.host + '/'+ webName + '/';

return window.location.protocol + '//' + window.location.host + '/' + webName;

}

【处理Json】

json字符串-单、双引号：

在js中, escape("'")=%27, escape('“‘)=%22;

string json = "{\"Id\":1,\"" + name.Replace("'",%27).Replace("\"",%22) + "\":\"jinho1\",\"Sex\":\"male\"}";

代码示例：

var UserList = [

{"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":"zhuleipro◎hotmail.com"},

{"UserID":12, "Name":{"FirstName":"Jeffrey","LastName":"Richter"}, "Email":"xxx◎xxx.com"},

{"UserID":13, "Name":{"FirstName":"Scott","LastName":"Gu"}, "Email":"xxx2◎xxx2.com"}

];

alert(UserList[0].Name.FirstName);

</script>

事实上除了使用"."引用属性外，我们还可以使用下面语句：

alert(UserList[0]["Name"]["FirstName"]); 或者 alert(UserList[0].Name["FirstName"]);

页面获取json对象：

var jsonArr = eval("(" + msg + ")");

alert(" UserID :" + jsonArr[0]. UserID );

alert(" Name :" + jsonArr[0]. Name );

var cateTemp = "";

json = eval(jsonArr[1]);

for (var perObj in json) {

cateTemp = cateTemp + "<li>" + perObj + "(<a>" + json[perObj] + "</a>)</li>";

//alert(cateTemp);

}

【异步（表单序列化元素）】

$.ajax({

type:"get",

url:"test.json",

dataType:html/script/json/jsonp/text,

data:$("#form1").serialize(),

beforeSend:function(){

complete:function(){

success:function(data){

error:function(){

}

})

【JSONP】

快速应用示例：

flightHandler({

"code": "CA2013",

"price": 8888,

"tickets": 3

});

$.ajax({

type: "get",

async: false, url:"http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",

dataType: "jsonp", jsonp:"callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据

success: function(json){

alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');

error: function(){

alert('fail');

}

});

function flightHandler(){

}

解说：

什么是JSON？

前面简单说了一下，JSON是一种基于文本的数据交换方式，或者叫做数据描述格式，你是否该选用他首先肯定要关注它所拥有的优点。

JSON的优点：

1、基于纯文本，跨平台传递极其简单；

2、Javascript原生支持，后台语言几乎全部支持；

3、轻量级数据格式，占用字符数量极少，特别适合互联网传递；

4、可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进之后还是很容易识别的；

5、容易编写和解析，当然前提是你要知道数据结构；

JSON的缺点当然也有，但在作者看来实在是无关紧要的东西，所以不再单独说明。

JSON的格式或者叫规则：

JSON能够以非常简单的方式来描述数据结构，XML能做的它都能做，因此在跨平台方面两者完全不分伯仲。

1、JSON只有两种数据类型描述符，大括号{}和方括号[]，其余英文冒号:是映射符，英文逗号,是分隔符，英文双引号""是定义符。

2、大括号{}用来描述一组“不同类型的无序键值对集合”（每个键值对可以理解为OOP的属性描述），方括号[]用来描述一组“相同类型的有序数据集合”（可对应OOP的数组）。

3、上述两种集合中若有多个子项，则通过英文逗号,进行分隔。

4、键值对以英文冒号:进行分隔，并且建议键名都加上英文双引号""，以便于不同语言的解析。

5、JSON内部常用数据类型无非就是字符串、数字、布尔、日期、null 这么几个，字符串必须用双引号引起来，其余的都不用，日期类型比较特殊，这里就不展开讲述了，只是建议如果客户端没有按日期排序功能需求的话，那么把日期时间直接作为字符串传递就好，可以省去很多麻烦。

JSON实例：

// 描述一个人

var person = {

"Name": "Bob",

"Age": 32,

"Company": "IBM",

"Engineer": true

}

// 获取这个人的信息

var personAge = person.Age;

// 描述几个人

var members = [

{

"Name": "Bob",

"Age": 32,

"Company": "IBM",

"Engineer": true

{

"Name": "John",

"Age": 20,

"Company": "Oracle",

"Engineer": false

{

"Name": "Henry",

"Age": 45,

"Company": "Microsoft",

"Engineer": false

}

]

// 读取其中John的公司名称

var johnsCompany = members[1].Company;

// 描述一次会议

var conference = {

"Conference": "Future Marketing",

"Date": "2012-6-1",

"Address": "Beijing",

"Members":

[

{

"Name": "Bob",

"Age": 32,

"Company": "IBM",

"Engineer": true

{

"Name": "John",

"Age": 20,

"Company": "Oracle",

"Engineer": false

{

"Name": "Henry",

"Age": 45,

"Company": "Microsoft",

"Engineer": false

}

]

}

// 读取参会者Henry是否工程师

var henryIsAnEngineer = conference.Members[2].Engineer;

关于JSON，就说这么多，更多细节请在开发过程中查阅资料深入学习。

什么是JSONP？

先说说JSONP是怎么产生的：

其实网上关于JSONP的讲解有很多，但却千篇一律，而且云里雾里，对于很多刚接触的人来讲理解起来有些困难，小可不才，试着用自己的方式来阐释一下这个问题，看看是否有帮助。

1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；

2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）；

3、于是可以判断，当前阶段如果想通过纯web端（ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；

4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据；

5、这样子解决方案就呼之欲出了，web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀），显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。

6、客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了，这种获取远程数据的方式看起来非常像AJAX，但其实并不一样。

7、为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

如果对于callback参数如何使用还有些模糊的话，我们后面会有具体的实例来讲解。

JSONP的客户端具体实现：

不管jQuery也好，extjs也罢，又或者是其他支持jsonp的框架，他们幕后所做的工作都是一样的，下面我来循序渐进的说明一下jsonp在客户端的实现：

1、我们知道，哪怕跨域js文件中的代码（当然指符合web脚本安全策略的），web页面也是可以无条件执行的。

远程服务器remoteserver.com根目录下有个remote.js文件代码如下：

alert('我是远程文件');

本地服务器localserver.com下有个jsonp.html页面代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

</body>

</html>

毫无疑问，页面将会弹出一个提示窗体，显示跨域调用成功。

2、现在我们在jsonp.html页面定义一个函数，然后在远程remote.js中传入数据进行调用。

jsonp.html页面代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

var localHandler = function(data){

alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);

};

</script>

</head>

<body>

</body>

</html>

remote.js文件代码如下：

localHandler({"result":"我是远程js带来的数据"});

运行之后查看结果，页面成功弹出提示窗口，显示本地函数被跨域的远程js调用成功，并且还接收到了远程js带来的数据。很欣喜，跨域远程获取数据的目的基本实现了，但是又一个问题出现了，我怎么让远程js知道它应该调用的本地函数叫什么名字呢？毕竟是jsonp的服务者都要面对很多服务对象，而这些服务对象各自的本地函数都不相同啊？我们接着往下看。

3、聪明的开发者很容易想到，只要服务端提供的js脚本是动态生成的就行了呗，这样调用者可以传一个参数过去告诉服务端“我想要一段调用XXX函数的js代码，请你返回给我”，于是服务器就可以按照客户端的需求来生成js脚本并响应了。

看jsonp.html页面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

// 得到航班信息查询结果后的回调函数

var flightHandler = function(data){

alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');

};

// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）

var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";

// 创建script标签，设置其属性

var script = document.createElement('script');

script.setAttribute('src', url);

// 把script标签加入head，此时调用开始

document.getElementsByTagName('head')[0].appendChild(script);

</script>

</head>

<body>

</body>

</html>

这次的代码变化比较大，不再直接把远程js文件写死，而是编码实现动态查询，而这也正是jsonp客户端实现的核心部分，本例中的重点也就在于如何完成jsonp调用的全过程。

我们看到调用的url中传递了一个code参数，告诉服务器我要查的是CA1998次航班的信息，而callback参数则告诉服务器，我的本地回调函数叫做flightHandler，所以请把查询结果传入这个函数中进行调用。

OK，服务器很聪明，这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html（服务端的实现这里就不演示了，与你选用的语言无关，说到底就是拼接字符串）：

flightHandler({

"code": "CA1998",

"price": 1780,

"tickets": 5

});

我们看到，传递给flightHandler函数的是一个json，它描述了航班的基本信息。运行一下页面，成功弹出提示窗口，jsonp的执行全过程顺利完成！

4、到这里为止的话，相信你已经能够理解jsonp的客户端实现原理了吧？剩下的就是如何把代码封装一下，以便于与用户界面交互，从而实现多次和重复调用。

什么？你用的是jQuery，想知道jQuery如何实现jsonp调用？好吧，那我就好人做到底，再给你一段jQuery使用jsonp的代码（我们依然沿用上面那个航班信息查询的例子，假定返回jsonp结果不变）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Page</title>

jQuery(document).ready(function(){

$.ajax({

type: "get",

async: false,

url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",

dataType: "jsonp",

jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)

jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据

success: function(json){

alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');

error: function(){

alert('fail');

}

});

</script>

</head>

<body>

</body>

</html>

是不是有点奇怪？为什么我这次没有写flightHandler这个函数呢？而且竟然也运行成功了！哈哈，这就是jQuery的功劳了，jquery在处理jsonp类型的ajax时（还是忍不住吐槽，虽然jquery也把jsonp归入了ajax，但其实它们真的不是一回事儿），自动帮你生成回调函数并把数据取出来供success属性方法来调用，是不是很爽呀？

这里针对ajax与jsonp的异同再做一些补充说明：

1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

3、所以说，其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。

4、还有就是，jsonp是一种方式或者说非强制性协议，如同ajax一样，它也不一定非要用json格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。

总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变着一点！

【jquery解析XML】

$(function () {

$("#DK").live("click", function () {

});

$("[name='Sel']").bind("change", function () {

html = AnalysisXML('xml/Data/metadata.xml');

});

function AnalysisDeepXML(xml) {

$.get(xml, function (d) {

var html = '<ul id="browser" class="filetree">';

var temp = "";

$(d).find('nodeP').each(function () {

var $parentNode = $(this);

var parentName = $parentNode.find('name').first().text();

parentName = parentName.substring(0, parentName.lastIndexOf('('));

var parentId = $parentNode.find('id').first().text();

html += '<li><span title="' + parentId + '" class="folder">' + parentName + '</span>';

var $children = $parentNode.find('children').first();

if ($children != undefined) {

html += '<ul>';

$children.find('node').each(function () {

var $childrenNode = $(this);

var childrenName = $childrenNode.find('name').first().text();

var childrenNum = childrenName.substring(childrenName.lastIndexOf('(') + 1, childrenName.lastIndexOf(')'));

childrenName = childrenName.substring(0, childrenName.lastIndexOf('('));

var childrenId = $childrenNode.find('id').first().text();

html += '<li><span class="file" title="' + childrenId + '">' + childrenName + '</span></li>';

});

html += '</ul>';

}

html += '</li>';

temp = html;

});

html += '</ul>';

return html;

});

}

//解析xml返回html 深入两层

//function AnalysisDeepXML(xml) {

// var html = '<ul id="browser" class="filetree">';

// var temp = "";

// $.get(xml, function (d) {

// $(d).find('nodeP').each(function () {

// var $parentNode = $(this);

// var parentName = $parentNode.find('name').first().text();

// parentName = parentName.substring(0, parentName.lastIndexOf('('));

// var parentId = $parentNode.find('id').first().text();

// html += '<li><span title="' + parentId + '" class="folder">' + parentName + '</span>';

// var $children = $parentNode.find('children').first();

// if ($children != undefined) {

// html += '<ul>';

// $children.find('node').each(function () {

// var $childrenNode = $(this);

// var childrenName = $childrenNode.find('name').first().text();

// var childrenNum = childrenName.substring(childrenName.lastIndexOf('(') + 1, childrenName.lastIndexOf(')'));

// childrenName = childrenName.substring(0, childrenName.lastIndexOf('('));

// var childrenId = $childrenNode.find('id').first().text();

// html += '<li><span class="file" title="' + childrenId + '">' + childrenName + '</span></li>';

// });

// html += '</ul>';

// }

// html += '</li>';

// temp = html;

// });

// html += '</ul>';

// return html;

//}

//解析xml返回html 深入一层

function AnalysisXML(xml, term) {

var html = '<ul id="browser" class="filetree">';

$.get(xml, function (d) {

$(d).find('nodeP').each(function () {

var $parentNode = $(this);

if (term != "" || term != undefined) {

var name = $parentNode.attr('name');

if (name == term) {

var parentName = $parentNode.find('name').text();

parentName = parentName.substring(0, parentName.lastIndexOf('('));

var parentId = $parentNode.find('id').text();

html += '<li><span class="ico" title="' + parentId + '">' + parentName + '</span></li>';

}

} else {

var parentName = $parentNode.find('name').text();

parentName = parentName.substring(0, parentName.lastIndexOf('('));

var parentId = $parentNode.find('id').text();

html += '<li><span class="file" title="' + parentId + '">' + parentName + '</span></li>';

}

})

});

html += '</ul>';

return html;

}

完整示例：

index.html

$(document).ready(function(){

$.ajax({url:"City.xml",

success:function(xml){

$(xml).find("province").each(function(){

var t = $(this).attr("name");//this->

$("#DropProvince").append("<option>"+t+"</option>");

});

}

});

$("#DropProvince").change(function(){

$("#sCity>option").remove();

var pname = $("#DropProvince").val();

$.ajax({url:"City.xml",

success:function(xml){

$(xml).find("province[name='"+pname+"']>city").each(function(){

$("#sCity").append("<option>"+$(this).text()+"</option>");

});

}

});

</script>

</head>

<body>

<div>

</select>

</select>

</div>

</form>

</body>

</html>

City.xml文件内容

City.xml

<?xml version="1.0" encoding="utf-8" ?>

</province>

</province>

</province>

</provinces>

$(document).ready(function(){

$.ajax({url:"City.xml",

success:function(xml){

$(xml).find("province").each(function(){

var t = $(this).attr("name");//this->

$("#DropProvince").append("<option>"+t+"</option>");

});

}

});

$("#DropProvince").change(function(){

$("#sCity>option").remove();

var pname = $("#DropProvince").val();

$.ajax({url:"City.xml",

success:function(xml){

$(xml).find("province").each(function(){

var t = $(this).attr("name");

if ( t==pname ){

$(this).find("city").each(function(){

$("#sCity").append("<option>"+$(this).text()+"</option>");

});

}

});

}

});

</script>

</head>

<body>

<div>

</select>

</select>

</div>

</form>

</body>

</html>

【字段类型】

function type(o){

return (o==null)?"null":(typeof o)

}