jQuery runnoob網址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手冊: http://www.runoob.com/manual/jquery/ jQuery筆記 筆記來源於: 傳智播客的黑馬程式員視頻筆記.... ...
jQuery runnoob網址:
http://www.runoob.com/jquery/jquery-tutorial.html
jQuery API手冊: http://www.runoob.com/manual/jquery/
jQuery筆記
筆記來源於:
傳智播客的黑馬程式員視頻筆記.
菜鳥教程:http://www.runoob.com/
自己的查詢與整理.
JS的不完美地方:
1. 代碼比較麻煩,給多個元素添加事件需要遍歷,可能還需要進行嵌套.
2. 找對象麻煩,方法少,還比較長.
3. 會有相容性的問題.
4. 如果想要實現簡單的動畫效果,需要用 animate, 也存在相容性問題.
5.js註冊事件存在覆蓋情況,需要使用addEventListener,比較麻煩.
jQuery的優點:
1. 隱式遍歷,不需要使用for迴圈;
2. 找對象比較容易,非常靈活;
3. 處理相容性問題比較好;
4. 實現動畫效果非常簡單,而且功能強大.
5. 代碼簡單,粗暴.
jQuery版本:
1.x版本: 能夠相容IE678瀏覽器
2.x版本: 不相容IE678瀏覽器
1.x和2.x版本的jQuery都不再更新版本了,現在只更新3.x版本
3.x版本: 不相容IE678,更加的精簡(在國內不流行, 因為國內使用jQuery的主要目的就是相容IE678)
jQuery的入口函數:
方式一:
$(document).ready(function () { 代碼塊 });
方式二:
$(function () { 代碼塊 });
JS的入口函數:
window.onload = function () { 代碼塊 };
兩種入口函數的區別:
1.jQuery的入口函數要比JS的入口函數先執行;
2.jQuery的入口函數會等待頁面載入完成才執行,但不會等待圖片的載入;
3.JS的入口函數會等待頁面和圖片都載入完成才執行.
DOM對象:
使用JS的方式獲取的元素就是JS對象(DOM對象).
jQuery對象:
使用jQuery的方式獲取的元素就是jQuery對象.
DOM對象與jQuery對象是兩類不同的對象,所以:
DOM對象不能調用jQuery的方法;
jQuery對象也不能調用DOM對象的方法;
但是DOM對象和jQuery對象之間可以相互轉換.
DOM對象轉換為jQuery對象:
$(DOM對象)
jQuery對象轉換成DOM對象:
將jQuery中封閉的DOM對象取出來即可.
jQuery中的 $ 實際上就是一個函數.
=================================================================
jQuery中的選擇器:
jQuery的選擇器基本相容了CSS1到CSS3所有的選擇器,並且還添加了很多複雜的選擇器.
用jQuery選擇器選擇一個對象,會有多種不同的方法可供選擇.
1.基本選擇器(跟CSS選擇器用法一模一樣):
名稱 用法(示例) 描述
ID選擇器 $("#id名") 獲取指定的ID元素
類選擇器 $(".class名") 獲取同一類class元素
標簽選擇器 $("標簽名") 獲取同一類標簽的所有元素
並集選擇器 $("div,p,li") 使用逗號分隔,只要符合條件之一就會被選擇
交集選擇器 $("div.redClass") 獲取class為redClass的div元素
其他選擇器示例:
$(document) 選擇整個文檔對象
$("input[name=first]")選擇name屬性等於first的input元素(標簽) 註意:這麼寫也行:$("input[name='first']")
$("[name]") 選擇所有包含name屬性的標簽
$("[name=first]") 選擇所有屬性name等於first的標簽 註意:這麼寫也行:$("[name='first']")
$("a[target!='_blank']") 選取所有 target 屬性值不等於 "_blank" 的 <a> 元素
$(":button") 選取所有 type="button" 的 <input> 元素 和 <button> 元素
2.層級選擇器(跟CSS選擇器用法一模一樣):
名稱 用法(示例) 描述
子代選擇器 $("ul>li") 使用>號,獲取兒子層級的元素,註意:並不會獲取孫子層的元素
後代選擇器 $("ul li") 使用空格,代表後代選擇器,獲取ul下的所有的li元素,包括孫子輩
3.過濾選擇器(這種選擇器都帶冒號):
名稱 用法 描述
:eq(index) $("li:eq(2)"); 獲取li元素中索引號為2的元素(索引從0開始)
:odd $("li:odd"); 獲取li元素中下標是奇數的元素(下標從0開始)
:even $("li:even"); 獲取li元素中下標是偶數的元素(下標從0開始)
:gt $('#ul1 li:gt(2)') 選擇id為ul1元素下的前三個之後的li
:lt $('#ul1 li:lt(2)') 選擇id為ul1元素下的前三個li
:input $("#myForm :input") 選擇表單中的input元素
:visible $("div:visible") 選擇可見的div元素
4.表單對象屬性選擇器
:enabled 匹配所有不可用的元素
:disabled
:checked
:selected
5.篩選選擇器(方法):
篩選選擇器的功能與過濾選擇器有點類似,但是用法不一樣,篩選選擇器主要是方法.
名稱 用法 描述
children(selector) $("ul").children("li") 相當於$("ul>li"),子代選擇器
find(selector) $("ul").find(".myClass"); 選擇div內的class等於myClass的元素
siblings(selector) $("#first").siblings("li"); 查找兄弟節點,不包括自己本身
parent() $("#first").parent(); 查找父親元素
eq(index) $("li").eq(2); 相當於$("li:eq(2)"),index從0開始
next() $("li").next(); 找下一下兄弟
prev() $("li").prev(); 找上一個兄弟
prev("p") $("div").prev("p"); 選擇div元素前面的第一個p元素
next("p") $("div").next("p"); 選擇div元素後面的第一個p元素
closest("from") $("div").closest("form"); 選擇離div最近的那個form父元素
=================================================================
jQuery之遍歷
jQuery提供了多種遍歷DOM的方法.遍歷方法中最大的種類是樹遍歷(tree-traversal).
1.jQuery遍歷-祖先:
parent() 返回被選元素的直接父元素,該方法只會向上一級對 DOM 樹進行遍歷.
parents()
返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>).
您也可以使用可選參數來過濾對祖先元素的搜索,示例:$("span").parents("ul"); 返回所有<span>元素的所有祖先,並且它是<ul>元素.
parentsUntil()
parentsUntil() 方法返回介於兩個給定元素之間的所有祖先元素.
$("span").parentsUntil("div"); 返回介於 <span> 與 <div> 元素之間的所有祖先元素(不包含div元素).
2.jQuery遍歷-後代
後代是子、孫、曾孫等等.通過jQuery,您能夠向下遍歷DOM樹,以查找元素的後代.
下麵是兩個用於向下遍歷DOM樹的jQuery方法:
children() 返回被選元素的所有直接子元素.該方法只會向下一級對DOM樹進行遍歷.
$("div").children(); 返回每個<div>元素的所有直接子元素
您也可以使用可選參數來過濾對子元素的搜索:
$("div").children("p.1"); 返回類名為"1"的所有<p>元素,並且它們是<div>的直接子元素.
find() 返回被選元素的後代元素,一路向下直到最後一個後代.
$("div").find("span"); 返回屬於 <div> 後代的所有 <span> 元素.
$("div").find("*"); 返回 <div> 的所有後代
3.jQuery遍歷-同胞(siblings)
同胞擁有相同的父元素.通過jQuery,您能夠在DOM樹中遍歷元素的同胞元素.
在DOM樹中水平遍歷:
siblings() 返回被選元素的所有同胞元素.
$("h2").siblings(); 返回<h2>的所有同胞元素.註意:不包括<h2>元素.
$("h2").siblings("p"); 返回屬於<h2>的同胞元素的所有<p>元素.
next() 返回被選元素的下一個同胞元素.該方法只返回一個元素.
$("h2").next(); 返回<h2>的下一個同胞元素.
nextAll() 返回被選元素的所有跟隨的同胞元素
$("h2").nextAll(); 返回<h2>的所有跟隨的同胞元素.
nextUntil() 返回介於兩個給定參數之間的所有跟隨的同胞元素.
$("h2").nextUntil("h6") 返回介於<h2>與<h6>元素之間的所有同胞元素.註意:不包括<h6>元素.
prev(), prevAll(), prevUntil()
prev(),prevAll()以及 prevUntil()方法的工作方式與上面的方法類似,只不過方向相反而已:
它們返回的是前面的同胞元素(在DOM樹中沿著同胞之前元素遍歷,而不是之後元素遍歷).
4.jQuery遍歷-過濾
縮小搜索元素的範圍:
三個最基本的過濾方法是:first(),last()和eq().它們允許您基於其在一組元素中的位置來選擇一個特定的元素.
其他過濾方法,比如filter()和not()允許您選取匹配或不匹配某項指定標準的元素.
first() 返回被選元素的首個元素.
$("div p").first(); 選取首個 <div> 元素內部的第一個 <p> 元素.
last() 返回被選元素的最後一個元素.
$("div p").last(); 選擇最後一個<div>元素中的最後一個<p>元素.
eq(index) 返回被選元素中帶有指定索引號的元素.索引號從0開始,因此首個元素的索引號是0而不是1.
$("p").eq(1); 選取第二個<p>元素(索引號 1).
filter() 允許您規定一個標準,不匹配這個標準的元素會被從集合中刪除,匹配的元素會被返回.
$("p").filter(".url"); 返回帶有類名"url"的所有<p>元素.
not() 返回不匹配標準的所有元素.提示:not()方法與filter()相反.
$("p").not(".url"); 返回不帶有類名"url"的所有<p>元素.
=================================================================
jQuery操作屬性
1.attr操作(設置單個屬性):
第一個參數:需要設置的屬性名
第二個參數:對應的屬性值
attr(name, value);
示例:
$("img").attr("title", "新名字");
$("img").attr("alt", "新說明");
用attr設置多個屬性:
參數是一個對象,包含所有需要設置的屬性名與屬性值
$("img").attr({
title: "新名字",
alt: "新說明",
style: "opacity: .5", # 設置透明度
});
獲取屬性:
傳入需要獲取的屬性名,返回對應的屬性值
var 變數 = $(selector).attr("屬性名");
jQuery方法attr(),也提供回調函數.回調函數有兩個參數:被選元素列表中當前元素的下標,以及原始(舊的)值.然後以函數新值返回您希望使用的字元串.示例如下:
$("button").click(function(){
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
刪除屬性:removeAttr()
註意:
對於布爾類型(selected, checked, disabled等)的屬性,不要用attr方法,使用prop方法;
prop()函數的執行結果:
1.如果有相應的屬性,返回指定屬性值.
2.如果沒有相應的屬性,返回值是空字元串.
attr()函數的執行結果:
1.如果有相應的屬性,返回指定屬性值.
2.如果沒有相應的屬性,返回值是undefined.
對於HTML元素本身就帶有的固有屬性,在處理時,使用prop方法.
對於HTML元素我們自己自定義的DOM屬性,在處理時,使用attr方法.
具有 true 和 false 兩個屬性的屬性,如 checked, selected 或者 disabled 使用prop()
註意:
1.1類比attr操作的css操作:
jQuery通過CSS方法同時設置多種樣式:
$("li").css("backgroudColor", "pink").css("color", "red").css("fontSize", "14px");
jQuery設置CSS樣式的推薦方法:
$("li").css({
backgroundColor: "pink",
color: "red",
fontSize: "14px",
border: "1px solid black",
...
});
1.2 jQuery獲取CSS樣式的值:
var 變數 = $(selector).css("樣式的key,比如background或color等");
特別註意:
選擇器獲取的多個元素,獲取信息獲取的是第一個,比如：$("div").css("width").獲取的是第一個div的width.
原因:jQuery的隱式迭代導致
關於jQuery的隱匿迭代:
jQuery進行設置操作時,會給符合條件的所有jQuery對象設置上相應的值;
jQuery在進行值獲取時,只會返回第一個元素對應的值.
1.3 操作樣式類名(jQuery獲取並設置 CSS 類):
$("#div1").addClass("divClass2") //為id為div1的對象追加樣式divClass2
$("#div1").removeClass("divClass") //移除id為div1的對象的class名為divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個樣式
$("#div1").toggleClass("anotherClass") //重覆切換anotherClass樣式
2.prop操作:
在jQuery1.6之後,對於checked, selected, disabled等這類boolean類型的屬性來說,不能用attr方法,只能用prop方法.
設置屬性:
$(selector).prop("checked", true);
獲取屬性:
$(selector).prop("checked"); # 返回true或false
3.jQuery動畫
jQuery提供了三組基本動畫,這些動畫都是標準的,有規律的的效果,jQuery還提供了自定義動畫的功能.
3.1三組基本動畫:
顯示(show)與隱藏(hide)是一組動畫,註意:show與hide動畫效果如果不傳speed參數是沒有動畫效果的;
語法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
滑入(slideUp)與滑出(slideDown)以及切換(slideToggle),註意:slide相關動畫不傳speed參數也有動畫效果;
語法:
$(selector).slideUp(speed,callback);
$(selector).slideDown(speed,callback);
$(selector).slideToggle(speed,callback);
淡入(fadeIn)與淡出(fadeOut)以及切換(fadeToggle),(fadeTo).
語法:
$(selector).fadeOut(speed, easing, callback);
$(selector).fadeIn(speed, easing, callback);
$(selector).fadeToggle(speed, easing, callback);
$(selector).fadeTo(speed, opacity, easing, callback); opacity為0-1之間,代表透明度.
show([speed], [callback]);
speed:可選參數,表示動畫執行的時間,單位毫秒
1.如果不傳,就沒有動畫效果,如果是slide和fade系列,會預設為normal;
2.推薦設置speed為1000毫秒;
3.固定字元串(即:show(slow)), slow(200), normal(400), fast(600).如果傳其他字元串,則預設為normal.
callback:可選參數,執行完動畫後執行回調函數.
3.2自定義動畫:
animate: 自定義動畫:
$(selector).animate({params}, [speed], [easing], [callback]);
參數:
{params}: 要執行動畫的css屬性,帶數字(必選);
speed: 執行動畫的時長(可選);
easing: 執行動畫的效果,預設為swing(緩動), 可以是linear(勻速);
callback: 動畫執行完後立即執行的回調函數(可選).
註意:
預設情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的。
如果需要改變，我們需要將元素的 position 屬性設置為 relative, fixed, 或 absolute!
3.3動畫隊列與停止動畫:
在同一個元素上執行多個動畫,那麼對於這個動畫來說,後面的動畫會被放到動畫隊列中,等前面的動畫
執行完成才會執行.
stop(clearQueue, jumpToEnd);
參數:
clearQueue:是否清除隊列;
jumpToEnd:是否跳轉到最終效果.
示例:$(selector).stop(); --> 等現於$(selector).stop(false, false);
通常animate方法與stop方法會一同使用,語法如下:$(selector).stop().animate({params: values}, speed, easing, callback);
=================================================================
jQuery節點操作:
1.創建節點:
$(htmlStr)
htmlStr: html格式的字元串
$("<span>這是一個span元素</span>");
2.添加節點
append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素之後插入內容
before() - 在被選元素之前插入內容
註意:append/prepend 是在選擇元素內部嵌入;after/before 是在元素外面追加.
appendTo
prependTo
3.清空節點與刪除節點:
empty: 清空指定節點的所有元素,自身保留(清理門戶)
$("div").empty(); 清空div的所有內容(推薦使用,會清除子元素上綁定的內容,源碼)
$("div").html(""); 使用html方法來清空元素,不推薦使用,會造成記憶體泄漏,綁定的事件不會清除.
remove: 相比於empty,自身也刪除
註意:jQuery remove() 方法也可接受一個參數,允許您對被刪元素進行過濾:
$("p").remove(".italic"); 刪除所有具有屬性class='italic'的元素.
4.克隆節點:
作用:複製匹配的元素
複製$(selector)所匹配到的元素(深度複製)
cloneNode(true)
返回值為複製的新元素,和原來的元素沒有任何關係.即修改新元素,不會影響到原來的元素
$(selector).clone();
jQuery特殊屬性操作
1.1 val方法
val方法用於設置和獲取"表單元素"的值,例如input,textarea的值(只針對錶單元素)
設置值:$(selector).val("要設置的值");
獲取值:var 變數 = $(selector).val();
1.2 html方法與text方法
html方法相當於innerHTML, text方法相當於innerText
html方法的使用:
設置內容:$(selector).html("<span>要設置的內容</span>");
獲取內容:var 變數 = $(selector).html();
text方法的使用:
設置內容:$(selector).text("<span>這是要設置的內容</span>");
獲取內容:var 變數 = $(selector).text();
區別:html方法會識別html標簽, text方法會把內容直接當成字元串,並不會識別字元串內的html標簽.
補充說明:
text()、html()以及val()的回調函數:
上面的三個jQuery方法:text()、html()以及val(),同樣擁有回調函數.回調函數有兩個參數:被選元素列表中當前元素的下標,以及原始(舊的)值.
然後以函數新值返回您希望使用的字元串.示例如下:
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "舊 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});
1.3 width方法與height方法
設置或者獲取高度
帶參數表示設置高度:$(selector).height(200);
不帶參數表示獲取高度:$(selector).height();
innerWidth()方法,innerWidth()獲取的是width+padding的值
outerWidth()方法,outerWidth(flase)獲取的是width+padding+border的值
outerWidth(true)獲取的是width+padding+border+margin的值
其他:
$(window).height();獲取可視區高度
$(document).height();獲取頁面高度
1.4 scrollTop與scrollLeft:
設置或者獲取垂直滾動條的位置
獲取頁面被卷曲的高度: $(window).scrollTop();
獲取頁面被卷曲的寬度: $(window).scrollLeft();
1.5 offset方法與position方法:
offset方法獲取元素距離document的位置,position方法獲取的是元素距離有定位的父元素的位置.
獲取元素距離document的位置,返回值為對象{left: 100, top: 100}
$(selector).offset();
獲取相對於其最近的有定位的父元素的位置:$(selector).position();
2 jQuery事件機制
jQuery事件:
事件函數列表：
blur() 元素失去焦點
focus() 元素獲得焦點
change() 表單元素的值發生變化
click() 滑鼠單擊
dblclick() 滑鼠雙擊
當單擊元素時,發生click事件.
click()方法觸發click事件,或規定當發生click事件時運行的函數.
觸發被選元素的click事件: $(selector).click()
添加函數到click事件:$(selector).click(function)
mouseover() 滑鼠進入（進入子元素也觸發）
mouseout() 滑鼠離開（離開子元素也觸發）
mouseenter() 滑鼠進入（進入子元素不觸發）
mouseleave() 滑鼠離開（離開子元素不觸發）
hover() 同時為mouseenter和mouseleave事件指定處理函數
mouseup() 鬆開滑鼠
mousedown() 按下滑鼠
mousemove() 滑鼠在元素內部移動
keydown() 按下鍵盤
keypress() 按下鍵盤
keyup() 鬆開鍵盤
load() 元素載入完畢
ready() DOM載入完成
resize() 瀏覽器視窗的大小發生改變
scroll() 滾動條的位置發生變化
select() 用戶選中文本框中的內容
submit() 用戶遞交表單
toggle() 根據滑鼠點擊的次數，依次運行多個函數
unload() 用戶離開頁面
註意事項:
關於mouseover/mouseout事件與mouseenter/mouseleave事件的區別:
mouseover/mouseout會在滑鼠經過自己和自己的子元素時都會觸發事件;
mouseenter/mouseleave只會在滑鼠經過自己時觸發事件.
主動觸發事件:
可使用jquery對象上的trigger方法來觸發對象上綁定的事件.
示例:
給element綁定hello事件
element.bind("hello",function(){
alert("hello world!");
});
觸發hello事件
element.trigger("hello");
事件冒泡:
在一個對象上觸發某類事件(比如單擊onclick事件),如果此對象定義了此事件的處理程式,那麼此事件就會調用這個處理程式,
如果沒有定義此事件處理程式或者事件返回true,那麼這個事件會向這個對象的父級對象傳播,從裡到外,直至它被處理(父級對象所有同類事件都將被激活),
或者它到達了對象層次的最頂層,即document對象(有些瀏覽器是window).
事件冒泡的作用:
事件冒泡允許多個操作被集中處理(把事件處理器添加到一個父級元素上,避免把事件處理器添加到多個子級元素上),它還可以讓你在對象層的不同級別捕獲事件.
阻止事件冒泡:
事件冒泡機制有時候是不需要的,需要阻止掉,通過 event.stopPropagation()來阻止.
示例(如果每個元素的父元素都定義了事件,則會從下到上依次觸發):
$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
$(document).click(function(event) {
alert('grandfather');
});
})
......
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>
阻止預設行為:
阻止右鍵菜單:寫入下列代碼可阻止頁面的右鍵菜單行為.
$(document).contextmenu(function(event) {
event.preventDefault();
});
js中已經學習過了事件,但是jQuery對JS事件進行了封裝,增加並擴展了事件處理機制,
jQuery不僅提供了更加優雅的事件處理語法 ,而且極大的增強了事件處理的能力.
2.1 簡單事件綁定>>bind事件綁定>>delegate事件綁定>>on事件綁定
bind註冊多個事件示例:
$(selector).bind({
mouseenter: function(){
alert("mouseenter方法");
},
click: function() {
alert("click方法");
},
...
});
bind為多種事件綁定同一函數示例:
$(selector).bind("mouseenter click", function(){函數體});
delegate事件綁定:
示例:
$(selector).delegate("p", "click", function(){函數體});
參數:
第一個參數:事件最終由誰來執行(示例為事件最終由p標簽來執行);
第二個參數:事件的類型(示例為click事件);
第三個參數:函數,需要做的事件
delegate事件綁定的優點: 動態創建的元素也能綁定事件;
註意: 委托事件只能給父元素以及祖先元素註冊,不能給子元素註冊,其實現原理為冒泡原理.
2.2 on註冊事件(重點)
jQuery1.7之後,jQuery用on統一了所有事件的處理方法.
最現代的方式,相容zepto(移動端類似jQuery的一個庫),強烈建議使用.
on註冊簡單事件:
$(selector).on("click", function(){});表示給$(selector)綁定事件,並且由自己觸發,不支持動態綁定事件.
on註冊委托事件:
$(selector).on("click", "span", function(){});
表示給$(selector)綁定代理事件,當必須是它的內部元素span才能觸發這個事件,支持動態綁定.
on註冊事件的語法:
第一個參數:events,綁定事件的名稱可以是由空格分隔的多個事件(標準事件或自定義事件)
第二個參數:selector,執行事件的後代元素(可選),如果沒有後代元素,那麼事件將由自己執行.
第三個參數:data:傳遞給處理函數的數據,事件觸發的時候通過event.data來使用(不常使用)
第四個參數:handler,事件處理函數
$(selector).on(event[, selector][, data], handler);
2.3事件解綁
unbind方式(不用)
$(selector).unbind();解綁所有的事件
$(selector).unbind("click");解綁指定的事件
undelegate方式(不用)
$(selector).undelegate();解綁所有的delegate事件
$(selector).undelegate("click");解綁所有的click事件
off方式(推薦):
$(selector).off();解綁selector選中元素的所有事件
$(selector).off("click");解綁selector選中元素的click事件
2.4 觸發事件
$(selector).click();觸發click事件;
$(selector).trigger("click");
2.5 jQuery事件對象
jQuery事件對象其實就是對JS事件對象的一個封裝,處理了相容性的問題
screenX和screenY:對應屏幕最左上角的值
clientX和clientY:距離頁面左上角的位置(忽視滾動條)
pageX和pageY:距離頁面最頂部的左上角的位置(會計算滾動條的距離)
event,keyCode:按下的鍵盤代碼
event.data:存儲綁定事件時傳遞的附加值
event.stopPropagation():阻止事件的冒泡行為(propagation英文:宣傳; 傳播,傳輸,蔓延,擴展,波及深度; 〔生〕繁殖法,〔地〕傳導; 培養)
event.preventDefault():阻止瀏覽器預設的行為
return false:既能阻止事件冒泡,又能阻止瀏覽器的預設行為.
3. jQuery補充知識點
3.1 鏈式編程
jQuery鏈式調用:
jQuery對象的方法會在執行完後返回這個jQuery對象，所有jQuery對象的方法可以連起來寫.下列的方法都返回jQuery對象,可鏈式調用:
$('#div1') // id為div1的元素
.children('ul') //該元素下麵的ul子元素
.slideDown('fast') //高度從零變到實際高度來顯示ul元素
.parent() //跳到ul的父元素，也就是id為div1的元素
.siblings() //跳到div1元素平級的所有兄弟元素
.children('ul') //這些兄弟元素中的ul子元素
.slideUp('fast'); //高度實際高度變換到零來隱藏ul元素
示例:$("#p1").css("color","red").slideUp(2000).slideDown(2000);
通常情況下,只有設置操作才能把鏈式編程延續下去.
因為獲取操作的時候,會返回獲取的相應的值,無法返回jQuery對象.
end(); 篩選選擇器會改變jQuery對象的DOM對象,想要回覆到上一次的狀態,並且返回匹配元素之前的狀態.
3.2 each方法
jQuery的隱匿迭代會對所有的DOM對象設置相同的值,但是如果我們需要給每一個對象設置不同的值的時候,就需要隱匿迭代了.
each作用:遍歷jQuery對象集合,為每個匹配的元素執行一個函數
$(selector).each(function(index, element){});
第一個參數表示當前元素所有匹配元素中的索引號
第二個參數表示當前元素(DOM對象)
=================================================================
jQuery-AJAX
1.jQuery load()方法:
load() 方法從伺服器載入數據,並把返回的數據放入被選元素中.
語法: $(selector).load(URL,data,callback);
必需的URL參數規定您希望載入的URL
可選的data參數規定與請求一同發送的查詢字元串鍵/值對集合.
可選的callback參數是load()方法完成後所執行的函數名稱.回調函數可以設置不同的參數:
responseTxt - 包含調用成功時的結果內容
statusTXT - 包含調用的狀態
xhr - 包含 XMLHttpRequest 對象
示例:
$("#div1").load("demo_test.txt"); 把文件"demo_test.txt"的內容載入到指定的<div>元素中.
$("#div1").load("demo_test.txt #p1"); 把"demo_test.txt"文件中id="p1"的元素的內容,載入到指定的<div>元素中.
報錯示例:Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https
2.jQuery-AJAX get()和post()方法:
jQuery get()和post()方法用於通過HTTP GET或POST請求從伺服器請求數據.
$.get()
該方法通過 HTTP GET 請求從伺服器上請求數據.
語法: $.get(URL,callback);
必需的 URL 參數規定您希望請求的 URL.
可選的 callback 參數是請求成功後所執行的函數名.第一個回調參數 data 存有被請求頁面的內容,第二個回調參數 status 存有請求的狀態.
示例:
$.get("/try/ajax/demo_test.php",function(data,status){ 函數體 });
$.post()
該方法通過 HTTP POST 請求向伺服器提交數據.
語法: $.post(URL,data,callback);
必需的 URL 參數規定您希望請求的 URL.
可選的 data 參數規定連同請求發送的數據.
可選的 callback 參數是請求成功後所執行的函數名.第一個回調參數 data 存有被請求頁面的內容,而第二個回調參數 status 存有請求的狀態.
示例:
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鳥教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("數據: \n" + data + "\n狀態: " + status);
});
});
3.jQuery-Ajax
$.ajax使用方法:
常用參數:
1、url 請求地址
2、type 請求方式,預設是'GET',常用的還有'POST'
3、dataType 設置返回的數據格式,常用的是'json'格式,也可以設置為'html'
4、data 設置發送給伺服器的數據
5、success 設置請求成功後的回調函數
6、error 設置請求失敗後的回調函數
7、async 設置是否非同步,預設值是'true',表示非同步
以前的寫法:
$.ajax({
url: 'js/user.json',
type: 'GET',
dataType: 'json',
data:{'aa':1}
success:function(data){
......
},
error:function(){
alert('伺服器超時，請重試！');
}
});
新的寫法(推薦):
$.ajax({
url: 'js/user.json',
type: 'GET',
dataType: 'json',
data:{'aa':1}
})
.done(function(data) {
......
})
.fail(function() {
alert('伺服器超時，請重試！');
});
=================================================================
jQuery-noConflict()方法
jQuery noConflict() 該方法會釋放對 $ 標識符的控制,這樣其他腳本就可以使用它了.雖然釋放了 $ ,但依然可以用jQuery來代替 $ 執行jQuery所有的功能.
示例:
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍然在工作!");
});
});
您也可以創建自己的簡寫,noConflict()會返回對 jQuery 的引用,您可以把它存入變數,以供稍後使用,示例如下:
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
});
如果你的jQuery代碼塊使用$簡寫,並且您不願意改變這個快捷方式,那麼您可以把$符號作為變數傳遞給ready方法.這樣就可以在函數內使用$符號了
- 而在函數外,您依舊不得不使用 "jQuery" 示例如下:
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍然在工作!");
});
});
=================================================================
jQuery擴展:
1 jQuery插件簡介(不作展開):
1.1 jQuery常用插件:
插件: jQuery不可能包含所有的功能,我們可以通過插件來擴展jQuery的功能
jQuery有著豐富的插件,使用這些插件能給jQuery提供一些額外的功能.
1.1.1jQuery.color.js
animate不支持顏色的漸變,但使用jQuery.color.js後就可以支持.
使用該插件的步驟:
1.引入jQuery文件
2.引入插件(如果有用到css的)
3.使用插件
1.1.2jQuery.lazyload.js
懶載入插件
1.1.3jQuery.ui.js插件
jQueryUI專指由jQuery官方維護的UI方向的插件
官方API: http://api.jqueryui.com/category/all/
其他教程:jQueryUI教程
基本使用:
1.引入jQueryUI的樣式文件
2.引入jQuery
3.引入jQueryUI的JS文件
4.使用jQueryUI功能
使用jQuery.ui.js實現新聞模塊的案例.
1.2製作 jQuery插件
原理: jQuery插件其實就是給jQuery對象增加一個新的方法,讓jQuery對象擁有某一個功能.
通過給$.fn添加方法就能夠擴展jQuery對象
$.fn.pluginName = function(){};
=================================================================
2 移動端庫和框架(不作展開):
2.1 移動端js事件
移動端的操作方式和PC端是不同的,移動端主要用手指操作,所以有特殊的touch事件,touch事件包括如下幾個事件:
1、touchstart: 手指放到屏幕上時觸發
2、touchmove: 手指在屏幕上滑動式觸發
3、touchend: 手指離開屏幕時觸發
4、touchcancel: 系統取消touch事件的時候觸發,比較少用.
移動端一般有三種操作:點擊、滑動、拖動.這三種操作一般是組合使用上面的幾個事件來完成的,所有上面的4個事件一般很少單獨使用,
一般是封裝使用來實現這三種操作,可以使用封裝成熟的js庫.
2.2 zeptojs
Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫,它與jquery有著類似的api.如果你會用jquery,那麼你也會用zepto.
Zepto的一些可選功能是專門針對移動端瀏覽器的,它的最初目標是在移動端提供一個精簡的類似jquery的js庫.
zepto官網: http://zeptojs.com/
zepto中文api: http://www.css88.com/doc/zeptojs_api/
zepto包含很多模塊,預設下載版本包含的模塊有Core, Ajax, Event, Form, IE模塊.如果還需要其他的模塊,可以自定義構建.
zepto自定義構建地址: http://github.e-sites.nl/zeptobuilder/
touch模塊封裝了針對移動端常用的事件,可使用此模塊進行移動端特定效果開發,這些事件有:
1.tap 元素tap的時候觸發,此事件類似click,但是比click快.
2.longTap 當一個元素被按住超過750ms觸發.
3.swipe, swipeLeft, swipeRight, swipeUp, swipeDown 當元素被划過時觸發.(可選擇給定的方向)
2.3 swiper
swiper.js是一款成熟穩定的應用於PC端和移動端的滑動效果插件,一般用來觸屏焦點圖、觸屏整屏滾動等效果.
swiper分為2.x版本和3.x版本,2.x版本支持低版本瀏覽器(IE7),3.x放棄支持低版本瀏覽器,適合應用在移動端.
2.x版本中文網址:http://2.swiper.com.cn/
3.x版本中文網地址:http://www.swiper.com.cn/
swiper使用方法:
<script type="text/javascript" src="js/swiper.min.js"></script>
......
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
......
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
initialSlide :1,
paginationClickable: true,
loop: true,
autoplay:3000,
autoplayDisableOnInteraction:false
});
</script>
swiper使用參數:
1、initialSlide:初始索引值,從0開始
2、direction:滑動方向 horizontal | vertical
3、speed:滑動速度,單位ms
4、autoplay:設置自動播放及播放時間
5、autoplayDisableOnInteraction:用戶操作swipe後是否還自動播放,預設是true,不再自動播放
6、pagination:分頁圓點
7、paginationClickable:分頁圓點是否點擊
8、prevButton:上一頁箭頭
9、nextButton:下一頁箭頭
10、loop:是否首尾銜接
11、onSlideChangeEnd:回調函數，滑動結束時執行
2.4 bootstrap
bootstrap是簡單、直觀、強悍的前端開發框架,讓web開發更迅速、簡單.來自Twitter,是目前很受歡迎的前端框架之一.
Bootrstrap是基於HTML、CSS、JavaScript的,讓書寫代碼更容易.移動優先,響應式佈局開發.
bootstrap中文網址: http://www.bootcss.com/
bootstrap容器
container-fluid 流體
container
1170
970
750
100%
bootstrap柵格系統
bootstrap將頁面橫向分為12等分,按照12等分定義了適應不同寬度等分的樣式類,這些樣式類組成了一套響應式、移動設備優先的流式柵格系統:
1、col-lg-
2、col-md-
3、col-sm-
4、col-xs-
bootstrap響應式查詢區間:
1、大於等於768
2、大於等於992
3、大於等於1200
bootstrap表單:
1、form 聲明一個表單域
2、form-inline 內聯表單域
3、form-horizontal 水平排列表單域
4、form-group 表單組、包括表單文字和表單控制項
5、form-control 文本輸入框、下拉列表控制項樣式
6、checkbox checkbox-inline 多選框樣式
7、radio radio-inline 單選框樣式
8、input-group 表單控制項組
9、input-group-addon 表單控制項組物件樣式 10、input-group-btn 表單控制項組物件為按鈕的樣式
10、form-group-lg 大尺寸表單
11、form-group-sm 小尺寸表單
bootstrap按鈕:
1、btn 聲明按鈕
2、btn-default 預設按鈕樣式
3、btn-primay
4、btn-success
5、btn-info
6、btn-warning
7、btn-danger
8、btn-link
9、btn-lg
10、btn-md
11、btn-xs
12、btn-block 寬度是父級寬100%的按鈕
13、active
14、disabled
15、btn-group 定義按鈕組
bootstrap圖片:
img-responsive 聲明響應式圖片
bootstrap隱藏類:
1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg
bootstrap字體圖標:
通過字體代替圖標,font文件夾需要和css文件夾在同一目錄
bootstrap下拉菜單:
1、dropdown-toggle
2、dropdown-menu
bootstrap選項卡:
1、nav
2、nav-tabs
3、nav-pills
4、tab-content
bootstrap導航條:
1、navbar 聲明導航條
2、navbar-default 聲明預設的導航條樣式
3、navbar-inverse 聲明反白的導航條樣式
4、navbar-static-top 去掉導航條的圓角
5、navbar-fixed-top 固定到頂部的導航條
6、navbar-fixed-bottom 固定到底部的導航條
7、navbar-header 申明logo的容器
8、navbar-brand 針對logo等固定內容的樣式
11、nav navbar-nav 定義導航條中的菜單
12、navbar-form 定義導航條中的表單
13、navbar-btn 定義導航條中的按鈕
14、navbar-text 定義導航條中的文本
9、navbar-left 菜單靠左
10、navbar-right 菜單靠右
bootstrap模態框:
1、modal 聲明一個模態框
2、modal-dialog 定義模態框尺寸
3、modal-lg 定義大尺寸模態框
4、modal-sm 定義小尺寸模態框
5、modal-header
6、modal-body
7、modal-footer
=================================================================
3 前端自動化及優化(不作展開):
3.1 less、sass、stylus
它們是三種類似的樣式動態語言,屬於css預處理語言,它們有類似css的語法,為css賦予了動態語言的特性、如變數、繼承、運算、函數等.
這麼做是為了css的編寫和維護.
它們使用的文件分別是: .less、.scss、*.styl,這些文件是不能再網頁上直接使用的,最終要編譯成css文件來使用,編譯的方法有軟體編譯,或者用nodejs程式.
less、sass編譯軟體:http://koala-app.com/index-zh.html
less中文網址:http://lesscss.cn/
less語法：
1、註釋
// 不會被編譯的註釋
/* 會被編譯的註釋 */
2、變數
@w:200px;
.box{
width:@w;
height:@w;
background-color:red;
}
3、混合
.border{
border:1px solid #ddd;
}
.box(@w:100px,@h:50px,@bw:1px){
width:@w;
height:@h;
border:@bw solid #ddd;
}
.box{
.border;
background-color:red;
}
4、匹配模式
.p(r){
postion:relative;
}
.p(a){
postion:absolute;
}
.p(f){
postion:fixed;
}
.box{
.p(f);
}
5、運算
@w:300px;
.box{
width:@w+20;
}
6、嵌套
.list{
li{
...
}
a{
...
&:hover{
...
}
}
span{
...
}
}
7、導入
// 導入common.less,導入a.css文件
@import "common";
@import (less) "a.css";
3.2 前端自動化
Node.js
Node.js可以理解為是一門後端腳本語言,使用了和JavaScript相同的語法,會使用JavaScript的程式員能很快上手node.js.
nodjs在處理高併發方面性能卓越,目前許多公司都在使用nodejs作為後端數據服務和前端開發的中間層.
node.js的中文網站:https://nodejs.org/zh-cn/
前端自動化
前端開發的流程越來越複雜,其中有代碼的合併和壓縮、圖片的壓縮;對less、sass的預處理;文件操作等.
這些工作是重覆乏味的,為了優化開發流程,提高工作效率,前端自動化工具就出現了,自動化工具可以通過配置,自動完成這些工作.
grunt、gulp
grunt和gulp是使用node.js編寫的,前端首選的自動化工具,gulp在書寫配置上比grunt更簡潔,運行的性能更高,gulp逐漸成為主流.
gulp的使用
gulp使用步驟: 安裝nodejs->全局安裝gulp->項目安裝gulp以及gulp插件->配置gulpfile.js->運行任務
gulp網站:http://gulpjs.com/
常用gulp插件：
壓縮js代碼(gulp-uglify)
less的編譯(gulp-less)
css的壓縮(gulp-minify-css)
自動添加css3首碼(gulp-autoprefixer)
文件改名字 (gulp-rename)
3.3 前端性能優化
從用戶訪問資源到資源完整的展現在用戶面前的過程中,通過技術手段和優化策略,縮短每個步驟的處理時間從而提升整個資源的訪問和呈現速度.
網站的性能直接會影響到用戶的數量,所有前端性能優化很重要.
前端性能優化分為如下幾個方面:
一、代碼部署:
1、代碼的壓縮與合併
2、圖片、js、css等靜態資源使用和主站不同功能變數名稱地址存儲,從而使得在傳輸資源時不會帶上不必要的cookie信息.
3、使用內容分髮網絡 CDN
4、為文件設置Last-Modified、Expires和Etag
5、使用GZIP壓縮傳送
6、權衡DNS查找次數(使用不同功能變數名稱會增加DNS查找)
7、避免不必要的重定向(加"/")
二、編碼:
html:
1、使用結構清晰，簡單，語義化標簽
2、避免空的src和href
3、不要在HTML中縮放圖片
css:
1、精簡css選擇器
2、把CSS放到頂部
3、避免@import方式引入樣式
4、css中使用base64圖片數據取代圖片文件,減少請求數,線上轉base64網站: http://tool.css-js.com/base64.html
5、使用css動畫來取代javascript動畫
6、使用字體圖標,圖標庫網站: http://fontawesome.io/icons/ 線上製作網站: www.iconfont.cn
7、使用css sprite
8、使用svg圖形
9、避免使用CSS表達式
a {star : expression(onfocus=this.blur)}
10、避免使用濾鏡
javascript:
1、減少引用庫的個數
2、使用requirejs或seajs非同步載入js
3、JS放到頁面底部引入
4、避免全局查找
5、減少屬性查找
6、使用原生方法
7、用switch語句代替複雜的if else語句
8、減少語句數,比如說多個變數聲明可以寫成一句
9、使用字面量表達式來初始化數組或者對象
10、使用DocumentFragments或innerHTML取代複雜的元素註入
11、使用事件代理(事件委托)
12、避免多次訪問dom選擇集
13、高頻觸發事件設置使用函數節流，如：onmousemove、onmouseover
14、使用Web Storage緩存數據
15、使用Array的join方法來代替字元串的"+"連接(先將要連接的字元串放進數組)
=================================================================
