Jquery使用

 

CSS 函数

$(a).css(name) 获取name属性值

$(a). css(name,value) 设置name的属性值

$(a).css({}) 设置多个css属性值

$(a).css(name,function(){}) 用函数的返回值设置多个CSS属性

$(a).height() 获取a的高度

$(a).height(value) 设置a的高度

$(a).innerHeight() 获取a的内容高度（除去border和padding）

$(a).outerHeight() 获取a的外部高度（包括border和padding）

$(a).width() 获取a的宽度

$(a).width(value) 设置a的宽度

$(a).innerWidth() 获取a的内容宽度（除去border和padding）

$(a).outerWidth() 获取a的外部宽度（包括border和padding）

$(a).offset() 返回left和top两个整型值，此函数只对可见元素有效

$(a).offset({top:n,left:n}) 设置a的位置

$(a).position() 返回值包含两个变量，一个是left，一个是top，可供调用

$(a).scrollLeft()

$(a).scrollLeft(value)

$(a).scrollTop()

$(a).scrollTop(value)

 

jQuery 文档处理函数

$(a).unwrap() 将a的父级元素去掉

$(a).wrap(element[/funciton(){}]) 将a包含在element元素中

$(a).wrapInner(element[/funciton(){}]) 将a的子内容(包括文本节点)用element包含起来

$(a).clone() 克隆a

$(a).append(b) 向a中添加b元素

$(a).appendTo(b) 将a添加到b元素中

$(a).prepend(b) 在a元素的内容前添加b

$(a).prependTo(b) 将a元素添加到b元素的内容前

$(a).detach([选择器]) 将匹配到的a元素[以及a元素绑定的方法]删除

$(a).remove([选择器]) 将a元素的删除

$(a).empty() 将a元素的内容清空

$(a).replaceAll(b) 将b的内容用a替换

$(a).replaceWith(b) 将a替换成b

$(a).after(b) 在a之后插入b

$(a).insertAfter(b) 将a在b之后插入

$(a).before(b) 在a之前插入b

$(a).insertBefore(b) 将a在b之前插入

 

jQuery 筛选函数

查找

$(a).closest([选择器]) 从a开始向上级匹配元素

$(a).add(b) 将元素b添加到元素a中

$(a).children([选择器]) 从a开始向下级匹配元素

$(a).contents() 匹配所有子节点，若a是一个iframe，则查找文档内容

$(a).find(b) 找出a中的b元素

$(a).siblings([选择器]) 取得a的所有同辈元素

$(a).next([选择器]) 取得a元素后紧邻的同辈元素的集合

$(a).nextAll([选择器]) 取得a元素后的所有同辈元素的集合

$(a).nextUntil([选择器]) 查找a后所有的同辈元素，直到遇到匹配的那个元素为止

$(a).pre([选择器]) 取得a元素前紧邻的同辈元素的集合

$(a).preAll([选择器]) 取得a元素前所有的同辈元素的集合

$(a).preUntil([选择器]) 查找a前所有的同辈元素，直到遇到匹配的那个元素为止

$(a).parent([选择器]) 父元素

$(a).parents([选择器]) 祖先元素

 

串联

$(a).andslef() 加上a自己

 

过滤

$(a).eq(N) 从自己开始第N个元素

$(a).filter(expr) 筛选出与expr匹配的a

$(a).filter(function(){}) 筛选出与函数返回值匹配的a

$(a).has([表达式]) 筛选出与表达式匹配的a

$(a).hasClass

$(a).is([表达式]) 返回Boolean值

$(a).map() 将一组元素转换成其他数组（不论是否是元素数组）

//var newArray=new Array($("input").map(function(){return $(this).val()}))

$(a).not([表达式]) 删除符合表达式的a

$(a).slice(start[,end]) 选取一个从start开始【，到end结束】的子集

jQuery属性

$(a).addClass(className) 为a添加class

