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()

View Code

$(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(\'&hellip;\')
            .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\'
        });
    });
});