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(){}); 2 $("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 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()  创建自定义动画的函数

<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:请求超时时间，

})