JQuery 測試內容(不保證內容完整性)
JQuery 基礎
tags: 前端 JQuery 基礎
一 什麼是JQery
是一個 輕量級的兼容多瀏覽器的JavaScript庫(類庫)css
jQuery使用戶可以更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，可以極大地簡化JavaScript編程。它的宗旨就是："Write less, do more."html
二 爲何使用JQery
<3>它是輕量級的js庫(壓縮後只有21k) ，這是其它的js庫所不及的，它兼容CSS3，還兼容各類瀏覽器前端
<4>jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTMLdocuments、events、實現動畫效果，而且方便地爲網站提供AJAX交互。java
<5>jQuery還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇。jquery
三 怎麼下載使用
版本選擇
- 1.x：兼容IE678,使用最爲普遍的，官方只作BUG維護，功能再也不新增。所以通常項目來講，使用1.x版本就能夠了，最終版本：1.12.4 (2016年5月20日)
- 2.x：不兼容IE678，不多有人使用，官方只作BUG維護，功能再也不新增。若是不考慮兼容低版本的瀏覽器可使用2.x，最終版本：2.2.4 (2016年5月20日)
- 3.x：不兼容IE678，只支持最新的瀏覽器。須要注意的是不少老的jQuery插件不支持3.x版。目前該版本是官方主要更新維護的版本。
版本下載
官方地址:http://jquery.com/download/
壓縮的版本3.3.1 --->上線使用
未壓縮的版本3.3.1 --->開發使用web
安裝兩種方式
pass編程
- 優美勝於醜陋（Python 以編寫優美的代碼爲目標）
- 明瞭勝於晦澀（優美的代碼應當是明瞭的，命名規範，風格類似）
- 簡潔勝於複雜（優美的代碼應當是簡潔的，不要有複雜的內部實現）
- 複雜勝於凌亂（若是複雜不可避免，那代碼間也不能有難懂的關係，要保持接口簡潔）
- 扁平勝於嵌套（優美的代碼應當是扁平的，不能有太多的嵌套）
- 間隔勝於緊湊（優美的代碼有適當的間隔，不要奢望一行代碼解決問題）
- 可讀性很重要（優美的代碼是可讀的）
- 即使假借特例的實用性之名，也不可違背這些規則（這些規則至高無上）
- 不要包容全部錯誤，除非你肯定須要這樣作（精準地捕獲異常，不寫 except:pass 風格的代碼）
- 當存在多種可能，不要嘗試去猜想
- 而是儘可能找一種，最好是惟一一種明顯的解決方案（若是不肯定，就用窮舉法）
- 雖然這並不容易，由於你不是 Python 之父（這裏的 Dutch 是指 Guido ）
- 作也許好過不作，但不假思索就動手還不如不作（動手以前要細思量）
- 若是你沒法向人描述你的方案，那確定不是一個好方案；反之亦然（方案測評標準）
- 命名空間是一種絕妙的理念，咱們應當多加利用（倡導與號召）
基礎知識
基本語法
jquery的基礎語法：bootstrap
$(selector).action()
查找標籤
:::info
本章節練習題基於:jQuery選擇器篩選器練習.html
:::瀏覽器
基本選擇器
$("#id的值")
id選擇器
$("#id的值")
舉例:找到本頁面中id是i1的標籤app
$("#i1")
--------
-> Object [ div#i1.container
]
標籤選擇器
查找全部標籤
$("*")
----------
Object { 0: html
, 1: head, 2: meta, 3: meta, 4: meta, 5: title, 6: link, 7: link, 8: style, 9: body, … }
查找
class選擇器
$(".class")
$(".c1")
Object { 0: h1.c1
, 1: h1.c1, length: 2, prevObject: Object(1) }
配合使用
找到div的container類的標籤
$("div.container")
----------
r.fn.init(6) [div.container, div.container, div.container, div#i1.container, div.container, div.container, prevObject: r.fn.init(1)]
層級選擇器
練習：
自定義模態框，使用jQuery實現彈出和隱藏功能。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>模態框</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 99;
}
.modal {
width: 400px;
height: 300px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
z-index: 100;
}
.close {
float: right;
margin-right: 15px;
cursor: pointer; /* 鼠標移上去光標顯示類型 */
}
.hide {
display: none;
}
/*#login {*/
/*!*float: right;*!*/
/*!*top: 0;*!*/
/*!*right: 100%;*!*/
/*}*/
</style>
</head>
<body>
<div>
<h1>《釵頭鳳》唐婉</h1>
<p>世情薄</p>
<p>人情惡</p>
<p>雨送黃昏花易落</p>
<p>曉風乾</p>
<p>淚痕殘</p>
<p>欲箋心事</p>
<p>獨語斜闌</p>
<p>難 難 難</p>
<p>人成各</p>
<p>今非昨</p>
<p>病魂長似鞦韆索</p>
<p>角聲寒</p>
<p>夜闌珊</p>
<p>怕人詢問</p>
<p>咽淚裝歡</p>
<p>瞞 瞞 瞞</p>
</div>
<button id="login">登陸</button>
<div class="cover hide"></div>
<div class="modal hide">
<div class="close">X</div>
</div>
<script src="jquery.js"></script>
<script>
$("#login")[0].onclick = function () {
//去掉cover和modal的hide樣式類
// 有兩種方式
// 方式一
// $(".cover")[0].classList.remove('hide');
// $(".modal")[0].classList.remove('hide');
//方式二
$(".cover,.modal").removeClass('hide')
};
// 找到close按鈕綁定
$(".close")[0].onclick = function () {
//添加cover和modal的hide樣式類
// $(".cover")[0].classList.add('hide');
// $(".modal")[0].classList.add('hide');
$(".cover,.modal").addClass('hide')
}
</script>
</body>
</html>
基本篩選器
:first ->第一個
舉例:找到id值爲f1的標籤內部的第一個input標籤
$("#f1:first")
Object { 0: form#f1
, length: 1, prevObject: Object(1) }
:last ->最後一個
找到id值爲my-checkbox的標籤內部最後一個input標籤
舉例:
$("#my-checkbox:last")
Object { 0: div#my-checkbox.panel-body
, length: 1, prevObject: Object(1) }
:eq(index) -->索引等於index的那個元素
舉例:
屬性選擇器
[arribute][attribute=value] //屬性等於[attribute!=value] //屬性不等於
表單篩選器
練習題
- 找到本頁面中id是i1的標籤
- 找到本頁面中全部的h2標籤
- 找到本頁面中全部的input標籤
- 找到本頁面全部樣式類中有c1的標籤
- 找到本頁面全部樣式類中有btn-default的標籤
- 找到本頁面全部樣式類中有c1的標籤和全部h2標籤
- 找到本頁面全部樣式類中有c1的標籤和id是p3的標籤
- 找到本頁面全部樣式類中有c1的標籤和全部樣式類中有btn的標籤
- 找到本頁面中form標籤中的全部input標籤
- 找到本頁面中被包裹在label標籤內的input標籤
- 找到本頁面中緊挨在label標籤後面的input標籤
- 找到本頁面中id爲p2的標籤後面全部和它同級的li標籤
- 找到id值爲f1的標籤內部的第一個input標籤
- 找到id值爲my-checkbox的標籤內部最後一個input標籤
- 找到id值爲my-checkbox的標籤內部沒有被選中的那個input標籤
- 找到全部含有input標籤的label標籤
實例
垂直菜單/Users/chery/Documents/LearnPython/E_前端/day51/垂直菜單.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical menu with CSS</title>
<link rel="stylesheet" href="fonts/css/font-awesome.css">
<style type="text/css">
body{
padding: 0;
margin: 0;
}
.menu ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li{
padding: 15px;
position: relative;
width: 150px;
vertical-align: middle;
background-color: #2C3A47;
cursor: pointer;
/*border-right: 5px solid gold;*/
border-top:1px solid silver;
/* 顏色延遲顯示 */
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.menu ul li:hover {
background-color: #2ecc71;
}
.menu > ul >li {
border-right: 5px solid gold;
}
.menu ul ul{
transition: all 0.3s;
opacity: 0;
position: absolute;
border-left: 5px solid gold;
visibility: hidden;
left: 100%;
top:-2%;
}
.menu ul li:hover>ul {
opacity: 1;
visibility: visible;
}
.menu ul li a{
color: #fff;
text-decoration: none;
}
span {
margin-right: 15px;
}
.menu> ul >li:nth-of-type(2)::after{
content: '+';
position: absolute;
margin-left: 40%;
float: right;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href=""><span class="fa fa-home"></span>主頁</a></li>
<li><a href=""><span class="fa fa-users"></span>用戶</a>
<ul>
<li><a href=""><span class="fa fa-plus" ></span>添加</a></li>
<li><a href=""><span class="fa fa-edit" ></span>編輯</a></li>
<li><a href=""><span class="fa fa-remove" ></span>刪除</a></li>
</ul>
</li>
<li><a href=""><span class="fa fa-desktop"></span>設計</a></li>
<li><a href=""><span class="fa fa-database"></span>數據</a></li>
<li><a href=""><span class="fa fa-info"></span>關於我</a></li>
</ul>
</div>
</body>
</html>
效果:
- [x] 延遲顯示
- [x] 多級菜單
操做元素(屬性,css,文檔處理)
文本操做
/E_前端/day51/文本操做.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本操做</title>
</head>
<body>
<div id="d1">
《前出師表》
<p>
臣本布衣，躬耕於南陽。苟全性命於亂世，不求聞達於諸侯。
先帝不以臣卑鄙，位子望去，三顧晨宇草湖之中，自襯衣黨史知識
</p>
</div>
<label for="i1"></label><input type="text" id="i1">
<label>
<input type="checkbox" name="hobby" value="basketball">
</label>籃球🏀
<label>
<input type="checkbox" name="hobby" value="football">️
</label>足球⚽
<label>
<input type="checkbox" name="hobby" value="doublecolorball">️
</label>雙色球
<input type="checkbox">是否七天免登陸
<script src="jquery.js"></script>
</body>
</html>
$('#d1').text(); //只能識別文本
《前出師表》
臣本布衣，躬耕於南陽。苟全性命於亂世，不求聞達於諸侯。
先帝不以臣卑鄙，位子望去，三顧晨宇草湖之中，自襯衣黨史知識
$('#d1').html(); //
《前出師表》
<p>
臣本布衣，躬耕於南陽。苟全性命於亂世，不求聞達於諸侯。
先帝不以臣卑鄙，猥自枉屈，三顧臣於草廬之中，諮臣以當世之事
</p>
"
屬性操做
| 方法 | 描述 |
|---|---|
| addClass() | 向匹配的元素添加指定的類名。 |
| removeClass() | 從全部匹配的元素中刪除所有或者指定的類。 |
| toggleClass() | 從匹配的元素中添加或刪除一個類。 |
| hasClass() | 檢查匹配的元素是否擁有指定的類。 |
| html() | 設置或返回匹配的元素集合中的 HTML 內容。 |
| attr() | 設置或返回匹配元素的屬性和值。 |
| attr(attrName) | 返回第一個匹配元素的屬性值 |
| removeAttr() | 從全部匹配的元素中移除指定的屬性。 |
| attr(attrName, attrValue) | 爲全部匹配元素設置一個屬性值 |
| attr({k1: v1, k2:v2}) | 爲全部匹配元素設置多個屬性值 |
| 從每個匹配的元素中刪除一個屬性 | |
| val() | 設置或返回匹配元素的值。 |
演示html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1" title="歧視計劃" qs="歧視計劃">div</div>
<label>
<input type="checkbox" name="" checked="checked">
</label>
<script src="jquery.js"></script>
</body>
</html>
操做演示
$("#d1"); //獲取id=d1
Object [div#d1]
$("#d1").attr('qs');
"歧視計劃"
$("#d1").attr('id');
"d1"
$("#d1").attr('tittle');
undefined
$("#d1").attr('title');
"歧視計劃"
$("#d1").attr('title','哈哈');
Object [ div#d1
]
$("#d1").attr('title');
"哈哈"
$("#d1").attr('title');
"哈哈"
$("#d1").removeAttr('title');
Object [ div#d1
]
$("#d1").attr('title');
undefined
用於 checkbox 和 radio 布爾值
- prop() // 獲取屬性
- removeProp() // 移除屬性
$("#i1").prop('checked')
true
如圖
$("#i1").prop('checked',false)
Object [ input#i1
]
如圖:
$("#i1").prop('checked',true)
Object [ input#i1
]
如圖:
文檔處理
css操做
事件
事件的概述
jQuery 事件處理方法是 jQuery 中的核心函數。
事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。術語由事件「觸發」（或「激發」）常常會被使用。
一般會把 jQuery 代碼放到 <head>部分的事件處理方法中：
阻止事件的後續的發生
Footnote 1 link1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止後續事件的執行</title>
</head>
<body>
<form action="">
<input type="text" name="name" id="i1">
<input type="submit" value="提交" id="b1">
</form>
<script src="jquery.js"></script>
<script>
$("#b1").on('click', function () {
var value = $("#i1").val().trim();
if (!value) {
//阻止表單的提交
// 阻止後面的事件執行
return false;
}
})
</script>
</body>
</html>
截圖
冒泡🐱
jQuery event.stopPropagation() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>
<button id="b1">點我</button>
</p>
</div>
<script src="jquery.js"></script>
<script>
$('div').click(function () {
alert('我是div標籤')
});
$('p').click(function () {
alert('我是一個p標籤')
});
$('#b1').click(function (e) { // e 是形參
alert("我就是那個按鈕");
e.stopPropagation(); //event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件處理程序被執行。
// return false; //也能夠用這個方式
});
// 上面的按鈕就是逐級冒泡觸發的
</script>
</body>
</html>
結果顯示
事件的委託
事件委託是經過事件冒泡的原理,利用父標籤區捕獲子標籤的事件.
所謂的事件的委託,就是藉助冒泡的性質,給其父級元素添加動做,而後等待將來事件觸發(綁定事件),否則 後續添加的按鈕是不會再觸發點擊事件的.我說的是真的,不是假的.由於上面的綁定事件是先發現的,而後纔是這個添加動做.因此這個不會被觸發的.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委託</title>
</head>
<body>
<div>
<p id="p1">
<button class="c1">點我</button>
</p>
</div>
<script src="jquery.js"></script>
<script>
$("#p1").on('click','.c1',function () {
console.log(this);
console.log('我是一個按鈕呢')
});
// 在頁面上添加一個.c1樣式類的按鈕
$('#p1').append('<button class="c1">點我2</button>')
//所謂的事件的委託,就是藉助冒泡的性質,給其父級元素添加動做,而後等待將來事件觸發(綁定事件)
//否則 後續添加的按鈕是不會再觸發點擊事件的.我說的是真的,不是假的.由於上面的綁定事件是先發現的
//而後纔是這個添加動做.因此這個不會被觸發的.
</script>
</body>
</html>
結果
按鍵反饋
事件代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery.js"></script>
<script>
$(window).keydown(function (e) {
if (e.keyCode === 16){
console.log("SHiFT被按下了")
}
});
</script>
</body>
</html>
結果顯示:
再次
JQuery總結論
因爲JQuery是爲處理HTML事件而特別設計的,那麼應該這樣操做才能便於維護:
- 把全部JQuery代碼置於事件處理函數中
- 把全部事件處理函數置於文檔就緒事件處理器中
- 把JQuery代碼置於單獨的.js中
- 若是存在名稱衝突,則重命名JQuery庫
JQuery:hover方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
}
.nav {
height: 20px;
width: 100%; /* 若是寬度不夠 列表就沒法顯示成一行,display 是沒有用的 */
background-color: #3d3d3d;
position: fixed;
top: 0;
}
.nav ul {
list-style-type: none;
line-height: 20px;
}
.nav li {
float: left;
padding: 0 10px;
color: #9999;
position: relative;
display: block;
/*height: 40px;*/
/*display: inline;*/
}
.nav li:hover {
background-color: #7EC0EE;
color: white;
}
.clearfix:after {
content: "";
/*display: block;*/
clear: both;
}
.son {
position: absolute;
top: 40px;
right: 0;
height: 50px;
width: 100px;
background-color: #00a9ff;
display: none;
}
.hover .son {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul class="clearfix">
<li>登錄</li>
<li>註冊</li>
<li>購物車
<p class="son hide">空空如也</p>
</li>
</ul>
</div>
<script src="jquery.js"></script>
<script>
$(".nav li").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
</script>
</body>
</html>
演示效果
window.onload 和 JQuery.reary
- window.onload()函數有覆蓋現象,必須等待着圖片等==全部資源加載完成以後==才能調用.
- JQuery的這個入口函數沒有函數覆蓋現象,文檔加載完成以後就能夠調用(建議使用此函數)
jQuery 事件方法
下面是 jQuery 中事件方法的一些例子：
| Event函數 | 綁定函數至 |
|---|---|
| $(document).ready(function)固然也能夠簡寫$(function(){綁定事件的操做...}) | 將函數綁定到文檔的就緒事件(當文檔完成加載時) |
| $(selector).click(function) | 觸發或將函數綁定到被選元素的點擊事件 |
| $(selector).dbclick(function) | 觸發或將函數綁定到被選中元素的雙擊事件 |
| $(selector).focus(function) | 觸發或將函數綁定到被選元素的得到焦點事件 |
| $(selector).mouseover(function) | 觸發或將函數綁定到被選元素的鼠標懸停事件 |
模擬輸入動態顯示:
xyh.js
$(document).ready(function () {
// input框失去焦點才觸發
$("#i1").on('blur', function () {
var value = $(this).val();
console.log(value);
});
//input框只要值發生變化就觸發
$('#i1').on('input', function () {
var value = $(this).val();
console.log(value);
})
});
ws.js
$(document).ready(function () {
alert(123);
});
input.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input事件</title>
<script src="jquery.js"></script>
<script src="xyh.js"></script>
<script src="ws.js"></script>
<!--<script>-->
<!--window.onload = function () {-->
<!--// input框失去焦點才觸發-->
<!--$("#i1").on('blur', function () {-->
<!--var vablue = $(this).val();-->
<!--console.log(vablue);-->
<!--});-->
<!--$("#i1").on("input", function () {-->
<!--var value = $(this).val();-->
<!--console.log(value);-->
<!--})-->
<!--}-->
<!--</script>-->
</head>
<body>
<input type="text" id="i1">
</body>
</html>
文檔就緒函數
這是爲了防止文檔在徹底加載（就緒）以前運行 jQuery 代碼。
若是在文檔沒有徹底加載以前就運行函數，操做可能失敗。下面是兩個具體的例子：
試圖隱藏一個不存在的元素
得到未徹底加載的圖像的大小
效果-動畫
基本參考:
jQuery 參考手冊 - 效果
jQuery 效果函數
| 方法 | 描述 |
|---|---|
| animate() | 對被選元素應用「自定義」的動畫 |
| clearQueue() | 對被選元素移除全部排隊的函數（仍未運行的) |
| delay() | 對被選元素的全部排隊函數（仍未運行）設置延遲 |
| dequeue() | 運行被選元素的下一個排隊函數 |
| fadeIn() | 逐漸改變被選元素的不透明度，從隱藏到可見 |
| fadeOut() | 逐漸改變被選元素的不透明度，從可見到隱藏 |
| fadeTo() | 把被選元素逐漸改變至給定的不透明度 |
| hide() | 隱藏被選的元素 |
| queue() | 顯示被選元素的排隊函數 |
| show() | 顯示被選的元素 |
| slideDown() | 經過調整高度來滑動顯示被選元素 |
| slideToggle() | 對被選元素進行滑動隱藏和滑動顯示的切換 |
| slideUp() | 經過調整高度來滑動隱藏被選元素 |
| stop() | 中止在被選元素上運行動畫 |
| toggle() | 對被選元素進行隱藏和顯示的切換 |
經過 jQuery，您可使用 toggle() 方法來切換 hide() 和 show() 方法。
顯示被隱藏的元素，並隱藏已顯示的元素：
舉例代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1 {
height: 400px;
width: 600px;
}
</style>
</head>
<body>
<div id="d1">
<img id="i1" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539932278336&di=c64dcea4c09666e637cdcabf20c00d70&imgtype=0&src=http%3A%2F%2Fpic.eastlady.cn%2Fuploads%2Ftp%2F201705%2F19%2F28st.jpg" alt="">
</div>
<script src="jquery.js"></script>
</body>
</html>
簡單演示
$("#i1").show(1000); //1秒以內顯示
Object [ img#i1 ]
$("#i1").hide(1000); //1秒以內隱藏
Object [ img#i1 ]
$("#i1").toggle(1000); //1秒切換狀態
Object [ img#i1 ]
可選的 speed 參數規定隱藏/顯示的速度，能夠取如下值："slow"、"fast" 或毫秒。
可選的 callback 參數是 toggle() 方法完成後所執行的函數名稱。
動畫方法
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可選的 speed 參數規定隱藏/顯示的速度，能夠取如下值："slow"、"fast" 或毫秒。
可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。
擴展方法(插件機制)
實踐小做業
- 任務狀態
- [x] 使用了bootstrap
- [x] 實現了新增
- [x] 實現了編輯
- [ ] 不知道
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
<!--css樣式開始-->
<style>
/*.hide {*/
/*display: none;*/
/*}*/
</style>
</head>
<body>
<table class="table table-bordered table-hover" > <!-- 表一個 一個表頭 三行內容 四行內容-->
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>愛好</th>
<th>操做</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>金老闆</td>
<td>開車</td>
<td>
<button class="edit btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-sm">編輯</button>
<button class="fire btn btn-danger">開除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>景女神</td>
<td>茶道</td>
<td>
<button class="edit btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-sm">編輯</button>
<button class="fire btn btn-danger">開除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>苑昊</td>
<td>翻車 不慫</td>
<td>
<button class="edit btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-sm">編輯</button>
<button class="fire btn btn-danger" data-dismiss="alert" aria-label="Close">開除
</button>
</td>
</tr>
</tbody>
</table>
<!-- Large modal -->
<button type="button" id="add" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">新增</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content" style="text-align: center">
<p>操做頁面(點灰色背景即退出,默認記住輸入)</p>
<div >
<label>姓名：
<input type="text" id="name">
</label>
</div>
<div>
<label>愛好：
<input type="text" id="hobby">
</label>
</div>
<button id="cancel" class="btn btn-default" type="button">重置</button>
<button id="submit" class="btn btn-default" type="button">提交</button>
</div>
</div>
</div>
<!--<button id="add" class="btn btn-default">新增</button>-->
<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<!--基本Jquery操做 開始-->
<script>
function hideModal () {
$('#name,#hobby').val("");
// $('.modal,.cover').addClass('hide') //因爲bootstrap不須要手動隱藏,因此不須要這個了
}
// 點擊modal中的cancel按鈕
$("#cancel").click(function () {
hideModal()
});
//點擊開除按鈕
$("table").on('click','.fire',function () {
$(this).parent().parent().remove();
});
// 點擊提交按鈕的功能
// 獲取用戶輸入值
// var name = $("#name").val();
// var hobby = $("#hobby").val();
$('#submit').on('click',(function () {
var name = $("#name").val();
var hobby = $("#hobby").val();
// 判斷是添加操做仍是編輯操做
var $editTr = $(this).data('xyh');
if ( $editTr=== undefined) {
// 建立一個tr標籤,把數據塞進去
var trEle = document.createElement('tr');
$(trEle).append('<td><input type="checkbox"></td>');
$(trEle).append('<td>' + name + '</td>');
// 將愛好寫入一個變量記錄
var tdTmp = document.createElement('td');
tdTmp.innerText=hobby;
$(trEle).append(tdTmp);
$(trEle).append(' <td>\n' +
' <button class="edit btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-sm">編輯</button>\n' +
' <button class="fire btn btn-danger" data-dismiss="alert" aria-label="Close">開除\n' +
' </button>\n' +
' </td>');
// 把上一步的tr追加到表格的tbody後面
$('tbody').append(trEle);
} else {
$editTr.children().eq(1).text(name);
$editTr.children().eq(2).text(hobby);
$('#submit').removeData('yxh');
}
hideModal();
}));
//點擊編輯按鈕要作的事情
$('body').on('click','.edit',function () {
// $('.modal,.cover').show();
var $currentTr = $(this).parent().parent();
var nameValue = $currentTr.children().eq(1).text();
var hobbyValue = $currentTr.children().eq(2).text();
// 把上一步獲取的值設置給input標籤
$('#name').val(nameValue);
$('#hobby').val(hobbyValue);
// 給模態框中的提交男褲綁定一個data
$('#submit').data('xyh', $currentTr);
})
</script>
</body>
</html>
演示部分
主體頁面
新增頁面
編輯頁面
- Footnote can have markup ↩
相關文章
- 1. V-Distpicker不能完整顯示內容
- 2. 測試內容
- 3. 2020-軟件測試內容整理
- 4. 測試整體報告內容
- 5. layout內容整理
- 6. 性能測試過程與內容
- 7. 性能測試 專題內容
- 8. jQuery Validate W3C內容
- 9. jQuery---內容複習
- 10. 安全測試內容
- 更多相關文章...
- • jQuery Mobile 列表內容 - jQuery Mobile 教程
- • Eclipse 內容輔助 - Eclipse 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Docker容器實戰(六) - 容器的隔離與限制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. V-Distpicker不能完整顯示內容
- 2. 測試內容
- 3. 2020-軟件測試內容整理
- 4. 測試整體報告內容
- 5. layout內容整理
- 6. 性能測試過程與內容
- 7. 性能測試 專題內容
- 8. jQuery Validate W3C內容
- 9. jQuery---內容複習
- 10. 安全測試內容