jQuery
大綱:
jQuery-Dom操作
jQuery效果
jQuery遍歷
jQuery的事件總結
常見事件
事件和事件源的綁定
事件切換
jQuery插件
插件機制
validate插件
jQuery效果
基本:高和寬都變化
hide([毫秒值]):隱藏(幾毫秒後完成隱藏)
show([毫秒值]):展示(幾毫秒後完成展示)
toggle([毫秒值]):切換(幾毫秒後完成切換)
滑入滑出:高變化
slideUp([毫秒值]):滑出
slideDown([毫秒值]):滑入
slideToggle([毫秒值]):切換
淡入淡出:
fadeIn([毫秒值]):淡入
fadeOut([毫秒值]):淡出
fadeToggle([毫秒值]):切換
瞭解:
fadeToggle(毫秒值,[速度],function(){});
以上效果都可以添加一個回調函數
jQuery遍歷
方式一:jQuery的對象方法
格式:[ele0,ele1,ele2]
jq對象.each(function([index],[dom對象]){
對遍歷到的每個元素進行操作
})
寫法:
$("#city>li").each(function(index,ele){})
//index是被遍歷到的索引, ele就是被遍歷到的js對象
方式二:全局函數
格式:
$.each(要遍歷的對象,function([index],[dom對象]){})
方式三:新特性:
格式:for of
for(var 變量 of 被遍歷的對象){}
jQuery的事件和事件源的綁定
派發事件:
jq對象.事件名稱(function(){})
jQuery的事件綁定與解綁
on綁定事件
jQuery對象.on("事件名稱",function(){})
off解綁事件
jQuery對象.off("事件名稱")//如果不給名稱則解綁當前對象上的所有事件
事件切換
hover:相當於給一個元素添加了mouseover和mouseout兩個事件
jq元素對象.hover(function(){
//第一個函數相當於mouseover
},function(){
//第二個函數相當於mouseout
})
案例
案例一:定時彈出廣告
需求分析:
頁面加載成功5秒後,彈出一個廣告,廣告時間3秒鐘,3秒後消失
技術分析:
頁面加載成功事件:
$(function(){})
定時器:
setTimeout(函數名,5000)
效果:
show();
hide();
步驟分析:
1:確定事件
頁面加載成功事件
$(function(){
//設置一個單次執行定時器
setTimeout(showAd,5000);
})
2:編寫showAd函數
function showAd(){
//a.展示廣告
//讓存放廣告的div展示
//b.設置單詞執行定時器計時
setTimeout(hideAd,3000)
}
3:編寫hideAd函數
function hideAd(){
//a.隱藏廣告
//讓存放廣告的div隱藏
}
案例一代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定時彈出廣告</title>
<style>
#content{width:100%;height:300px;background:#999}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script>
$(function () {
//頁面加載成功5秒後,彈出一個廣告,廣告時間3秒鐘,3秒後消失
setTimeout(showAd, 5000);
});
//展示廣告
function showAd() {
$("#ad").show();
setTimeout(hideAd,3000)
}
//隱藏廣告
function hideAd() {
$("#ad").hide();
}
</script>
</head>
<body>
<div id="ad" style="display: none">
<img src="../img/ad.jpg" style="width: 100%">
</div>
<div id="content">
正文部分
</div>
</body>
</html>
案例二:抽獎小程序
需求分析:
1:當頁面加載成功後,讓點擊停止按鈕失效,點擊開始按鈕生效
2:當點擊開始按鈕時,
讓點擊開始按鈕失效,讓點擊停止按鈕生效.小圖片輪播
3:當點擊停止按鈕時,
讓點擊停止按鈕失效,讓點擊開始按鈕生效.
讓輪播圖停止輪播,讓選中的圖片2秒展示到大圖區域
案例二代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽獎小程序</title>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script language='javascript' type='text/javascript'>
//準備一個一維數組，裝用戶的像片路徑
var imgs = [
"../img/scenery/1.jpg","../img/scenery/2.jpg","../img/scenery/3.jpg",
"../img/scenery/4.jpg","../img/scenery/5.jpg","../img/scenery/6.jpg",
"../img/scenery/7.jpg","../img/scenery/8.jpg","../img/scenery/9.jpg",
"../img/scenery/10.jpg","../img/scenery/11.jpg","../img/scenery/12.jpg",
"../img/scenery/13.jpg","../img/scenery/14.jpg","../img/scenery/15.jpg",
"../img/scenery/16.jpg","../img/scenery/17.jpg","../img/scenery/18.jpg",
"../img/scenery/19.jpg","../img/scenery/20.jpg","../img/scenery/21.jpg",
];
</script>
<script>
$(function () {
//1:當頁面加載成功後,讓點擊停止按鈕失效,點擊開始按鈕生效
$("#stopID").attr("disabled", true);
});
//2:當點擊開始按鈕時,
// 讓點擊開始按鈕失效,讓點擊停止按鈕生效.小圖片輪播
function imgStart() {
$("#startID").attr("disabled", true);
$("#stopID").attr("disabled", false);
intervalId=setInterval(showImg, 500);
}
//3:當點擊停止按鈕時,
// 讓點擊停止按鈕失效,讓點擊開始按鈕生效.
// 讓輪播圖停止輪播,讓選中的圖片2秒展示到大圖區域
function imgStop() {
$("#startID").attr("disabled", false);
$("#stopID").attr("disabled", true);
clearInterval(intervalId);
showBigImg();
}
var i = 0;
function showImg() {
$("#img1ID").attr("src",imgs[i]);
i++;
if(i==imgs.length) {
i = 0;
}
}
function showBigImg() {
$("#img2ID").attr("src",imgs[--i]);
}
</script>
</head>
<body>
<!-- 小像框 -->
<div style="border-style:dotted;width:50px;height:50px">
<img id="img1ID" src="" style="width:50px;height:50px"/>
</div>
<!-- 大像框 -->
<div style="border-style:double;width:700px;height:500px;position:absolute;left:500px;top:10px">
<img id="img2ID" src="" style="width:700px;height:500px"/>
</div>
<!-- 開始按鈕 -->
<input onclick="imgStart()" id="startID" type="button" value="點擊開始" style="width:150px;height:150px;font-size:22px" >
<!-- 停止按鈕 -->
<input onclick="imgStop()" id="stopID" type="button" value="點擊停止" style="width:150px;height:150px;font-size:22px" >
</body>
</html>
jQuery插件
插件:實現了指定功能的代碼片段
jq對象.text()等等都是jq爲我們定義好的方法.而我們可以模仿jq方法定義我們自己的方法 也就是插件擴展機制
插件擴展機制(兩種:jQuery對象進行方法擴展,jQuery全局進行方法擴展)
注意:在extend使用中this代表的是掉用者的jQuery對象
jQuery插件機制概述:
jQuery插件的機制很簡單,就是利用jQuery提供的 jQuery.fn.extend()和jQuery.extend()方法,擴展jQuery功能
jQuery插件機制語法
jQuery.fn.extend(object) 對jQuery對象進行方法擴展
1:jQuery對象進行方法擴展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插件機制</title>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script>
jQuery.fn.extend({
"checkAll":function () {
//extend使用中this代表調用者的jQuery對象在這裏也就是 $("input[type='checkbox']")
$.each(this,function (index,ele) {
ele.checked = true;
})
}
});
jQuery.fn.extend({
"uncheckFn":function () {
//extend使用中this代表調用者的jQuery對象在這裏也就是 $("input[type='checkbox']")
this.each(function (index,ele) {
ele.checked = false;
})
}
})
function checkFn() {
$("input[type='checkbox']").checkAll();
}
function uncheckFn() {
$("input[type='checkbox']").uncheckFn();
}
</script>
</head>
<body>
<input id="btn-check" type="button" value="點擊選中複選框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="點擊取消複選框選中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">籃球
<input type="checkbox" value="volleyball">排球
</body>
</html>
2:jQuery全局進行方法擴展
jQuery.extend({
"min":function(i,j){
return i>j ? j:i;
}
"max":function(i,j){
return i>j ? i:j;
}
})
validate插件
作用:對錶單進行校驗.
下載路徑:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip
使用方式:
導入jquery.js
validate是基於jquery寫的,所以要先導入jquery的js文件
在導入validate.js
想要使用別人的插件必須導入人家已經寫好的js文件
在頁面加載成功後,要確定頁面上的那個表單進行校驗
$(function(){
表單對象.validate():
})
validate使用格式:
表單對象.validate({
rules:{//校驗規則
//需要校驗那個輸入框就是用其name的值
},
messages:{}//不滿足規則時的提示信息
})
自定義校驗器:
格式:
$.validator.addMethod(name,function(val,ele,param){},"message");
val:輸入框的值
ele:被校驗的輸入框的對象(js對象)
param:校驗器的值(true,false)
message:提示信息
需要有返回值,默認爲false
-
常見的校驗規則
校驗器名稱 值 描述 required true|false 必須填寫 number true|false 只能輸入數字 min 數字 最小值 max 數字 最大值 range [min,max] 取值範圍 minlength 數字 最小長度 maxlength 數字 最大長度 rangelength [minlength,maxlength] 長度範圍 equalTo 通過jQuery選擇器選中指定元素對象 和誰相等(重複密碼) email “email” 校驗郵箱 date true 校驗日期 dateISO true 校驗日期格式xxxx-xx-xx xxxx/xx/xx 案例:
<!DOCTYPE html> <!--suppress XmlInvalidId --> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>我的jquery表單校驗頁面</title> <style type="text/css"> p{text-align: center;font-size:24px;} table{margin: 0 auto;border: 0;} table tr{height:40px;border:0;} table tr td{padding:0 14px;border:1px solid #999} .error{color:red} </style> <!-- 1.導入jq的js文件 --> <script src="../js/jquery-3.3.1.js"></script> <!-- 2.導入validate的js文件 --> <script src="../js/jquery.validate.min.js"></script> <script src="../js/messages_zh.js"></script> <!-- 3.在頁面加載成功後,鎖定被校驗的表單對象 --> <script> $(function () { // 鎖定被校驗的表單對象 $("#empForm").validate({ rules:{ // 校驗規則 // 需要校驗哪個輸入框就使用那個輸入框name屬性的值 realname:"required", // 單一校驗規則 username:{ required:true, // 校驗不可爲空 rangelength:[5,10] // 校驗長度 }, psw:{ required:true, number:true }, psw2:{ equalTo:$("#psw") }, gender:{ required:true }, age:{ required:true, range:[26,50] }, edu:{ required:true }, birthday:{ required:true, dateISO:true, date:true }, email:{ required:true, email:"email" }, card:{ required:true, cardLength:true } }, messages:{ // 當不滿足規則時的提示信息 realname:"真實姓名不可爲空.", username:{ required:"用戶名不可爲空", // 校驗不可爲空 rangelength:"長度在{0}到{1}位之間" // 校驗長度 }, card:{ cardLength:"身份證號長度只能是15或18位" } } }); }); // 自定義校驗器 $.validator.addMethod( "cardLength", // 校驗器的名稱 // val: 被校驗的輸入框中的內容 // ele: 被校驗的輸入框對象(js對象) // params: 是否需要校驗(校驗器的值) function (val,ele,params) { // 在該函數中完成校驗,需要返回校驗結果 boolean // 默認返回false if(params){ // 需要校驗 if(val.length==15 || val.length==18){ return true; } } }, "默認: 身份證號長度不合法" // 當不滿足校驗規則時的默認提示信息 ); </script> </head> <body> <p>員工信息錄入</p> <form name="empForm" id="empForm" method="get" action="test.html"> <table border=1> <tr> <td>真實姓名(不能爲空 ,沒有其他要求)</td> <td><input type="text" id="realname" name="realname" /> </td> </tr> <tr> <td>登錄名(登錄名不能爲空,長度應該在5-8之間,可以包含中文字符(一個漢字算一個字符)):</td> <td><input type="text" id="username" name="username" /></td> </tr> <tr> <td>密碼(不能爲空,長度6-12字符或數字,不能包含中文字符):</td> <td><input type="password" id="psw" name="psw" /></td> </tr> <tr> <td>重複密碼密碼(不能爲空,長度6-12字符或數字,不能包含中文字符):</td> <td><input type="password" id="psw2" name="psw2" /></td> </tr> <tr> <td>性別(必選其一)</td> <td> <input type="radio" id="gender_male" value="m" name="gender"/> 男 <input type="radio" id="gender_female" value="f" name="gender"/> 女 <label class="error" for="gender" style="display: none;">必須選擇一個性別</label> </td> </tr> <tr> <td>年齡(必填26-50):</td> <td><input type="text" id="age" name="age" /></td> </tr> <tr> <td>你的學歷:</td> <td> <select name="edu" id="edu"> <option value="">－請選擇你的學歷－</option> <option value="a">專科</option> <option value="b">本科</option> <option value="c">研究生</option> <option value="e">碩士</option> <option value="d">博士</option> </select> </td> </tr> <tr> <td>出生日期(1982/09/21):</td> <td><input type="date" id="birthday" name="birthday" value="" /></td> </tr> <tr> <td>興趣愛好:</td> <td colspan="2"> <input type="checkbox" name="checkbox1" id="qq1"/> 乒乓球 <input type="checkbox" name="checkbox1" id="qq2" value="1" /> 羽毛球 <input type="checkbox" name="checkbox1" id="qq3" value="2" /> 上網 <input type="checkbox" name="checkbox1" id="qq4" value="3" /> 旅遊 <input type="checkbox" name="checkbox1" id="qq5" value="4" /> 購物 <label class="error" for="checkbox1" style="display: none;">必須選一個</label> </td> </tr> <tr> <td align="left">電子郵箱:</td> <td><input type="text" id="email" name="email" /></td> </tr> <tr> <td align="left">身份證(15-18):</td> <td><input type="text" id="card" name="card" /></td> </tr> <tr> <td></td> <td><input type="submit" name="firstname" id="firstname" value="保存"></td> </tr> </table> </form> </body> </html>總結:
DOM: 效果: 基本效果: hide show toggle 滑入滑出: slideUp,slideDown,slideToggle 淡入淡出: fadeIn,fadeOut,fadeToggle 遍歷: jq對象.each(function(index,ele){}) $.each(被遍歷的對象,function(index,ele){}) for of for( var 變量名 of 被遍歷的對象){} 事件總結: 派發事件: jq對象.事件方法(function(){}) 綁定事件: jq對象.on("事件名稱",function(){}) 解綁事件: jq對象.off("事件名稱")//不給事件名稱則解綁此對象上的所有事件 事件切換: jq對象.hover(function(){},function(){})//第一個fn爲懸停事件方法,第二個爲移出事件方法 插件: 插件擴展機制: jq對象的方法: jq對象.fn.extend("函數名稱":function(){ //這裏的this代表jq對象 }) 全局方法: $.extend(function(){}) validate插件: 作用:表單的檢驗 使用步驟: 1:導入jq的js文件 2:導入validate的js文件 3.編寫頁面加載成功事件 表單對象.validate({ rules:{ name屬性的值:"校驗器" name屬性的值:{ 校驗器:值, 校驗器:值 } } messages:{ name屬性的值:"提示信息" name屬性的值:{ 校驗器:提示信息, 校驗器:提示信息 } } }) 自定義校驗器: $.validator.addMethod("校驗器名":function(val,ele,param){ //返回值true和false(默認) },"提示信息")