首先要实现思路

展示需求和实现效果

首先展示html和css代码

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>课工场论坛列表</title><link href="css/bbs.css" rel="stylesheet">
</head>
<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>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/index.js"></script>
</body>
</html>

css代码

* {margin: 0;padding: 0;font-family: "Arial", "微软雅黑";
}ul, li {list-style: none;
}.bbs {margin: 0 auto;width: 600px;position: relative;
}header {padding: 5px 0;border-bottom: 1px solid #cecece;
}header span {display: inline-block;width: 220px;height: 50px;color: #fff;background: #009966;font-size: 18px;font-weight: bold;text-align: center;line-height: 50px;border-radius: 8px;cursor: pointer;
}.post {position: absolute;background: #ffffff;border: 1px #999999 solid;width: 500px;left: 65px;top: 70px;padding: 10px;font-size: 14px;z-index: 999999;display: none;
}.post .title {width: 450px;height: 30px;line-height: 30px;display: block;border: 1px #aaaaaa solid;margin-bottom: 10px;
}.post select {width: 200px;height: 30px;
}.post .content {width: 450px;height: 200px;display: block;margin: 10px 0;border: 1px #aaaaaa solid;
}.post .btn {width: 160px;height: 35px;color: #fff;background: #009966;border: none;font-size: 14px;font-weight: bold;text-align: center;line-height: 35px;border-radius: 8px;cursor: pointer;
}.bbs section ul li {padding: 10px 0;border-bottom: 1px #999999 dashed;overflow: hidden;
}.bbs section ul li div {float: left;width: 60px;margin-right: 10px;
}.bbs section ul li div img {border-radius: 50%;width: 60px;
}.bbs section ul li h1 {float: left;width: 520px;font-size: 16px;line-height: 35px;
}.bbs section ul li p {color: #666666;line-height: 25px;font-size: 12px;
}.bbs section ul li p span {padding-right: 20px;
}

这里在外部写js代码

记住要带入html里面去

$(function () {$("span:eq(0)").click(function () {$(".post").show();$(".title").val("");$(".content").val("");$("select").val("请输入标题");});$(".btn").click(function () {var tou = ["tou01.jpg", "tou02.jpg", "tou03.jpg", "tou04.jpg"];var index = Math.floor(Math.random() * tou.length);var li = $("<li>");var divTou = $("<div><img src='images/" + tou[index] + "'/></div>");var h1 = $("<h1>" + $(".title").val() + "</h1>");var p = $("<p>");var selectSpan = $("<span>" + $("select").val() + "</span>");var contentSpan = $("<span>" + $(".content").val() + "</span>");var date = new Date();var Str = "年份：" + date.getFullYear() + "-月-" + (date.getMonth() + 1) + "-日-" + date.getDate();var timeSpan = $("<span>" + Str + "</span>");p.append(selectSpan);p.append(contentSpan);p.append(timeSpan);li.append(divTou);li.append(h1);li.append(p);$("ul").append(li);$(".post").hide();});
});

使用jQuery实现我要发帖相关推荐

jQuery动画高级用法（上）——详解animation中的.queue()函数
如果你拿着一个疑问去找专业人士寻找答案,那么你的一个疑问会变成三个,因为他会用另外两个令你更加一头雾水的名词来解释你的这个疑问. 我想这是大多数,包括我在内,IT人在学习过程中碰到的最大问题.当你有一 ...
jQuery动画高级用法（上）——详解animation中的.queue()动画队列插队函数
决定对animate方面做一些总结,希望能给大家一些启发和帮助从一个实际应用谈起今天不谈animate().fadeIn().fadeOut().slideUp().show().hide()诸如 ...
使用jquery实现论坛发帖
<script>$(function(){$("span").click(function(){$(".post").css("displ ...
jQuery发帖案例
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
jQuery 1.3 for Asp.Net、 CSLA.Net 3.6 for Windows 及 MOSS/WSS 一步一步从入门到精通三个系列的目录...
jQuery for Asp.Net 一步一步从入门到精通(附 jQuery API 彩色大图) CSLA.Net 3.6 for Windows (C# 2008)一步一步从入门到精通 MOSS/W ...
ajax post 变options,关于ajax：JQuery POST请求转换为OPTIONS。为什么？
我明确指定了POST,但在Request中看不到该Post数据,并且超过了它指定了OPTIONS. 响应应为HTML,以表格格式指定要与Query匹配的用户. 我正在尝试发布和阅读html,以创建一个 ...
QueryPath, php上的jQuery
红得发紫的jQuery框架是专门用于页面Javascript程序设计的,它通过一种优雅的方式让我们轻松自如地操作页面的所有元素而无须担心浏览器版本以及兼容性等问题.受到jQuery的启发,一种试图让 ...
web前端的十种jquery特效及源码下载
1.纯CSS3实现自定义Tooltip边框涂鸦风格这是一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可 ...
JavaWeb = jQuery使用详解
jQuery 是一个优秀的 javascript 的轻量级框架之一,封装了 dom 操作.事件.页面动画.异步操作等功能. 特别值得一提的是基于 jquery 的插件非常丰富,大多数前端业务场景都有其 ...

使用jQuery实现我要发帖

首先要实现思路

展示需求和实现效果

首先展示html和css代码

使用jQuery实现我要发帖相关推荐

最新文章

热门文章