JQuery基础教程 学习笔记(四)

1, Jquery的.each方法是一个迭代器

2, $(this).attr({
            'rel': 'external',
            'id': 'wikilink-' + index,
            'title': 'learn more about ' + $(this).text() + ' at wikipedia'
        });设置属性

　　JQuery代码操作的是DOM，所以你当然在查看源代码里看不到了,要用开发人员工具查看

3,$(document).ready(function(){
    $('<a href="#top">back to top</a>').insertAfter('div.chapter p');
    $('<a id="top" name="top"></a>').prependTo('body');
}); 添加回到顶部链接

4 .JQuery提供两种将元素插入到其他元素后面的方法，.insertAfter()和.after();.

　　insertAfter()可以通过连缀更多方法对所创建的元素进行操作,而使用.after()操作对象就会变成其他元素,before同理

5 .append()后者插到前者后面，而appendTo则相反

6 要在每个匹配的元素中插入新元素

　　*.append(),*.appendTo,*.prepend(),*prependTo()

7 要在每个匹配的元素相邻的位置上插入新元素

　　*.after(),*.insertAfter(),*.before(),*.insertBefore()

8 在每个匹配的元素外部插入新元素

　　*.wrap()

9 用新元素或文本替换每个匹配的元素

　　*.html(),*.text()(只是文本，没格式)

10 移除每个匹配的元素中的元素

　　*.empty()

11 要从文档中移除每个匹配的元素及其后代元素，但不实际剔除它们

　　*.remove()

$(document).ready(function(){
    $('span.pull-quote').each(function(index){
        var $parentParagraph = $(this).parent('p');
        $parentParagraph.css('position', 'relative');
        
        var $clonedCopy = $(this).clone();
        
        $clonedCopy.addClass('pulled')
            .find('span.drop')
            .html('…')
            .end()
            .prependTo($parentParagraph)
            .wrap('<div class="pulled-wrapper"></div>');
        $clonedCopy.html($clonedCopy.text());
    });
});

$(document).ready(function(){
    $('<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"><sup>' + (index+1) + '</sup></a>')
            .appendTo('#notes')
            .append('&nbsp;(<a href="#context-'+(index+1)+'">context</a>)')
            .wrap('<li id="foot-note-' + (index+1) + '"></li>');
    });
});

$(document).ready(function(){
    $('<a href="#top">back to top</a>').insertAfter('div.chapter p:gt(2)');
    $('<a id="top" name="top"></a>').prependTo('body');
});

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