a元素是内联元素,为什么会独占一行?

来源:3-2 jQuery的属性与样式之html()及.text()

利木

2017-02-05 20:06

http://img.mukewang.com/5898563200019f3903620114.jpg<div class="div">

            <a>:first-child</a>

            <a>第二个元素</a>

            <a>:last-child</a>

        </div>  

看结果页,【:first-child】后还有空位置呀,为什么【第二个元素】这句话直接到第二行去了呢


全部代码:

<!DOCTYPE html>

<html>


<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <link rel="stylesheet" href="imooc.css" type="text/css">

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>


<body>

    <h3>.html()与.text()</h3>

    <div class="left first-div">

        <div class="div">

            <a>:first-child</a>

            <a>第二个元素</a>

            <a>:last-child</a>

        </div>  

        <div class="div">

            <a>:first-child</a>

            <a>第二个元素</a>

            <a>:last-child</a>

        </div>

    </div>

    

    <h4>显示通过html方法获取到的内容</h4>

    <p></p>


    <h4>显示通过text方法获取到的内容</h4>

    <p></p>

    

    

    <script type="text/javascript">

        //通过.text()的回调,获取原本的内容,修改,在重新赋值

        $(".left a:first").text(function(idnex,text){

            return "增加新的文本内容" + text

        })

    </script>




    <script type="text/javascript">

        //显示出html方法获取到的内容

        //.html()是整个html文档结构

        $('p:first').html( $(".first-div").html() ) 

    </script>



    <script type="text/javascript">

        //显示出text方法获取到的内容

        //.text()是文本内容的合集

        $('p:last').text( $(".first-div").text() ) 

    </script>



    <script type="text/javascript">

        //通过.text()方法替换文本内容

        $(".left a:first").?('替换第一个a元素的内容')

    </script>



    <script type="text/javascript">

        //通过.html()方法替换html结构

        $(".left div:first").?('整个div的子节点都被替换了')

    </script>





</body>


</html>


写回答 关注

3回答

  • qq_景象_0
    2017-02-06 19:03:05
    已采纳

    589857c000017a8905000065.jpg

    589857c10001f40505000464.jpg

    链接了一个.css文件  a{display:block}

    利木 回复qq_景象_...

    嗯・(PД`q。)・

    2017-02-06 19:27:06

    共 3 条回复 >

  • qq_景象_0
    2017-02-06 17:54:58

    http://img.mukewang.com/589847da0001211c12820554.jpg我复制的你的代码 并没有跳行啊

    利木

    你好,传上图片了!!就是如图所示画三个横线那个! 或者你可以直接看一下【jQuery基础 (一)—样式篇3-2】的结果页

    2017-02-06 18:57:17

    共 1 条回复 >

  • qq_景象_0
    2017-02-06 16:56:15

    这段代码并不会跳行 你把所有代码发上来

    利木

    你好,已贴上

    2017-02-06 17:06:35

    共 1 条回复 >

jQuery基础 (一)—样式篇

jQuery初入开启样式修炼,体验万能的jQuery样式集搭建网站布局

217509 学习 · 1218 问题

查看课程

相似问题