<day005>jQuery事件、文档基本操作 + 点赞事件

任务1: jQuery的基本操作

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery基本操作</title>
    <style type="text/css">
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<table border="1" id="t1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>小黑</td>
        <td>打游戏</td>
        <td>
            <button class="delete">删除</button>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>小白</td>
        <td>打小黑</td>
        <td>
            <button class="delete">删除</button>
        </td>
    </tr>

    </tbody>
</table>

    <p><a href="http://www.baidu.com" title="123" id="img1">百度一下</a></p>
    <p><a href=""  class="img2"></a></p>
    <p><a href=""  class="img2"></a></p>
    <button id="b2">点我将a标签替换掉</button>
    <button class="b3">点我克隆</button>
    <button class="b4 hide">点我有惊喜</button>
<button id="b1">添加一行数据</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
    // 表示事件都在文档加载完之后执行 建议写的时候加上
    $(document).ready(function () {
            // 绑定事件
        $("#b1").on("click", function () {
            // 生成要添加的tr标签及数据
            var trEle = document.createElement("tr");
            $(trEle).html("<td>3</td>" +
                "<td>小兰</td>" +
                "<td>打小白</td>" +
                "<td><button class='delete'>删除</button></td>");
            // 把生成的tr插入到表格中
            $("#t1").find("tbody").append(trEle);
        });

        // 每一行的删除按钮绑定事件
        $("tbody").on("click", ".delete", function () {
            console.log(this);
            //删除父亲td在找父亲tr remove删除
            $(this).parent().parent().remove();
        });

        $("#b2").on("click",function () {
            var imgEle = document.createElement("img");
            $(imgEle).attr("src","http://fu5.sdo.com/10088/201707/15002005734675.jpg");
            //用imgEle去替换id为imag1的标签
            $("#img1").replaceWith(imgEle);
        });

        //克隆 点击一下复制一个自己,ture连标签本身的事件都复制,不加只复制本身
        $(".b3").on("click",function () {
             $(this).clone(true).insertAfter(this);
        });

        // 今后绑定事件用on("参数1","参数2","参数3")---适用于页面生成时没没有的标签
        // 参数1表示事件 参数2表示选择器 参数3表示function(事件处理函数)

        // 监听按键按下事件
        $("body").on("keydown",function (event) {
            console.log(event.keyCode);
            if (event.keyCode === 17){
                // 点一下ctrl键就显示隐藏的按键
                $(".b4").removeClass("hide")
            }
        });
        // 点一下隐藏的键,双倍的快乐= =
        $(".b4").on("click",function () {
            var imgEle = document.createElement("img");
            $(imgEle).attr("src","http://fu5.sdo.com/10088/201707/15002007508474.jpg");
            //用imgEle去替换id为imag1的标签
            $(".img2").replaceWith(imgEle);
        });
        
    });

</script>
</body>
</html>

  

任务2: 学会jQuery点赞+1的简单实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>点赞+1</title>
  <style>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 1000)
  })
</script>
</body>
</html>

  

任务3:Bootstrap的基本样式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!--页面支持移动端-->
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Bootstrap基本操作</title>
    <!--引用bootstrap的css文件-->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!--引用normalize.css文件,统一所有浏览器的样式-->
    <!--<link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.css" rel="stylesheet">-->
    <style>
        .row div {
            border: 1px solid black;
        }
        body {
            background-color: #eee;
        }
    </style>
