<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>