第一章:入門

$()取得頁面中的元素

$(document).ready(function(){
 $('.poem-stanza').addClass('emphasized');
});

說明:

$('.poem-stanza') 　　　　　　//取得頁面中添加了類poem-stanza的元素
.addClass('emphasized');　　　//添加Css樣式，emphasized為類樣式
.removeClass();
 
第二章:選擇符

$(document).ready(function(){
 //CSS選擇符
 $('#selectedplays>li').addClass('horizontal');　　　　　　　　　　//查找id為selectedplays元素的頂層子元素li，添加樣式
 $('#selectedplays>li:not(.horizotal)').addClass('sublevel');　　　 //查找id為selectedplays元素的頂層子元素li，并且沒有類horizotal　

 //XPath選擇符
 $('a[@href^="mailto:"]').addClass('mailto');　　　　　　　　　　 //查找錨元素中屬性href以“mailto:”開頭的元素
 $('a[@href$=".pdf"]').addClass('pdflink');　　　　　　　　　　　 //查找錨元素中屬性href以“.pdf”結尾的元素
 $('a[@href*="mysite.com"]').addClass('mysite');　　　　　　　 //查找錨元素中屬性href中包含“mysite.com”的元素（任意位置）

 //自定義選擇符
 $('tr:odd').addClass('odd');　　　　　　　　　　　　　　　 　　 //查找奇數行
 $('tr:even').addClass('even');　　　　　　　　　　　　　　 　　 //查找偶數行
 //注：:odd()和:even()選擇符使用的都是Javascript本身的從0開始得編號方式。表格的第1行編號為0（偶數），而第2行編號為1（奇數）
 $('td:contains("Henry")').addClass('highlight');                　　 //查找td中包含"Henry"的

 //DOM遍歷方法
 $('th').parent().addClass('tableheading');　　　　　　　　 　　//查找th的父元素即標題行
 $('tr:not([th]):even').addClass('even');　　　　　　　　    　　//查找tr元素中不包含子為th的，并且是偶數行
 $('tr:not([th]):odd').addClass('odd');　　　　　　　　　　
 $('td:contains("Henry")').next().addClass('highlight');      　　　//查找td中包含“Henry”的單元格的下一個單元格
 $('td:contains("Comedy")').siblings().addClass('highlight');　　//查找td中包含“Comedy”的同級單元格
 $('td:contains("Comedy")').parent().find('td:gt(0)').addClass('highlight');
 //查找td中包含“Comedy”的父，再去查找td單元格編號大于0的單元格
 $('td:contains("Comedy)').parent().find('td').not(':contains("Comedy")').addClass('highlight');
 //查找td中包含“Comedy”的父，再去查找td單元格不包含“Comedy”的單元格

 //訪問DOM元素
 var tag = $('#myelement').get(0).tagName;
});

第三章：事件――扣動扳機

