JQuery

jQuery 能做什么爽冕?

jQuery是一個豐富的JS庫,可以提供簡單且具有較好兼容性的API披蕉,使得諸如HTML文檔遍歷和操作颈畸、事件處理、動畫和Ajax操作變得更加簡單没讲。同時代碼的簡化使得工作更加高效眯娱。

jQuery 對象和 DOM 原生對象有什么區(qū)別?如何轉化爬凑?

  • DOM原生對象:
  • 是對象困乒;
  • 擁有原生對象的屬性和方法;
  • jQuery對象:
  • 是DOM元升級對象經過包裝之后贰谣,擁有jQuery的屬性和方法(對原生DOM對象的封裝)娜搂;
  • 是類數(shù)組;

在寫代碼的過程中可能會需要將一個對象在原生與JQUERY之間相互轉換吱抚,其轉換方法如下:
Jquery對象轉換為原生對象:

//方法一:
var $buttens = $('.show-buttens')
var firstButten = $('.show-buttens').get(0)
var lastButten = $('.show-buttens').get(-1)

//方法二:
var $buttens = $('.show-buttens')
var firstButten = $('.show-buttens')[0]

原生對象轉Jquery對象

//原生對象獲取
var buttens = document.getElementsByClassName('show-buttens')
//原生對象轉Jquery對象百宇,直接使用$()包裹即可
var $buttens = $(buttens)

jQuery中如何綁定事件?bind秘豹、unbind携御、delegate、live既绕、on啄刹、off都有什么作用?推薦使用哪種凄贩?使用on綁定事件使用事件代理的寫法誓军?

  • .bind()
    為一個元素綁定一個事件處理程序。
var show = function(){  console.log('show')}
$('.show').bind('click',show())

遍歷所有class屬性有show的元素疲扎,并且監(jiān)聽元素昵时,當被點擊時,打印出'show'椒丧。

  • .unbind()
    從元素上刪除一個以前附加事件處理程序壹甥。
var show = function(){  console.log('show')}
$('.show').unbind('click',show())

在jQuery 3.0中,.unbind()已被標記為棄用壶熏。從jQuery 1.7開始句柠,它已經被.off()方法取代。

  • .delegate()
    為所有匹配選擇器(selector參數(shù))的元素綁定一個或多個事件處理函數(shù),基于一個指定的根元素的子集溯职,匹配的元素包括那些目前已經匹配到的元素管怠,也包括那些今后可能匹配到的元素。
    在jQuery3.0中缸榄,.delegate()已被標記為棄用渤弛。
$('#show').delegate('a','click',function(){
  console.log('a click')
});
  • .live()
    附加一個事件處理器到匹配目前選擇器的所有元素,現(xiàn)在和未來甚带。
$("a").live("click", function() {
 return false;
 })

但是由于.live()方法在使用之前她肯,jQuery會先獲取與指定的選擇器匹配的元素,這一點對于大型文檔來說是很花費時間的鹰贵。并且不支持鏈式寫法晴氨。.live()方法還有許多缺點,所以在1.7版本時便已經過時了碉输。

  • .on()
    在選定的元素上綁定一個或多個事件處理函數(shù)籽前。
.on( events [, selector ] [, data ], handler(eventObject) )
  • events: 一個或多個空格分隔的事件類型和可選的命名空間,或僅僅是命名空間敷钾,

  • selector: 一個選擇器字符串枝哄,用于過濾出被選中的元素中能觸發(fā)事件的后代元素。如果選擇器是 null 或者忽略了該選擇器阻荒,那么被選中的元素總是能觸發(fā)事件挠锥。

  • data: 當一個事件被觸發(fā)時,要傳遞給事件處理函數(shù)的event.data侨赡。

  • handler(eventObject): 事件被觸發(fā)時蓖租,執(zhí)行的函數(shù)。若該函數(shù)只是要執(zhí)行return false的話羊壹,那么該參數(shù)位置可以直接簡寫成 false蓖宦。

  • .off()

.off( events [, selector ] [, handler ] )
  • events: 一個或多個空格分隔的事件類型和可選的命名空間,或僅僅是命名空間油猫,比如"click"稠茂。
  • selector: 一個選擇器,當綁定事件處理程序時匹配最初傳遞給 .on()的那個眨攘。
  • handler: 類型: Function( Event eventObject )以前附加的事件處理函數(shù)主慰,或特殊值false嚣州。

在1.7之前的版本中jQuery處理事件有多個方法鲫售,作用各不相同,后來統(tǒng)一的使用on/off方法

$('ul').on('click', 'li', function() {
   ……
});

jQuery 如何展示/隱藏元素该肴?

 $('.btn1').on('click',function(){
      $('.content').hide(1000);//一秒內隱藏
    });
    $('.btn2').on('click',function(){
      $('.content').show(1000);//一秒內顯示出來
    })
    $('.btn3').on('click',function(){
      $('.content').toggle(1000);//一秒切換顯示或隱藏
    })

jQuery 動畫如何使用情竹?

上述的.hide().show()以及.slideDown()匀哄、.slideUp()秦效、.slidToggle()都能做出一定的動畫效果雏蛮。當需要做出較為復雜的動畫時,可以使用.animate()進行自定義動畫阱州。

