摘要:提高業(yè)務(wù)編程能力中提供了很多的方法基本都兼容,我們可以使用這些方法快速開(kāi)發(fā)項(xiàng)目中有的方法提供的思想可以讓我們把項(xiàng)目實(shí)現(xiàn)得更優(yōu)化提高基礎(chǔ)以及一些高級(jí)編程思想分析源碼,學(xué)習(xí)里面類庫(kù)封裝的思想和一些方法實(shí)現(xiàn)的原理有時(shí)間把中提供的常用方法都去實(shí)現(xiàn)一
jQuery
提高業(yè)務(wù)編程能力
JQ中提供了很多的方法(基本都兼容),我們可以使用這些方法快速開(kāi)發(fā)項(xiàng)目
JQ中有的方法提供的思想可以讓我們把項(xiàng)目實(shí)現(xiàn)得更優(yōu)化
提高JS基礎(chǔ)以及一些高級(jí)編程思想
分析JQ源碼,學(xué)習(xí)里面類庫(kù)封裝的思想和一些方法實(shí)現(xiàn)的原理
有時(shí)間把JQ中提供的常用方法都去實(shí)現(xiàn)一遍,提高自己的編程能力
jquery-1.xxx: 專門為PC端誕生的類庫(kù),兼容所有的瀏覽器
jquery-2.xxx: 當(dāng)初是為了移動(dòng)端而準(zhǔn)備的,所以IE低版本瀏覽器一般不兼容,但是這個(gè)版本針對(duì)移動(dòng)端的事件等操作也不是特別完善,被Zepto這個(gè)類庫(kù)取代了
jQuery充分利用了JS中函數(shù)的三種特性:普通函數(shù)、類、普通對(duì)象;jQuery就是這個(gè)類,在外面使用的$和jQuery是一個(gè)東西,jQuery中提供的方法分為兩部分:寫在原型上的方法和寫在jQuery私有屬性上的方法;創(chuàng)建jQuery實(shí)例的時(shí)候,會(huì)返回一個(gè)類數(shù)組(它也是jQuery實(shí)例),這個(gè)類數(shù)組是jQuery自己去創(chuàng)建的,里面有一些自己特定的屬性
//jQuery核心原理 (function(){ var version="1.11.3", jQuery=function(selector,context){ return jQuery.fn.innt(selector,context); }; jQuery.fn=jQuery.prototype={ //... init:function(selector,context){ } }; jQuery.ajax=function(){}; window.jQuery=window.$=jQuery; })();
jQuery對(duì)象和JS對(duì)象相互轉(zhuǎn)換
//jQuery對(duì)象轉(zhuǎn)換成JS對(duì)象 var $obj=$("*"); $obj[0]; //-->JS對(duì)象 $obj.get(0); //-->JS對(duì)象 $obj.eq(0) //-->這個(gè)獲取的是jQuery對(duì)象 //JS對(duì)象轉(zhuǎn)換成jQuery對(duì)象 var obj=document.getElementsByTagName("*"); $(obj); //-->jQuery對(duì)象
extend
在jQuery對(duì)象上和jQuery實(shí)例上都有這個(gè)方法,并且都是同一個(gè)方法,但是這兩個(gè)方法執(zhí)行時(shí)其this指向不一樣,也就是說(shuō)extend所擴(kuò)展的方法所在的擴(kuò)展位置不一樣
$.extend({ aa:function(){} }); $.aa(); //->aa擴(kuò)展到j(luò)Query的屬性上了:完善類庫(kù),提供一些常用的操作方法,例如,數(shù)組去重... $.fn.extend({ bb:function(){} }); $([select]).bb(); //-->bb擴(kuò)展到j(luò)Query的原型上了:擴(kuò)展插件,例如,選項(xiàng)卡、輪播圖、登錄、驗(yàn)證...
1)選擇器
CSS選擇器有哪些,jQuery選擇器基本上就有哪些:#ID、.class、tagName、*、selector,selector、parent offspring、parent>child、:first、:last、:not、:contain、:eq、:gt、:lt、:text...
2)核心方法
$([selector|node|function],[context])
$([html])
each(callback)
get()
index()
length
context
selector
noConflict()
extend()
3)屬性方法
attr():設(shè)置或獲取自定義屬性值,獲取的值是字符串類型的
removeAttr()
prop():操作的是元素的內(nèi)置屬性
addClass()
removeClass()
hasClass()
toggleClass()
html():獲取或設(shè)置元素的innerHTML
text():獲取或設(shè)置元素的innerText
val():獲取或設(shè)置元素的value值
4)CSS方法
css()
offset():當(dāng)前元素距離body的偏移:{top:xxx,left:xxx}
position():當(dāng)前元素距離父級(jí)已定位參照物的偏移
scrollTop() / scrollLeft():獲取或者設(shè)置滾動(dòng)值
height() / width():設(shè)置或獲取元素的寬高
innerWidth() / innerHeight():獲取元素的clientHeight/clientWidth
outerWidth() / outerHeight():獲取元素的offsetHeight/offsetWidth
5)DOM操作方法
append()
appendTo()
prepend()
prependTo()
insertBefore() / insertAfter()
clone()
remove()
6)篩選方法
eq()
filter():同級(jí)篩選
children():子級(jí)篩選
find():后代篩選
first() / last()
not()
slice()
next() / prev()
nextAll() / prevAll()
sibings()
add()
contents()
7)動(dòng)畫方法
animate()
stop()
finish()
show() / hide() / toggle()
fadeIn() / fadeOut() / fadeToggle()
sliceDown() / sliceUp() / scliceToggle()
delay()
8)事件方法
on() / off():解決jQuery事件的一切需求,其它方法也是從這個(gè)方法里擴(kuò)展的
bind() / unbind() / trigger()
one()
live() / delegate()
click()/hover()/mouseover()...
9)工具方法
callbacks()
makeArray()
toArray()
parseJSON()
parseXML()
type()
isFunction()
trim()
param()
//只要當(dāng)前頁(yè)面的HTML結(jié)構(gòu)加載完成,就會(huì)執(zhí)行回調(diào)函數(shù),而且在一個(gè)頁(yè)面中可以執(zhí)行多次 $(document).ready(function(){ //}); $(function(){}); //這種方式和上面的方式一樣,沒(méi)有區(qū)別
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/83863.html
摘要:基本的學(xué)習(xí)思路是跟著框架設(shè)計(jì)這本書,甚至可以說(shuō)是這本書的讀書筆記。也參考很多網(wǎng)上解讀的博客和學(xué)習(xí)資料。當(dāng)然,最重要的資料還是框架的源代碼。后來(lái)由于開(kāi)發(fā)者反對(duì),新興的框架都在命名空間上構(gòu)建。 JavaScript框架學(xué)習(xí)筆記(一) 我為什么要學(xué)習(xí)框架 更深入的理解工具,以后用起來(lái)更順手而且也能做一定的工具取舍,學(xué)習(xí)理解新工具也就更快, 對(duì)提升js水平也很有幫助,框架有很多解決坑的經(jīng)典思...
摘要:學(xué)習(xí)筆記一學(xué)習(xí)慕課網(wǎng)基礎(chǔ)課程筆記。本篇博客只作為學(xué)習(xí)記錄用。后代選擇器選擇給定的祖先元素的所有后代原色,一個(gè)元素的后代可能是該元素的一個(gè)孩子,孫子,曾孫等。相鄰兄弟選擇器選擇所有緊接在元素后的元素一般兄弟選擇器匹配元素之后的所有兄弟元素。 jquery 學(xué)習(xí)筆記一 學(xué)習(xí)慕課網(wǎng)jquery基礎(chǔ)課程筆記。本篇博客只作為學(xué)習(xí)記錄用。 jquery 對(duì)象與 DOM 對(duì)象 一定要區(qū)分 jquer...
摘要:首先明確是一個(gè)庫(kù),它的類型是函數(shù),這一點(diǎn)可以通過(guò)查看。判斷傳入的參數(shù)是還是返回具體的方法函數(shù)可將所有的添加一個(gè)可將所有的變?yōu)槿致暶鳎且粋€(gè)函數(shù),返回一個(gè)對(duì)象,對(duì)象內(nèi)有不同的方法,本文例子有個(gè)方法增加類名,修改節(jié)點(diǎn)內(nèi)容。 首先明確jQuery是一個(gè)JavaScript庫(kù),它的類型是函數(shù),這一點(diǎn)可以通過(guò)typeOf查看。需要注意的是,script引入方式是本地文件引入,如果是CDN引入...
摘要:首先明確是一個(gè)庫(kù),它的類型是函數(shù),這一點(diǎn)可以通過(guò)查看。判斷傳入的參數(shù)是還是返回具體的方法函數(shù)可將所有的添加一個(gè)可將所有的變?yōu)槿致暶鳎且粋€(gè)函數(shù),返回一個(gè)對(duì)象,對(duì)象內(nèi)有不同的方法,本文例子有個(gè)方法增加類名,修改節(jié)點(diǎn)內(nèi)容。 首先明確jQuery是一個(gè)JavaScript庫(kù),它的類型是函數(shù),這一點(diǎn)可以通過(guò)typeOf查看。需要注意的是,script引入方式是本地文件引入,如果是CDN引入...
摘要:事件類型布爾值,表示事件是否通過(guò)以冒泡形式觸發(fā)。表示鍵盤事件的屬性布爾值,表示當(dāng)前按下的鍵是否表示一個(gè)字符。表示當(dāng)前按鍵的值僅對(duì)事件有效。,事件發(fā)生時(shí)相對(duì)于屏幕的坐標(biāo)。 事件對(duì)象 event 對(duì)象還包含很多有用的屬性。W3C 范中包含的大部分屬性都列在下面,更多信息參照完整的標(biāo)準(zhǔn)規(guī)范。 事件類型: bubbles :布爾值,表示事件是否通過(guò)DOM 以冒泡形式觸發(fā)。 事件發(fā)生時(shí)...
閱讀 1793·2023-04-26 00:47
閱讀 1551·2021-11-11 16:55
閱讀 2613·2021-09-27 14:04
閱讀 3555·2021-09-22 15:58
閱讀 3558·2021-07-26 23:38
閱讀 2137·2019-08-30 13:47
閱讀 1984·2019-08-30 13:15
閱讀 1151·2019-08-29 17:09