gogogo!操作DOM的练习

Posted wanna-be-ok

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了gogogo!操作DOM的练习相关的知识，希望对你有一定的参考价值。

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="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的练习的主要内容，如果未能解决你的问题，请参考以下文章

05-DOM操作练习：访问关系的封装

JQuery---选择器DOM节点操作练习

04-DOM操作练习：Tab栏切换（通过className设置样式）

JavaScript复习 js登录简单实现 dom操作练习

web前端练习27----Dom3,js操作css(class,内联样式,getComputedStyle)案例练习（列表刷新加载，二级菜单）

web前端练习27----Dom3,js操作css(class,内联样式,getComputedStyle)案例练习（列表刷新加载，二级菜单）