Python全棧之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使用方法:
經常使用參數:
一、url 請求地址
二、type 請求方式,默認是'GET',經常使用的還有'POST'
三、dataType 設置返回的數據格式,經常使用的是'json'格式,也能夠設置爲'html'
四、data 設置發送給服務器的數據
五、success 設置請求成功後的回調函數
六、error 設置請求失敗後的回調函數
七、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事件包括以下幾個事件:
一、touchstart: 手指放到屏幕上時觸發
二、touchmove: 手指在屏幕上滑動式觸發
三、touchend: 手指離開屏幕時觸發
四、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使用參數:
一、initialSlide:初始索引值,從0開始
二、direction:滑動方向 horizontal | vertical
三、speed:滑動速度,單位ms
四、autoplay:設置自動播放及播放時間
五、autoplayDisableOnInteraction:用戶操做swipe後是否還自動播放,默認是true,再也不自動播放
六、pagination:分頁圓點
七、paginationClickable:分頁圓點是否點擊
八、prevButton:上一頁箭頭
九、nextButton:下一頁箭頭
十、loop:是否首尾銜接
十一、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等分定義了適應不一樣寬度等分的樣式類,這些樣式類組成了一套響應式、移動設備優先的流式柵格系統:
一、col-lg-
二、col-md-
三、col-sm-
四、col-xs-
bootstrap響應式查詢區間:
一、大於等於768
二、大於等於992
三、大於等於1200
bootstrap表單:
一、form 聲明一個表單域
二、form-inline 內聯表單域
三、form-horizontal 水平排列表單域
四、form-group 表單組、包括表單文字和表單控件
五、form-control 文本輸入框、下拉列表控件樣式
六、checkbox checkbox-inline 多選框樣式
七、radio radio-inline 單選框樣式
八、input-group 表單控件組
九、input-group-addon 表單控件組物件樣式 十、input-group-btn 表單控件組物件爲按鈕的樣式
十、form-group-lg 大尺寸表單
十一、form-group-sm 小尺寸表單
bootstrap按鈕:
一、btn 聲明按鈕
二、btn-default 默認按鈕樣式
三、btn-primay
四、btn-success
五、btn-info
六、btn-warning
七、btn-danger
八、btn-link
九、btn-lg
十、btn-md
十一、btn-xs
十二、btn-block 寬度是父級寬100%的按鈕
1三、active
1四、disabled
1五、btn-group 定義按鈕組
bootstrap圖片:
img-responsive 聲明響應式圖片
bootstrap隱藏類:
一、hidden-xs
二、hidden-sm
三、hidden-md
四、hidden-lg
bootstrap字體圖標:
經過字體代替圖標,font文件夾須要和css文件夾在同一目錄
bootstrap下拉菜單:
一、dropdown-toggle
二、dropdown-menu
bootstrap選項卡:
一、nav
二、nav-tabs
三、nav-pills
四、tab-content
bootstrap導航條:
一、navbar 聲明導航條
二、navbar-default 聲明默認的導航條樣式
三、navbar-inverse 聲明反白的導航條樣式
四、navbar-static-top 去掉導航條的圓角
五、navbar-fixed-top 固定到頂部的導航條
六、navbar-fixed-bottom 固定到底部的導航條
七、navbar-header 申明logo的容器
八、navbar-brand 針對logo等固定內容的樣式
十一、nav navbar-nav 定義導航條中的菜單
十二、navbar-form 定義導航條中的表單
1三、navbar-btn 定義導航條中的按鈕
1四、navbar-text 定義導航條中的文本
九、navbar-left 菜單靠左
十、navbar-right 菜單靠右
bootstrap模態框:
一、modal 聲明一個模態框
二、modal-dialog 定義模態框尺寸
三、modal-lg 定義大尺寸模態框
四、modal-sm 定義小尺寸模態框
五、modal-header
六、modal-body
七、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語法：
一、註釋
// 不會被編譯的註釋
/* 會被編譯的註釋 */
二、變量
@w:200px;
.box{
width:@w;
height:@w;
background-color:red;
}
三、混合
.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;
}
四、匹配模式
.p(r){
postion:relative;
}
.p(a){
postion:absolute;
}
.p(f){
postion:fixed;
}
.box{
.p(f);
}
五、運算
@w:300px;
.box{
width:@w+20;
}
六、嵌套
.list{
li{
...
}
a{
...
&:hover{
...
}
}
span{
...
}
}
七、導入
// 導入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、代碼部署:
一、代碼的壓縮與合併
二、圖片、js、css等靜態資源使用和主站不一樣域名地址存儲,從而使得在傳輸資源時不會帶上沒必要要的cookie信息.
三、使用內容分發網絡 CDN
四、爲文件設置Last-Modified、Expires和Etag
五、使用GZIP壓縮傳送
六、權衡DNS查找次數(使用不一樣域名會增長DNS查找)
七、避免沒必要要的重定向(加"/")
2、編碼:
html:
一、使用結構清晰，簡單，語義化標籤
二、避免空的src和href
三、不要在HTML中縮放圖片
css:
一、精簡css選擇器
二、把CSS放到頂部
三、避免@import方式引入樣式
四、css中使用base64圖片數據取代圖片文件,減小請求數,在線轉base64網站: http://tool.css-js.com/base64.html
五、使用css動畫來取代javascript動畫
六、使用字體圖標,圖標庫網站: http://fontawesome.io/icons/ 在線製做網站: www.iconfont.cn
七、使用css sprite
八、使用svg圖形
九、避免使用CSS表達式
a {star : expression(onfocus=this.blur)}
十、避免使用濾鏡
javascript:
一、減小引用庫的個數
二、使用requirejs或seajs異步加載js
三、JS放到頁面底部引入
四、避免全局查找
五、減小屬性查找
六、使用原生方法
七、用switch語句代替複雜的if else語句
八、減小語句數,好比說多個變量聲明能夠寫成一句
九、使用字面量表達式來初始化數組或者對象
十、使用DocumentFragments或innerHTML取代複雜的元素注入
十一、使用事件代理(事件委託)
十二、避免屢次訪問dom選擇集
1三、高頻觸發事件設置使用函數節流，如：onmousemove、onmouseover
1四、使用Web Storage緩存數據
1五、使用Array的join方法來代替字符串的"+"鏈接(先將要鏈接的字符串放進數組)
=================================================================
相關文章
- 1. Python全棧之jQuery筆記
- 2. Python全棧筆記（一）
- 3. Python全棧開發之1六、jquery
- 4. Python全棧-第六課 學習筆記
- 5. python全棧開發筆記---------函數
- 6. Python全棧-第一課 學習筆記
- 7. Python全棧-第四課 學習筆記
- 8. Python全棧-第十課 學習筆記
- 9. Python全棧-第五課 學習筆記
- 10. Python全棧-第三課 學習筆記
- 更多相關文章...
- • SQLite - Python - SQLite教程
- • C# 堆棧（Stack） - C#教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
