首页 > 代码库 > gogogo!操作DOM的练习

gogogo!操作DOM的练习

2024-09-30 04:00:39   220人阅读

1、修改添加back to top的链接代码，一遍这些链接只从第四段后面才开始出现。

2、在单击back to top链接时，为每个链接后面添加一个新段落，其中包含（you were here）字样。确保链接仍然有效。

3、在单击作者名字的时，把文本修改为粗体（通过添加一个标签，而不是操作类或者css）。

4、在随后单击粗体作者名字时，删除之前添加的<b>元素，（也就是在粗体文本与正常文本之间切换）。

5、为正文的每个段落添加一个inhab类，但不能调用。addClass（）方法。确保不影响现有的类。

// 比较简陋的一个练习，将四个问题的解决方法放到了一起，如果有耐心请继续往下看，下面会说一个比较有意思的东西。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src=http://www.mamicode.com/"jquery-3.2.1.min.js"></script>
    <title></title>
</head>
<body><div id="f">作者名字</div>
    <div id="div">

        <p>第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段
            第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第
            一段</p>
        <p>第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段
            第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段</p>
        <p>第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段
            第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段</p>
        <p>第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段
            第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段</p>
        <p>第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段
            第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段</p>
        <p>第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段
            第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段</p>
    </div>
</body>
<script>
   $(‘#div‘).children().each(function(index){
       if(index>2){
           $(‘#div‘).children().eq(index).css(‘color‘,‘red‘).append($(‘<br><a href="http://www.baidu.com" >back to top</a>‘))
       }
   });
    $(‘a‘).click(function(){
        $(this).parent().after($(‘<span>(you were here)</span>‘))
    });
    $(‘#f‘).click(function(){

        if($(‘#f‘).children().is(‘b‘)){
            $(this).html($(this).text());
        }else{
//            $(this).html(‘<b>‘+$(this).html()+‘</b>‘);

            var ne=$(‘<b>‘+$(this).text()+‘</b>‘);
            $(this).html(ne);
        }

    });
    $(‘p‘).attr({class:‘inhab‘});

</script>
</html>

①对于第一个问题没什么要说的。

②第二个问题要注意的就是内部插入和外部插入，当涉及到样式的时候此种情况会更加复杂。需要留意

③第三个问题涉及到了.html() .text()

④同第三个问题类似，但是此处有一个比较有意思的地方：

//            $(this).html(‘<b>‘+$(this).html()+‘</b>‘);
这条语句并不报错，但是其实逻辑上是将<div>放在<b>里面了，而在开发者模式下回发现<b>在<div>中。这是一个很有意思的现象。原因未知，所以我对此进行了修改（因为较简单）
第五个问题没啥好说的，就这样



gogogo!操作DOM的练习


联系
我们