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，所以问题不大，但是做一些功能或者效果什么的，就会存在一定的问题，有兴趣的同学，可以自己尝试，也可以发问。
 

第二十三篇 jQuery 学习5 添加元素的更多相关文章

  1. 第二十一篇 jQuery 学习3 特效效果

    jQuery 学习3   这节课主要是学习jQuery的动态效果. show()和hide()显示与隐藏方法,toggle()方法,fadeIn()谈入,fadeOut()谈出,slideDown() ...

  2. Python开发【第二十三篇】：持续更新中...

    Python开发[第二十三篇]:持续更新中...

  3. 第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素

    jQuery 学习8 遍历-父亲兄弟子孙元素   jQuery遍历,可以理解为“移动”,使用“移动”还获取其他的元素.   什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师 ...

  4. 第二十四篇 jQuery 学习6 删除元素

    jQuery 学习6 删除元素   上节课我们做了添加元素,模拟的是楼主发的文章,路人评论,那么同学们这节课学了删除之后,去之前的代码上添加一个删除,模拟一个楼主删除路人的评论. jQuery的删除方 ...

  5. 第二十五篇 jQuery 学习7 获取并设置 CSS 类

    jQuery 学习7 获取并设置 CSS 类   jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...

  6. 第二十二篇 jQuery 学习4 内容和属性

    jQuery 内容和属性   这节课,我们学习使用jQuery来控制元素的内容.值和属性.   html() 控制所选元素的内容(包括HTML标记): text() 控制所选元素的内容: val() ...

  7. 第二十篇 jQuery 初步学习2

    jQuery 初步学习2   前言:   老师这里啰嗦一下,因为考虑到一些同学,不太了解WEB前端这门语言.老师就简单的说一下,写前端,需要什么:一台笔记本.一个文本编辑器.就没啦!当然,写这门语言, ...

  8. (高级篇)jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  9. SpringBoot第二十三篇：安全性之Spring Security

    作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11350255.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言   系统的安全 ...

随机推荐

  1. 什么叫DMZ区?DMZ区有什么作用?应该怎样构建DMZ

    您的公司有一堆电脑,但可以归为两大类:客户机.服务器.所谓客户机就是主动发起连接请求的机器,所谓服务器就是被动响应提供某些服务的机器.服务器又可以分仅供企业内网使用和为外网提供服务两种. 所以,如果把 ...

  2. Windows下Elasticsearch安装问题处理

    按ES官网的安装方法正常安装就行了.可能遇到的其他问题. 1.报jvm.dll不存在. 只需要重新安装JDK过后,会有jdk1.8.0_73目录和jre1.8.0_73目录.因为java就喜欢玩这种“ ...

  3. zabbix（2）使用指南

    一.邮件报警(一个客户端安装server,agent) 管理->报警媒介类型->email 管理->用户->Admin->报警媒介 配置->动作->Repor ...

  4. Linux crontab 每5秒钟执行一次 shell 脚本 的方法

    Linux crontab 每5秒钟执行一次 shell 脚本 的方法 由于 Linux 的 crontab 的定时命令格式如下: minute hour day-of-month month-of- ...

  5. php文件夹上传下载控件分享

    用过浏览器的开发人员都对大文件上传与下载比较困扰,之前遇到了一个php文件夹上传下载的问题,无奈之下自己开发了一套文件上传控件,在这里分享一下.希望能对你有所帮助. 以下是实例的部分脚本文件 这里我先 ...

  6. js Date格式转化

    Date格式转化为日期  年-月-日(格式随意修改) GetDateStr(dd, AddDayCount) { dd.setDate(dd.getDate() + AddDayCount)// 获取 ...

  7. 数据存储--SQLite

    SQLite是一个开源嵌入式关系数据库,实现自包容,零配置,单个文件就是数据库,方便存储和转移,在window不用安装,直接解压到文件夹,并设置path. Ubuntu下安装:sudo apt ins ...

  8. 【HANA系列】SAP HANA SQL获取字符串长度

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL获取字符 ...

  9. caoz的梦呓：信息安全攻防杂谈

    猫宁!!! 参考链接:https://mp.weixin.qq.com/s/O0zLvuWPRPIeqnRooNEFYA 旧文我提过一句话,信息安全防御这事,在业内,三分靠技术,七分靠人脉. 在知识星 ...

  10. Leetcode之动态规划（DP）专题-62. 不同路径（Unique Paths）

    Leetcode之动态规划(DP)专题-62. 不同路径(Unique Paths) 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ). 机器人每次只能向下或者向 ...