jQuery留言板

最新推荐文章于 2024-04-19 17:05:38 发布

原创

最新推荐文章于 2024-04-19 17:05:38 发布 · 3.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

这篇博客介绍了如何利用jQuery来创建一个简单的留言板功能，包括HTML布局和JavaScript交互代码的实现细节。

html代码

	<ul></ul>
	<textarea id="ltk"></textarea>
	<button id="fs">按钮</button>

js代码

<script src="jquery-3.3.1.min.js"></script>  //链入jQuery
<script>
var all=["img/1.jpg","img/2.jpg","img/3.jpg"]   //创建图片路径数组
var alr=["洛:","言:","初:"]   //创建用户名数组
function rel(e){           //封装随机数方便调用为下标
	return Math.round(Math.random()*e);
}
$(fs).click(function(){            //给予fs一个点击事件
var nr=$(ltk).val();           //取出文本框的内容
var li=$("<li></li>");        //创建一个li节点
var span=$("<span>"+nr+"</span>");     //创建一个span节点放入文本框内容
var img=$("<img src="+all[rel(2)]+">")    //创建一个img节点将图片路径使用下标为随机数的路径数组
var p=$("<p>"+alr[rel(2)]+"</p>");        //创建一个p节点内容为使用随机数为下标的用户名数组
li.append(img);							//在li中插入创建好的图片节点
li.append(p);							//在li中插入创建好的p节点
li.append(span);						//在li中插入创建好的span节点
//li.text(nr);								//注：text只能读取文本内容 所以不能放在插入之前
var br=$("<br/>")