jQuery常用的方法

属性操作

attr(name)获取属性值         

[javascript] view plain copy print ?

1. var imgSrc = $(“img”).attr(“src”) 
2. attr(name,value)  //设置属性值 
3. $(“img”).attr(“src”,”images/bg.jpg”) 
4. attr(key,function(index))  //index为当前元素的索引号，整个函数返回一个字符串作为元素的属性值 
5. $(“img”).attr(“src”,function(){ 
6.       return  “images/img0”+Math.floor(Math.random()*2-1)+”.jpg”; 
7. });  //随机图片 
8. removeAttr(name)删除属性值 
9. $(“img”).removeAttr(“src”); 
10. $("img").attr({src: "test.jpg", alt: "Test Image" }); 将一个“名/值”形式的对象设置为所有匹配元素的属性。 

var imgSrc = $(“img”).attr(“src”)
attr(name,value)  //设置属性值
$(“img”).attr(“src”,”images/bg.jpg”)
attr(key,function(index))  //index为当前元素的索引号，整个函数返回一个字符串作为元素的属性值
$(“img”).attr(“src”,function(){
      return  “images/img0”+Math.floor(Math.random()*2-1)+”.jpg”;
});  //随机图片
removeAttr(name)删除属性值
$(“img”).removeAttr(“src”);
$("img").attr({src: "test.jpg", alt: "Test Image" }); 将一个“名/值”形式的对象设置为所有匹配元素的属性。

元素获取和设置

html()                        获取元素的HTML内容

html(htmlString)              设置元素的HTML内容

text()                         获取元素的文本内容

text(textString)          设置元素的文本内容

val()                           获取表单元素的值

val(value)                  设置表单元素的值，其参数还可以为数组，如$(“:radio”).val([“radio1”,”radio2”])  表示名字为radio1和radio2的单选框被选中

设置元素样式值

.css(name,value)              直接设置元素指定名称的css属性

同时设置多个css属性

[javascript] view plain copy print ?

1. $("p").css({ 
2.   "color":"white", 
3. "background-color":"#98bf21", 
4.   "font-family":"Arial", 
5.   "font-size":"20px", 
6.   "padding":"5px" 
7.   }); 

$("p").css({
  "color":"white",
 "background-color":"#98bf21",
  "font-family":"Arial",
  "font-size":"20px",
  "padding":"5px"
  });

带函数的格式

[javascript] view plain copy print ?

1. $("div").click(function(){  //逐渐增加 div 的宽度： 
2.   $(this).css( 
3.     "width", function(index, value){return parseFloat(value) * 1.2;} 
4.   ); 
5. }); 

$("div").click(function(){  //逐渐增加 div 的宽度：
  $(this).css(
    "width", function(index, value){return parseFloat(value) * 1.2;}
  );
});

.addClass(class1class2...)                     增加css类别

.removeClass(class1class2...)              移除css类别

.toggleClass(class)                         切换css类别

[javascript] view plain copy print ?

1. var count = 0; 
2. $("p").click(function(){ 
3. $(this).toggleClass("highlight",count++ % 3 == 0); 
4. });  //每点击三下加上一次 ' highlight ' 类 
5. $("p").height();取得第一个匹配元素当前计算的高度值（px）。 
6. $("p").height(20);为每个匹配的元素设置CSS高度(hidth)属性的值 
7. $("p").width();取得第一个匹配元素当前计算的宽度值（px）。$(window).width(); 获取当前窗口的宽 
8. $("p").width(20);为每个匹配的元素设置CSS宽度(width)属性的值 

var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight",count++ % 3 == 0);
});  //每点击三下加上一次 ' highlight ' 类
$("p").height();取得第一个匹配元素当前计算的高度值（px）。
$("p").height(20);为每个匹配的元素设置CSS高度(hidth)属性的值
$("p").width();取得第一个匹配元素当前计算的宽度值（px）。$(window).width(); 获取当前窗口的宽
$("p").width(20);为每个匹配的元素设置CSS宽度(width)属性的值

元素操作

创建节点元素

[javascript] view plain copy print ?

1. var $div = $(“<divtitle=’JQuery’>内容</div>”); 
2. $(“dody”).append($div); 

var $div = $(“<divtitle=’JQuery’>内容</div>”);
$(“dody”).append($div);

内部插入节点

内部插入，即在元素内部进行添加，作为元素的子节点。

append()和appendTo()方法

append()——其方法是将方法里面的参数添加到jquery对象中来；              如：A.append(B)的意思是将B放到A中来，后面追加,A的子元素的最后一个位置；