綁定事件：

  .bind(‘click’,function(){})
  $(‘#switcher-large’).bind(‘click’,function(){…});給id為switcher-large的元素綁定click事件

  可簡寫為
  $(‘#switcher-large’).click(function(){…});

  方法：
  .toggle(function(){},function(){})

接受兩個參數（都是函數）第一次點擊調用第一個函數，第二次點擊調用第二個
$(‘#switcher h3’).toggle(function(){
       $(‘#switcher .button’).addClass(‘hidden’);

},function(){
       $(‘#switcher .button’).removeClass(‘hidden’);

});

.toggleClass()是一種跟優雅得方案，但對于交替執行的操作而言，.toggle()的適用性更強

$(‘#switcher h3’).click(function(){
       $(‘#switcher .button’).toggleClass(‘hidden’); //自動檢查該類是否存在
});

  .hover(function(){},function(){})

接受兩個函數參數，第一個指針進入，第二個指針離開

$(‘#switcher .button’).hover(function(){
       $(this).addClass(‘hover’);
},function(){
       $(this).removeClass(‘hover’);
});

  .unbind(‘click’)

移除事件
  .trigger(‘click’)

模擬用戶操作
$(‘#switcher’).trigger(‘click’); 模擬點擊了一次switcher

第四章：效果――為操作添加藝術性

1.修改內聯CSS

語法：
.css(‘property’,’value’);
.css(‘property’:’value’,’property’:’value’);

用法：
var currentSize = $(‘div.speech’).css(‘fontSize’);//得到div.speech得字體大小
var num = parasFloat(currentSize,10);  //將currentSize轉換為Float型
var unit = currentSize.slice(-2); //返回從指定的字符開始的一個子字符串，-2為倒數第二個
num *= 1.5;
$(‘div.speech’).css(‘fontSize’,num+unit); //設置樣式

2.基本的顯示和隱藏

.show();
.hide();

用法：
$(‘p:eq(1)’).hide(); //將第二個段落隱藏

3.效果和速度
指定顯示速度
3種：slow、normal和fast 時間：0.6、0,4、0.2。也可以指定.show(850)
$(‘p:eq(2)’).show(‘slow’);

淡入和淡出

.fadeIn();        //淡出
.fadeOut();   //淡出

$(‘p:eq(2)’).fadeIn(‘slow’);

4.多重效果

語句：.animate({param1:’value1’,parame2:’value2’},speed,function(){回調});

用法：$(‘p:eq(1)’).animate({height:’show’,width:’show’,opacity:’show’},’slow’);

這里使用簡寫的show將高度、寬度回復到被隱藏之前的值

5.并發與排隊效果
處理一組元素
$(‘div.buttont’).animate({left:650},’slow’).animate({height:38},’slow’);
先移動到left為650的位置，在將高度設置為38
$(‘div.button’)
       .fadeTo(‘slow’,0.5)                            //先淡化
       .animate({left:650},’slow’)           //在移動
       .fadeTo(‘slow’,1.0)                            //在淡出
       .slideUp(‘slow’)                          //最后滑到上方隱藏

注意：排隊不適用于其他的非效果方法，例如：.css()
處理多組元素

$(‘p:eq(2)’).slideUp(‘slow’).next().slideDown(‘slow’); 段落3向上滑出，同時段落4向下滑入

回調函數：

Var $thisPara = $(‘p:eq(2)’);
$(‘p:eq(2)’).next().slideDown(‘slow’,function(){

       $thisPara.slideUp(‘slow’);

});

段落4下滑完成后，段落3才開始上滑

第五章：DOM操作-基于命令改變頁面

1.操作屬性
非css屬性

$(document).ready(function(){
    $('div.chapter a[@href*=wikipedia]').each(function(index){
        var $thisLink = $(this);
        $thisLink.attr({
            'rel': 'external',
            'id': 'wikilink-' + index,
            'title': 'learn more about ' + $thisLink.text() + ' at wikipedia'
        });
    });
});

//遍歷div.chapter 下面所以錨元素href中包含wikipedia，為其添加屬性
深入理解$()工廠函數
$('<a href="#top">back to top</a>');    創建新元素

2.插入新元素

.insertBefore()
.before()

作用相同，區別取決于將它們與其他方法進行連綴

.insertAfter()
.after()

// $('div.chapter p').after('<a href="#top">back to top</a>');

// $('div.chapter p').before('<a href="#top">back to top</a>');

$('<a href="#aaa">back to top</a>').insertAfter('div.chapter p');

$('<a id="aaa" name="top"></a>').prependTo('body');

.perpendTo插入了作為目標的錨

// $('<a href="#top">back to top</a>').insertBefore('div.chapter p');

3.移動元素

$('span.footnote').insertBefore('#footer');
將span中類為footnote的插入到id為footer的前面
標注、編號和鏈接到上下文
    $('span.footnote').each(function(index){
        $(this)
            .before('<a href="#foot-note-' + (index+1) +
                    '" id="context-' + (index+1) +
                    '" class="context">^{' + (index+1) +
                    '}</a>')；
    });
$('span.footnote').insertBefore('#footer');

遍歷span.footnote，在各個元素前加標注后，在將span.footnote添加到#footer前

插入腳注

$('<ol id="notes"></ol>').insertAfter('div.chapter');
$('span.footnote').each(function(index){
        $(this)
            .before('<a href="#foot-note-' + (index+1) +
                    '" id="context-' + (index+1) +
                    '" class="context">^{' + (index+1) +
                    '}</a>')
            .appendTo('#notes')
            .append('&nbsp;(<a href="#context-'+(index+1)+'">context</a>)');   
});

先創建一個ol元素notes，并添加到div.chapter后面，遍歷span.footnote，先添加標注，然后通過appendTo其添加到ol末尾，最后又通過append添加一個錨元素。

4.包裝元素

.wrap()
.wrap('<li id="foot-note-' + (index+1) + '"></li>')

5.復制元素

.clone()

$('div.chapter p:eq(0)').clone().insertBefore('div.chapter');

將div.chapter中得第一段復制后插入在div.chapter前面

深度復制

$('div.chapter p:eq(0)').clone(false)

只復制結構，內部的文本沒有復制過來，因為文本也是DOM節點

通過復制創建突出引用

var $parentParagraph = $(this).parent('p');

$parentParagraph.css('position','relative');

$(this).clone()

.addClass('pulled')

.prependTo($parentParagraph);

修飾突出引用

$clonedCopy.addClass('pulled')
.find('span.drop')
    .html('&hellip;')
    .end()
    .prependTo($parentParagraph)
    .wrap('<div class="pulled-wrapper"></div>');

var clonedText = $clonedCopy.text();

$clonedCopy.html(clonedText);

第六章：AJAX 讓網站與時俱進

1.基于請求加載數據
追加HTML

//載入遠程 HTML 文件代碼并插入至 DOM 中

$('#dictionary').load('a.html',function(){
      Alert(“加載完畢！”);//回調函數
})

操作JavaScript對象

JSON：
[
{
    "term": "BACKBITE",
    "part": "v.t.",
    "definition": "To speak of a man as you find him when he can't find you."
  },
  {
    "term": "BEARD",
    "part": "n.",
    "definition": "The hair that is commonly cut off by those who justly execrate the absurd Chinese custom of shaving the head."
  }
]

JQuery:

$.getJSON('b.json',function(data){ //通過 HTTP GET 請求載入 JSON 數據
            $.each(data,function(entryIndex,entry){
                var html = '<div class="entry">';
                html += '<h3 class="term">' + entry['term'] + '</h3>';
                html += '<div class="pare">' + entry['part'] + '</div>';
                html += '<div class="definition">';
                html += entry['definition'];
                if(entry['quote']){
                    html += '<div class="quote">';
                    $.each(entry['quote'],function(lineIndex,line){
                        html += '<div class="quote-line">' + line + '</div>';
                    });
                    if(entry['author']){
                        html += '<div class="quote-author">' + entry['author'] + '</div>';
                    }
                    html += '</div>';
                }
                html += '</div>';
                html += '</div>';
            });

執行腳本

通過 HTTP GET 請求載入并執行一個 JavaScript 文件

$.getScript('c.js',function(){
    Alert(“加載完畢”);//回調函數
});

加載XML文檔

//通過遠程 HTTP GET 請求載入信息。

$.get('d.xml',function(data){
        $(data).find('entry').each(function(){
                var $entry = $(this);
                var html = '<div class="entry">';
                html += '<h3 class="term">' + $entry.attr('term') + '</h3>';
                html += '<div class="part">' + $entry.attr('part') + '</div>';
                html += '<div class="definition">'
                html += $entry.find('definition').text();
                var $quote = $entry.find('quote');
                if($quote.length){
                    html += '<div class="quote">';
                    $quote.find('line').each(function(){
                        html += '<div class="quote-line">' + $(this).text() + '</div>';                    
                    });
                    if($quote.attr('author')){
                        html += '<div class="quote-author">' + $quote.attr('author') + '</div>';
                    }
                    html += '</div>';
                }
                html += '</div>';
                html += '</div>';
                $('#dictionary').append($(html));
            });
        });

2.選擇數據格式

3.向服務器傳遞數據

4.關注請求

方法：

.ajaxStart()
.ajaxStop()

當AJAX請求開始且尚未進行其他傳輸時，會觸發.ajaxStart()的回調函數，相反，當最后一次活動請求終止時，則會執行通過.ajaxStop()注冊的回調函數。

示例：  

//當請求時，顯示#loading，結束時，隱藏loading

$(document).ready(function(){
$('#loading').ajaxStart(function(){
     $(this).show();
}).ajaxStop(function(){
     $(this).hide();
});
});

5.Ajax和事件

限制函數綁定的作用域

$(document).ready(function(){
var bindBehaviors = function(scope){
     $('h3',scope).click(function(){
         $(this).toggleClass('highlighted');
     });
}; 

bindBehaviors(this);

//這里的綁定作用域是document

$(document).ready(function(){
     $('#letter-a .button').click(function(){
         $('#dictionary').hide().load('a.html',function(){
             bindBehaviors(this);
//這里的是文檔中的所以<h3>元素
             $(this).fadeIn();
         });
     });
});

});

6.安全限制