任務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:#">[email protected]</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="[email protected]" 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 protected]</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>
![python 學習day4[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)