使用JQuery完成頁面定時彈出廣告
使用JQuery完成表格的隔行換色
使用JQuery完成復選框的全選效果
使用JQuery完成省市聯動效果
使用JQuery完成下列列表左右選擇
使用JQuery完成表單的校驗.
今日目標：
掌握JQuery的基本使用
掌握JQuery的基本選擇器,層次選擇器
會使用JQuery完成DOM的基本操作
定時彈出廣告
-
定時器: setInterval setTimeout
-
clearInterval
-
-
style.display : none 隱藏 block顯示
注冊表單:
-
事件: onfocus 獲焦點 onblur 失去焦點 onkeyup 按鍵抬起的時候
-
正則表達式校驗郵箱. js . <script src=""></script>
-
<script type="text/javascript" src="../js/check.js" ></script>
-
-
onsubmit = "return checkForm()"
表格隔行換色
-
table.rows
-
row.style.backgroundColor
-
-
window.onload
表格全選和全不選:
checked屬性:
document.getElementById()
document.getElementsByName() 返回的是一個數組
省市聯動:
DOM:
//創建節點: document.createElement()
//創建文本節點: document.createTextNode()
//添加節點: appendChild()
商品左右選擇中:
事件:
select改變的時候:
onchange
ondbclick()
1. 使用JQuery完成頁面定時彈出廣告
1.1 需求分析：
當用戶打開界面，3秒鍾之后彈出廣告，這個廣告顯示5秒鍾，隱藏廣告
如何定時彈出廣告
如何顯示廣告
如何隱藏廣告
1.2 技術分析
【什么是JQuery】
【JQuery的作用是什么】
它封裝了很多效果，事件，能夠大大的提高我們的開發效率
將我們的頁面和Js分離出來
【JQuery的入門】
<script>
window.onload = function(){
alert("window.onload 結束");
}
window.onload = function(){
alert("window onload 2 結束啦")
}
//jQuery的寫法
jQuery(document).ready(function(){
alert("jquery ready 結束");
});
jQuery(document).ready(function(){
alert("jqeuery ready 結束啦");
});
//我們發現ready時間可以被多次調用，並且不會像window.onload時間一樣被覆蓋，執行順序是按定義順序執行
// jQuery = $
$(document).ready(function(){
alert("jqeuery ready 結束啦啦啦");
});
//更加簡潔的寫法
$(function(){
alert("jquery 終極簡潔版");
});
</script>
【JQ和JS之間的轉換】
JS對象只能調用JS的屬性和方法
JQ對象只能調用JQ的屬性和方法
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
//1. 給按鈕注冊事件， onclick 事件
//2. 實現事件對應的函數
function change(){
//找到span 元素
var span = document.getElementById("span");
// span.innerHTML="我被JS按鈕修改了內容";
$(span).html("我調用了JQ的方法");
}
$(function(){
//1.需要找到要綁定事件的元素
$("#jq_btn").click(function(){
//2. 找到我們要操作的元素
//$("#span").html("我被JQ按鈕修改啦");
$("#span")[0].innerHTML="我調用的是JS屬性";
$("#span").get(0).innerHTML="我通過get(0)調用的是JS屬性";
});
});
</script>
【JQ中根據ID查找元素】
$("#ID") JQuery中的ID選擇器
【JQ中的動畫效果】
show : 控制元素顯示
hide : 隱藏元素
toggle : 開關效果，循環調用
slideDown : 向下滑動
slideUp : 向上滑動
slideToggle : 開關上下滑動
animate : 自定義動畫
stop : 停止動畫
delay : 延遲執行
1.3 步驟分析：
-
注冊一個JQ中ready 事件
-
3秒之后顯示廣告， show(3000);
-
顯示5秒鍾
-
隱藏廣告
代碼實現
/*
1. 確定事件 : onload
2. 文檔加載完成,三秒之后彈出廣告(先得找到要顯示的廣告元素)
3. 廣告顯示三秒鍾
4. 隱藏廣告
* */
$(function(){
function showAD(){
$("#ad").show();
setTimeout(hideAD,3000);
}
function hideAD(){
$("#ad").hide();
}
setTimeout(showAD,1000);
});
JQuery中的選擇器
選擇器的目的是讓我們能夠更加精確的找到頁面中的元素
基本選擇器
-
ID選擇器
$("#id") -
類選擇器
$(".className") -
元素選擇器
$("元素的名稱") -
通配符選擇器
$("*") -
選擇器,選擇器
$("#id,.className")
基本選擇器的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ的基本選擇器</title>
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//ID選擇器
$("#btn_id").click(function(){
$("#one").css("backgroundColor","#bbffaa");
});
//元素選擇器
$("#btn_element").click(function(){
$("div").css("backgroundColor","#bbffaa");
});
//類選擇器
$("#btn_mini").click(function(){
$(".mini").css("backgroundColor","#bbffaa");
});
//通配符選擇器
$("#btn_all").click(function(){
$("*").css("backgroundColor","#bbffaa");
});
//多選擇器
$("#btn_selector").click(function(){
$(".mini,span").css("backgroundColor","#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value="選擇ID為one的元素" id="btn_id" />
<input type="button" value="選擇所有div元素" id="btn_element" />
<input type="button" value="選擇所有mini類的元素" id="btn_mini" />
<input type="button" value="通配符選擇器" id="btn_all" />
<input type="button" value="多選擇器" id="btn_selector" />
<hr />
<div id="one">
<div class="mini">
1-111
</div>
</div>
<div id="two">
<div class="mini">
2-111
</div>
<div class="mini">
2-222
</div>
</div>
<div id="three">
<div class="mini">
3-111
</div>
<div class="mini">
3-222
</div>
<div class="mini">
3-333
</div>
</div>
<span id="four">
span
</span>
</body>
</html>
JQ中的層級選擇器
-
Ancestor descendant后代選擇器
-
parent > child子元素選擇器
-
prev + next 兄弟元素選擇器
-
prev
~siblings 所有兄弟選擇器
JQ中層級選擇器案例代碼
<html>
<head>
<meta charset="UTF-8">
<title>JQ的層級選擇器</title>
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//ancestor descendant 后代選擇器
$("#btn1").click(function(){
$("body div").css("backgroundColor","#bbffaa");
});
//parent > child 父子選擇器
$("#btn2").click(function(){
$("body > div").css("backgroundColor","#bbffaa");
});
//prev + next 父子選擇器
$("#btn3").click(function(){
$("#two + div").css("backgroundColor","#bbffaa");
});
//prev + next 兄弟選擇器
$("#btn3").click(function(){
$("#two + div").css("backgroundColor","#bbffaa");
});
//prev ~ next 同輩選擇器
$("#btn4").click(function(){
$("#one ~ div").css("backgroundColor","#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value="選擇body中所有的后代div" id="btn1" />
<input type="button" value="選擇body中所有的子div" id="btn2" />
<input type="button" value="選擇id為two的下一個元素" id="btn3" />
<input type="button" value="選擇id為one的所有同輩" id="btn4" />
<hr />
<div id="one">
<div class="mini">
1-111
</div>
</div>
<div id="two">
<div class="mini">
2-111
</div>
<div class="mini">
2-222
</div>
</div>
<div id="three">
<div class="mini">
3-111
</div>
<div class="mini">
3-222
</div>
<div class="mini">
3-333
</div>
</div>
<span id="four">
span
</span>
</body>
</html>
JQ中的基本過濾器
<html>
<head>
<meta charset="UTF-8">
<title>JQ的基本過濾器</title>
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//找到第一個mini div
$("#btn1").click(function(){
$(".mini:first").css("backgroundColor","#bbffaa");
});
//找到最后一個mini div
$("#btn2").click(function(){
$("div .mini:last").css("backgroundColor","#bbffaa");
});
//過濾基數/偶數div
$("#btn3").click(function(){
$("body div:odd").css("backgroundColor","#FFFFEE");
$("body div:even").css("backgroundColor","#bbffaa");
});
//找出所有的div 剔除id為two
$("#btn4").click(function(){
$("body div:not(#two)").css("backgroundColor","#FFFFEE");
});
});
</script>
</head>
<body>
<input type="button" value="找出第一個mini div" id="btn1" />
<input type="button" value="找出最后一個mini div" id="btn2" />
<input type="button" value="過濾基數/偶數div" id="btn3" />
<input type="button" value="找過所有div 剔除Id為two" id="btn4" />
<hr />
<div id="one">
<div class="mini">
1-111
</div>
</div>
<div id="two">
<div class="mini">
2-111
</div>
<div class="mini">
2-222
</div>
</div>
<div id="three">
<div class="mini">
3-111
</div>
<div class="mini">
3-222
</div>
<div class="mini">
3-333
</div>
</div>
<span id="four">
span
</span>
</body>
</html>
JQ中的屬性選擇器
<html>
<head>
<meta charset="UTF-8">
<title>JQ的屬性選擇器</title>
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//選擇有title屬性的div
$("#btn1").click(function(){
$("div[title]").css("backgroundColor","#bbffaa");
});
//選擇有title='bbb'屬性的div
$("#btn2").click(function(){
$("div[title='bbb']").css("backgroundColor","#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" value="選擇有title屬性的div" id="btn1" />
<input type="button" value="選擇有title='bbb'屬性的div" id="btn2" />
<hr />
<div id="one">
<div class="mini" title="aaa">
1-111
</div>
</div>
<div id="two">
<div class="mini" title="bbb">
2-111
</div>
<div class="mini">
2-222
</div>
</div>
<div id="three">
<div class="mini">
3-111
</div>
<div class="mini">
3-222
</div>
<div class="mini">
3-333
</div>
</div>
<span id="four">
span
</span>
</body>
</html>
JQ中的表單過濾器
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$(":text").css("background-color","#E9FBEB")
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="篩選出所有的input" />
<hr />
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
</body>
</html>
定時彈出廣告:
slideDown : 必須得指定寬度
show()
hide()
選擇器
-
基本選擇器:
-
ID選擇器 #
-
類選擇器 .
-
元素選擇器 元素的名稱
-
通配符選擇器 *
-
選擇器選擇器 選擇器1, 選擇器2
-
-
層級選擇器:
-
后代選擇器 : 選擇器 選擇器
-
子元素選擇器: 選擇器1 > 選擇器2
-
相鄰兄弟選擇器: 選擇器 + 選擇器2
-
找到所有兄弟選擇器: 選擇器1
~選擇器2
-
-
屬性選擇器
使用JQ完成表格的隔行換色
需求分析:
在我們的實際開發過程中,我們的表格如果所有的行都是一樣的話,很容易看花眼,所以我們需要讓我們的表格隔行換色
技術分析:
代碼實現
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
//頁面加載
$(document).ready(function(){
//獲取表單
$("tbody tr:odd").css("background-color","#FF0000");
$("tbody tr:even").css("background-color","#FFF38F");
$("tr").click(function(){
var $color = $(this).css("background-color");
var $this = $(this);
$(this).css("background-color","yellow");
$(this).click(function(){
$this.css("background-color",$color);
});
});
//表單的全選與全不選
/*$("#ck1").click(function(){
var v = this.checked;
//alert(v);
$("input[name='ck2']").each(function(index,name){
//alert(this.checked);
this.checked = v;
});
});*/
$("#ck1").click(function(){
//檢查id為#ck1是否被選中,選中為true,未選中為false
var flag = $(this).prop("checked");
$("input[name='ck2']").prop("checked",flag);
});
});
</script>
</head>
<body>
<table id="table1" border="1px" width="700px" height="200px" align="center">
<thead>
<tr>
<td>
<input type="checkbox" id="ck1"/>
</td>
<th>
分類ID
</th>
<th>
分類名稱
</th>
<th>
分類商品
</th>
<th>
分類描述
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>
<input onclick="checkAll()" type="checkbox" name="ck2" />
</td>
<td>
1
</td>
<td>
手機數碼
</td>
<td>
三星NOTE7,IPhone7
</td>
<td>
這里面放的都是最新手機
</td>
<td>
<a href="#">修改</a>|
<a href="#">刪除</a>
</td>
</tr>
<tr align="center">
<td>
<input onclick="checkAll()" type="checkbox" name="ck2" />
</td>
<td>
2
</td>
<td>
黃鶴樓,雙喜,長白山,白沙
</td>
<td>
分類商品
</td>
<td>
這里面都是香煙
</td>
<td>
<a href="#">修改</a>|
<a href="#">刪除</a>
</td>
</tr>
<tr align="center">
<td>
<input onclick="checkAll()" type="checkbox" name="ck2" />
</td>
<td>
3
</td>
<td>
電腦辦公
</td>
<td>
MBP,聯想
</td>
<td>
電腦
</td>
<td>
<a href="#">修改</a>|
<a href="#">刪除</a>
</td>
</tr>
<tr align="center">
<td>
<input onclick="checkAll()" type="checkbox" name="ck2" />
</td>
<td>
4
</td>
<td>
冰箱洗衣機
</td>
<td>
海爾,格力,三菱,美的
</td>
<td>
冰箱洗衣機
</td>
<td>
<a href="#">修改</a>|
<a href="#">刪除</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
使用JQuery完成表單的全選全不選功能
需求分析
在我們對表格處理的時,有些情況下,我們需要對表格進行批量處理,
技術分析:
通過JQ來修改頁面元素的屬性, 演示代碼如下
$(function(){
$("#bt1").click(function(){
// 獲得屬性的值
// alert($("#img1").attr("src"));
// 修改屬性的值:
$("#img1").attr("src","../../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg");
});
});
代碼實現:
$(function(){
/*
1. 確定事件 onclick
2. 要操作的元素: 頂部全選按鈕
3. 實現點擊事件
* 獲取當前選中的狀態
* 使用過濾器,過濾出所有的checkbox
* 改變他們的狀態
*/
$("#ckall").click(function(){
// var checked = $("#ckall").prop("checked");
var checked = this.checked;
// alert(checked);
$("tbody input[type='checkbox']").prop("checked",checked);
})
});
使用JQ完成省市聯動效果
需求分析:
在我們的注冊表單中,通常我們需要知道用戶的籍貫,需要一個給用選擇的項,當用戶選中了省份之后,列出省下面所有的城市
技術分析:
-
JQuery中的遍歷:
-
一種方法:
JQ的對象.each(function(i,n){});
-
第二種方法:
$.each(數組,function(i,n){});
-
-
如何使用JQ來添加元素
JQuery的DOM操作
JQ中添加元素:
append(); 添加字節點
appendTo(); 將自己添加到
步驟分析:
定義一個二維數組,用來保存城市的信息
確定事件 onchange事件
找到要操作的select
獲取選中的城市
動態添加option節點到城市select中
代碼實現:
var provinces = [
["武漢市","黃石市","隨州市","荊門市"],
["長沙市","株洲市","邵陽市"],
["廣州市","深圳市","東莞市","惠州市"]
];
$(function(){
$("#selectProvince").change(function(){
//alert(this.value);
var cities = provinces[this.value];
// $("#selectCity").empty();
$("#selectCity")[0].options.length = 0;
$(cities).each(function(i,n){
$("#selectCity").append("<option>"+n+"</option>")
});
});
});
使用JQ完成下拉列表左右選擇
需求分析
我們的商品通常包含已經有了的, 還有沒有的,現在我們需要有一個頁面用於動態編輯這些商品
技術分析
JQuery中的選擇器使用,還有文檔的增刪
步驟分析
引入jquery文件
頁面加載完成的事件
在鏈接上添加一個事件
使用append()函數將選中的option 添加子節點
代碼實現
$(function(){
$("#clickOne").click(function(){
// var value = $("#selectLeft>option:selected").val();
$("#selectRight").append($("#selectLeft>option:selected"));
// $("#selectLeft>option:selected").appendTo("#selectRight");
});
$("#clickAll").click(function(){
$("#selectRight").append($("#selectLeft>option"));
});
});
使用JQ完成表單的校驗
需求分析
在用戶提交表單的時候, 我們最好是能夠在用戶數據提交給服務器之前去做一次校驗,防止服務器壓力過大,並且需要給用戶一個友好提示
技術分析
需要用到事件:
-
blur事件
-
focus事件
-
keyup事件
-
submit事件
步驟分析
為輸入框添加blur事件
在blur事件觸發的函數中,獲得文本框
判斷用戶輸入的值是否為空,如果為空,提示一下
添加submit事件
判斷表單上的錯誤數量
代碼實現
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/style2.css" />
<link rel="stylesheet" href="../css/main.css" />
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//給所有必填項添加一個小紅點
$("form .required").parent().append("<b class='high'>*<b>");
//給所有的框添加一個blur事件
$("form input").blur(function(){
var $parent = $(this).parent();
//移除原有的span
$parent.find(".formtips").remove();
//判斷當前在處理的控件
if($(this).is("#username")){
if(this.value == ""){
//<span>用戶名不能為空!</span>
$parent.append("<span class='formtips onError'>用戶名不能為空!</span>");
}else{
//<span>用戶名輸入正確!</span>
$parent.append("<span class='formtips onSuccess' >用戶名輸入正確!</span>");
}
}
if($(this).is("#password")){
if(this.value == ""){
$parent.append("<span class='formtips onError'>密碼不能為空!</span>");
}else{
$parent.append("<span class='formtips onSuccess' >密碼輸入正確!</span>");
}
}
// /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/
if($(this).is("#mail")){
if(/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/.test(this.value)){
$parent.append("<span class='formtips onSuccess'>郵箱格式正確!</span>");
}else{
$parent.append("<span class='formtips onError' >郵箱格式不對!</span>");
}
}
}).focus(function(){
$(this).triggerHandler("blur");
}).keyup(function(){
$(this).triggerHandler("blur");
});
$("form").submit(function(){
$("form .required").trigger("focus");
//看看哪一行不為0
var length = $("form .onError").length
//alert(length);
if(length > 0){
return false;
}
});
});
</script>
</head>
<body>
<div>
<div>
<div class=top>
<img src="../img/logo2.png" />
</div>
<div class="top">
<img src="../img/header.png" />
</div>
<div class="top" style="padding-top: 20px; height:40px">
<a>登錄</a>
<a>注冊</a>
<a>購物車</a>
</div>
</div>
<!--定義一個空的div 用於<br />clear浮動-->
<div class="clear"></div>
<!--導航欄-->
<div style="border: 1px black solid; height: 38px;font-size: 15px;color: white;width: 100%; ">
<ul>
<li style="display: inline;">首頁</li>
<li style="display: inline;">手機數碼</li>
<li style="display: inline;">電腦辦公</li>
<li style="display: inline;">鞋靴箱包</li>
<li style="display: inline;">洗漱用品</li>
</ul>
</div>
<div style="background: url(../img/regist_bg.jpg); height: 500px;width: 100%;margin: 10px 0px;">
<div style="border: 5px solid black;width:800px; height: 400px; position: absolute;top: 150px;left: 310px;">
<h3>用戶注冊</h3>
<form action="../案例四：網站首頁/index.html" method="get" enctype="application/x-www-form-urlencoded">
<table width="100%" height="100%" align="center">
<tr>
<td>用戶名：</td>
<td><input type="text" id="username" class="required"/></td>
</tr>
<tr>
<td>密 碼：</td>
<td><input type="password" id="password" class="required"/></td>
</tr>
<tr>
<td>確認密碼：</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>郵箱：</td>
<td><input type="text" class="required" id="mail"/></td>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>性別：</td>
<td><input type="radio" name="sex" />男<input type="radio" name="sex" />女</td>
</tr>
<tr>
<td>出生日期：</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>驗證碼：</td>
<td><input type="text" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交" style="background: url(../img/register.gif);" />
</td>
</tr>
</table>
</form>
</div>
</div>
<!--信息欄-->
<div>
<img src="../img/footer.jpg" />
</div>
<div align="center">
<a href="#">關於我們</a>
<a href="#">聯系我們</a>
<a href="#">招賢納士</a>
<a href="#">法律聲明</a>
<a href="#">友情鏈接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服務聲明</a>
<a href="#">廣告聲明</a><br /> Copyright © 2005-2016 xx商城 版權所有
</div>
</div>
</body>
</html>