jQuery常用方法总结【一】

近几天上班闲来无事，把jQuery常用的方法做了下总结，记个笔记。

用来操作元素的方法

1. val() ：返回的或设置被选元素的值，大多用于input元素。相当于document.getElementById("input1").value;

2. html() ：返回或设置被选元素的内容（包括HTML标记）。或者说当被选元素有子元素时，则连子元素的标签一起返回。

3. text() ：返回或设置被选元素的文本内容（不包括HTML标记）。

这三个方法的区别：

用于取值时

val()一般用于input元素的取值，text()和html()一般用于除input以外的文本的取值。
val()和html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，而text()则可以获取
所有选中的元素的文本内容。

例:    <input type="text" id="text1"/>
       <input type="text" id="text2"/>
        
   ->   $("#text1,#text2").val();  //只能获取到text1的value

---

            
        <div id="p1"> <p>text1</p> </div>    
        <div id="p2"> <p>text2</p> </div>         
        
   ->   $("#p1,#p2").html();  //只能获取到id=p1的div的文本值和标签 <p>text1</p>

---

 
        <p id="p1">text1</p>     
        <p id="p2">text2</p>  
        
   ->   $("#p1,#p2").text();  //可以获取到p1和p2的文本值text1,text2


  
    

用于设置值时

html(),val(),text()都可以改变所有已选取元素的值。

例：  $("#text1,#text2,#text3").val("test");  //可以将id为text1,text2,text3的元素值全部改成test

4.attr() ：用于获取或改变属性值，只要是键值对的元素属性，都可以使用attr()。

例(获取属性值)：                   
                   <a id="a1" href="www.baidu.com">链接</a>
     
             ->    var href = $("#a1").attr("href");  //返回id=a1的a元素的href属性：www.baidu.com   

 
     
  (改变属性值)：  
     ->    $("#a1").attr("href"，"www.google.com");  //将id=a1的a元素href改成 www.google.com
     

---

 (获取属性值)：
            <input id="text1" type="text" class="aa" style="width:100px;"/>
        
 ->     var text1 = $("#text1").attr("id");  //返回 "text1"
 ->     var text2 = $("#text1").attr("type");  //返回 "text"
 ->     var text3 = $("#text1").attr("class");  //返回 "aa"
 ->     var text4 = $("#text1").attr("style");  //返回 "width:100px;"




(改变属性值)：  
 ->     $("#text1").attr({
                'type' : 'password',
                'class' : 'bb',
                'style' : 'width:80px;'
        });  //将id=text1的元素type改成 password，class改成bb，style改成width:80px;
 
        注意：修改多个属性值时，最后一个属性不要带逗号！  
        建议：对于checked和selected这两个属性，用prop代替attr会好一些，因为：
               1） attr只能获取初始值，无论是否变化。
               2） prop能访问变化后的值，并以true/false返回。

操作元素的css属性或者类

1. addClass() ： 向被选元素添加一个或者多个类。