.animate( properties [, duration ] [, easing ] [, complete ] )
  • properties: 一個CSS屬性和值的對象挑秉,動畫將根據(jù)這組對象移動。
  • duration: 一個字符串或者數(shù)字決定動畫將運行多久苔货。默認值: "normal"犀概, 三種預定速度的字符串("slow", "normal", 或 "fast")或表示動畫時長的毫秒數(shù)值(如:1000)
  • easing: 一個字符串,表示過渡使用哪種緩動函數(shù)夜惭。jQuery自身提供"linear" 和 "swing"姻灶。
  • complete: 在動畫完成時執(zhí)行的函數(shù)。

如何設置和獲取元素內部 HTML 內容诈茧?如何設置和獲取元素內部文本产喉?

獲取/設置HTML內容:

<div id='message'>
<p>Change  Change  Change</p>
</div>

$('#message').html()
<div id='message'>
<p>Change  Change  Change</p>
</div>

$('#message').html("<h1>jQuery  jQuery  jQuery</h1>")

獲取/設置文本內容:

.text()的用法與.html()類似。

<div id='message'>
<p>Change  Change  Change</p>
</div>

$('#message').text()//Change  Change  Change
<div id='message'>
<p>Change  Change  Change</p>
</div>

$('#message').text("jQuery  jQuery  jQuery")//jQuery  jQuery  jQuery

但是.text()不可用于input元素上敢会,輸入的文本需要用.val()方法曾沈。且.text()方法允許使用函數(shù)來傳遞文本內容。

$('ul li').text(function(index) {
  return 'item number ' + (index + 1);
});

如何設置和獲取表單用戶輸入或者選擇的內容鸥昏?如何設置和獲取元素屬性晦譬?

使用.val()方法可以獲取表單元素的值,如input互广、select敛腌、textarea
.attr()方法只獲取第一個匹配元素的屬性值惫皱。要獲取每個單獨的元素的屬性值像樊, 我們需要依靠jQuery的 .each()或者.map()方法循環(huán)。
同時.attr()還可以進行對值的設定旅敷。

.attr( attributeName, value )
.attr( attributeName, function )
.attr( attributes )
  • attributeName: 要設置值的屬性名生棍。
  • value: 要設置的屬性值。如果為null媳谁, 指定的屬性將被刪除涂滴。
  • function: 這個函數(shù)返回用來設置的值。this指向當前的元素晴音。接收該元素在集合中索引位置(index)和 原來屬性值(attr)作為參數(shù)柔纵。
  • attributes: 一個要設置的 屬性-值 集合對象。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末锤躁,一起剝皮案震驚了整個濱河市搁料,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖郭计,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件霸琴,死亡現(xiàn)場離奇詭異,居然都是意外死亡昭伸,警方通過查閱死者的電腦和手機梧乘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來庐杨,“玉大人宋下,你說我怎么就攤上這事〖” “怎么了学歧?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長各吨。 經常有香客問我枝笨,道長,這世上最難降的妖魔是什么揭蜒? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任横浑,我火速辦了婚禮,結果婚禮上屉更,老公的妹妹穿的比我還像新娘徙融。我一直安慰自己,他們只是感情好瑰谜,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布欺冀。 她就那樣靜靜地躺著,像睡著了一般萨脑。 火紅的嫁衣襯著肌膚如雪隐轩。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天渤早,我揣著相機與錄音职车,去河邊找鬼。 笑死鹊杖,一個胖子當著我的面吹牛悴灵,可吹牛的內容都是我干的。 我是一名探鬼主播骂蓖,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼积瞒,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了涯竟?” 一聲冷哼從身側響起赡鲜,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤空厌,失蹤者是張志新(化名)和其女友劉穎庐船,沒想到半個月后银酬,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡筐钟,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年揩瞪,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片篓冲。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡李破,死狀恐怖,靈堂內的尸體忽然破棺而出壹将,到底是詐尸還是另有隱情嗤攻,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布诽俯,位于F島的核電站妇菱,受9級特大地震影響,放射性物質發(fā)生泄漏暴区。R本人自食惡果不足惜闯团,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望仙粱。 院中可真熱鬧房交,春花似錦、人聲如沸伐割。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽隔心。三九已至负溪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間济炎,已是汗流浹背川抡。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留须尚,地道東北人崖堤。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像耐床,于是被迫代替她去往敵國和親密幔。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內容

  • 1.JQuery 基礎 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式撩轰。設計者無需花費時間糾纏JS復雜的高級特性胯甩。 1....
    LaBaby_閱讀 1,349評論 0 2
  • 1.JQuery 基礎 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式昧廷。設計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,182評論 0 1
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關注...
    程序員poetry閱讀 16,650評論 18 503
  • 為甚嚒要學習jQuery偎箫? 因為JS中有很多痛點: window.onload事件只能出現(xiàn)一次木柬,如果出現(xiàn)多次,后面...
    magic_pill閱讀 826評論 0 13
  • 我們圍著噼啪作響的篝火速挑,手上有凍瘡,烤玉米變得金黃副硅,高粱酒將嗓子和胃灼傷姥宝。 夜梟的叫聲撕開了長夜,眼睛和星星一樣閃...
    兔子洋蔥頭閱讀 171評論 0 0