jQuery 多種高階頁面屬性和動畫效果
阿新 • • 發佈：2019-01-08
完成目標：利用jQuery語法完成多種頁面屬性和動畫效果
1.文字淡入淡出，顯示及隱藏。
程式碼：
效果：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.4.2.min.js"></script> <script> $(function () { $('p').click(function () { $('p').toggle("slow") }) $('div').click(function () { $('p').toggle("slow") }) }) </script> </head> <body> <p>可隱藏。可顯示</p> <p>可隱藏。可顯示</p> <div>點選</div> </body> </html>
2.點選按鈕使文字放大。
程式碼：
效果：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.4.2.min.js"></script> <style> </style> <script> $(function () { $('#go').click(function () { $('#block').animate({ width: "90%", height: "100%", fontSize: "10em", borderWidth: 10 },1000) }) }) </script> </head> <body> <button id="go"> Run</button> <div id="block">Hello!</div> </body> </html>
3.圖片或文字的左移或右移，並伴隨逐漸消失和逐漸顯示效果
程式碼：
效果：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.4.2.min.js"></script> <style> .block{ background-image: url("../image/1.jpg"); width: 500px; height: 500px; position: relative; } </style> <script> $(function () { $("#right").click(function(){ $(".block").animate({left: '+150px',height: 'toggle', opacity: 'toggle'}, "slow"); }); $("#left").click(function(){ $(".block").animate({left: '-150px'}, "slow"); $(".block").animate({ height: 'toggle', opacity: 'toggle' }, "slow"); }); }) </script> </head> <body> <button id="left">«</button> <button id="right">»</button> <div class="block"></div> </body> </html>
4.利用jQuery程式碼完成對錶格的修改、儲存和CheckBox的全選功能。
方法1：不適用於大型表格和資料，多用於練習使用。
程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.4.2.min.js"></script>
<script>
$(function () {
$('#checkAll').click(function () {
if(this.checked){
$('.check').attr("checked",true);
}else {
$('.check').attr("checked",false);
}
})
$('.change').click(function () {
var ok=$(this).parents("tr");
var tdText1=ok.find("td:eq(1)").html();
var tdText2=ok.find("td:eq(2)").html();
var tdText3=ok.find("td:eq(3)").html();
var a=$("<input type='text' id='name'>");
var b=$("<input type='text' id='sex'>");
var c=$("<input type='text' id='age'>");
ok.find("td:eq(1)").html(a);
ok.find("td:eq(2)").html(b);
ok.find("td:eq(3)").html(c);
a.val(tdText1);
b.val(tdText2);
c.val(tdText3);
})
$('.save').click(function () {
var ok=$(this).parents("tr");
var text=document.getElementById("name");
var text1=document.getElementById("sex");
var text2=document.getElementById("age");
ok.find("td:eq(1)").html(text.value);
ok.find("td:eq(2)").html(text1.value);
ok.find("td:eq(3)").html(text2.value);
})
})
</script>
</head>
<body>
<table border="1" >
<tr align="center">
<td><input type="checkbox" id="checkAll"></td>
<td width="100px">姓名</td>
<td width="100px">性別</td>
<td width="100px">年齡</td>
<td width="100px">操作</td>
</tr>
<tr align="center">
<td><input type="checkbox" class="check"></td>
<td >張三</td>
<td >男</td>
<td >18</td>
<td>
<input type="button" value="編輯" class="change" style="float: left">
<input type="button" value="儲存" class="save">
</td>
</tr>
<tr align="center">
<td><input type="checkbox" class="check"></td>
<td>李四</td>
<td >女</td>
<td>20</td>
<td>
<input type="button" value="編輯" class="change" style="float: left">
<input type="button" value="儲存" class="save">
</td>
</tr>
<tr align="center">
<td><input type="checkbox" class="check"></td>
<td>王五</td>
<td >男</td>
<td>25</td>
<td>
<input type="button" value="編輯" class="change" style="float: left">
<input type="button" value="儲存" class="save">
</td>
</tr>
</table>
</body>
</html>
方法2：可適用於大型表格，也可做開發使用。並增加刪除和新增行的功能。
程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可編輯的表格</title>
<script src="jquery-1.4.2.min.js"></script>
<style>
table{
border: 1px solid black;
border-collapse: collapse;
width: 500px;
}
table th {
border: 1px solid black;
width: 25%;
}
table td {
align-items: center;
border: 1px solid black;
width: 25%;
}
table th {
background-color: #A3BAE9;
}
</style>
<script>
//文件準備就緒
$(function () {
//設定 所有 td 居中
$('table td').attr("align","center");
//標籤+屬性選擇所有<編輯>按鈕
$('input[value="編輯"]').click(function () {
//獲取每一個<編輯>按鈕的 下標（從0開始 所以需要+2 = 按鈕在表格的所在行數）
var numId = $('input[value="編輯"]').index($(this))+2;
//選擇表格中的所有tr 通過eq方法取得當前tr
var ttr = $('table tr').eq(numId);
/*當前行使用find方法找到每一個td列
each方法為每一個td設定function
*/
ttr.find("td").each(function () {
/*過濾 td中的元素
checkbox 、 button、text 不需要執行append
注意 return 為 跳出當前 each
return false 為 跳出整個 each
*/
if($(this).children("input[type='checkbox']").length>0){
return ;
}
if($(this).children("input[type='button']").length>0){
return ;
}
if($(this).children("input[type='text']").length>0){
return ;
}
var tdText = $(this).html();
$(this).html("");
var inputObj = $("<input type='text'>");
inputObj.appendTo($(this));
inputObj.css("width","95%");
inputObj.val(tdText);
});
})
//為每一個確定按鈕設定點選事件
$('input[value="確定"]').click(function () {
/*通過parents方法獲取<確定>按鈕的父容器tr
再為 tr中的每一個text設定function
*/
var ttr=$(this).parents("tr");
ttr.find('input[type="text"]').each(function () {
var inputVal = $(this).val();
$(this).parents('td').html(inputVal);
})
})
//全選/反選
$('#cha').click(function () {
//判斷checkbox是否選中
if($(this).is(':checked')){
$('input[type="checkbox"]').attr("checked","true");
}else{
$('input[type="checkbox"]').removeAttr("checked");
}
})
$('#add').click(function () {
$('table tr').eq(2).clone(true).appendTo("table");
})
$('#del').click(function () {
$('tr:last').remove();
})
})
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th colspan="4">編輯表格</th>
</tr>
</thead>
<tr>
<th><input type="checkbox" id="cha"></th>
<th>學號</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>000001</td>
<td>張三</td>
<td >
<input type="button" value="編輯" >
<input type="button" value="確定" >
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>000002</td>
<td>李四</td>
<td>
<input type="button" value="編輯" >
<input type="button" value="確定" >
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>000003</td>
<td>王五</td>
<td>
<input type="button" value="編輯" >
<input type="button" value="確定" >
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>000004</td>
<td>趙六</td>
<td>
<input type="button" value="編輯" >
<input type="button" value="確定" >
</td>
</tr>
<input type="button" value="新增" id="add">
<input type="button" value="刪除" id="del">
</table>
</body>
</html>