appendTo()——其方法是将jquery对象添加到appendTo指定的参数中去。

如：A.appendTo(B)的意思是将A放到B中去，后面追加,B的子元素的最后一个位置；

prepend()和prependTo()方法

prepend()——其方法是将方法里面的参数添加到jquery对象中来；

如：A.prepend(B)的意思是将B放到A中来，插入到A的子元素的第一个位置；

prependTo()——其方法是将jquery对象添加到prependTo指定的参数中去。

如：A.prependTo(B)的意思是将A放到B中去，插入到B的子元素的第一个位置；

append(function(index,html))

[javascript] view plain copy print ?

1. $(“div”).append(returnHtml); 
2. functionreturnHtml(){ 
3.       var str = “<b>write less, domore</b>” 
4. }; 

$(“div”).append(returnHtml);
functionreturnHtml(){
      var str = “<b>write less, domore</b>”
};

外部插入节点

外部插入，即在元素外面添加，作为元素的兄弟节点；       

after()和before()方法

after()——其方法是将方法里面的参数添加到jquery对象后面去；        如：A.after(B)的意思是将B放到A后面去；

before()——其方法是将方法里面的参数添加到jquery对象前面去。如：A.before(B)的意思是将B放到A前面去；

insertAfter()和insertBefore()的方法

与上面的after()和before()方法在逻辑上相反

如：A.insertAfter(B);即将A元素调换到B元素后面；

复制节点

$(selector).clone([true]);

带true参数则复制出来的节点具备原节点所绑定的事件处理程序。

替换节点

（1）replaceAll()

　　$(content).replaceAll(selector);

（2）replaceWith()

　　$(selector).repalceWith(content);

这两种方法在使用时效果完全相同，都是用content 代替 selector.

包裹节点

（1）wrap()

　　

[javascript] view plain copy print ?

1. $(selector).wrap(wrapper); 
2. 　　$(selector).wrap(function(){...}); 
3.       $("#div2").wrap(function(){ 
4.         return "<b></b>"; 
5.    }); 

$(selector).wrap(wrapper);
　　$(selector).wrap(function(){...});
      $("#div2").wrap(function(){
        return "<b></b>";
   });

（2）unwrap()

（3）wrapAll()　　

      $(selector).wrapAll(wrapper);

（4）wrapInner()　　

      $(selector).wrapInner(wrapper);

　  $(selector).wrapInner(function(){...});

　总结：wrap() 和 wrapInner()的显示效果相同，不同的是前者为 seletor 添加了父节点，而后者为 selector 添加了子节点。

  wrap() 和 wrapAll() 显示效果也相同，不同的是前者为 seletor 中的每一个子元素均添加父节点，而后者为整个 seletor 只添加一个父节点

删除节点

（1）remove()

　　$(selector).remove([selector])

$("div").remove("#div3");   //删除 div 标签

（2）detach()

　　$(selector).detach([selector])

（3）empty()

　　$(selector).empty()

remove 方法和 detach 方法的返回值均为被删除的jQuery节点对象，不同的是，前者只保留该对象节点本身，其他绑定的事件及附加的数据等都会被移除。而后者全部保留。empty 方法则是将指定节点的所有子节点删除，本身保留。

遍历DOM树

向上遍历

（1）parent()

返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

（2）parents()

返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

（3）parentsUntil()

返回介于两个给定元素之间的所有祖先元素。

$(document).ready(function(){

$("span").parentsUntil("div");

});  //返回介于<span> 与<div> 元素之间的所有祖先元素

向下遍历

（1）children()

返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。

（2）find()

返回被选元素的后代元素，一路向下直到最后一个后代。

$(document).ready(function(){

  $("div").find("span");

});  //返回属于<div> 后代的所有<span> 元素

同级遍历

（1）siblings()

返回被选元素的所有同胞元素。

（2）next()

返回被选元素的下一个同胞元素。

（3）nextAll()

返回被选元素的所有跟随的同胞元素。

（4）nextUntil()

返回介于两个给定参数之间的所有跟随的同胞元素。

（5）prev(),prevAll() & prevUntil() 方法

prev(),prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素

其它函数

add() 方法将元素添加到匹配元素的集合中

closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

[javascript] view plain copy print ?

1. $( document).bind("click", function( e ) { 
2.     $(e.target ).closest("li").toggleClass("hilight"); 
3.   }); //当被最接近的列表元素或其子后代元素被点击时，会切换黄色背景 