例： .text1{
        width:100%;
        height:90px;
     }
     
     <input type="text" id="text1"/>
     
     $(#text1").addClass("text1");
->   <input type="text" id="text1" class="text1"/>

2. removeClass() : 从被选元素中删除一个类。

3. toggleClass() ： 对被选元素进行添加/删除类的切换操作。

 
例：  .blue{
          color : blue;
      }
      
      <h1>标题</h1>
      
      $("h1").toggleClass("blue");      
->    当h1元素的class包括blue时就删除，没有时就加上。   

4. css() ： 设置或返回被选元素的一个或者多个样式属性，用法和attr()一样。

 
例： $('#text1').css('background-color');  //返回text1的背景色
     $('#text1').css('background-color','red');  //设置text1的背景色为红色
     $('#text1').css({ 'background-color':'red',
                       'font-size':'200%'}
                     );   //设置多个样式属性

用于添加或删除元素

1. append() : 在被选元素的结尾插入新内容。

例： <p id="p1"> 111 </p>

->   $('#p1').append("222");
                
->   <p id="p1"> 111222 </p>

2. prepend() : 在被选元素的开头插入新内容，与append相反。

3. after() ：在被选元素之后插入新内容。

例： <p id="p1"> 111 </p>

->   $('#p1').after("222");
                
->   <p id="p1"> 111 </p>222

4. before() : 在被选元素之前插入新内容，与after相反。

区别： append和prepend是在被选元素里面添加内容，after和before是在被选元素外面添加内容。

---

5. remove() : 删除被选元素（及其子元素），就是删除被被选元素包裹在内的所有元素，包括它自己。

6. empty() ： 删除被选元素的所有子元素，不删除被选元素自己。

操作元素尺寸

在看下面的方法之前，咱得先把div的那些尺寸再搞清楚一遍。

上图是一张div的图，上面标记了它的各项属性，

• 第二层灰色的部分是这个div的边框，平时的边框可能没这么宽，只是这个想让大家看的更明白一点，
• 最里层的淡灰色是div里面的内容，可能是table，文本或者其他的，这些内容会和边框有个距离，不管是上下左右，这个距离就是padding（内边距），也是蓝色的部分。这三层构成了一个div，这个div呢，和它的父元素，可能也是一个div，也可能就是浏览器窗口了，不管是上下左右也会有一个距离，这个距离就是margin（外边距），是最外面虚线框与灰色边框中间的那部分白色的。

好，来看下面的方法：

1. width() ：设置或返回元素的宽度（不包括內边距，边框，和外边距）。

例 ： <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;">
      </div>
      
      这个例子是一个div，它的高度是100px，宽度是300px，内边距padding是10px，外边距margin是3px，
边框的宽度是1px。

-> $("#div1").width(); //返回div1元素的宽度300px
-> $("#div1").width("300px"); //重新设置div1元素的宽度为300px

2. height() ：设置或返回元素的高度（不包括内边距，边框，和外边距），

还是上面那个例子，$("#div1").height();返回div1的高度100px。也可以用这个方法也可以设置高度，同上。

3. innerWidth() ：返回元素的宽度（包括内边距）。

这个方法是不仅返回元素的宽度，还会加上它的左右内边距的值一起返回，比如上个例子，

    $("#div1").innerWidth();
->  300（宽度） + 10（左内边距） + 10（右内边距） = 320px 。

我也不太明白为什么有这样一个方法，我还没用过，不过可以用来计算内边距。
注意： 这个方法只能返回值，并不能设置值。

4. innerHeight() ： 返回元素的高度（包括外边距）。

这个方法返回元素的高度，加上它的上下内边距.

    $("#div1").innerHeight();
->  100（高度）+ 10（上边距）+10（下边距）= 120px

5. outerWidth() ： 返回元素的宽度（包括内边距，边框）。

这个方法返回元素的宽度，再加上它的左右边距，再加上它左右边框的宽度。

    $("#div1").outerWidth();
->  300（宽度） + 10（左内边距） + 10（右内边距） + 1（左边框宽度) + 1（右边框宽度）= 322px 。

就是innerWidth加上两边边框的宽度嘛，估计是用来计算边框宽度的。

6. outerHeight() ： 返回元素的高度（包括内边距，边框）。
这个方法返回元素的宽度，再加上它的左右边距，再加上它上下边框的宽度。计算方法同上，应该是122px。

7. outerWidth(true) ：返回元素的宽度（包括内边距，边框和外边距）。

宽度，内边距，边框都算完了，怎么能落下外边距呢，inner和outer都用完了，估计开发的时候没词了，就在outerWidth()里面加个true，
就这样咱可以把外边距再算进去。

    $("#div1").outerWidth(true); 
->  300（宽度） + 10（左内边距） + 10（右内边距） + 1（左边框宽度) + 1（右边框宽度）+ 3（左外边距）+ 3（右边距）= 328px 。

8. outerHeight(true) : 返回元素的高度（包括内边距，边框和外边距）。

    $("#div1").outerHeight(true); 
->  300（宽度） + 10（上内边距） + 10（下内边距） + 1（上边框宽度) + 1（下边框宽度）+ 3（上外边距）+ 3（下边距）= 128px 。

---

元素的操作先写这么多，等下在下一篇文章里面写一下jQuery的ajax操作，元素的遍历。