jQuery選擇器、事件、節點、動畫效果

1、選擇器
  基本選擇器：
    標籤選擇器：  $("h1").css()
    類選擇器：  $(".c").css()
    id選擇器：  $("#id").css()
    並集選擇器：  $("h1,.c,#id").css()
    交集選擇器：  $("li.c").css()
 
  層次選擇器：
    後代選擇器：  $("div li").css() " "
    子選擇器：  $("dt>span").css() ">"
    相鄰選擇器：  $("#one>dt+dd").css() "+"
    同輩選擇器：  $("#two>dt~dd").css() "~"

  屬性選擇器："[]"
    包含給定屬性選擇器：  $("a[target]").css()
    包含給定特定屬性值選擇器：  $("[href='http://www.baidu.com']").css()
    不包含給定特定屬性值選擇器：  $("[href!='http://www.baidu.com']").css()
    以給定特定屬性值開頭選擇器：  $("[href^='www']").css()
    以給定特定屬性值結尾選擇器：  $("[href$='.jd']").css()
    包含特定屬性值選擇器：  $("[href*='http']").css()
    複合屬性選擇器：  $("a[href][title][target]").css()

  過濾選擇器：":"
    選取偶數元素：  $("li:even").css()
    選取奇數元素：  $("li:odd").css()
    選取索引等於(i)的元素：  $("li:eq(1)").css()
    選取索引大於(i)的元素：  $("li:gt(1)").css()
    選取索引小於(i)的元素：  $("li:lt(1)").css()
    選擇器反向選擇元素：  $("li:not(.tee)").css()
    選取全部標題元素：  $("div>:header").css()
    選取得到焦點的元素：  $(":focus").css()


2、顯示與隱藏
    $("h1").toggle(function(){
        $("#inner:hidden").show();//顯示
    },function(){
        $("#inner:visible").hide();//隱藏
    })

 
3、鼠標事件
    $("#nav li").mouseover(function(){
        $(this).addClass("over");
    })

    $("#nav li").mouseout(function(){
        $(this).removeClass("over");
    })


4、鍵盤事件
    keydown():  按下鍵盤時，觸發或將函數綁定到指定元素的keydown事件
    keyup():    釋放鍵盤時，觸發或將函數綁定到指定元素的keyup事件
    keypress(): 產生可打印的字符時，觸發或將函數綁定到指定元素的keypress事件


5、表單事件
    focus()：  得到焦點，觸發或將函數綁定到指定元素的focus事件
    blur()：   失去焦點，觸發或將函數綁定到指定元素的blur事件


6、綁定事件
    bind()：  能夠同時爲多個事件綁定方法
        $("input[name=enevt_1]").bind({mouseover:function(){
            $("ul").css("display","none");
        },mouseout:function(){
            $("ul").css("display","block");
        }});


7、淡入淡出效果
    fadeIn()：能夠經過改變元素的透明度實現淡入效果

        $("input[name=fadein_btn]").click(function(){
            $("img").fadeIn("slow"); //以較慢的速度淡入
        });

    fadeOut()：能夠經過改變元素的透明度實現淡出效果

        $("input[name=fadeout_btn]").click(function(){
            $("img").fadeOut(1000); //以1000毫秒的速度淡出
        });


8、改變元素的高度
    slideDown()：  可使元素逐步延伸展現
    slideUp()：    可使元素逐步縮短直至隱藏
        $("h2").click(function(){
            $(".txt").slideUp("slow");
            $(".txt").slideDown("slow");
        })


9、插入子節點
    append(content)     $(A).append(B)：表示將B追加到A中  例如：$("ul").append($newNode1);
    appendTo(content)   $(A).append(B)：表示將A追加到B中  例如：$newNode1.appendTo("ul");
    prepend(content)    $(A).prepend(B)：表示將B前置到A中 例如：$("ul").prepend($newNode1);
    prependTo(content)  $(A).prepend(B)：表示將A前置到B中 例如：$newNode1.prependTo("ul");


10、插入同輩節點
    after(content)        $(A).after(B)：       表示將B插入到A以後  例如：$("ul").after($newNode1);
    insertAfter(content)  $(B).insertAfter(A)： 表示將A插入到B以後  例如：$newNode1.insertAfter("ul");
    before(content)       $(A).before(B)：      表示將B插入到A以前  例如：$("ul").before($newNode1);
    insertBefore(content) $(B).insertBefore(A)：表示將A插入到B以前  例如：$newNode1.insertbefore("ul");


11、替換節點
    replaceWith()：替換某個節點
        $("ul li:eq(1)").replaceWith($newNode1);
    replaceAll()： 替換全部符合條件的節點
        $("ul li:eq(1)").replaceAll($newNode1);


12、複製節點
    clone()：用於複製某個節點    $("ul li:eq(1)").clone(true).appendTo("ul");


十3、刪除節點
    remove()：刪除整個節點
    detach()：刪除整個節點，保留元素的綁定事件、附加的數據
    empty()： 清空節點內容


十4、獲取與設置節點屬性
    attr()：用來獲取與設置元素屬性
        $newNode4.attr("alt");  //設置單個屬性
        $("img").attr({width:"50",height:"100"});  //設置多個屬性
    removeAttr()：用來刪除元素的屬性
        $newNode2.removeAttr("title");


十5、遍歷子元素
    children()：能夠用來獲取元素的全部子元素
        $("body").children();
    parent()： 獲取元素的父級元素
    parents()：獲取元素的祖先元素
    next([expr])：用於獲取緊鄰匹配元素以後的元素
        $("li:eq(1)").next().css("background-color","#F06");
    prev([expr])：用於獲取緊鄰匹配元素以前的元素
        $("li:eq(1)").prev().css("background-color","#F06");
    siblings([expr])：用於獲取位於匹配元素前面和後面的全部同輩元素
        $("li:eq(1)").siblings().css("background-color","#F06");