zoukankan      html  css  js  c++  java
  • 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>中。这是一个很有意思的现象。原因未知,所以我对此进行了修改(因为较简单)
    第五个问题没啥好说的,就这样



  • 相关阅读:
    usb驱动开发6之端点描述符
    usb驱动开发5之总线设备与接口
    usb驱动开发4之总线设备驱动模型
    usb驱动开发3之先看core
    usb驱动开发2之代码地图
    usb驱动开发1之学习准备
    javascript限制上传文件大小
    google Chrome打开多个网站时等待可用的套接字,怎么加大连接数量提升速度
    sql将一张表的字段赋值给另一张表
    百度搜索网址参数的含义
  • 原文地址:https://www.cnblogs.com/bengbengbengbengbeng/p/6937422.html
Copyright © 2011-2022 走看看