雪峰
http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
MDN-JavaScript
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
前端開發(fā)筆記
https://li-xinyang.gitbooks.io/frontend-notebook/content/
菜鳥教程
http://www.runoob.com/
Jquery在線手冊
http://hemin.cn/jq/
在線文檔-Jquery
http://tool.oschina.net/apidocs/apidoc?api=jquery
CSS參考手冊
http://css.doyoe.com/
CSS3動畫手冊
http://isux.tencent.com/css3/index.html
CSS3-html5在線測試
http://zaole.net/
CSS3樣式生成器
http://www.css88.com/tool/css3Preview/
CSS小工具集合
http://linxz.github.io/tianyizone/
CSS3 UI 庫
http://css3lib.alloyteam.com/#animation/AnimatedButtons
JavaScript標(biāo)準(zhǔn)參考手冊
http://www.kancloud.cn/kancloud/javascript-standards-reference/46532
李炎恢 HTML CSS JavaScript PHP Bootstrap 教程
http://www.kancloud.cn/wizardforcel/liyanhui-tutorials/154224
微信關(guān)注公眾號:馨客棧,也可以加QQ群:65202496 來共同學(xué)習(xí)交流,分享資源(前端,PS,軟件,電影等學(xué)習(xí)相關(guān)的資源)
Query就對javascript的一個擴(kuò)展, 封裝, 就是讓javascript更好用, 更簡單。
人家怎么說的來著, jQuery就是要用更少的代碼, 漂亮的完成更多的功能。
javascript與jQuery常用方法比較
1 加載DOM區(qū)別
javascript: window.onload
實(shí)例
function first(){
alert('first');
}
function second(){
alert('second');
}
window.onload = first;
window.onload = second;
//只會執(zhí)行第二個window.onload;不過可以通過以下方法來進(jìn)行改進(jìn):
window.onload = function(){
first();
second();
}
jQuery: $(document).ready() 簡化為$(function(){ //... })
實(shí)例1:
$(document).ready(){
function first(){
alert('first');
}
function second(){
alert('second');
}}
實(shí)例2:
$(document).ready(function(){
first();
} )
$(document).ready(function(){
second();
} ) //兩條均會執(zhí)行
可以簡化為:
$(function(){
first();
});
$(function(){
second();
});
jQuery加載與普通加載區(qū)別
方法 window.onload $(document).ready()
執(zhí)行時機(jī) 必須等待網(wǎng)頁中的所有內(nèi)容加載完畢后 網(wǎng)頁中的所有DOM結(jié)構(gòu)繪制完畢后就執(zhí)行,
(包括圖片才能執(zhí)行) 可能DOM元素關(guān)聯(lián)的東西并沒有加載完
編寫個數(shù) 不能同時編寫多個(后者會"覆蓋"前者) 能同時編寫多個
簡化寫法 無 $()
2 獲取ID
javascript: document.getElementById('idName')
jQuery: $('#idName')
3 獲取name和class
javascript: document.getElementsByName('name') name屬性
jQuery: $('.className') class屬性
4 獲取TagName
javascript: document.getElementsByTagName('tagName')
jQuery: $('tagName')
js中元素不存在使用它會報錯
var div = document.getElementsByTagName("div")[0];
div.onclick = function(){
console.log("javascript");
}
jQuery不會報錯
var $div = $("div");
$div.click(function(){
console.log("jQuery");
})
5 創(chuàng)建對象并加入文檔中
javascript:
var para=document.createElement("p");
var node=document.createTextNode("這是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
//將p元素追加為Id為div1的lastchild子節(jié)點(diǎn),如果想將新創(chuàng)建的p元素插入到已存在的某個元素之前,可以使用insertBefore()方法
jQuery:
jQuery提供了4種將新元素插入到已有元素(內(nèi)部)之前或者之后的方法:
append()、appendTo(目標(biāo))、prepend()、prependTo(目標(biāo))。 (prepend()、prependTo(目標(biāo))插在子元素之前)
格式:$(html);
HTML代碼:
<p>World!</p>
jQuery代碼:
$('p').append('<b>Hello!</b>'); //輸出:<p>World!<b>Hello!</b></p>
$('<b>Hello!</b>').appendTo('p'); //輸出:同上
$('p').prepend('<b>Hello!</b>'); //輸出:<p><b>Hello!</b>World! </p>
$('<b>Hello!</b>').prependTo('p'); //輸出:同上
6 插入新元素
javascript:
insertBefore() 語法格式:
parentElement.insertBefore(newElement,targetElement)
將一個img元素插入一個段落之前。
HTML代碼:
<img src="image.jpg" id="imgs" />
<p>這是一段文字</p>
javascript代碼:
var imgs = document.getElementById('imgs');
var para = document.getElementsByTag('p');
para.parenetNode.insertBefore(imgs,para);
jQuery:
jQuery提供了4種將新元素插入到已有元素(外部)之前或者之后的方法:before()、insertBefore(目標(biāo))、after()、insertAfter(目標(biāo))。
格式:$('html');
HTML代碼:
<p>World!</p>
jQuery代碼
$('p').after('<b>Hello!</b>'); //輸出:<p>World! </p><b>Hello!</b>
$('<b>Hello!</b>').insertAfter ('p'); //輸出:同上
$('p').before('<b>Hello!</b>'); //輸出:<b>Hello!</b><p>World! </p>
$('<b>Hello!</b>').insertBefore('p'); //輸出:同上
7 復(fù)制節(jié)點(diǎn)
javascript:
reference = node.cloneNode(bool)
這個方法只有一個布爾型的參數(shù), 它的可取值只能是true或者false。該參數(shù)決定是否把被復(fù)制節(jié)點(diǎn)的子節(jié)點(diǎn)也一同復(fù)制到新建節(jié)點(diǎn)里去。
jQuery:
clone() //復(fù)制節(jié)點(diǎn)后,被復(fù)制的新元素并不具有任何行為 ,默認(rèn)值false,也復(fù)制子節(jié)點(diǎn)
clone(true) //復(fù)制節(jié)點(diǎn)內(nèi)容及其綁定的事件
備注:該方法通常與appendTo()、prependTo()等方法結(jié)合使用。
8 刪除節(jié)點(diǎn)
javascript:
reference = element.removeChild(node)
removeChild()方法將一個給定元素里刪除一個子節(jié)點(diǎn)
jQuery:
remove();
remove()方法作用就是從DOM中刪除所有匹配的元素,remove()方法還可以與其他的過濾選擇器結(jié)合使用,非常方便。
將ul li下的title不是"Hello"的li移除:
$('ul li').remove(li[title!='Hello']);
empty(); 刪除匹配的元素集合中所有的子節(jié)點(diǎn)。
從DOM中把所有段落刪除
HTML 代碼:
<p>Hello</p> how are <p>you?</p>
jQuery 代碼:
$("p").remove();
把所有段落的子元素(包括文本節(jié)點(diǎn))刪除
HTML 代碼:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代碼:
$("p").empty();結(jié)果:
<p></p>
9 包裹節(jié)點(diǎn)
javascript: javascript暫無
jQuery:
wrap() //將匹配元素用其他元素的結(jié)構(gòu)化標(biāo)記單獨(dú)包裹起來
wrapAll() //將所有匹配的元素用一個元素包裹起來
wrapInner() //將匹配元素的子內(nèi)容用其他結(jié)構(gòu)化的標(biāo)記包裹起來
把所有的段落用一個新創(chuàng)建的div包裹起來
jQuery 代碼:
$("p").wrap("<div class='wrap'></div>");
用一個生成的div將所有段落包裹起來
jQuery 代碼:
$("p").wrapAll("<div></div>");
把所有段落內(nèi)的每個子內(nèi)容加粗
jQuery 代碼:
$("p").wrapInner("<b></b>");
10 屬性操作:設(shè)置屬性節(jié)點(diǎn)、查找屬性節(jié)點(diǎn)
javascript:
document.getElementsByTagName('tagName').title
document.getElementsByTagName('tagName').title="My title";
document.getElementsByTagName('tagName')['title']="My title";
document.getElementsByTagName('tagName').getAttribute('My title');
document.getElementsByTagName('tagName').setAttribute('title','My title');
document.getElementsByTagName('tagName').removeAttribute('title','My title');
jQuery:
jQuery中設(shè)置和查找屬性節(jié)點(diǎn)都是:attr() 。
$('p').attr('title'); //獲取p元素的title屬性
$('p').attr('title','My title'); //設(shè)置p元素的title屬性
$('p').removeAttr('title') //刪除p元素的title屬性
$('p').attr('title':'My title','class':'myClass'); //當(dāng)需要添加多個屬性時, 可以用"屬性":"值"對的形式, 中間用逗號隔開。
11 替換節(jié)點(diǎn)
javascript:
var reference = element.replaceChild(newChild,oldChild)
該方法是將一個給定父元素里的一個子節(jié)點(diǎn)替換為另外一個節(jié)點(diǎn)。
jQuery:
replaceWith()、replaceAll()
replaceWith() 與 replaceAll() 作用相同。差異在于語法:內(nèi)容和選擇器的位置, 以及 replaceAll() 無法使用函數(shù)進(jìn)行替換。
$(selector).replaceWith(content) 用指定的HTML內(nèi)容或元素替換被選元素
$(content).replaceAll(selector) 用指定的HTML內(nèi)容或元素替換被選元素。
<p>hello</p> 想替換為: <h2>Hi</h2>
jQuery代碼:
$('p') .replaceWith('<h2>Hi</h2>');
或者可以寫成:
$('<h2>Hi</h2>').replaceAll('p');
12 刪除節(jié)點(diǎn)
javascript:removeChild()
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
jQuery:
$("p").remove();
13 CSS操作
javascript:
格式:element.style.property
CSS-DOM能夠讀取和設(shè)置style對象的屬性, 其不足之處是無法通過它來提取外部CSS設(shè)置的樣式信息, 而jQuery的css()方法是可以的。
document.body.style.backgroundColor="red";
jQuery:
格式:$(selector).css()
css()方法獲取元素的樣式屬性
此外, jQuery還提供了height()和width()分別用來獲取元素的高度和寬度(均不帶單位), 而css(height)、css(width)返回高寬, 且?guī)挝弧?/p>
$("p").css({color: "#ff0011", background: "blue", "font-size":"16px" });
$("p").css({color: "#ff0011", background: "blue", fontSize:"16px" }); jQuery也支持
注意點(diǎn):CSS中的如"font-size"這樣有"-"的屬性, 要使用首字母小寫的駝峰式表示, 如fontSize。
jQuery中的css()的帶橫線的屬性可以原樣輸出, 但需帶引號, 也可以使用首字母小寫的馱峰式表示。
javascript:
className屬性
DOM對象.className = "className";
DOM對象.className += " claaaName";
DOM對象.className = "";
jQuery:
addClass(class|fn)
removeClass(class|fn)
toggleClass(class|fn)
14 表單value值的操作
javascipt:
formNode.value
formNode.attr('value');
formNode.attr('value',信息值);
jQuery:
val([val|fn|arr])
$().val(); //獲得value屬性值
$().val(value值); //設(shè)置value屬性的值(文本框)
$().val([,,]); //設(shè)置value屬性的值(單選框、復(fù)選框、下拉式列表)
該val()方法在復(fù)選框、單選按鈕、下拉列表的使用有凸出表現(xiàn)。
15 事件的屬性
相同之處
altKey Alt鍵是否被按下. 按下返回true
ctrlKey ctrl鍵是否被按下, 按下返回true
shiftKey Shift鍵是否被按下, 按下返回true
screenX/Y 對于鼠標(biāo)事件, 獲取事件相對于屏幕原點(diǎn)的水平/垂直坐標(biāo)
type 事件的名稱,如click、mouseover等
以上為javascript和jQuery相同的屬性
不同之處
javascript:
clientX/Y 鼠標(biāo)指針在客戶端區(qū)域的坐標(biāo), 不包括工具欄、滾動條
jQuery:
pageX/Y 鼠標(biāo)指針在客戶端區(qū)域的坐標(biāo), 不包括工具欄,滾動條;
16 事件的兼容性
事件目標(biāo):
javascript:
IE:srcElement 標(biāo)準(zhǔn)DOM:targe
jQuery:
target 引起事件的元素/對象
keyCode和CharCode:
javascript:
charcode keycode(keypress) keycode(keydown、keyup)
IE 無 按鍵的Unicode值 按鍵的數(shù)字代碼
標(biāo)準(zhǔn)DOM 按鍵的Unicode值 按鍵的數(shù)字代碼 按鍵的數(shù)字代碼
jQuery:
keyCode 對于keyup和keydown事件返回被按下的鍵。不區(qū)分大小寫, a和A都返回65;
鼠標(biāo)事件,值對應(yīng)按下的鼠標(biāo)鍵
javascript:
button IE中的按鍵 Firefox中的按鍵
0 未按下案件 左鍵
1 左鍵 中鍵(滑輪)
2 右鍵 右鍵
3 同時按下左、右鍵 不支持組合鍵,未按下任何鍵時button值為undefined
4 中鍵(滑輪)
5 同時按下左、中鍵
6 同時按下右、中鍵
7 同時按下左、中、右鍵
jQuery:
which 對于鍵盤事件, 返回觸發(fā)事件的鍵的數(shù)字編碼。對于鼠標(biāo)事件, 返回鼠標(biāo)按鍵號(1左,2中,3右);
15 事件設(shè)置
DOM1級事件設(shè)置
<input type="text" onclick="過程性代碼" value=’tom’ />
<input type="text" onclick="函數(shù)()" />
node.onclick = function(){}
node.onclick = 函數(shù);
DOM2級事件設(shè)置
node.addEventListener(類型,處理,事件流);
node.removeEventListener(類型,處理,事件流);
node.attachEvent();
node.detachEvent();
jquery事件設(shè)置
$().事件類型(事件處理函數(shù)fn); //設(shè)置事件
$().事件類型(); //觸發(fā)事件執(zhí)行
$().bind('事件類型',fn); //綁定事件
$().one('事件類型',fn); //綁定事件(一次)
$().live('事件類型',fn); //綁定事件(委派)
16 處理頁面中的元素
javascript:
使用javascript腳本獲取頁面內(nèi)容的方式主要有兩種, 第一種是通過表單獲取表單元素的value值。格式為:
表單名稱.元素名.value;
該方式只能獲取表單中的元素值,對于其他標(biāo)簽元素則無能為力。
第二種方式通過id名來獲取頁面中任意標(biāo)簽的內(nèi)容。格式為:
document.getElementById('id'). value;
document.getElementById ('id').innerText;
使用第二種方式時要注意, 標(biāo)簽的id名必須存在且唯一, 否則就會出現(xiàn)錯誤。
為標(biāo)簽內(nèi)容賦值時, 則使用如下格式:
id.innerHTML ='要顯示的內(nèi)容';
jQuery:
html([val|fn]) 返回值:String
取得第一個匹配元素的html內(nèi)容。這個函數(shù)不能用于XML文檔。但可以用于XHTML文檔。
在一個 HTML 文檔中, 我們可以使用html()方法來獲取任意一個元素的內(nèi)容。
如果選擇器匹配多于一個的元素, 那么只有第一個匹配元素的 HTML 內(nèi)容會被獲取。
val String
function(index, html) Function
此函數(shù)返回一個HTML字符串。接受兩個參數(shù), index為元素在集合中的索引位置, html為原先的HTML值。
text()
text([val|fn]) 返回值:String
val String 用于設(shè)定HTML內(nèi)容的值
function(index, html) Function 此函數(shù)返回一個HTML字符串。接受兩個參數(shù),index為元素在集合中的索引位置,html為原先的HTML值。
17 事件對象
javascript:
node.onclick = function(oEvent){
if(window.event) oEvent = window.event; //兼容性寫法
}
在IE瀏覽器中事件對象是window對象的一個屬性window.event;
在標(biāo)準(zhǔn)的DOM中規(guī)定event對象必須作為唯一的參數(shù)傳給事件處理函數(shù)。
因此, javascript要處理好各瀏覽器的事件對象的兼容性。
jQuery:
$().bind('click',function(evt){ window.event });
$().click(function(evt){});
$().bind('mouseover',f1);
function f1(evt){}
事件對象:就直接使用的evt即可, 在jQuery框架內(nèi)部對各瀏覽器的事件對象作出了兼容處理。
18 阻止瀏覽器默認(rèn)動作、阻止事件冒泡
javascript:
DOM2級瀏覽器默認(rèn)動作阻止:
事件對象.preventDefault(); 主流瀏覽器
事件對象.returnValue = false; IE(6,7,8)瀏覽器
DOM2級事件冒泡阻止:
事件對象.stopPropagation(); 主流瀏覽器
事件對象.cancelBubule = true; IE(6,7,8)瀏覽器
jQuery:
$().bind('click',function(evt){
evt.preventDefault();
evt.stopPropagation();
});
preventDefault()方法是jQuery的方法, 名字與javascript底層代碼的名字一致, 并且對各瀏覽器作出了兼容處理。
stopPropagation()方法是jQuery的方法, 名字與javascript底層代碼的名字一致, 并且對各瀏覽器作出了兼容處理。
return false 與event.preventDefault()區(qū)別
1. return false 實(shí)際上執(zhí)行了三種操作
event.preventDefault()
event.stopPropation()
終止函數(shù)執(zhí)行并立即執(zhí)行
2 .為了避免對程序執(zhí)行過多的隱式操作造成的Bug,建議
只需要阻止事件默認(rèn)行為時,應(yīng)該使用event.preventDefault()
只需要阻止事件冒泡時,應(yīng)該使用event.stopPropagation()
只有當(dāng)同時阻止事件冒泡和阻止事件默認(rèn)行為時,才使用return false
19 頁面滾動
javascript:
scrollBy() 按照指定的像素值來滾動內(nèi)容。
scrollTo() 把內(nèi)容滾動到指定的坐標(biāo)。
<script>
function scrollWindow(){
window.scrollTo(100,500);
}
</script>
<input type="button" onclick="scrollWindow()" value="滾動條" />
jQuery:
offset([coordinates]) 獲取匹配元素在當(dāng)前視口的相對偏移。
返回的對象包含兩個整型屬性: top 和 left, 以像素計。此方法只對可見元素有效。
$("p:last").offset({ top: 10, left: 30 });
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
x=$("p").offset();
$("#span1").text(x.left);
$("#span2").text(x.top);
});
});
</script>
</head>
<body>
<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
<button>獲得 offset</button>
</body>
</html>
輸出結(jié)果: 本段落的偏移是 8 left 和 8 top。
scrollLeft() 設(shè)置或返回匹配元素相對滾動條左側(cè)的偏移。
scrollTop() 設(shè)置或返回匹配元素相對滾動條頂部的偏移。
在各種類庫滿天飛,說jQuery有多快多快,可是對前端大牛來說,更定不會止步于jQuery,因而常常聽到高級的前端工程師追求原生js,為何?答案是原生JS要更快,原因是JQuery這樣的庫必須要兼容各種瀏覽器和低版本和許多其他的東西,考慮通用性必然會導(dǎo)致性能的損耗。
當(dāng)然,我不是提倡寫代碼純用原生JS實(shí)現(xiàn),請記住:“框架能夠讓我們走的更快,但只有了解原生的JS才能讓我們走的更遠(yuǎn)”。
下面直接用代碼示例:流行的常用的JQuery功能用原生JS實(shí)現(xiàn)。
選擇器
JQuery選擇器的強(qiáng)大無需贅言,然而在大多數(shù)的情況下,我們可以使用相同的代碼量用原生JS輕易實(shí)現(xiàn)。
1.獲取頁面所有的div
/* jQuery */
$("div")
/* native equivalent */
document.getElementsByTagName("div")
2.獲取某類名相同的一群元素
/* jQuery */
$(".my-class")
/* native equivalent */
document.querySelectorAll(".my-class")
/* FASTER native equivalent */
document.getElementsByClassName("my-class")
3.更復(fù)雜的一些選擇器
/* jQuery */
$(".my-class li:first-child")
/* native equivalent */
document.querySelectorAll(".my-class li:first-child")
/* jQuery */
$(".my-class").get(0)
/* native equivalent */
document.querySelector(".my-class")
DOM操作
JQuery頻繁功能就是操作DOM元素,諸如插入或刪除一個元素。當(dāng)然,如果使用原生JS實(shí)現(xiàn)這些功能,代碼量肯定是會有所增加的,不過我們也可以將這些功能封裝成函數(shù),下面是一些常用的DOM操作的原生JS實(shí)現(xiàn)。
1.插入HTML元素
/* jQuery */
$(document.body).append("<div id='myDiv'><img src='im.gif'/></div>");
/* CRAPPY native equivalent */
document.body.innerHTML += "<div id='myDiv'><img src='im.gif'/></div>";
/* MUCH BETTER native equivalent */
var frag = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id = "myDiv";
var im = document.createElement("img");
im.src = "im.gif";
myDiv.appendChild(im);
frag.appendChild(myDiv);
document.body.appendChild(frag);
CSS操作
在JQuery中可以輕松實(shí)現(xiàn)對css的操作,增加屬性、刪除屬性或是檢測是否存在某個類。那么你是否覺得使用原生JS實(shí)現(xiàn)會很麻煩呢?其實(shí)不然,因?yàn)橛衏lassList。下面是一些關(guān)于JQuery css操作的JS原生實(shí)現(xiàn)。
// get reference to DOM element
var el = document.querySelector(".main-content");
//----Adding a class------
/* jQuery */
$(el).addClass("someClass");
/* native equivalent */
el.classList.add("someClass");
//----Removing a class-----
/* jQuery */
$(el).removeClass("someClass");
/* native equivalent */
el.classList.remove("someClass");
//----Does it have class---
/* jQuery */
if($(el).hasClass("someClass"))
/* native equivalent */
if(el.classList.contains("someClass"))
當(dāng)我們簡單地逐個設(shè)置Css的屬性,而并非將它們?nèi)總鬟f給JQuery的Css函數(shù)時,性能明顯會快很多。而且,真的不會添加什么額外的代碼。
// get reference to a DOM element
var el = document.querySelector(".main-content");
//----Setting multiple CSS properties----
/* jQuery */
$(el).css({
background: "#FF0000",
"box-shadow": "1px 1px 5px 5px red",
width: "100px",
height: "100px",
display: "block"
});
/* native equivalent */
el.style.background = "#FF0000";
el.style.width = "100px";
el.style.height = "100px";
el.style.display = "block";
el.style.boxShadow = "1px 1px 5px 5px red";
show與hide
show()與hide()應(yīng)該也是JQuery中十分常用的方法,原生JS實(shí)現(xiàn)同樣輕松。
// get reference to a DOM element
var el = document.querySelector(".main-content");
//----show() or hide()----
/* jQuery */
$(el).show();
$(el).hide();
/* native equivalent */
el.style.display = '';
el.style.display = 'none';
事件綁定
// get reference to a DOM element
var el = document.querySelector(".main-content");
//----Event Listener off----
/* jQuery */
$(el).off(eventName, eventHandler);
/* native equivalent */
el.removeEventListener(eventName, eventHandler);
//----Event Listener on----
/* jQuery */
$(el).on(eventName, eventHandler);
/* native equivalent */
el.addEventListener(eventName, eventHandler);
jQuery的確是個了不起的庫,如果同樣輕松的使用JS實(shí)現(xiàn)jQuery,盡量使用JS。即使優(yōu)化有點(diǎn)吹毛求疵,由于html5游戲的迅速崛起,這點(diǎn)優(yōu)化就顯得格外的寶貴。
文/丁向明
做一個有博客的web前端自媒體人,專注web前端開發(fā),關(guān)注用戶體驗(yàn),加我qq/微信交流:6135833
http://dingxiangming.com
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。