$(a).removeClass(className) 为a移除clas

$(a).toggleClass(className) 为a切换class，若有则移除，若无则添加

$(a).toggleClass(className,switch) switch为boolean开关，根据switch来决定是否添加class

$(a).html([str]) 相当a.innerHTML返回值,若str参数存在，则相当于a.innerHtml=str

$(a).attr(key,value[function(){}]) 给a添加一个Html属性，属性的值为value，或者是function的返回值

$(a).attr(key) 取得a的key属性的值 如<img src="a.jpg"/ >则$("img").attr(src)的值为a.jpg

$(a).attr(key1:value1,key2:value,......) 给a添加多个属性

$(a).removeAttr(key) 移除a的key属性

$(a).text([str]) 用法和$(a).html([str])相似，只是这里操作会获取a子元素标签的值

$(a).val([str]) 若a包含value属性，此函数可获取和设置a的value

 

jQuery 数组、对象、字符串操作、浏览器

$.each(a,function(i,n){}) a为数组或者对象，i为下标，n为值，此函数用来遍历数组或对象

$.grep(a,function(i,n){}) function方法中写过滤的条件，此函数返回过滤后的数组或对象

$.inArray(value,a) 返回value在数组a中的位置

$.map(a,function(n){}) function中队a数组进行处理后返回一个新数组

$.merge(a,b) 将a和b两个数组合并

$.toArray($(dom)) 将集合中的所有dom元素放在一个数组中返回

$.unique(a) 删除a中的所有重复的元素

$.trim(str) 去掉str中的首尾元素

$.browser[.version] 返回浏览器的类型[和版本号]，返回值有safari、opera、msie、mozilla

 

jQuery 测试操作

obj是要测试的对象，返回一个Boolean值

$.isArray(obj) 是否是数组

$.contains(container,contained) 测试container是否包含contained

$.isEmptyObject(obj) 测试是否是空对象

$.isPlainObject(obj) 测试是否对象（用new Object 或者{}创建）

$.isFunction(obj) 测试是否是一个方法

 

jQuery.param 常用在URL
jQuery.param(obj, [traditional])

示例

var params = { width:1680, height:1050 };
var str = jQuery.param(params);
$("#results").text(str);

结果

<div id="results">
width=1680&height=1050
</div>

jQuery 事件
$(document).ready(function(){})在dom加载的时候就会触发动作。当body标签中含有onload时，会忽略ready

$(a).blur(function(){}) a失去焦点，触发动作

$(a).change(function(){})

$(a).click(function(){})

$(a).dblclick(function(){})

$(a).error(function(){})

$(a).focus(function(){})

$(a).focuin(function(){})

$(a).focuout(function(){})

$(a).keydown(function(){})

$(a).keypress(function(){})

$(a).keyup(function(){})

$(a).mousedown(function(){})

$(a).mousemove(function(){})

$(a).mouseup(function(){})

$(a).mouseover(function(){})

$(a).mouseout(function(){})

$(a).resize(function(){}) 当文档窗口大小改变时触发动作

$(a).scroll(function(){})

$(a).select(function(){})

$(a).submit(function(){})

$(a).unload(function(){})

 

$(a).bind({e:function(){},e1:function(){},...}) 为a绑定一个或者多个事件处理函数，e、e1等为事件；如click、blur等等

$(a).bind(type,[data],function(){}) type为事件类型

$(a).bind(type,[data]) bind的反操作

$(a).one(type,function(){}) 只执行一次事件动作

$(a).hover(function(){},function(){}) 第一个方法为mouseover，第二个function为mouseout

$(a).toggle(function(){},function(),.......) 当a每点击一次，执行一次function，下次点击则执行下一个function函数

jQuery 选择器
$(":表单类型")　　　　如：$(":button")，查找所有的Button

$("redio:checked")　　　　$("input:disabled[/enabled]")　　　　$("select option:selectd")

