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