</head>
<body>
    <!--Bootstrap前端框架:统一命名规范,页面风格统一,画面和谐-->
    <!--学习的重点:记住定义好的样式类-->
    <!--
        css:css文件
            bootstrap-theme.min.css //主题相关样式文件压缩文件(常用的)
            bootstrap.min.css //核心css样式文件压缩文件(常用的)

    -->
    <!--第一个样式类.container:表示容器,.container-fluid:表示占据100%宽度的容器-->
    <!--栅格系统(必须在container里面):
        1行分12列,一列占固定的宽度
        .row:表示一行
        .col-md-x(必须row里面):表示占据x列  移动端适用就加一个col-xs-x
        .col-md-offset-x:左边空x列
        .col-md-push-x:往右边推x列
        .col-md-pull-x:往左边拉x列 -->
    <!--标题,大标题+小标题
        文档本体:Bootstrap 直接赋予 <body> 元素和所有段落元素
            font-size:14px
            line-height:1.428另外,
            <p>:设置了等于 1/2 行高(即 10px)的底部外边距(margin)
    -->
    <div class="container">
        <div class="row">
            <div class="col-md-1 col-xs-4">1</div>
            <div class="col-md-10 col-xs-4">10</div>
            <div class="col-md-1 col-xs-4">1</div>
        </div>
        <div class="row">
            <!--左边空2列,列不够就换行-->
            <div class="col-md-1 col-md-offset-2">1</div>
            <div class="col-md-10 col-md-push-1">10</div>
            <div class="col-md-1 col-md-pull-10">1</div>
        </div>
        <div class="row">登鹳雀楼</div>
        <div class="row">白日依山尽,</div>
        <div class="row">黄河入海流.</div>
        <div class="row">欲穷千里目,</div>
        <div class="row">更上一层楼.</div>

    </div>
    <div class="container">
        <!--标题-->
        <h1>一级标题36px<small>小标题</small></h1>
        <h2>二级标题30px<small>小标题</small></h2>
        <h3>三级标题24px<small>小标题</small></h3>
        <h4>四级标题18px<small>小标题</small></h4>
        <h5>五级标题14px<small>小标题</small></h5>
        <h6>六级标题12px<small>小标题</small></h6>
        <!--文本-->
        <p>
            普通的在这里
        </p>
        <p class="lead">
            高亮在这里
            <mark>背景色在这</mark>
            <del>被删除的在这里</del>
            <s>无用的文本</s>
            <ins>插入文本</ins>
            <u>带下划线的文本</u>
            <small>小号文本</small>
            <strong>着重文本在这里</strong>
            <em>斜体文本在这里</em>
        </p>
        <!--对齐-->
        <p class="text-left">左对齐</p>
        <p class="text-center">居中对齐</p>
        <p class="text-right">右对齐</p>
        <p class="text-justify">两端对齐</p>
        <p class="text-nowrap">没   有  空  格  对  齐</p>
        <!--大小-->
        <p class="text-lowercase">MMMM大写变小写</p>
        <p class="text-uppercase">xxxx小写变大写</p>
        <p class="text-capitalize">xxxx  asa 首字母大写</p>
        <abbr class="att" title="缩略语">att</abbr>
        <!--地址-->
        <address>
          <strong>国务院</strong><br>
          天安门广场,左手边100米<br>
          大剧院附近,前方2公里<br>
          <abbr title="Phone">P:</abbr> (123) 456-7890
        </address>
        <address>
          <strong>邮箱</strong><br>
          <a href="mailto:#">12345@qq.com</a>
        </address>

        <!--引用-->
        <blockquote>
          <p>天才是1%的灵感+99%的努力</p>
          <footer>爱迪生语录</footer>
        </blockquote>

        <!--无序列表-->
        <ul>
          <li>...1</li>
          <li>...2</li>
        </ul>
        <!--有序列表-->
        <ol>
          <li>...1</li>
          <li>...2</li>
        </ol>
        <!--无样式列表-->
        <ul class="list-unstyled">
          <li>...1</li>
          <li>...2</li>
        </ul>
        <!--内联列表-->
        <ul class="list-inline">
          <li>...1</li>
          <li>...2</li>
          <li>...3</li>
        </ul>

        <!--描述列表-->
        <dl>
          <dt>鲁迅语录</dt>
          <dd>路本来就无所谓有,无所谓无,走的人多了也便成了路.</dd>
        </dl>
        <!--水平描述-->
        <dl class="dl-horizontal">
          <dt>鲁迅语录</dt>
          <dd>路本来就无所谓有,无所谓无,走的人多了也便成了路.</dd>
        </dl>

        <!--代码-->
        <code><div></code>
        <code>print("12345")</code>
        <!--代码块-->
        <pre><p>Sample text here...</p></pre>

        <!--获取用户输入-->
        按住<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

        <!--变量(公式等)-->
        <var>y</var> = <var>k</var><var>x</var> + <var>b</var>

        <!--程序输出-->
        <samp>程序输入</samp>

        <!--基本表格
            加边框:.table-bordered
            隔行变色:.table-striped
            鼠标悬停:.table-hover
            紧缩表格:.table-condensed
            -->
        <!--
        .active:鼠标悬停在行或单元格上时所设置的颜色
        .success:标识成功或积极的动作
        .info:标识普通的提示信息或动作
        .warning:标识警告或需要用户注意
        .danger:标识危险或潜在的带来负面影响的动作
        -->
        <table class="table table-striped table-hover">
            <thead>
            <tr>
                <th>#</th>
                <th>姓名</th>
                <th>爱好</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>小黑</td>
                <td>打游戏</td>
                <td>
                    <button class="delete">删除</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>小白</td>
                <td>打小黑</td>
                <td>
                    <button class="delete">删除</button>
                </td>
            </tr>
            <!-- On rows -->
                <tr class="active">
                    <td>1</td>
                    <td>active</td>
                    <td>打游戏</td>
                    <td>
                        <button class="delete">删除</button>
                    </td>
                </tr>
                <tr class="success">
                    <td>2</td>
                    <td>success</td>
                    <td>打游戏</td>
                    <td>
                        <button class="delete">删除</button>
                    </td>
                </tr>
                <tr class="warning">
                    <td>3</td>
                    <td>warning</td>
                    <td>打游戏</td>
                    <td>
                        <button class="delete">删除</button>
                    </td>
                </tr>
                <tr class="danger">
                    <td>4</td>
                    <td>danger</td>
                    <td>打游戏</td>
                    <td>
                        <button class="delete">删除</button>
                    </td>
                </tr>
                <tr class="info">
                    <td>5</td>
                    <td>info</td>
                    <td>打游戏</td>
                    <td>
                        <button class="delete">删除</button>
                    </td>
                </tr>

            <!-- On cells (`td` or `th`) -->
            <tr>
              <td class="active">active</td>
              <td class="success">success</td>
              <td class="warning">warning</td>
              <td class="danger">danger</td>
              <td class="info">info</td>
            </tr>
            </tbody>
        </table>

        <!--表单-->
        <form>
            <!--账号-->
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input class="form-control" id="exampleInputEmail1" placeholder="Email" type="email">
          </div>
            <!--密码-->
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password">
          </div>
            <!--上传文件-->
          <div class="form-group">
            <label for="exampleInputFile">File input</label>
            <input id="exampleInputFile" type="file">
            <p class="help-block">Example block-level help text here.</p>
          </div>
            <!--复选框-->
          <div class="checkbox">
            <label>
              <input type="checkbox"> Check me out
            </label>
          </div>
            <!--按键-->
          <button class="btn btn-default" type="submit">Submit</button>
        </form>

        <!--内联表单(一行)-->
        <form class="form-inline">
          <div class="form-group">
            <label for="exampleInputName2">Name</label>
            <input class="form-control" id="exampleInputName2" placeholder="Jane Doe" type="text">
          </div>
          <div class="form-group">
            <label for="exampleInputEmail2">Email</label>
            <input class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com" type="email">
          </div>
          <button class="btn btn-default" type="submit">Send invitation</button>
        </form>

        <!--加图标的内联表单-->
        <form class="form-inline">
          <div class="form-group">
            <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
            <div class="input-group">
              <div class="input-group-addon">$</div>
              <input class="form-control" id="exampleInputAmount" placeholder="Amount" type="text">
              <div class="input-group-addon">.00</div>
            </div>
          </div>
          <button class="btn btn-primary" type="submit">Transfer cash</button>
        </form>

        <!--水平排列的表单-->
        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-2 control-label" for="inputEmail3">Email</label>
            <div class="col-sm-10">
              <input class="form-control" id="inputEmail3" placeholder="Email" type="email">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="inputPassword3">Password</label>
            <div class="col-sm-10">
              <input class="form-control" id="inputPassword3" placeholder="Password" type="password">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                <label>
                  <input type="checkbox"> Remember me
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button class="btn btn-default" type="submit">Sign in</button>
            </div>
          </div>
        </form>

        <!--输入框-->
        <input class="form-control" placeholder="Text input" type="text">
        <!--文本框-->
        <textarea class="form-control" rows="3"></textarea>
        <!--多选复选上面有就不贴了-->
        <!--内联多选复选-->
        <label class="checkbox-inline">
          <input id="inlineCheckbox1" type="checkbox" value="option1"> 1
        </label>
        <label class="checkbox-inline">
          <input id="inlineCheckbox2" type="checkbox" value="option2"> 2
        </label>
        <label class="checkbox-inline">
          <input id="inlineCheckbox3" type="checkbox" value="option3"> 3
        </label>

        <label class="radio-inline">
          <input id="inlineRadio1" name="inlineRadioOptions" type="radio" value="option1"> 1
        </label>
        <label class="radio-inline">
          <input id="inlineRadio2" name="inlineRadioOptions" type="radio" value="option2"> 2
        </label>
        <label class="radio-inline">
          <input id="inlineRadio3" name="inlineRadioOptions" type="radio" value="option3"> 3
        </label>

        <!--下拉列表-->
        <!--<select multiple class="form-control">显示多个-->
        <select class="form-control">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>

        <!--静态控件-->
        <p class="form-control-static">email@example.com</p>

        <!--禁用disabled-->
        <input class="form-control" disabled id="disabledInput" placeholder="Disabled input here..." type="text">

        <!--只读-->
        <input class="form-control" placeholder="Readonly input here…" readonly type="text">


        <!--帮助文档-->
        <label class="sr-only" for="inputHelpBlock">输入帮助文档</label>
        <input aria-describedby="helpBlock" class="form-control" id="inputHelpBlock" type="text">
        ...
        <span class="help-block" id="helpBlock">设置帮助文档</span>

        <!--校验状态在-->
        <!--
            has-warning:灰色
            has-success:绿色
            has-error:红色
        -->

        <div class="form-group has-success">
          <label class="control-label" for="inputSuccess1">Input with success</label>
          <input aria-describedby="helpBlock2" class="form-control" id="inputSuccess1" type="text">
          <span class="help-block" id="helpBlock2">A block of help text that breaks onto a new line and may extend beyond one line.</span>
        </div>
        <div class="form-group has-warning">
          <label class="control-label" for="inputWarning1">Input with warning</label>
          <input class="form-control" id="inputWarning1" type="text">
        </div>
        <div class="form-group has-error">
          <label class="control-label" for="inputError1">Input with error</label>
          <input class="form-control" id="inputError1" type="text">
        </div>
        <div class="has-success">
          <div class="checkbox">
            <label>
              <input id="checkboxSuccess" type="checkbox" value="option1">
              Checkbox with success
            </label>
          </div>
        </div>
        <div class="has-warning">
          <div class="checkbox">
            <label>
              <input id="checkboxWarning" type="checkbox" value="option1">
              Checkbox with warning
            </label>
          </div>
        </div>
        <div class="has-error">
          <div class="checkbox">
            <label>
              <input id="checkboxError" type="checkbox" value="option1">
              Checkbox with error
            </label>
          </div>
        </div>

        <!--额外图标-->
        </div>
        <div class="form-group has-success has-feedback">
          <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
          <div class="input-group">
            <span class="input-group-addon">@</span>
            <input aria-describedby="inputGroupSuccess1Status" class="form-control" id="inputGroupSuccess1" type="text">
          </div>
          <span aria-hidden="true" class="glyphicon glyphicon-ok form-control-feedback"></span>
          <span class="sr-only" id="inputGroupSuccess1Status">(success)</span>
        </div>


        <!--控件尺寸-->
    <input class="form-control input-lg" type="text" placeholder=".input-lg">
    <input class="form-control" type="text" placeholder="Default input">
    <input class="form-control input-sm" type="text" placeholder=".input-sm">

    <select class="form-control input-lg">...</select>
    <select class="form-control">...</select>
    <select class="form-control input-sm">...</select>

        <!--预定义样式-->
        <button type="button" class="btn btn-default">(默认样式)Default</button>
        <button type="button" class="btn btn-primary">(首选项)Primary</button>
        <button type="button" class="btn btn-success">(成功)Success</button>
        <button type="button" class="btn btn-info">(一般信息)Info</button>
        <button type="button" class="btn btn-warning">(警告)Warning</button>
        <button type="button" class="btn btn-danger">(危险)Danger</button>
        <button type="button" class="btn btn-link">(链接)Link</button>

        <!--尺寸-->
        <p>
          <button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
          <button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
        </p>
        <p>
          <button type="button" class="btn btn-primary">(默认尺寸)Default button</button>
          <button type="button" class="btn btn-default">(默认尺寸)Default button</button>
        </p>
        <p>
          <button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>
          <button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
        </p>
        <p>
          <button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
          <button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
        </p>

        <!--文字颜色和背景颜色-->
        <p class="text-muted">...</p>
        <p class="text-primary">...</p>
        <p class="text-success">...</p>
        <p class="text-info">...</p>
        <p class="text-warning">...</p>
        <p class="text-danger">...</p>

        <p class="bg-primary">...</p>
        <p class="bg-success">...</p>
        <p class="bg-info">...</p>
        <p class="bg-warning">...</p>
        <p class="bg-danger">...</p>

        <!--快速浮动-->
        <div class="pull-left">...</div>
        <div class="pull-right">...</div>
        <!--清除浮动-->
        <div class="clearfix">...</div>

        <!--显示和隐藏-->
        <div class="show">...</div>
        <div class="hidden">...</div>
    </div>
    <br>
    <img alt="罗" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1193513254,3575758894&fm=26&gp=0.jpg">


    
    <!--准备环境-->
    <script src="jquery-3.2.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

  

posted @ 2019-03-18 14:40  水墨黑  阅读(169)  评论(0编辑  收藏  举报