使用JQuery制作简易论坛发布

最新推荐文章于 2022-09-03 13:53:34 发布

TuiK

最新推荐文章于 2022-09-03 13:53:34 发布

阅读量2.1k

点赞数 2

分类专栏：笔记案例文章标签： jquery html js

本文链接：https://blog.csdn.net/qq_45607259/article/details/108014311

版权

这篇博客介绍了如何使用JQuery实现论坛的发布功能。点击发布后，输入框会隐藏并清空标题、下拉列表和文本内容。通过在ul中创建li元素来展示发布的内容，包括头像、标题、版块和时间。博主详细阐述了思路，并提供了body主体和CSS样式的部分代码。

摘要由CSDN通过智能技术生成

要求

实现论坛的发布
点击发布后输入div隐藏
清空标题下拉列表文本内容

思路

因为要求输入的标题和下拉列表要显示到论文发布后的ul当中，我们可以先在ul构造出一个大的li，此li是每次论文发布后的大的整体，可以看成是个“div”，在li中，我们需要创建显示头像的div，里面存放img元素标签，创建显示标题的<h1元素标签，创建获取下拉列表选项的版块和时间的元素标签p。
此JQuery和之前JavaScript思路一致，先获取到输入div“.post”的各项属性值，通过工厂函数进行创建对应的元素标签，创好后利用节点操作的方法，比如append()…进行插入到发布后的div“.bbs”里的ul中。之后再运用val()方法进行清除输入，就完成了！

body主体

<body>
<div class="bbs">
    <header><span>我要发帖</span></header>
    <section>
        <ul></ul>
    </section>
    <div class="post">
        <input class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布">
    </div>
</div>
</body>

styleCSS样式

<style>
        img{
   
            float: left;
            width: 60px;
            margin-right: 10px;
        }
        li{
   
            padding: 10px 0

最低0.47元/天解锁文章

TuiK

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
使用JQuery制作简易论坛发布

要求实现论坛的发布点击发布后输入div隐藏清空标题下拉列表文本内容思路因为要求输入的标题和下拉列表要显示到论文发布后的ul当中，我们可以先在ul构造出一个大的li，此li是每次论文发布后的大的整体，可以看成是个“div”，在li中，我们需要创建显示头像的div，里面存放img元素标签，创建显示标题的<h1元素标签，创建获取下拉列表选项的版块和时间的元素标签p。此JQuery和之前JavaScript思路一致，先获取到输入div“.post”的各项属性值，通过工厂函数进行创建对应的元素
复制链接

扫一扫