jQuery-獲取尺寸斧账、節(jié)點操作

javascript弊端

javascript自身存在3個弊端埋市,既復(fù)雜的文檔對象模型(DOM)冠桃、不一致的瀏覽器實現(xiàn)和便捷的開發(fā)、調(diào)試工具的缺乏恐疲。

javascript庫作用及對比

為了簡化javascript的開發(fā)腊满,一些javascript程序庫(JS開發(fā)庫)誕生了。javascript程序庫封裝了很多預(yù)定義的對象和實用函數(shù)培己,能幫助使用者輕松地建立有高難度交互的Web 2.0特性的富客戶端頁面碳蛋,并且兼容各大瀏覽器。

例如:Prototype省咨、Dojo肃弟、YUI、Ext JS零蓉、MooTools笤受、jQuery。jQuery同樣是個輕量級的庫敌蜂,是繼Prototype之后又一個優(yōu)秀的javascript庫箩兽,擁有強大的選擇器、出色的DOM操作章喉、可靠的事件處理汗贫、完善的兼容性和鏈式操作等功能身坐。它極大的簡化了javascript開發(fā)人員遍歷HTML文檔、操作DOM落包、處理事件部蛇、執(zhí)行動畫和開發(fā)Ajax的操作。

CSS選擇器

要使某個樣式應(yīng)用于特定的HTML元素咐蝇,首先需要找到該元素涯鲁。在CSS中,執(zhí)行這一任務(wù)的表現(xiàn)規(guī)則稱為CSS選擇器有序。標簽選擇器抹腿、ID選擇器、類選擇器笔呀、群組選擇器幢踏、后代選擇器髓需、通配選擇符许师。幾乎所有主流瀏覽器都支持上面這些常用的選擇器。此外僚匆,CSS中還有偽類選擇器微渠、子選擇器、臨近選擇器和屬性選擇器咧擂。但主流瀏覽器并非完全支持逞盆。

jQuery選擇器

jQuery選擇器完全繼承了CSS選擇器的風(fēng)格。利用jQuery選擇器松申,可以非常便捷和快速的找出特定的DOM元素云芦,然后為它們添加相應(yīng)的行為,而無需擔(dān)心瀏覽器是否支持這一選擇器贸桶。

CSS選擇器和jQuery選擇器區(qū)別

CSS選擇器是找到元素后添加樣式舅逸;jQuery選擇器是找到元素后添加行為。需要特別說明的是皇筛,jquery中涉及操作CSS樣式的部分比單純的CSS功能更為強大琉历,并且擁有跨瀏覽器的兼容性。

什么是DOM?

是“文檔對象模型” 英文“Document Object Model”水醋。?DOM是一套操作HTML和CSS的接口旗笔,能夠讓我們用操作節(jié)點的方式操作他們; 而不是以操作字符串的方式操作他們拄踪;

加載函數(shù)

JavaScript入口函數(shù):window.onload 蝇恶;jQuery入口函數(shù)?:$(function(){});

jQuery引號的問題

在jQuery世界中,只有三個對象不能加引號惶桐,其他必須加引號:?$(this);? ?$(window);? ? $(document);

jQuery操作DOM

jQuery操作CSS樣式:全都使用 css() 這個方法 撮弧;?jQuery操作HTML?:①jQuery操作HTML標簽內(nèi)容的猛,通過html()方法;②jQuery操作HTML標簽屬性:通過attr()方法想虎。

jQuery動畫

jQuery基礎(chǔ)動畫:?hide()??? 隱藏卦尊;show()??? 顯示 ;toggle()? 顯示和隱藏的切換 舌厨;jQuery滑動動畫:slideUp()???? 向上滑動隱藏岂却;slideDown()?? 向下滑動顯示;slideToggle() 滑動顯示和隱藏的切換裙椭;jQuery透明度動畫:?fadeIn()? ? ?淡入顯示躏哩;?fadeOut()? ? 淡出隱藏;fadeToggle()?? 淡入淡出之間切換揉燃;fadeTo(時間,透明度值)??????? 設(shè)置透明度扫尺,透明度的值0~1之間。

jQuery操作class

addClass()???? 添加class類

removeClass()? 刪除class類

toggleClass()? 切換類炊汤,刪除和添加之間切換

hasClass()???? 判斷是否有class類正驻,true表示有,false表示沒有

jQuery設(shè)置和獲取內(nèi)容方法

3個使用的DOM操作的方法

text()?? 設(shè)置或返回所選的文本內(nèi)容

html()?? 設(shè)置或返回所選的標簽內(nèi)容(包括HTML標簽)

