苏柳凝烟

Jquery常用的方法

{常用的方法}

1、循环 each

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

    var nameArray = new Array("哈哈","呵呵","嘻嘻");
    for(var i=0;i");
    }

用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


    第一项
    第二项
    第三项
 



这是子元素，要插入到父元素内

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

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

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

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

2、外部插入

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

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

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

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

3、属性的操作

html

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 = $("哈哈哈哈哈");
    $("body").append( $div ); 
    $(document.body).append( $div );

5、删除节点

html


    第一项    
    第二项      
    第三项    



    第一条    
    第二条      
    第三条    


这是div元素

1）删除ID为secondID的LI元素

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

2）删除所有LI元素

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

3）删除UL元素

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

6、获取标签节点内容

html
```
    哈哈  
```

1取得div中的内容

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

2）取得option的值和描述

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

7、复制

html
```
 
```

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、替换

html

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

    $("div").dblclick( function(){
        var $text = $("");
        //文本框替代div标签
        $(this).replaceWith( $text );
    } );

9、删除

html


    
        
            添加属性border/align/width
        
        
            删除属性align

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

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

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

    $table.removeAttr("align");

10、样式的操作

html