jquery的基本使用

方法連綴：
$('p').removeClass('classFoo').addClass('classBar');

方法疊代：
可以使用each友善對元素清單進行循環操作
$('li').each(function(i){
    alert( typeof this);
});

css選擇器：
$('*')  選擇所有元素
$('tag') 選擇所有html标簽中的tag元素
$('tagA tagB')選擇作為tagA後代的所有tagB元素
$('tagA,tagB,tagC')選擇所有tagA元素，tagB元素，tagC元素
$('#id')和$('tag#id')選擇所有ID為id或者ID為id且标簽為tag的元素
$('.className')是clas為className的元素

tagA tagB是更具體的後代元素
tagAtagB是同時滿足條件

$('tag[attr]')  選擇所有帶有attr屬性的tag元素

也可以使用一些僞類和僞元素選擇器 基于在他們在文檔中的文職而不必通過類名或者ID而找到任意一個特定的元素

選擇文章中nav元素包含的所有連結  用DOM比較麻煩
但使用選擇器用法可以縮短為很少的字元 
var links=$('article nav a');
這樣代碼不僅清晰 而且容易看懂

庫提供還有專有的選擇器
比如 選擇偶數和奇數元素       even是偶數
$('tr:odd').addClass("odd");  奇數

$('tag:odd')   選擇比對元素集中的奇數元素
$('tag:even')     偶數個個數 特别時候突出表格行
$('tag:eq(0)') 和$('tag:nth(0)')選擇比對元素集中的第n個元素 如頁面的第一個段落
$('tag:contains('test')')   包涵指定文本的所有元素
$('tag:gt(n)')選擇比對元素集中所有大于n的所有元素
$('tag:lt(n)')選擇比對元素集中所有小于n的所有元素
$('tag:first') 等效于eq(0);
$('tag:last') 選擇比對元素集中的最後一個元素
$('tag:parent') 選擇比對元素集中包涵子元素的所有元素
$('tag:visible')   所有可見元素
$('tag:hidden')   所有隐藏的元素

舉例：修改頁面第一個段落的字型粗細
$("p:first").css("font-weight","bold");
顯示素有隐藏的div元素
$("div:hidden").show();
隐藏所有包涵單詞  scared的div元素
$("div:contains('scared')").hide();


jQuery還提供了專門為表單設計的表達式 用于快速通路表單元素
:input   選擇表單中所有的元素 （input select textarea button）
:text    type=“text”
:password  type="password"
:radio     type="radio"
:checkbox  type="checkbox"
:submit    type="submit"
:image     type="image"
:reset     type="reset"
:button    type="button"


生成内容 ：
用jQuery建立新的DOM元素很簡單   把HTML作為$函數的參數傳入 可建立新的節點   下面是給body元素添加一個新的div的元素 新的div元素有一個值為example的id 并且包涵“hello”
$('<div id="example">Hello</div>').appendTo(document.body);

使用jQuery模闆插件可以在html字元串中聲明一些特殊的變量如  ${term} 這些變量随後可以被替換成一組數組或者其他模闆

操作内容 
比如  appendTo或者insertAfter
把一個清單的所有元素全部轉移到另一個清單
$('ul#list1 li').appendTo("ul#list2");

如果是複制過去則這樣：
$('ul#list1 li').clone().appendTo("ul#list2");


加載事件：
1.function xx(){

}
$(xx);
也可以：
$(function(){

})
2.$(document).ready(function(){
})

還有很多特定于元素的事件  例如focus。click等等
舉例：  批量注冊事件
$('a').click(function(event){
window.open(this.getAttribute('href'));
return false;
})

就算沒有使用者互動 也可以調用相應的方法觸發：
$('a:first').click();

舉例：blur和focus
$(function(){
    $('form input[placeholder]').focus(function(){
    var input=$(this);
    if(input.val()==input.attr('placeholder')){
        input.val('').removeClass('placeholder');
    }
    }).blur(function(){
        var input=$(this);
        if(input.val==''){
            input.val(input.attr('placeholder')).addClass('placeholder');
        }
    }).blur();
})

基于css屬性的動畫：
原來的:
var links=list.getElementsByTagName("a");
links[0].onmousever=function(){
    moveElement("preview",-100,0,10);
}
links[0].onmousever=function(){
    moveElement("preview",-200,0,10);
}
links[1].onmousever=function(){
    moveElement("preview",-200,0,10);
}

修改後：
$('a').each(function(i){
    var preview=$('#preview');
    var final_x=i*-100;
    $(this).onmousever(function(){
        preview.animate({left:final_x},10);
    })
})

還有很多jquery UI套件和jquery緩動插件
也還有很多組合動畫