第二十三篇 jQuery 学习5 添加元素

jQuery 学习5 添加元素

 
同学们,这节课,使用jQuery动态添加元素,是很关键的一课,一般用在什么地方呢:别人发表一篇文章,你评论楼主的时候,总不能是提交表单,到后台的其他页面处理,然后再刷新回来吧,这样的话,用户体验不好。考虑一下用户的计算机配置不好、网络不好等多个因素,总是刷新页面,会造成等待的时间太长。甚至有的浏览器直接刷新不出来了,那么用户就抓狂了,就对你的产品有怨言。
 
所以,我们做前端,要实现动态添加,以后再使用ajax这类异步刷新和后台交互就可以了,那么多的不说,我们现在学的阶段,就掌握前端的静态、动态就好了。
 
jQuery添加元素,提供了四个方法:
  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容
以上是引用w3c教程里的
 
四个几乎都是一样的,只是插入的内容位置不一样,所以说,只要掌握到其中一个,其他的,都是 soez,老师这里就展示append()方法,在被选中元素的结尾处添加内容,是什么样子的呢?我们看代码,看页面效果:
 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery 学习5 添加元素</title>
    <!--使用jQuery一定不要忘记引用jQuery文件-->
    <script src="../js/jquery-1.12.2.min.js"></script>
    <style>
        #div1 {
            margin: auto;
            width: 750px;
            border: 1px solid #dedede;
            padding:15px;
        }
        #div1-1 img{
            width: 75px;
        }
        .div1-2{
            margin-top:30px;
        }
        .div1-2 img{
            width: 75px;
        }
        .y{
            float: right;
        }
        .content{
            background-color: #dedede;
            padding: 10px;
            margin-top:20px;
        }
        #div2{
            margin: auto;
            width: 750px;
            margin-top:20px;
        }
        #div2 input{
            width: 80%;
            height: 30px;
        }
    </style>
</head>
<body>
<!--给一个最外层的div,做父级管理-->
<div id="div1">
    <!--这层div是管理楼主的-->
    <div id="div1-1">
        <!--这是楼主的头像-->
        <img src="../img/3.jpg" alt="头像"/>
        <span>楼主的名字</span>
        <!--给时间一个右浮动,跑到右边去-->
        <span class="y">2017-09-20 11:00:00</span>
        <!--这个div是管理楼主发表的内容的-->
        <div class="content">
            说出你的名字,我好记住。。。。
        </div>
    </div>
    <!--这下面的div是路人评论的-->
    <div class="div1-2">
        <!--路人的头像-->
        <img src="../img/4.png" alt="路人头像"/>
        <span>路人的名字</span>
        <!--给时间一个右浮动,跑到右边去-->
        <span class="y">2017-09-20 11:01:00</span>
        <!--这个div是管理路人发表的内容的-->
        <div class="content">
            我是路人甲,我是第一个评论的。
        </div>
    </div>
</div>
<!--这个div放在下面,给一个输入框和发送-->
<div id="div2">
    <p>请在下方输入评论内容并发送</p>
    <!--给input表单元素一个id,jQuery里调用-->
    <input id="neirong" type="text"/>
    <!--给a标签一个点击事件-->
    <a onclick="fasong()" href="javascript:;">发送</a>
</div>
<script>
    function fasong(){
        //判断发送的内容
        if($("#neirong").val() == ''){
            //如果发送的内容为空,则给出提示,并返回false 结束代码运行
            alert('内容不能为空');
            return false;
        }
        //找到id为div1的元素,然后用after()方法,在它所有元素的最后面添加以下的内容
        $("#div1").append(
            '<div class="div1-2">' +
            '<img src="../img/4.png" alt="路人头像"/>' +
            '<span style="margin-left: 8px;">路人的名字</span>' +
            '<span class="y">2017-09-20 11:01:00</span>' +
            '<div class="content">' +
            $("#neirong").val() +
            '</div>'
        );
        //内容发表成功后,就设置成没有内容
        $("#neirong").val('');
    }
</script>
</body>
</html>
 
打开页面测试代码,输入内容,如果内容为空,则给出提示,如果有内容,则添加相应的所有元素和内容。不过这里,因为是只有前端,没有后台数据库的原因,并且老师给出的操作,这里的头像、姓名、时间,都是固定的,只有内容是我们输入的内容,是可变化的。
我们在页面,检查源码,可以看到,我们添加的内容,它是在id为div1最后出现的,这就是append()方法,在被选中元素的结尾处添加内容,记住,是结尾处,所以说,添加的内容永远都是在最后面出现的,这样就能实现页面静态添加了。以后再使用ajax这类异步访问后台,添加数据库,一切OK!就能实现动态添加,而并不用总是刷新页面提交,给用户给高效的体验。
 
老师这里演示的是append(),其意思是“在被选中的元素结尾处添加内容”,同学们只要掌握这一个,那么其他三个都是一样的,只是位置不一样罢了。
 
不过,使用此方法添加内容,也有一些问题的,并非bug,所以问题不大,但是做一些功能或者效果什么的,就会存在一定的问题,有兴趣的同学,可以自己尝试,也可以发问。
 
原文地址:https://www.cnblogs.com/longfeng995/p/7590466.html