jQuery用法小结

filtering过滤：
.not('') 在所选元素集合中， 排除特定的元素 $( "li" ).not( ":even" ).css( "background-color", "red" );
.filter('') 在所选集合中，选定特定的元素；与.not( )相反； $("p").filter(".selected,:first")选择第一个和带有selected类的p元素；
.eq(num ) num:0 1 2 3 4...
.has(“ul”) $( "li" ).has( "ul" ).css( "background-color", "red" );
.first() .last() $( "li" ).first().css( "background-color", "red" );
.is()检测匹配元素，若其中至少有一个元素符合给定的表达式 返回true;$( "input[type='checkbox']" ).parent().is( "form" )
.map() 操作一个数组中的每个元素 转换为另一个数组

$( "p" ).append( $( "input" ).map(function() {
return $( this ).val();
}).get().join( ", " ) );

.slice(0,2) 选取元素集合中 从0开始至2结束的前两个匹配元素；

traversing 遍历：
.end()返回所选文本的上一级；元素
.add() 1添加一个新元素到一组匹配的元素中 $(“p”).add(“span”) 表示已选定p和span元素；
2动态生成一个元素并添加至匹配的元素中
.children()只考虑子元素，而非所有的所有的后代元素；
.closest()从元素本身开始，逐级向上遍历，返回最先匹配的元素；
.parents()从父元素开始向上遍历，返回所有匹配元素，是一个集合。
.offsetParent() 返回第一个匹配的具有position的父元素；
.prev( )取的所选元素的紧邻的前一个同辈元素；
.siblings( )找到所选元素的所有同辈元素；
核心函数
.each() 遍历一个函数集

$('li').each(function(index){
console.log(index + ':'+$(this).text());
})

.index()索引

$('li').index(document.getElementById('bar'))；
$('li').index($('#bar'))；   //传递一个jquery对象
$('li').index($('li:gt(0)'))； //传递一组，返回第一个元素的索引位置
$('#bar').index('li')；  //传递一个选择器，返回＃bar在所有li中的索引位置
$('#bar').index()；    //不传递参数，返回这个元素在同辈中的索引位置

.size() 相当于$('image').length

.get(0) 返回dom对象 $(this).get(0) 与$(this)[0]等价；.get()获得的是元素数组。

.data("blab","hello") 存储数据在blab上

$("form>input") 匹配表单中所有的直接子级input

$("lable + input") 匹配所有跟在lable后面的元素

$("form ~input") 匹配所有与表单同辈的元素

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

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

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

$("div:contains('john')") 查找所有包含‘john’的元素

$('form').serialize() 将表单内容序列化为字符串，用于ajax请求

$('select,:redio').serializeArray();序列化表格元素，返回JSON数据结构JSON对象，而非字符串

$.param() 在内部将元素转化为序列化的字符串。$.param({width:1900,height:1200}) ／／"width=1900&height=1200"

<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2" checked="checked"/> check2
<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2
</form>
<script type="text/javascript">
$("#results").append("<tt>"+$('form').serialize()+'</tt>');   //结果为single=Single&multiple=Multiple2&check=Check1&check=Check2&radio=radio2
</script>

.submit() 表单的提交事件 若要阻止表单提交 则return false；

.prop()获取匹配的元素中第一个元素的属性值

$('input[type="checkbox"]').prop("checked");      //选中为true，否为false；
$('input[type="checkbox"]').prop("disabled",false);     //禁用所有复选框
$('input[type="checkbox"]').prop("checked",true);       //选中所有复选框

.offset().left .offset().top 以像素计算top和left坐标

$("p").offset({top:10,left:30});

.position().left .position().top 获得匹配元素相对于父元素的偏移

.scrollTop() 获取相对于滚动条顶部的偏移 .scrollTop(300) 设置

.scrollLeft()

.height() .height(300)

.width() .width(300)

.innerHeight() .innerWidth() 包括padding和内容

.outerHeight() 包括补内容＋padding＋边框； outerHeight() 包括 内容＋padding＋边框＋margin；

.append() .appendTo() .prepend() .prependTo()

.after() 在dd整个元素</p>之后添加元素 .before()

.insertAfter()

.wrap() 把所有匹配的元素用其他元素包裹起来

$(".inner").wrap("<div class='new'></div>");
<div class="new">
<div class="inner">Hello</div>
</div>
<div class="new">
<div class="inner">Goodbye</div>
</div>

.unwrap() 移出元素的父元素