val()??? 設(shè)置返回表單的value值

jQuery尺寸?

width() 方法設(shè)置或返回元素的寬度(不包括內(nèi)邊距抢腐、邊框或外邊距)姑曙。

height() 方法設(shè)置或返回元素的高度(不包括內(nèi)邊距、邊框或外邊距)迈倍。

innerWidth()方法返回元素的寬度(包括內(nèi)邊距)伤靠。

innerHeight()方法返回元素的高度(包括內(nèi)邊距)。

outerWidth()方法返回元素的寬度(包括內(nèi)邊距和邊框)啼染。

outerHeight()方法返回元素的高度(包括內(nèi)邊距和邊框)宴合。

outerWidth(true)方法返回元素的寬度(包括內(nèi)邊距、邊框迹鹅、外邊距)卦洽。

outerHeight(true) 方法返回元素的高度(包括內(nèi)邊距、邊框徒欣、外邊距)逐样。

還可以獲取HTML文檔和瀏覽器窗口的寬高:

$(window).width()????? //獲取當(dāng)前瀏覽器窗口的寬度

$(window).height()???? //獲取當(dāng)前瀏覽器窗口的高度

$(document).width()??? //獲取HTML文檔(body)的寬度

$(document).height()??//獲取HTML文檔(body)的高度

jQuery節(jié)點操作

添加節(jié)點

append()? ??在被選元素內(nèi)部的結(jié)尾插入內(nèi)容

appendTo()? 將指定內(nèi)容插入到被選標簽內(nèi)部的結(jié)尾

prepend()??在被選元素內(nèi)部的開頭插入內(nèi)容

prependTo() 將指定內(nèi)容插入到被選標簽內(nèi)部的開頭

after()? ??????????在被選元素同級的后面插入內(nèi)容

insertAfter()???? 將指定內(nèi)容添加到被選標簽同級的后面

before()? ?????????在被選元素同級的前面插入內(nèi)容

insertBefore()???將指定內(nèi)容添加到被選標簽同級的前面

刪除節(jié)點

remove()? 刪除被選元素(及其子元素)

empty()??從被選元素中刪除子元素

克隆節(jié)點

clone(true) 方法生成被選元素的副本,包含子節(jié)點打肝、文本和屬性脂新。

替換節(jié)點

replaceWith()? 將指定的內(nèi)容替換被選元素

replaceAll()?

包裹節(jié)點

wrap()?????? 把匹配的元素用指定的內(nèi)容或元素包裹起來。

wrapAll()?? 把所有匹配的元素用指定的內(nèi)容或元素包裹起來粗梭。

wrapinner() 將每一個匹配的元素的子內(nèi)容用指定的內(nèi)容或元素包裹起來争便。

jQuery凈位置

$('.xiaoming').offset().top

$('.xiaoming').offset().left

jQuery API 中文文檔 | jQuery API 中文在線手冊 | jquery api 下載 | jquery api chm

jQuery 教程 | 菜鳥教程

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市断医,隨后出現(xiàn)的幾起案子滞乙,更是在濱河造成了極大的恐慌奏纪,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件斩启,死亡現(xiàn)場離奇詭異序调,居然都是意外死亡,警方通過查閱死者的電腦和手機兔簇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門发绢,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人垄琐,你說我怎么就攤上這事边酒。” “怎么了狸窘?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵墩朦,是天一觀的道長。 經(jīng)常有香客問我翻擒,道長氓涣,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任韭寸,我火速辦了婚禮春哨,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘恩伺。我一直安慰自己,他們只是感情好椰拒,可當(dāng)我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布晶渠。 她就那樣靜靜地躺著,像睡著了一般燃观。 火紅的嫁衣襯著肌膚如雪褒脯。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天缆毁,我揣著相機與錄音番川,去河邊找鬼。 笑死脊框,一個胖子當(dāng)著我的面吹牛颁督,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播浇雹,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼沉御,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了昭灵?” 一聲冷哼從身側(cè)響起吠裆,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤伐谈,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后试疙,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诵棵,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年祝旷,在試婚紗的時候發(fā)現(xiàn)自己被綠了非春。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡缓屠,死狀恐怖奇昙,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情敌完,我是刑警寧澤储耐,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站滨溉,受9級特大地震影響什湘,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜晦攒,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一闽撤、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧脯颜,春花似錦哟旗、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至矾芙,卻和暖如春舍沙,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背剔宪。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工拂铡, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人葱绒。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓感帅,卻偏偏與公主長得像,于是被迫代替她去往敵國和親哈街。 傳聞我的和親對象是個殘疾皇子留瞳,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內(nèi)容