$("父级元素子级元素")　　　　$("父级元素>子级元素")　　　　$("pre元素+next元素")　　　　$("pre元素~all_after元素")

$(".className")　　　　$("#idName")　　　　$("Element")　

:animate　　　　匹配正在执行动画效果的元素

$("a:eq(number)")　　　　匹配a的第number个元素

$("a:even")　　　　匹配索引值为偶数的a

$("a:odd")　　　　匹配索引值为奇数的a

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

$("a:gt(number)")　　　　匹配大于索引值大于number的元素

$("a:lt(number)")　　　　匹配小于索引值大于number的元素

$(":header")　　　　匹配h1、h2之类的标题元素

$("a:last")

$("a:not()")　　　　匹配所有没有给定选择器的a元素

$("a:hidden")　　　　$("a:visible")　　　　匹配所有不可见[/可见]的a

$("a:contains(text)")　　　　匹配含有text文本的a元素

$("a:empty")　　　　匹配不包含子元素或文本的元素

$("a:has(b)")　　　　匹配含有b的a元素

$("a:parent")　　　　匹配含有子元素或文本的元素a

$("a[项目名*='值']") 　　　　//$("input[name*='user']")　　　　匹配所有name中含有"user"的input

$("a[项目名!='值']")

$("a[项目名$='值']")　　　　匹配某项目以特定值结尾的元素a

$("a[项目名^='值']")　　　　匹配某项目以特定值开始的元素a　

$("a[项目名='值']")

$("a[项目名]")　　　　//$("div[id]")　　　　匹配所有有id属性的div元素

$("a[选择器1][选择器二][...]")　　　　匹配满足多个条件的a元素

$("a b:first-child")　　　　//$("ul li:first-child")　　　　匹配ul中的第一个li

$("a b:nth-child(number)")

$("a b:last-child")

$("a b:only-child")　　　　//如果b是a中唯一的子元素，则将被匹配

 

jQUery 核心
$(a).get([number])　　　　返回包含a的所有元素的数组，number可以是数组的下标

$(document).ready(function(){})　　　　加载dom是执行方法

$(document).css("样式属性名","样式属性值")　　　　

$(formName.elements).hide()　　　　隐藏formName中所有的元素

$(express[,context])　　　　接受一个包含CSS选择器的字符串，然后用这个字符串去匹配一组数组

　　　　　　　　　　　　 //$("div>p")　　　　查找所有div中包含的p元素

　　　　　　　　　　　　 //$("input:radio",document.formName)　　　　查找所有formName表单中所有radio的表单项

$("HtmlCode").appendTo(a)　　　　在a元素中插入HtmlCode

$(a).data("name","value")　　　　在a元素上面存取数据

$.data(a,name","value")　　　　在a元素上面存取数据

jQuery 1.4.2中常用动画函数用法
[a为匹配的元素可是HTML的标签名(加引号)，也可以是通过id获取到的模块]：

speed为动画显示的时间，可以是毫秒数，也可以是“fast”、“normal”、“slow”三个参数之一

$(a).show(speed,function(){})　　　　显示a

$(a).hide(speed,function(){})　　　　隐藏a

$(a).toggle(speed,function(){})　　　　切换a的显示/隐藏　　

$(a).fadeIn(speed,function(){})　　　　a元素渐显(透明度+display)

$(a).fadeOut(speed,function(){})　　　　a元素渐显(透明度+display)

$(a).fadeTo(speed,number,function(){})　　　　a元素从不显示到指定的浓度(number*100,number是一个小数)

$(a).show(speed).delay(800).$(a).hide(speed)　　　　show和hide之间延迟执

$(btn).click=(function{

　　　　$(a).animate({params:'value'},speed)

});　　　点击btn后，a在speed毫秒后开始向params:'value'（fontSise:'15em'）渐变,一个事件中可以写多条animate语句，不过会按顺序执行，在同一个animate中夜可以写多个params项，这多个会同时执行。