<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>
<day005>jQuery事件、文档基本操作 + 点赞事件的更多相关文章
- jquery属性文档事件等操作
1.jq方法attr removeAttr script标签大部分都是写在body标签上.下面的情况下$符号是拿不到的. 将它放到上面就能拿到$对象了.但是不能获取body里的元素.因为代码执行顺序从 ...
- Atitit vod click event design flow 视频点播系统点击事件文档
Atitit vod click event design flow 视频点播系统点击事件文档 重构规划1 Click cate1 Click mov4 重构规划 事件注册,与事件分发管理器分开 ...
- html文档流和事件流
文档流: 标准文档流,float position: relative.absolute.fixed可以脱离标准文档流: 回归标准文档流: https://blog.csdn.net/Welkin_q ...
- js、jQuery 获取文档、窗口、元素的各种值
基于两年开发经验,总结了 javascript.jQuery 获取窗口.文档.元素的各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body的宽度: docu ...
- python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...
- python全栈开发day48-jqurey自定义动画，jQuery属性操作，jQuery的文档操作，jQuery中的ajax
一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...
- jQuery 的文档操作
在 js 中也有DOM操作,也可以进行 增删改查 ,但是通过 js 的DOM操作会发现,我的天哪,代码好多.但是 jQuery的文档操作就少了很多. js 中 DOM 的示例 : var box = ...
- jquery获取文档高度和窗口高度的例子
jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...
- 使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素 包含的文本信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 我们能从java的HelloWorld学到什么？
这是每个Java程序员都知道的.虽然简单,但是从一个简单的问题可以引入更深的思考.在这篇文章中,我们将讨论这个简单的程序.如果能更多的帮到你,请留下宝贵的意见. HelloWorld.java pub ...
- 矩阵乘法分配律+bitset优化——hdu4920
因为是模3,所以把原矩阵拆成两个01矩阵,然后按分配律拆开分别进行矩阵乘法,行列用bitset来存进行优化即可 注意 int bitset<int>::count() 函数可以统计bits ...
- Flume详解
Flume是一种分布式,可靠且可用的服务,用于有效地收集,聚合和移动大量日志数据.它具有基于流数据流的简单灵活的架构.它具有可靠的可靠性机制和许多故障转移和恢复机制,具有强大的容错性.它使用简单的可扩 ...
- CApiHook__Api钩子类
见过网上有很多ApiHook的类,但是都不尽入人意,要么就是写的不够好不够完善,要么就是跑不起来. 用别人写的代码总是有种不安心,所以自己就花了一晚上写了CApiHook类.已经尽量确保自己写的类是非 ...
- JavaScript-Tool：wechatHelper.js
ylbtech-JavaScript-Tool:wechatHelper.js 1.返回顶部 1.wechatHelper.js !function(a,b){"function" ...
- [转] undefined reference to `clock_gettime'
下面这个错误通常是因为链接选项里漏了-lrt,但有时发现即使加了-lrt仍出现这个问题,使用nm命令一直,会发现-lrt最终指向的文件 没有包含任何symbol,这个时候,可以找相应的静态库版本lib ...
- Call解析
有且仅有三种Call存在:foregroundcall, backgroundcall, ringingcall Call的基本状态:IDLE,ACTIVE,HOLDING,DIALING,ALERT ...
- Spring MVC @RequestParam（5）
案例来说明 1 @RequestMapping("user/add") 2 public String add(@RequestParam("name") St ...
- centOs 查看系统cpu使用率等--top
原文:centOs 查看系统cpu使用率等--top 在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 CentOS 中,可以通过 top 命令来查看 CP ...
- vue created与activated的区别
搬运自:https://www.cnblogs.com/goloving/p/9256212.html 使用<keep-alive>会将数据保留在内存中,如果要在每次进入页面的时候获取最新 ...