常用的jQuery方法

{常用的方法}

1、循环 each

用JS语法创建一个一维数组，存入string类型的姓名，再迭代

    var nameArray = new Array("哈哈","呵呵","嘻嘻");
    for(var i=0;i<nameArray.length;i++){
        document.write(nameArray[i]+"<br/>");
    }

用JSON语法创建一个一维数组，存入string类型的姓名，再迭代

    var nameArray = ["哈哈","呵呵","嘻嘻","都都"];//js对象
    var $nameArray = $(nameArray);//jquery对象
    $nameArray.each(function(){
        //this表示数组中每一个元素，this属性js对象，this代表string类型
        alert(this);
    });

用JSON语法创建一个一维数组，存入object类型的姓名和薪水，再迭代

    var nameArray = [
        {
            name : "哈哈",
            sal : 6000
        },
        {   
            name : "嘿嘿",
            sal : 7000
        },
        {
            name : "笨笨",
            sal : 8000
        }
    ];
    var $nameArray = $(nameArray);
    $nameArray.each(function(){
        //this代表object类型
        alert(this.name + ":"+this.sal);
    });

2、内部插入 append

• html

  <ul>
      <li>第一项</li>
      <li>第二项</li>
      <li>第三项</li>
  </ul> 
  
  <hr/>
  
  <div>这是子元素，要插入到父元素内</div>

1）DIV标签插入到UL标签之后(父子关系)

    $("ul").append( $("div") ); 

2）DIV标签插入到UL标签之前(父子关系)

    $("ul").prepend( $("div") );

2、外部插入

1）DIV标签插入到UL标签之后(兄弟关系)

    $("ul").after( $("div") ); 

• 1
• 2

2）DIV标签插入到UL标签之前(兄弟关系)

    $("ul").before( $("div") ); 

3、属性的操作

• html

  <form>
      <table>
          <tr>
              <td>
                  <input type="text" name="username" value="张三"/>
              </td>
              <td>
                  <input type="password" name="password" value="123456"/>
              </td>
          </tr>
      </table>
  </form>

1）取得form里第一个input元素的type属性

    alert( $("form input:first").attr("type") );

2）设置form里最后个input元素的为只读文本框

    $("form input:last").attr("readonly","readonly")
    $(":password").attr("readonly","readonly")

4、创建节点（DOM对象）

• 创建div元素，添加”哈哈”文本，ID属性，并添加到文档中

1）js方式

    var divElement = document.createElement("div");
    divElement.innerHTML = "哈哈哈";
    divElement.setAttribute("id","2015");
    divElement.id = "2015";
    document.body.appendChild(divElement);*/

2）jquery方式

    var $div = $("<div id='2015'>哈哈哈哈哈</div>");
    $("body").append( $div ); 
    $(document.body).append( $div ); 

5、删除节点

• html

  <ul id="a">
      <li>第一项</li>    
      <li id="secondID">第二项</li>      
      <li>第三项</li>    
  </ul>
  
  <ul id="b">
      <li>第一条</li>    
      <li id="secondID">第二条</li>      
      <li>第三条</li>    
  </ul>
  
  <div>这是div元素</div>

1）删除ID为secondID的LI元素

    $("#secondID").remove();

2）删除所有LI元素

    $("#a li").remove();

3）删除UL元素

    $("#b").remove();

6、获取标签节点内容

• html

  <div>
      哈哈  
  </div>
  
  <select id="city">
      <option value="地都">北京</option>
  </select>

1取得div中的内容

    alert( $("div").text() );

2）取得option的值和描述

    var $option = $("#city option");
    var value = $option.val();
    var html = $option.text();
    alert(value + ":" + html);

7、复制

• <input type="button" value="原按钮" onclick="alert('静态事件')"/> 

1）复制原input元素，添加到原input元素后，与其同级

    var $old = $(":button");
    var $new = $old.clone();
    $new.val("新按钮");
    $old.after( $new );

2）为原input元素动态添加单击事件，且复制原input元素，

    //var $old = $(":button");
    //$old.click(function(){
    //  alert("动态事件");
    //});

