1 $( "p" ).append( $( "input" ).map(function() { 2 return $( this ).val(); 3 }).get().join( ", " ) );
1 $('li').each(function(index){ 2 console.log(index + ':'+$(this).text()); 3 })
$('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({1900,height:1200}) //"width=1900&height=1200"
1 <form> 2 <select name="single"> 3 <option>Single</option> 4 <option>Single2</option> 5 </select> 6 <select name="multiple" multiple="multiple"> 7 <option selected="selected">Multiple</option> 8 <option>Multiple2</option> 9 <option selected="selected">Multiple3</option> 10 </select><br/> 11 <input type="checkbox" name="check" value="check1"/> check1 12 <input type="checkbox" name="check" value="check2" checked="checked"/> check2 13 <input type="radio" name="radio" value="radio1" checked="checked"/> radio1 14 <input type="radio" name="radio" value="radio2"/> radio2 15 </form> 16 <script type="text/javascript"> 17 $("#results").append("<tt>"+$('form').serialize()+'</tt>'); //结果为single=Single&multiple=Multiple2&check=Check1&check=Check2&radio=radio2 18 </script>
.submit() 表单的提交事件 若要阻止表单提交 则return false;
.prop()获取匹配的元素中第一个元素的属性值
1 $('input[type="checkbox"]').prop("checked"); //选中为true,否为false; 2 $('input[type="checkbox"]').prop("disabled",false); //禁用所有复选框 3 $('input[type="checkbox"]').prop("checked",true); //选中所有复选框
.offset().left .offset().top 以像素计算top和left坐标
1 $("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() 把所有匹配的元素用其他元素包裹起来
1 $(".inner").wrap("<div class='new'></div>"); 2 <div class="new"> 3 <div class="inner">Hello</div> 4 </div> 5 <div class="new"> 6 <div class="inner">Goodbye</div> 7 </div>
.unwrap() 移出元素的父元素
.replaceWith() 把所有指定的元素替换成制定的html或dom元素
.empty() 删除匹配的元素集合中所有的子节点
1 $('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() 在选择元素上绑定一个或多个事件处理函数
1 $('div.test').on({ 2 click:function(){ 3 $(this).toggleClass('active'); 4 }, 5 mouseenter:function(){ 6 $(this).addClass('inside'); 7 }, 8 mouseleave:function(){ 9 $(this).removeClass("inside") 10 } 11 });
1 $(p).on('click',{foo:'bar'},function(){}); 2 $("form").on("submit",false;)//取消提交事件
1 $("body").on("click","p",function(){});
.off() 移除用.on()绑定的事件
.bind() $('form').bind('submit',function(){return false;}) 阻止默认事件和事件冒泡;
1 $('form').bind('submit',function(){ 2 return false; // 取消默认事件和事件冒泡 3 event.preventDefault(); //只取消默认事件 4 event.stopPropagation(); //只阻止一个事件冒泡 5 });
.one() 绑定一个一次性的时间处理函数
.trigger() 在每一个匹配的元素上触发某类事件
1 $("form").trigger("submit");
.delegate() 指定的元素(被选元素的子元素)添加一个或多个事件处理函数;适用于当前或未来的元素(比如脚本创建的元素)
1 $('table').delegate('td','click',function(){ //div里的td 2 $('p').slideToggle(); 3 })
.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() 创建自定义动画的函数
1 <script> 2 $( "#go" ).click(function() { 3 $( "#block" ).animate({ 4 "70%", 5 opacity: 0.4, 6 marginLeft: "0.6in", 7 fontSize: "3em", 8 borderWidth: "10px" 9 }, 1500 ); 10 }); 11 </script>
.stop() 停止指定元素上的所有动画
$("#toggle").on("click",function(){ $(".block").stop().slideToggle(1000); //及时停止 });
.finish()
.delay() 设置延迟
$('#foo').slideUp(300).delay(800).fadeIn(400); //在slideup和fadein之间延时800毫秒
$.trim() 去掉字符串起始和结尾的空格
1 $.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:请求超时时间,
})