今日內(nèi)容：
1. JQuery 高級(jí)
? ? 1. 動(dòng)畫
? ? 2. 遍歷
? ? 3. 事件綁定
? ? 4. 案例
? ? 5. 插件
?
JQuery 高級(jí)
JQuery 高級(jí)
1. 動(dòng)畫
? ? 1. 三種方式顯示和隱藏元素
? ? ? ? 1. 默認(rèn)顯示和隱藏方式
? ? ? ? ? ? 1. show([speed,[easing],[fn]])
? ? ? ? ? ? ? ? 1. 參數(shù)：
? ? ? ? ? ? ? ? ? ? 1. speed：動(dòng)畫的速度偿凭。三個(gè)預(yù)定義的值("slow","normal", "fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)
? ? ? ? ? ? ? ? ? ? 2. easing：用來指定切換效果墓阀，默認(rèn)是"swing"耸三，可用參數(shù)"linear"
? ? ? ? ? ? ? ? ? ? ? ? * swing：動(dòng)畫執(zhí)行時(shí)效果是 先慢丛忆，中間快，最后又慢
? ? ? ? ? ? ? ? ? ? ? ? * linear：動(dòng)畫執(zhí)行時(shí)速度是勻速的
? ? ? ? ? ? ? ? ? ? 3. fn：在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)盖袭，每個(gè)元素執(zhí)行一次。
?
? ? ? ? ? ? 2. hide([speed,[easing],[fn]])
? ? ? ? ? ? 3. toggle([speed],[easing],[fn])
? ? ? ? 2. 滑動(dòng)顯示和隱藏方式
? ? ? ? ? ? 1. slideDown([speed],[easing],[fn])
? ? ? ? ? ? 2. slideUp([speed,[easing],[fn]])
? ? ? ? ? ? 3. slideToggle([speed],[easing],[fn])
?
? ? ? ? 3. 淡入淡出顯示和隱藏方式
? ? ? ? ? ? 1. fadeIn([speed],[easing],[fn])
? ? ? ? ? ? 2. fadeOut([speed],[easing],[fn])
? ? ? ? ? ? 3. fadeToggle([speed,[easing],[fn]])
?
2. 遍歷
? ? 1. js的遍歷方式
? ? ? ? * for(初始化值;循環(huán)結(jié)束條件;步長)
? ? 2. jq的遍歷方式
? ? ? ? 1. jq對(duì)象.each(callback)
? ? ? ? ? ? 1. 語法：
? ? ? ? ? ? ? ? jquery對(duì)象.each(function(index,element){});
? ? ? ? ? ? ? ? ? ? * index:就是元素在集合中的索引
? ? ? ? ? ? ? ? ? ? * element：就是集合中的每一個(gè)元素對(duì)象
?
? ? ? ? ? ? ? ? ? ? * this：集合中的每一個(gè)元素對(duì)象
? ? ? ? ? ? 2. 回調(diào)函數(shù)返回值：
? ? ? ? ? ? ? ? * true:如果當(dāng)前function返回為false彼宠，則結(jié)束循環(huán)(break)鳄虱。
? ? ? ? ? ? ? ? * false:如果當(dāng)前function返回為true，則結(jié)束本次循環(huán)凭峡，繼續(xù)下次循環(huán)(continue)
? ? ? ? 2. $.each(object, [callback])
? ? ? ? 3. for..of: jquery 3.0 版本之后提供的方式
? ? ? ? ? ? for(元素對(duì)象 of 容器對(duì)象)
3. 事件綁定
? ? 1. jquery標(biāo)準(zhǔn)的綁定方式
? ? ? ? * jq對(duì)象.事件方法(回調(diào)函數(shù))拙已；
? ? ? ? * 注：如果調(diào)用事件方法疫剃，不傳遞回調(diào)函數(shù)歪今，則會(huì)觸發(fā)瀏覽器默認(rèn)行為税稼。
? ? ? ? ? ? * 表單對(duì)象.submit();//讓表單提交
? ? 2. on綁定事件/off解除綁定
? ? ? ? * jq對(duì)象.on("事件名稱",回調(diào)函數(shù))
? ? ? ? * jq對(duì)象.off("事件名稱")
? ? ? ? ? ? * 如果off方法不傳遞任何參數(shù)，則將組件上的所有事件全部解綁
? ? 3. 事件切換：toggle
? ? ? ? * jq對(duì)象.toggle(fn1,fn2...)
? ? ? ? ? ? * 當(dāng)單擊jq對(duì)象對(duì)應(yīng)的組件后礁击，會(huì)執(zhí)行fn1.第二次點(diǎn)擊會(huì)執(zhí)行fn2.....
? ? ? ? * 注意：1.9版本 .toggle() 方法刪除,jQuery Migrate（遷移）插件可以恢復(fù)此功能。
? ? ? ? ? ?
?
4. 案例
? ? 1. 廣告顯示和隱藏
? ? ? ?
? ? ? ? 廣告的自動(dòng)顯示與隱藏
? ? ? ?
? ? ? ? #content{width:100%;height:500px;background:#999}
? ? ? ?
? ? ? ?
? ? ? ? /*
? ? ? ? 需求：
? ? ? ? 1. 當(dāng)頁面加載完傀顾，3秒后裳凸。自動(dòng)顯示廣告
? ? ? ? 2. 廣告顯示5秒后，自動(dòng)消失缤至。
? ? ? ? 分析：
? ? ? ? 1. 使用定時(shí)器來完成潮罪。setTimeout (執(zhí)行一次定時(shí)器)
? ? ? ? 2. 分析發(fā)現(xiàn)JQuery的顯示和隱藏動(dòng)畫效果其實(shí)就是控制display
? ? ? ? 3. 使用? show/hide方法來完成廣告的顯示
? ? ? ? */
? ? ? ? //入口函數(shù)，在頁面加載完成之后领斥，定義定時(shí)器嫉到，調(diào)用這兩個(gè)方法
? ? ? ? $(function () {
? ? ? ? //定義定時(shí)器，調(diào)用adShow方法 3秒后執(zhí)行一次
? ? ? ? setTimeout(adShow,3000);
? ? ? ? //定義定時(shí)器月洛，調(diào)用adHide方法何恶，8秒后執(zhí)行一次
? ? ? ? setTimeout(adHide,8000);
? ? ? ? });
? ? ? ? //顯示廣告
? ? ? ? function adShow() {
? ? ? ? //獲取廣告div，調(diào)用顯示方法
? ? ? ? $("#ad").show("slow");
? ? ? ? }
? ? ? ? //隱藏廣告
? ? ? ? function adHide() {
? ? ? ? //獲取廣告div嚼黔，調(diào)用隱藏方法
? ? ? ? $("#ad").hide("slow");
? ? ? ? }
? ? ? ? </script> </head> <body> <!-- 整體的DIV --> <div> ? ? <!-- 廣告DIV --> ? ? <div id="ad" style="display: none;"> ? ? ? ? ? ? </div>
? ? ? ?
? ? ? ? 正文部分
?
?
? ? 2. 抽獎(jiǎng)
? ? ? ?
? ? ? ? jquery案例之抽獎(jiǎng)
? ? ? ?
? ? ? ?
? ? ? ? /*
? ? ? ? 分析：
? ? ? ? 1. 給開始按鈕綁定單擊事件
? ? ? ? 1.1 定義循環(huán)定時(shí)器
? ? ? ? 1.2 切換小相框的src屬性
? ? ? ? * 定義數(shù)組细层，存放圖片資源路徑
? ? ? ? * 生成隨機(jī)數(shù)。數(shù)組索引
?
?
? ? ? ? 2. 給結(jié)束按鈕綁定單擊事件
? ? ? ? 1.1 停止定時(shí)器
? ? ? ? 1.2 給大相框設(shè)置src屬性
? ? ? ? */
? ? ? ? var imgs = ["../img/man00.jpg",
? ? ? ? "../img/man01.jpg",
? ? ? ? "../img/man02.jpg",
? ? ? ? "../img/man03.jpg",
? ? ? ? "../img/man04.jpg",
? ? ? ? "../img/man05.jpg",
? ? ? ? "../img/man06.jpg",
? ? ? ? ];
? ? ? ? var startId;//開始定時(shí)器的id
? ? ? ? var index;//隨機(jī)角標(biāo)
? ? ? ? $(function () {
? ? ? ? //處理按鈕是否可以使用的效果
? ? ? ? $("#startID").prop("disabled",false);
? ? ? ? $("#stopID").prop("disabled",true);
?
?
? ? ? ? //1. 給開始按鈕綁定單擊事件
? ? ? ? $("#startID").click(function () {
? ? ? ? // 1.1 定義循環(huán)定時(shí)器 20毫秒執(zhí)行一次
? ? ? ? startId = setInterval(function () {
? ? ? ? //處理按鈕是否可以使用的效果
? ? ? ? $("#startID").prop("disabled",true);
? ? ? ? $("#stopID").prop("disabled",false);
?
?
? ? ? ? //1.2生成隨機(jī)角標(biāo) 0-6
? ? ? ? index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999
? ? ? ? //1.3設(shè)置小相框的src屬性
? ? ? ? $("#img1ID").prop("src",imgs[index]);
? ? ? ? },20);
? ? ? ? });
?
?
? ? ? ? //2. 給結(jié)束按鈕綁定單擊事件
? ? ? ? $("#stopID").click(function () {
? ? ? ? //處理按鈕是否可以使用的效果
? ? ? ? $("#startID").prop("disabled",false);
? ? ? ? $("#stopID").prop("disabled",true);
?
?
? ? ? ? // 1.1 停止定時(shí)器
? ? ? ? clearInterval(startId);
? ? ? ? // 1.2 給大相框設(shè)置src屬性
? ? ? ? $("#img2ID").prop("src",imgs[index]).hide();
? ? ? ? //顯示1秒之后
? ? ? ? $("#img2ID").show(1000);
? ? ? ? });
? ? ? ? });
? ? ? ? ? </script>
? ? ? ?
? ? ? ? style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
? ? ? ? id="startID"
? ? ? ? type="button"
? ? ? ? value="點(diǎn)擊開始"
? ? ? ? style="width:150px;height:150px;font-size:22px">
? ? ? ? id="stopID"
? ? ? ? type="button"
? ? ? ? value="點(diǎn)擊停止"
? ? ? ? style="width:150px;height:150px;font-size:22px">
?
?
?
5. 插件：增強(qiáng)JQuery的功能
? ? 1. 實(shí)現(xiàn)方式：
? ? ? ? 1. $.fn.extend(object)
? ? ? ? ? ? * 增強(qiáng)通過Jquery獲取的對(duì)象的功能? $("#id")
? ? ? ? 2. $.extend(object)
? ? ? ? ? ? * 增強(qiáng)JQeury對(duì)象自身的功能? $/jQuery