3）添加到原input元素后，与其同级，且和原按钮有一样的行为

    //var $new = $old.clone(true);
    //$new.val("新按钮");
    //$old.after( $new );

8、替换

• <table border="1" align="center">
      <tr>
          <td>
              <div style="width:165px;height:23px">
                  双击会被替换成文本框
              </div>
          </td>
          <td>
              不会变
          </td>
      </tr>
  </table>

1）双击div中的文本，用文本框替换文本

    $("div").dblclick( function(){
        var $text = $("<input type='text' style='width:165px;height:23px'/>");
        //文本框替代div标签
        $(this).replaceWith( $text );
    } );

9、删除

• <table>
      <tr>
          <td>
              添加属性border/align/width
          </td>
          <td>
              删除属性align
          </td>
      </tr>
  </table>

1）为table元素添加属性border/align/width

    var $table = $("table").attr("border","2").attr("align","right").attr("width","60%")

2）将table元素的align属性删除

    $table.removeAttr("align");

10、样式的操作

• <style type="text/css">
      .myClass{
          font-size:30px;
          color:red
      }
  <div>无样式</div>
  
  <div class="myClass">有样式</div>

1）为无样式的DIV添加样式

    //$("div:first").addClass("myClass");

2）为有样式的DIV删除样式

    //$("div:last").removeClass("myClass");

3）切换样式，即有样式的变成无样式，无样式的变成有样式

    //$("div").toggleClass("myClass");

4）最后一个DIV是否有样式

    var flag = $("div:last").hasClass("myClass");
    alert(flag?"有样式":"无样式");

11、位置、尺寸

1）获取图片的坐标

    var offset = $("img").offset();
    var x = offset.left;
    var y = offset.top;
    alert(x+":"+y);

2）设置图片的坐标

    $("img").offset({
        top:100,
        left:200
    });

3）获取图片的宽高

    var w = $("img").width();
    var h = $("img").height();
    alert(w+":"+h);

4）设置图片的宽高

    $("img").width(500);
    $("img").height(600);

    <img src="../images/zgl.jpg"/>

12、查找

• <div>
      <span>
          Hello Again
          <b>
              Bold
          </b>
      </span>
  </div>
  <p>And Again</p>
  <span>And Span</span>

1）取得div元素的直接子元素内容，不含后代元素

    //var $span = $("div").children();
    //var content = $span.html();//包含子标签
    //var content = $span.text();//不包含子标签
    //alert(content);

2）取得div元素的下一个同级的兄弟元素内容

    //var $p = $("div").next();
    //alert( $p.text() );

•  

3）取得div元素的上一个同级的兄弟元素内容

    //alert( $("div").prev().text() );

•  

4）依次取得div元素的上下一个同级的所有兄弟元素的内容

    var $all = $("div").siblings("p");        
    $all.each(function(){
        alert( $(this).html() );
    });

•  

13、隐藏和显示

• <p>
      <img src="../images/zgl.jpg"/>
  </p> 

1）图片隐蔽

    $("img").hide(5000);

2）休息3秒

    window.setTimeout(function(){

        //图片显示
        $("img").show(5000);

    },3000);

14、淡入淡出 动画

<p>
    <img src="../images/zgl.jpg" style="display:none"/>
</p>    

<script type="text/javascript">
    //淡入显示图片
    $("img").fadeIn(3000);
    //淡出隐蔽图片
    $("img").fadeOut(3000);
</script>

15、好友列表上下滑动

<div>
    中国0<br/>    
    中国1<br/>    
    中国2<br/>    
    中国3<br/>    
    中国4<br/>    
    中国5<br/>    
    中国6<br/>    
    中国7<br/>    
    中国8<br/>    
    中国9<br/>    
</div> 

<input type="button" value="我的好友"/>

<script type="text/javascript">
    //向上下滑动
    $(":button").click(function(){
        //div标标上下移动
        $("div").slideToggle(100);
    });
</script>