jQuery心得4--jQuery案例剖析2-開發實用案例
1.窗體執行就載入函式的dom寫法與jQuery的區別與jQuery的三種寫法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo1.html</title>
<!-- 引入jQuery的庫 -->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
/* 第一種寫法：第二種winod.onload會覆蓋第一種
window.onload = function(){
alert("one");
};
window.onload = function(){
alert("two");
}; */
/* 第二種寫法：同樣後面的也會覆蓋前面的
var one=function one(){
alert("one");
};
var two=function one(){
alert("two");
};
window.onload = one;
window.onload = two; */
//下面三種jQuery的寫法，可以同時載入觸發事件
/* //第一種：
$(function(){
alert("one");
});
$(function(){
alert("two");
});
//第二種：
$(document).ready(function(){
alert("hello one");
});
$(document).ready(function(){
alert("hello two");
});
*/
//第三種：
$().ready(function(){
alert("hello one");
});
$().ready(function(){
alert("hello two");
});
</script>
</head>
<body>
<div>
</div>
</body>
</html>
2.仿各大網站的註冊外掛之jquery編寫的條款多選框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo2.html</title>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //當窗體載入完畢觸發匿名函式
//id選擇器
var $submitBtn = $("#submitBtn");
/* //為按鈕註冊點選事件
$submitBtn.click(function(){
alert("點選");
}); */
/* //通過jQuery物件與dom物件相互轉換完成操作
//為按鈕繫結點選事件;第一個引數是繫結事件的型別，第二個引數是觸發的函式
$submitBtn.bind("click",function(){
var $ckb = $("#agreeckb"); //獲取checkbox的元素物件
//把jQuery物件轉換成dom物件
var ckbDom = $ckb[0]; //通過陣列下表獲取，還有一種通過get（index）；
if(ckbDom.checked){
alert("同意註冊");
}else{
alert("請選擇同意條款");
}
}); */
//直接通過jQuery物件的操作實現操作
$submitBtn.click(function(){
var $ckb = $("#agreeckb");
//:checked 是表單過濾器必須這樣寫！
if($ckb.is(":checked")){
alert("同意註冊");
}else{
alert("請選擇同意條款");
}
});
});
</script>
</head>
<body>
註冊條款：<input type="checkbox" id="agreeckb"/>我已仔細閱讀並接受註冊條款
<input type="button" value="註冊" id="submitBtn"/>
</body>
</html>
3.Jquery的左右移動
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo3.html</title>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//獲取按鈕的元素物件
var $lromve = $("#lromve");
var $lromves = $("#lromves");
//右移操作
//繫結click事件，選中的右移
$lromve.bind("click", function() {
//選取id=lopt下面的所有子元素為option的並且被選中的option物件的集合
var $opts = $("#lopt>option:selected");
//在id=ropt的的select中新增option物件集合
$("#ropt").append($opts);
});
//繫結click事件；全部右移
$lromves.bind("click", function() {
var $opts = $("#lopt>option");
$("#ropt").append($opts);
});
//雙擊的右移操作
$("#lopt").bind("dblclick", function() {
//選取id=lopt下面的所有子元素為option的並且被選中的option物件的集合
var $opts = $("#lopt>option:selected");
//在id=ropt的的select中新增option物件集合
$("#ropt").append($opts);
});
//左移操作
//獲取按鈕的元素物件
var $rromve = $("#rromve");
var $rromves = $("#rromves");
//繫結click事件
$rromve.bind("click", function() {
//選取id=lopt下面的所有子元素為option的並且被選中的option物件的集合
var $opts = $("#ropt>option:selected");
//alert($opts.text);
//在id=ropt的的select中新增option物件集合
$("#lopt").append($opts);
});
//繫結click事件
$rromves.bind("click", function() {
var $opts = $("#ropt>option");
$("#lopt").append($opts);
});
//雙擊的左移操作
$("#ropt").bind("dblclick", function() {
//選取id=lopt下面的所有子元素為option的並且被選中的option物件的集合
var $opts = $("#ropt>option:selected");
//在id=ropt的的select中新增option物件集合
$("#lopt").append($opts);
});
});
</script>
</head>
<body>
<div>
<div style="float: left; width: 200px; height: 300px; background-color: lightsteelblue; text-align: center;">
<select id="lopt" multiple="multiple" size="9" style="width:80px;">
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
<option>選項4</option>
<option>選項5</option>
<option>選項6</option>
<option>選項7</option>
<option>選項8</option>
<option>選項9</option>
</select><br><br><input type="button" id="lromves" value="全部右移"
style="width: 80px;" /><input type="button" id="lromve"
value="選中的右移" style="width: 80px;" />
</div>
<div style="width: 200px; height: 300px; background-color: red; text-align: center;">
<select id="ropt" multiple="multiple" size="9" style="width: 80px;">
</select><br><br><input type="button" id="rromves" value="全部左移"
style="width: 80px;" /><input type="button" id="rromve"
value="選中的左移" style="width: 80px;" />
</div>
</div>
</body>
</html>
4.jquery的多選反選和全不選
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo4.html</title>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//全選
$("#ckbAll").click(function() {
$("input[name='fav']").each(function() {
this.checked = true; //dom物件寫法
});
//$("input[name='fav']").attr("checked", true); //jQuery物件寫法，有bug，點選兩回之後就不起作用了
});
//選不選
$("#ckbNo").click(function() {
$("input[name='fav']").attr("checked", false);
});
//反選
$("#ckbRec").click(function() {
$("input[name='fav']").each(function() {
//$(this).attr("checked", !$(this).attr("checked")); //jQuery物件的寫法
this.checked = !this.checked; //dom物件寫法
});
});
});
</script>
</head>
<body>
<div>
<input type="checkbox" name="fav" value="看書1" />看書1 <input
type="checkbox" name="fav" value="看書2" />看書2 <input type="checkbox"
name="fav" value="看書3" />看書3 <input type="checkbox" name="fav"
value="看書4" />看書4 <input type="checkbox" name="fav" value="看書5" />看書5
</div>
<div>
<input type="button" value="全選" id="ckbAll"/>
<input type="button" value="全不選" id="ckbNo" />
<input type="button" value="反選" id="ckbRec" />
</div>
</body>
</html>
5.仿各大網站的註冊移走游標變色操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo5.html</title>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* $("input").bind("blur",function(){
}); */
//:input獲取的是所有input標籤中的各種型別的元素物件,以及textarea、select等多種標籤；input只獲取前者，即input標籤所屬的屬性
$(":input").blur(function(){
$(this).each(function(){
//if(""==this.value.trim()){
if(""==$(this).val().trim()){
$(this).addClass("blur");
}else{
$(this).removeClass("blur");
}
});
});
});
</script>
<style type="text/css">
.blur{
border:1px solid red;
}
</style>
</head>
<body>
<form action="">
使用者名稱：<input type="text" name="ubane"/><br><br>
密 碼：<input type="password" name="ubane"/><br><br>
郵 箱：<input type="text" name="ubane"/><br><br>
個人介紹：<textarea rows="10" cols="30"></textarea>
</form>
</body>
</html>
6.tbody交替變色操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo2.html</title>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
//當文件載入完畢觸發匿名函式
$(document).ready(function(){
//有點區別，研究一下
$("tbody tr:even").css("background-color","blue");
$("tbody>tr:nth-child(even)").css("background-color","yellow");
$("tbody>tr:nth-child(odd)").css("background-color","red"); //會替換紅顏色
});
</script>
</head>
<body>
<table border="1" bordercolor="teal">
<thead>
<th>序號</th>
<th>姓名</th>
<th>性別</th>
<th>職位</th>
</thead>
<tbody>
<tr id="row1" bgcolor="red" title="aa">
<td>1</td>
<td>redarmy</td>
<td>M</td>
<td>殭屍</td>
</tr>
<tr id="row2">
<td>2</td>
<td>kai</td>
<td>M</td>
<td>牛掰</td>
</tr>
<tr id="row3">
<td>3</td>
<td>redarmy2</td>
<td>M</td>
<td>殭屍</td>
</tr>
<tr id="row4">
<td>4</td>
<td>redarmy3</td>
<td>M</td>
<td>殭屍</td>
</tr>
<tr>
<td>5</td>
<td>redarmy4</td>
<td>M</td>
<td>殭屍</td>
</tr>
</tbody>
</table>
</body>
</html>
相關文章
- 深度剖析Reflect + 實戰案例
- JQuery8：實戰案例jQuery
- HarmonyOS NEXT應用開發案例——列表編輯實現
- jQuery入門（四）案例jQuery
- Kafka ACL實現架構以及實操案例剖析Kafka架構
- HarmonyOS NEXT應用開發之MpChart圖表實現案例
- HarmonyOS NEXT應用開發—城市選擇案例
- 演算法案例2-求冰雹數 java程式碼實現演算法Java
- jquery中淡入淡出效果案例jQuery
- Android元件化開發實踐和案例分享Android元件化
- [應用案例]OT應用案例之dasdig
- HarmonyOS NEXT應用開發—翻頁動效案例
- babel 外掛開發案例Babel
- 鴻蒙開發案例：直尺鴻蒙
- python開發例項-python開發案例Python
- 《網路爬蟲開發實戰案例》筆記爬蟲筆記
- HarmonyOS NEXT應用開發案例—使用彈簧曲線實現抖動動畫及手機振動效果案例動畫
- 網站返回頂部jquery js實現程式碼方式案例網站jQueryJS
- HarmonyOS NEXT應用開發之異常處理案例
- HarmonyOS NEXT應用開發之深色跑馬燈案例
- [應用案例]完美自適應WEB開發官網Web
- [應用案例]onethink開發個人技術部落格
- 鴻蒙開發案例：指南針鴻蒙
- 前端與移動開發----jQuery----JQuery動畫，JQ操作元素屬性，JQ操作元素樣式(大量案例)前端移動開發jQuery動畫
- 金融科技行業 OKR 實用案例行業OKR
- Power BI實用案例——存貨分析
- Python str字串實用小案例分享！Python字串
- [譯] 如何在實際開發案例中掌握 Async/AwaitAI
- [應用案例]建百站素材分享網站-Onethink開發網站
- [開發案例]最近用ThinkPHP+bootstrap3寫的後臺PHPboot
- iOS混合開發庫(GICXMLLayout)佈局案例分析(1)今日頭條案例iOSXML
- Android熱修復(Hot Fix)案例全剖析（一）Android
- AIGC應用案例AIGC
- WAP2.0開發 網站案例網站
- hadoop專案開發案例舉例Hadoop
- critters 開發包的使用案例分享
- Mybatis註解開發案例（入門）MyBatis
- 鴻蒙開發案例：分貝儀鴻蒙
- 鴻蒙NEXT開發案例：轉盤鴻蒙