55-新浪微博

最新推荐文章于 2022-07-04 16:24:01 发布

杨亚仑

最新推荐文章于 2022-07-04 16:24:01 发布

阅读量179

点赞数

分类专栏： jQuery入门练习

本文链接：https://blog.csdn.net/yangyalun/article/details/84310824

版权

jQuery入门练习专栏收录该内容

60 篇文章 0 订阅

订阅专栏

学习到的东西：

1.注意这个jQuery的引用一定要在index.js之前，否则index.js将使用不了jQuery

2.textarea和<input type=text>的区别，前者是多行文本框，后者是单行文本框

3.disabled是让按钮不可用

4.box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box：border和padding不计算入width之内

padding-box：padding计算入width内

border-box：border和padding计算入width之内

5.回顾inline-block，在42中。

6.监听输入框：

(1) change事件—触发该事件必须满足两个条件：
当前对象属性改变，并且是由键盘或鼠标事件激发的（脚步触发无效）
当前对象失去焦点（onblur）
(2) keypress 就是只能监听键盘事件，鼠标复制粘贴操作无能为力
(3) propertychange(ie) 和 input 事件
input 是标准的浏览器事件，一般应用于input元素，当 input 的 value 发生变化就会触发，无论是键盘输入还是鼠标粘贴的改变都能及时监听到变化。

propertychange 只要当前对象属性发生改变就会触发。（IE专属的）

7.img与div+background：url()的区别需要总结与注意。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新浪微博</title>
    <link rel="stylesheet" href="css/index.css">
    <!--注意这个jQuery的引用一定要在index.js之前，否则index.js将使用不了jQuery-->
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
<div class="nav">
    <img src="images/nav.png">
</div>
<div class="content">
    <img src="images/left.png" alt="" class="left">
    <div class="center">
        <!--textarea和<input type=text>的区别，前者是多行文本框，后者是单行文本框-->
        <textarea class="comment"></textarea>
        <!--disabled是让按钮不可用-->
        <input type="button" value="发布" class="send" disabled>
    </div>
    <img src="images/right.png" alt="" class="right">
    <div class="messageList">
        <div class="info">
            <p class="infoText">腾讯微视频就看电视了看电视看会多喝点股份的加工费申达股份
                级元素对光反射地方比较好十点半电辅热V计算的VB你频就看电视了看电视看会多喝点股份的加工费申达股份
                级元素对光反射地方比较好十点半电辅</p>
            <p class="infoOperation">
                <span class="infoTime">2018-4-3 21:30:23</span>
                <span class="infoHandle">
                <a href="javascript:;">0</a>
                <a href="javascript:;">0</a>
                <a href="javascript:;">删除</a>
                </span>
            </p>
        </div>
    </div>
</div>
<div class="page">
    <a href="javascript:;">1</a>
    <a href="javascript:;">2</a>
    <a href="javascript:;">3</a>
</div>
</body>
</html>

CSS代码

*{
    margin: 0;
    padding: 0;
}
html,body{
        height: 100%;
        width: 100%;
}
body{
    background: url("../images/body_bg.jpg") no-repeat center 0;
}
.nav{
    width: 100%;
    height: 48px;
}
.nav>img{
    width: 100%;
}
.content{
    width: 1000px;
    overflow: hidden;
    background: #ecdcd4;
    margin: 200px auto 0 auto;
}
.content>.left{
    float: left;
    width: 150px;
}
.content>.right{
    float: right;
    width: 240px;
}
.content>.center{
    float: left;
    width: 600px;
    height: 168px;
    background: url("../images/comment.png")no-repeat 0 0 ;
    background-size: 600px 168px;
}
.center>.comment{
    width: 570px;
    height: 73px;
    margin-top: 45px;
    margin-left: 15px;
    resize: none;
    border: none;
    outline: none;
}
.center>.send{
    width: 82px;
    height: 30px;
    margin-top: 4px;
    margin-left: 506px;
    border: none;
    background: #ff8135;
    color: white;
}
.content>.messageList{
    width: 600px;
    float: left;
}
.messageList>.info{
    padding: 10px 20px;
    border-bottom: 2px solid #ccc;
}
.info>.infoText{
    line-height: 25px;
    margin-bottom: 10px;
}
.info>.infoOperation{
    width: 100%;
    overflow: hidden;
}
.infoOperation>.infoTime{
    float: left;
    font-size: 13px;
    color: #ccc;
}
.infoOperation>.infoHandle{
    float: right;
    font-size: 13px;
}
.infoHandle>a{
    text-decoration: none;
    color: #ccc;
    background: url("../images/icons.png") no-repeat 0 0;
    padding-left: 25px;
    margin-left: 10px;
}
.infoHandle>a:nth-child(2){
    background-position: 0 -17px;
}
.infoHandle>a:nth-child(3){
    background-position: 0 -33px;
}
.page{
    width: 1000px;
    height: 40px;
    background: #9f5024;
    margin: 0 auto;
    text-align: right;
    padding: 10px;
    /*box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。
    content-box：border和padding不计算入width之内
    padding-box：padding计算入width内
    border-box：border和padding计算入width之内
    */
    box-sizing: border-box;

}
.page>a{
    text-decoration: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    text-align: center;
    line-height: 20px;
    color: #2b2b2b;
}

