admin管理员组文章数量:1794759
Jquery
一键直达
- 效果图
- html
- css
效果图
html
<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title><title>模拟留言板</title><link href="lyb_style.css" rel="stylesheet" type="text/css" /><style>.yellow {background: yellow;}.grey {background: #f1f1f1;}.show {display: block}.hide {display: none;}i {margin-right: 5px;}</style></head><body><div id="parent"><h4>留言内容：</h4><div id="box"><em id="em">这里会显示留言内容……</em><!-- <p class="grey"><i>2.</i><b>sdsfw3</b><span class="hide"><a href="javascript:;">确定删除</a><strong style="color:red">第2条</strong></span></p> --></div><textarea id="text"></textarea><br /><input id="btn" type="button" value="发表留言" /></div><script src="jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">/*在JQ中所有的事件都是通过addEventListener绑定的，所以当使用事件的时候如果不解除前一次绑定，那么容易出现事件重复执行。解决：off().click() 解除上一次的事件*/var $parent = $('#parent'),$btn = $parent.find('#btn'),$text = $parent.find('#text'),$box = $parent.find('#box'),$em = $parent.find('#em'),num = 0;//给发表留言绑定点击事件$btn.click(function () {let val = $text.val(); // 获取到文本域的内容；let $p = $(`<p class="grey"><i>${++num}.</i><b>${val}</b><span class="hide"><a href="javascript:;">确定删除</a><strong style="color:red">第${num}条</strong></span></p>`);$box.append($p);// 当鼠标划上p标签时，让当前的标签背景变成黄色；$p.mouseover(function () {// this --> 转成jquery的实例// attr : 设置行间属性,找到该元素下的span，将其class设置为show;$(this).attr("class", "yellow").find("span").attr("class", "show");})$p.mouseout(function () {// this --> 转成jquery的实例$(this).attr("class", "grey").find("span").attr("class", "hide");})// 点击确定删除，删除该条信息$p.find("a").click(function () {$(this).parent().parent().remove();let allI = $box.find("i");let allStrong = $box.find("strong");for (let i = 0; i < allI.length; i++) {$(allI[i]).text(`${i+1}.`);$(allStrong[i]).text(`第${i+1}条`);}// 如果length为0；说明没有了标签，让em再次显示；if (allI.length === 0) {$em.css("display", "block");}// 每删除一条就把全局num-1;num--;})$text.val("");$em.css("display", "none")})</script>
</body></html>
css
@charset "utf-8";
/* CSS Document */* { padding: 0; margin: 0; }
li { list-style: none; }#parent { width: 600px; margin: 0 auto; }
h4 { line-height: 40px; margin-bottom: 10px; border-bottom: 1px solid #333; }
p { width: 100%; background: #f1f1f1; position: relative; margin-bottom: 25px; }
#box { width: 580px; padding: 25px 10px 0; border: 1px solid #ddd; margin-bottom: 10px; }
span { position: absolute; top: 0; right: 0px; }
em { position: relative; top: -13px; }
#text { width: 100%; height: 90px; overflow: auto; }
#btn { width: 100%; height: 50px; }
本文标签： JQuery
版权声明：本文标题：Jquery 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1692515729a141619.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论