$( document).bind("click", function( e ) {
    $(e.target ).closest("li").toggleClass("hilight");
  }); //当被最接近的列表元素或其子后代元素被点击时，会切换黄色背景

each(function(index,element))方法规定为每个匹配元素规定运行的函数

如果处理数组，第一个参数代表索引值，第二个参数代表数组元素；如果遍历JSON对象，则分别对应key值和value值；此函数还可以遍历一组DOM元素

[javascript] view plain copy print ?

1. $("button").click(function(){ 
2.   $("li").each(function(){ 
3.     alert($(this).text()) 
4.   }); 
5. }); 

$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
});

[javascript] view plain copy print ?

1. <scripttype="text/javascript" > 
2.              $(document).ready(function(){ 
3.                     function objInit(obj){ 
4.                            return$(obj).html("<option>请选择</option>"); 
5.                            }; 
6.                            
7.                     var OData = {  //对象表示法，键值对之间用冒号分割，元素之间用逗号分割，多个元素用大括号包裹 
8.                            producer1 : {brand1_1: "型号1_1_1,型号1_1_2", 
9.                                               brand1_2: "型号1_2_1,型号1_2_2"}, 
10.                            producer2 : {brand2_1: "型号2_1_1,型号2_1_2", 
11.                                                 brand2_2 : "型号2_2_1,型号2_2_2"},     
12.                            producer3 : {brand3_1: "型号3_1_1,型号3_1_2", 
13.                                               brand3_2: "型号3_2_1,型号3_2_2"} 
14.                                   }; 
15.                     $.each(OData,function(key){ 
16.                            $("#selA").append("<option>"+key+"</option>"); 
17.                            }); 
18.                     $("#selA").change(function(){ 
19.                            objInit("#selB"); 
20.                            objInit("#selC"); 
21.                            $.each(OData,function(key1,value1){ 
22.                                   if($("#selA option:selected").text()== key1){ 
23.                                          $.each(value1,function(key2,value2){ 
24.                                                 $("#selB").append("<option>"+key2+"</option>"); 
25.                                                 }); 
26.                                          $("#selB").change(function(){ 
27.                                                 objInit("#selC"); 
28.                                                 $.each(value1,function(key2,value2){ 
29.                                                        if($("#selBoption:selected").text() == key2){ 
30.                                                               $.each(value2.split(","),function(){ 
31.                                                                      $("#selC").append("<option>"+this+"</option>"); 
32.                                                                      }); 
33.                                                               } 
34.                                                        }); 
35.                                                 }); 
36.                                          } 
37.                                   }); 
38.                            }); 
39.   
40.                     $("#bnt").click(function(){ 
41.                            var txt = "您选择的厂商："; 
42.                            txt  += $("#selAoption:selected").text()+"<br/>"; 
43.                            txt += "您选择的品牌："; 
44.                            txt  += $("#selBoption:selected").text()+"<br/>"; 
45.                            txt += "您选择的型号："; 
46.                            txt  += $("#selCoption:selected").text()+"<br>"; 
47.                            $("#tips").html(txt); 
48.                            }); 
49.                     
50.                     }); 
51.       </script> 
52.   
53. <divclass="clsInit"> 
54.          厂商：<selectid="selA"><option>请选择</option></select> 
55.          品牌：<selectid="selB"><option>请选择</option></select> 
56.          型号：<selectid="selC"><option>请选择</option></select> 
57.          <inputtype="button" value="显示"id="bnt"> 
58.     </div> 
59.     <div class="clsInit"id="tips"></div> 
60. has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集 
61. <ul><li>Doesthe UL contain an LI?</li></ul> 
62.   
63. <script> 
64. $("ul").append("<li>" +($("ul").has("li").length ? "Yes" :"No") + "</li>"); 
65. $("ul").has("li").addClass("full"); 
66. </script> 

