使用JQuery制作简易论坛发布

最新推荐文章于 2024-05-17 20:33:01 发布
最新推荐文章于 2024-05-17 20:33:01 发布
阅读量2.1k 收藏 11
点赞数 2
分类专栏： 笔记 案例 文章标签： jquery html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45607259/article/details/108014311
版权

要求

实现论坛的发布
点击发布后 输入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学习笔记--制作简易留言板
努力追光的小王
07-20 4496
功能实现 点击发布，通过下滑方式展示留言。点击删除，通过上滑方式删除留言。没有本地存储，所以刷新之后会重置。 运行结果 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
用jQuery写简单论坛
AMrss的博客
07-29 485
论坛 css * { margin: 0; padding: 0; color: #333; font: 16px/1.2 Arial, Helvetica, sans-serif, "幼体"; box-sizing: border-box; } ...
JQuery制作论坛发帖
m0_74937643的博客
05-17 262
随机生成头像，用到Math.floor(random())每次发布都保证新发布的帖子在最前面，关键代码。获取发布时间以及版块。
使用JS/JQuery制作简易留言板
2301_76305374的博客
11-13 906
【代码】使用JS/JQuery制作简易留言板。
制作简易留言板html5，使用jquery实现留言以及删除功能
kkkliao1的博客
06-21 2779
制作简易留言板html5，使用jquery实现留言以及删除功能
制作微博简易发布器
weixin_57765394的博客
05-08 135
这里我使用的软件是Visual Studio 2019 做这个我们主要用到的就是js里面的prependTo() 下面是我写得源代码 最主要的就是jQuery部分 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Question1&...
Html+Css+JQuery实现简易英雄联盟官网
Process_ing的博客
09-28 6114
  我半年前学习过前端了，现在已经忘了差不多了。从Head Frist Html开始看书，了解一下Css以及JavaScript;也买了几本书来看。但因为时间问题，也没有认真去打一个项目去巩固一下基础，都是打一百多行的代码来实现一下小Demo。并且也没系统的学习一下JavaScript和Jquery。随着时间的过去，自己学得后端知识越多，对前端忘得越厉害，时常性去复习一下，也是有必要的。   现在...
jQuery实现留言板功能
热门推荐
意愿三七
04-01 6万+
jQuery实现留言板功能 绪论:今天课堂上做了一个小项目，使用jQuery实现留言板功能，秉着巩固和分享的心，来发布此篇文章。 留言样式效果: 以上是样式 下面我把css样式和排版放出来，功能的实现我单独讲 ...
jQuery实现留言板
weixin_45971935的博客
01-18 1850
如果没有恒心、毅力和信念，你会觉得做什么都是枯燥无味的。
js题库-3{留言板的制作？jQuery}
AAAXEC的博客
11-13 278
li中，通过jquery中的prepend()方法，将li值插入ul开头。原理:点击button按钮，将textarea框里的val()值赋给,新生命的对象。prepend()方法：它是在某个选中元素的开头插入内容。若有疑问，及时提出哦。小作者在持续更新中…
自己制作的简易博客-论坛系统，供大家参考
06-21
1. 论坛主要展示内容为：用户登录注册，忘记密码并重置，帖子列表及发布，帖子点赞、回复与评论，用户信息查看及关注，个人主页及编辑，消息、话题与休闲页面的展示。 2. 登录注册、发帖等页面使用js对邮箱和密码...
实训 jQuery开发交互效果页面--留言页面.pptx
03-10
jQuery 开发交互效果页面--留言页面 ...在本资源中，我们使用 jQuery 来开发一个留言页面，包括留言显示区域和留言发布区域。我们使用 HTML 和 CSS 来构建页面结构和样式，而使用 jQuery 来添加交互效果和动画效果。
asp .net制作的简易日记系统
03-17
在这个“asp .net制作的简易日记系统”中，开发者利用ASP.NET的核心技术和C#编程语言，创建了一个简单易用的在线日记记录平台。 【ASP.NET关键知识点】 1. **MVC架构**：ASP.NET MVC（Model-View-Controller）是一...
ASP.NET制作简易博客的源码
05-05
在这个"ASP.NET制作简易博客的源码"项目中，我们将深入探讨如何利用ASP.NET来创建一个基本的博客系统。 1. **ASP.NET Web Forms**: ASP.NET Web Forms是ASP.NET框架的一个重要组成部分，允许开发者通过拖放控件和...
jquery ui 后台界面演示系统 登陆界面
07-28
目前的这个版本，最值得推荐的功能在于，jQuery代码是一次载入的，使用这套系统进行开发，程序员可以完全不懂jQuery，而仍能享用jQuery的种种便利。 0.1版系统特点介绍 • 集成了jQuery UI的风琴盒、页标签特效、...
制作非缘勿扰页面特效----JQuery
qq_45607259的博客
08-08 5564
我主要用了层次选择器和属性选择器 可以随意选择，方便简单为主 大体CSS格式 大家自行构造 网页主体 <body> <div class='main' > <div class='left'> <img src="images/pic.gif" /> <br/><br/> <img src="images/col.gif" alt="收藏本片"/&
数据库三种删除操作
qq_45607259的博客
07-11 2524
drop delete truncate 总结 Drop 作用：用来删除数据库和表，表名和表结构，是DDL语句，无法回滚 区别：不同于另外两个，drop删除数据库和表，删除的是除数据之外的 DROP TABLE [IF EXISTS] 表名; Delete 作用：可以精准的删除某条记录，通过和where子句来进行条件删除 区别：delete可以rollback（撤销事务）的，且用delete来删除，残留会比drop多，delete不和drop一样，不会删除表结构和表名 DELETE FROM 表名 (.
MYSQL如何写出简便的代码（附有实例）
qq_45607259的博客
07-19 1292
干程序员这个行业，要的是头脑灵活，写出的代码不能杂乱无章，要以最简约的代码写出运行速度更快，占内存越小的代码，这是很重要的 因为本人最近在学mysql，学JDBC DAO模式，怎么简化代码量！ 当我们需要把Java跟数据库串联起来时，就需要JDBC了 所谓的JDBC就是Java数据库连接技术的简称，提供连接各种常用数据库的能力，如下 我们还需要知道JDBC中四个重要的访问数据常用类和接口 DriverManager：管理JDBC驱动（类） Connection：连接数据库并传递数据（接口） Statemen
jquery制作简易计算器
最新发布
06-27
jQuery是一个轻量级的JavaScript库，常用于简化HTML文档的遍历、事件处理和动画创建等。要使用jQuery制作一个简易计算器，你可以按照以下步骤进行： 1. 引入jQuery：在HTML文件的`<head>`部分添加`<script>`标签引入jQuery库。 ```html <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ``` 2. 创建HTML结构：为计算器设计一个基本的UI，包括输入框、数字按钮、运算符按钮以及一个结果显示区域。 ```html <div id="calculator"> <input type="text" id="display" disabled> <div id="buttons"> <!-- 数字按钮 --> <button>7</button> <button>8</button> <button>9</button> <!-- ...其他数字按钮... --> <!-- 运算符按钮 --> <button>*</button> <button>/</button> <button>=</button> <!-- ...其他运算符按钮... --> </div> </div> ``` 3. 编写JavaScript代码：利用jQuery选择器和事件监听器来处理用户操作。 ```javascript $(document).ready(function () { // 选中所有的数字和运算符按钮 const buttons = $('#buttons button'); buttons.click(function (event) { const clickedButton = $(event.target); const value = clickedButton.text(); // 数字按钮处理 if (/\d/.test(value)) { $('#display').val(value + $('#display').val()); // 运算符按钮处理 } else if (value === '+' || value === '-' || value === '*' || value === '/') { // 清除输入框前面的空格 $('#display').val($('#display').val().trim()); // 储存上一个运算符 let prevOperator = ''; if ($('#display').val()) { prevOperator = $('#display').val()[-1]; // 获取最后一个字符 } if (prevOperator && ['+', '-', '*', '/'].includes(prevOperator)) { $('#display').val(eval($('#display').val() + ' ' + value)); } else { $('#display').val(value); } } // 处理等于号，执行计算 if (value === '=') { try { $('#display').val(eval($('#display').val())); } catch (error) { $('#display').val('Error'); } } }); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值