.replaceWith() 把所有指定的元素替换成制定的html或dom元素

.empty() 删除匹配的元素集合中所有的子节点

$('p').empty(); //<p></p> 里的内容为空

.remove() 删除所有匹配的元素

$("p").remove();  //<p>hello</P> 整个删除

.detach()

.clone() 克隆匹配的dom元素，并选中这个克隆的副本，副本拥有同样的功能

.addSelf()

.contents() 匹配元素内部所有的子节点 元素节点<div> <p>... nodeType ==1;

属性节点 id class name... nodeType == 2;

文本节点 文本内容... nodeType ==3;

注释节点 nodeType == 8;

文档节点 document整个文档 nodeType ==9;

事件函数

.on() 在选择元素上绑定一个或多个事件处理函数

$('div.test').on({
click:function(){
$(this).toggleClass('active');
},
mouseenter:function(){
$(this).addClass('inside');
},
mouseleave:function(){
$(this).removeClass("inside")
}
});

$(p).on('click',{foo:'bar'},function(){}); $("form").on("submit",false;)//取消提交事件

$("body").on("click","p",function(){});

.off() 移除用.on()绑定的事件

.bind() $('form').bind('submit',function(){return false;}) 阻止默认事件和事件冒泡；

$('form').bind('submit',function(){
return false;    // 取消默认事件和事件冒泡
event.preventDefault();  //只取消默认事件
event.stopPropagation();  //只阻止一个事件冒泡
});

.one() 绑定一个一次性的时间处理函数

.trigger() 在每一个匹配的元素上触发某类事件

$("form").trigger("submit");

.delegate() 指定的元素（被选元素的子元素）添加一个或多个事件处理函数；适用于当前或未来的元素（比如脚本创建的元素）

$('table').delegate('td','click',function(){ //div里的td $('p').slideToggle(); })

.toggle() 切换状态

.blur() 失去焦点时 返回false阻止默认事件

.change() 当元素的值发生改变时，仅适用于input text文本域 textarea 和 select

.keydown() keycode 空格 32 Enter 13 ESC 27

.resize() 调整浏览器窗口的大小时

.scroll() 当指定的元素发生滚动时的事件 $(window).scroll();$('div').scroll();

.select() 当textarea 或input中的文本 被选择时，发生select事件

.animate() 创建自定义动画的函数

<script>
$( "#go" ).click(function() {
$( "#block" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
</script>

.stop() 停止指定元素上的所有动画

$("#toggle").on("click",function(){
$(".block").stop().slideToggle(1000);   //及时停止
});

.finish()

.delay() 设置延迟

$('#foo').slideUp(300).delay(800).fadeIn(400);  //在slideup和fadein之间延时800毫秒

$.trim() 去掉字符串起始和结尾的空格

$.trim(" hello, how are you ? "); //'hello, how are you ?'

$.param() 序列化

param()方法 对数组或对象进行序列化，用于在内部将元素值转换为序列化的字符串

.toArray() 转化为数组

$('li').toArray();   //[<li id='foo'>, <li id="bar">]

.nextUntil() $("li .start").nextUntil('li .stop') 选择start和stop两个li 之间的所有同级元素

AJAX

$.ajax(url,[settings])

$.ajax({

　　url:'',

　　beforeSend:function(XMLHttpRequest){},

　　success:function(){},

　　dataFilter:function(data,type){},在请求成功之后调用，传入返回的数据以及‘dataType'参数的值，

　　complete:function(){},当请求完成之后调用此函数，无论成功失败。传入XMLHttpRequest对象，

　　error:function(){},

　　dataType:指定不同数据处理方式。除了默认的XML，还可以指定为html,json,jsonp,script,text.,！需要注意的是，我们必须确保服务器报告的MIME类型与我们选择的dataType所匹配。比如说xml的话，服务器必须声明text/xml或者application/xml来获得一致的结果。JSON数据是一种很能方便通过javascript解析的结构化数据。如果获取的文件存放在远程服务器上（域名不同，跨域获取数据），则需要使用JSONP请求。

　　processData:false,避免在数据发送给时，被默认转换成查询字符串；并且要指定恰当的contentType选项的值，

　　contentType:MIME类型，默认为application/x-www-form-urlencoded,

　　cache:false,禁用缓存

　　ifModified:true,辅助禁用缓存；默认false指仅在服务器数据改变时获取新数据

　　async:true,默认true异步，

　　statusCode:{404:function(){alert('pafe not found');}});

　　timeout:请求超时时间，

})