从js实例学习jQuery———用jQuery写出类似于微博发布以及相关操作的效果
程序员文章站
2024-03-05 20:24:43
...
1.具体要求：
1.要求一
2要求二
3.要求三
2.代码以及分析#
2.1核心函数以及思想：
1.关键点在于怎么获取动态添加的元素，很显然如果直接用(吃此处为过挂载事件元素的父元素).on(‘event’,‘el’,function，传入的参数(可以不填))，在例子中可以看到，因为所有的微博发布后都是通过动态添加到id为footer的div上所以就应该时$("#footer").on(‘click’,’.del’.fun)
2.要求是发布的微博按事件顺序，越新发布的越靠上，这里就用到prepend（）函数，可以把元素调剂到该元素的子元素的第一个，是满足要求的
2.2代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#body{
height: 1000px;
background-color: #868686;
padding-top:20px ;
}
#head{
margin: 0px auto;
width: 600px;
height: 166px;
background-color: white;
}
#head_top{
height: 41px;
color: #EB7350;
}
#head_top_left{
margin-left: 9px;
margin-top: 8px;
position: absolute;
float: left;
}
#head_top_right{
margin-right:13px;
line-height: 41px;
font-size: 13px;
float: right;
overflow: hidden;
}
#head_mid{
margin: 0 7px;
width: 570px;
height: 70px;
padding: 5px;
}
#head_footer{
height: 43px;
font-size: 14px;
}
#head_footer_left{
float: left;
margin-top: 10px;
margin-left: 9px;
}
#head_footer_right{
float: right;
margin-top: 10px;
margin-right: 15px;
}
#mid{
margin: 10px auto;
width: 600px;
height: 45px;
}
#footer{
margin: 0px auto;
width: 600px;
}
#footer>div{
width: 600px;
margin-bottom: 20px ;
background-color: white;
}
.content_footer{
font-size: 15px;
border-top: 1px solid #D6DFEA;
}
.content_footer>span{
color: #B6B6B6;
text-align: center;
display: inline-block;
width: 140px;
height: 35px;
line-height: 35px;
}
.content_top{
min-height: 120px;
}
.content_top_left{
margin: 15px 25px;
width: 60px;
float: left;
}
.content_top_mid{
float: left;
padding-top: 20px;
}
.content_top_right{
margin-top: 15px;
margin-right: 10px;
width: 20px;
float:right;
overflow: hidden;
font-size: 20px;
color: #808080;
overflow: hidden;
}
.time{
display: block;
height: 20px;
line-height: 20px;
color:#B6B6B6 ;
font-size: 13px;
margin: 5px 0px;
}
p{
font-size: 14px;
max-width: 400px;
}
textarea{
width: 570px;
height: 70px;
}
input[type=button]{
border-style: none;
width: 82px;
height: 30px;
background-color: #FFC09F;
color: white;
}
#head_footer_left>img:hover,input[type=button]:hover{
cursor: pointer;
}
ul{
position: absolute;
margin-left:-100px;
list-style: none;
font-size: 12px;
border: 1px solid #868686;
}
li{
padding: 3px 3px;
cursor: pointer;
}
.v{
display: block;
width: 20px;
height: 40px;
}
.gk{
position:absolute;
margin-left: -50px;
margin-top: 30px;
width: 100px;
height: 25px;
border: none;
display: none;
}
.gk>li{
background-color: white;
display: block;
border: none;
width: 100px;
line-height:25px;
}
.ch{
position: absolute;
width: 100px;
margin-top: -20px;
background-color: white;
}
.zan{
display: inline-block;
width: 30px;
height: 30px;
background:url(image/nice.png) no-repeat 40px;
}
.zan:hover{
cursor: pointer;
}
.content_top_right>ul{
display: none;
}
</style>
<script type="text/javascript" src="jquery-1.11.3.min.js" ></script>
<script type="text/javascript">
$(function(){
//动态添加发表的微博，动态添加内容
$(".cl").click(function(){
var texts=$(".text1").val();
if(texts!=''){
var str="<div class='hah'><div class='content_top'><div class='content_top_left'><img src='image/pic.png'/></div><div class='content_top_mid'><span ><strong>My_Belif</strong></span><br /><span class='time'> 来自 微博 weibo.com</span><p></p></div><div class='content_top_right'><span class='v'><strong>∨</strong></span><ul class='ch'><li class='del'>删除</li><li >编辑微博</li><li >转换为粉丝可见</li><li >转换为好友圈可见</li><li >转换为仅自己可见</li></ul></div></div><div class='content_footer'><span>推广</span>|<span><img class='tr' src='image/转发.png'>转发</span>|<span>评论</span>|<span class='zan' >赞</span></div></div>";
//$(str).appendTo($("#footer"));
$("#footer").prepend($(str));
$("p").eq(0).text(texts);
var aa=$(".time").eq(0).text();
$(".time").eq(0).text(new Date()+aa);
$(".text1").val("");
}
})
//点击下拉的箭头是否删除
$("#footer").on('click','.v',function(){
if($(this).attr("num")==0){
$(this).siblings().hide();
}else if($(this).attr("num")==1){
$(this).siblings().show();
}
if($(this).attr("num")==1){
$(this).attr("num",0);
}else
$(this).attr("num",1);
})
//点击删除微博
$("#footer").on('click','.del',function(){
$(this).parent().parent().parent().parent().remove();
})
var i=1;
//点击展开发布的按钮
$(".xl").click(function(){
if(i%2!=0){
$(".gk").show();
}else
$(".gk").hide();
i++;
})
//点击公开展开的按钮点击改变显示
$(".gk>li").click(function(){
var str=$(this).text();
$(".xl").text(str+" v");
})
//点击点赞，点一次数字一
$("#footer").on('click','.zan',function(){
if($(this).text()=="赞"){
$(this).text(1);
}else
$(this).text(parseInt($(this).text())+1);
})
})
</script>
</head>
<body>
<div id="body">
<div id="head">
<div id="head_top">
<div id="head_top_left">
<img src="image/新鲜事.png"/>
</div>
<div id="head_top_right">
<span>海外抗疫日记,分享海外抗疫生活,携手共战疫情>></span>  <span>热门微博</span>
</div>
</div>
<div id="head_mid">
<textarea class="text1"></textarea>
</div>
<div id="head_footer">
<div id="head_footer_left">
<img src="image/head_footer.png"/>
</div>
<div id="head_footer_right">
<ul class="gk" style="" >
<li ><img src="image/公开.png" />公开</li>
<li ><img src="image/粉丝.png" />粉丝</li>
<li ><img src="image/好友圈.png" />好友圈</li>
<li ><img src="image/仅自己可见.png" />仅自己可见</li>
<li ><img src="image/群可见.png" />群可见</li>
</ul>
<span class="xl" style="display:inline-block;">公开 ∨</span>   
<input class="cl" type="button" value="发布"/>
</div>
</div>
</div>
<div id="mid">
<img src="image/mid.png"/>
</div>
<div id="footer">
<!--先试着在页面上显示一条微博，调整好样式-->
<!--<div>
<div class="content_top">
<div class="content_top_left">
<img src="image/pic.png"/>
</div>
<div class="content_top_mid">
<span ><strong>My_Belif</strong></span><br />
<span class="time"> 来自 微博 weibo.com</span>
<p>第一条微博</p>
</div>
<div class="content_top_right">
<span class=""><strong>∨</strong></span>
<ul >
<li class="del" >删除</li>
<li value="">编辑微博</li>
<li value="">转换为粉丝可见</li>
<li value="">转换为好友圈可见</li>
<li value="">转换为仅自己可见</li>
</ul>
</div>
</div>
<div class="content_footer">
<span>推广</span>|
<span><img class="tr" src="image/转发.png">转发</span>|
<span>评论</span>|
<span class="zan">赞</span>
</div>
</div>
</div>-->
</div>
</body>
</html>
3.大概的效果
可以实现要求的所有功能,欢迎大家讨论