<scripttype="text/javascript" >
             $(document).ready(function(){
                    function objInit(obj){
                           return$(obj).html("<option>请选择</option>");
                           };
                          
                    var OData = {  //对象表示法，键值对之间用冒号分割，元素之间用逗号分割，多个元素用大括号包裹
                           producer1 : {brand1_1: "型号1_1_1,型号1_1_2",
                                              brand1_2: "型号1_2_1,型号1_2_2"},
                           producer2 : {brand2_1: "型号2_1_1,型号2_1_2",
                                                brand2_2 : "型号2_2_1,型号2_2_2"},    
                           producer3 : {brand3_1: "型号3_1_1,型号3_1_2",
                                              brand3_2: "型号3_2_1,型号3_2_2"}
                                  };
                    $.each(OData,function(key){
                           $("#selA").append("<option>"+key+"</option>");
                           });
                    $("#selA").change(function(){
                           objInit("#selB");
                           objInit("#selC");
                           $.each(OData,function(key1,value1){
                                  if($("#selA option:selected").text()== key1){
                                         $.each(value1,function(key2,value2){
                                                $("#selB").append("<option>"+key2+"</option>");
                                                });
                                         $("#selB").change(function(){
                                                objInit("#selC");
                                                $.each(value1,function(key2,value2){
                                                       if($("#selBoption:selected").text() == key2){
                                                              $.each(value2.split(","),function(){
                                                                     $("#selC").append("<option>"+this+"</option>");
                                                                     });
                                                              }
                                                       });
                                                });
                                         }
                                  });
                           });
 
                    $("#bnt").click(function(){
                           var txt = "您选择的厂商：";
                           txt  += $("#selAoption:selected").text()+"<br/>";
                           txt += "您选择的品牌：";
                           txt  += $("#selBoption:selected").text()+"<br/>";
                           txt += "您选择的型号：";
                           txt  += $("#selCoption:selected").text()+"<br>";
                           $("#tips").html(txt);
                           });
                   
                    });
      </script>
 
<divclass="clsInit">
         厂商：<selectid="selA"><option>请选择</option></select>
         品牌：<selectid="selB"><option>请选择</option></select>
         型号：<selectid="selC"><option>请选择</option></select>
         <inputtype="button" value="显示"id="bnt">
    </div>
    <div class="clsInit"id="tips"></div>
has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集
<ul><li>Doesthe UL contain an LI?</li></ul>
 
<script>
 $("ul").append("<li>" +($("ul").has("li").length ? "Yes" :"No") + "</li>");
 $("ul").has("li").addClass("full");
</script>

过滤函数

(1):eq(index);

获取第N个元素.这个元素的位置是从0算起。

<p> This isjust a test.</p> <p> So is this</p>

example:$(“p”).eq(1);

result:<p>So is this</p>

(2):filter(expr)

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式

<p>Hello</p><p>HelloAgain</p><p class="selected">And Again</p>

example:

$("p").filter(".selected");

result:

<pclass="selected">And Again</p>

(3):filter(fn)

筛选出与指定函数返回值匹配的元素集合

<p><ol><li>Hello</li></ol></p><p>Howare you?</p>

example:

$("p").filter(function(index){

  return  $("ol",this).length == 0;

});

result: <p>Howare you?</p>

(4):hasClass(class)

检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是 is("." + class)。

<divclass="protected"></div><div></div>

example:  $(“div”).hasClass("protected")

result:  true

(5):is(expr)

用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

<form><inputtype="checkbox" /></form>

explam: $("input[type='checkbox']").parent().is("form")

result: true;

(6):not(expr)

删除与指定表达式匹配的元素

<p>Hello</p><pid="selected">Hello Again</p>

example:

$("p").not($("#selected")[0] )

result:  <p>Hello</p>

(8):slice(start,[end])

选取一个匹配的子集;

<p>Hello</p><p>cruel</p><p>World</p>

example:

$("p").slice(0,1).wrapInner("<b></b>");

result:  <p><b>Hello</b></p>

(9)$(dom元素).index():搜索与参数表示的对象匹配的元素，并返回相应元素的索引值

(10)grep(array,function(elementOfArray,indexOfArray),[invert])

此函数用于过滤数组元素，回调函数有两个参数，分别带便待过滤数组的元素和下标，invert默认为false，如果为true代表获取与function规则相反的数组元素

[javascript] view plain copy print ?

1. $.grep(attr,function(ele,index){ 
2.       return ele>5&&indexindex<8; 
3. //获取数组中元素值大于5并且序号小于8的所有元素 
4. }); 

$.grep(attr,function(ele,index){
      return ele>5&&indexindex<8;
//获取数组中元素值大于5并且序号小于8的所有元素
});

JQuery对象和DOM对象相互转换

(1)$(dom元素):将一个或多个dom元素转换为jquery对象。

$(document.body).css("background", "black" ); //设置页面背景色

(2)get(index) 方法获得由选择器指定的DOM 元素

$("button").click(function(){

  x=$("p").get(0);

  $("div").text(x.nodeName + ":" + x.innerHTML);

});

jquery对象访问。eq返回的是jquery对象，只能使用jquery方法，get返回的是dom元素对象，只能使用dom方法.