JS代码

$(function () {
//    0.监听内容的实时输入
        //由于无法实时监听textarea的内容变化，所以需要通过委托事件来达到效果
    // 其中propertychange针对IE浏览器，input针对其他
    /*
    (1) change事件—触发该事件必须满足两个条件：
     当前对象属性改变，并且是由键盘或鼠标事件激发的（脚步触发无效）
     当前对象失去焦点（onblur）
    (2) keypress 就是只能监听键盘事件，鼠标复制粘贴操作无能为力
    (3) propertychange(ie) 和 input 事件
     input 是标准的浏览器事件，一般应用于input元素，当 input 的 value 发生变化就会触发，无论是键盘输入还是鼠标粘贴的 改变都能及时监听到变化。
        propertychange 只要当前对象属性发生改变就会触发。（IE专属的）
    * */
    $("body").delegate(".comment","propertychange input",function () {
       if($(this).val().length>0){
       //    让按钮可用
           $(".send").prop("disabled",false)
       }
       else{
       //    让按钮不可用
           $(".send").prop("disabled",true)
       }
    })
    //1.监听发布按钮的点击
    $(".send").click(function () {
       // 拿到用户输入的内容
       var $text=$(".comment").val();
    //    根据内容创建节点
        var $weibo=createEle($text);
    //    插入微博
        $(".messageList").prepend($weibo)

    })
    //2.监听顶点击
    $("body").delegate(".infoTop","click",function () {
        $(this).text(parseInt($(this).text())+1)
    });
    //3.监听踩点击
    $("body").delegate(".infoDown","click",function () {
        $(this).text(parseInt($(this).text())+1)
    });
    //4.监听删除点击
    $("body").delegate(".infoDel","click",function () {
        $(this).parents(".info").remove();
    });
    //创建节点方法
    function createEle(text) {
        var $weibo=$("   <div class=\"info\">\n" +
            "            <p class=\"infoText\">"+text+"</p>\n" +
            "            <p class=\"infoOperation\">\n" +
            "                <span class=\"infoTime\">"+formartDate()+"</span>\n" +
            "                <span class=\"infoHandle\">\n" +
            //<a href="#">0</a>若这样写，那么在点击a标签后页面会返回顶部,若什么都不写，则每点击一次就会刷新
            "                <a href=\"javascript:;\" class='infoTop'>0</a>\n" +
            "                <a href=\"javascript:;\" class='infoDown'>0</a>\n" +
            "                <a href=\"javascript:;\" class='infoDel'>删除</a>0\n" +
            "                </span>\n" +
            "            </p>\n" +
            "        </div>")
        return $weibo;
    }
    //生成时间方法
    function formartDate() {
        var date=new Date();
       // 2018-4-3 21:30:23
        var arr=[date.getFullYear()+"-",
        date.getMonth()+1+"-",
        date.getDate()+" ",
        date.getHours()+":",
        date.getMinutes()+":",
        date.getSeconds()];
        return arr.join("");
    //     var str=date.getFullYear()+"-"+date.getMonth()+"-"+ date.getDay()+" "+ date.getHours()+":"+ date.getMinutes()+":"+ date.getSeconds()
    }
})

杨亚仑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
55-新浪微博

学习到的东西：1.注意这个jQuery的引用一定要在index.js之前，否则index.js将使用不了jQuery2.textarea和&lt;input type=text&gt;的区别，前者是多行文本框，后者是单行文本框3.disabled是让按钮不可用4.box-sizing属性可以为三个值之一：content-box（default），border-box，padding...
复制链接

扫一扫

专栏目录