jQuery相關(guān)

1. jQuery 能做什么数初?

首先jQuery是一個簡單叹括、精簡枯芬、功能豐富的JavaScrip工具庫,他提供了易于使用且兼容性好的API碰辅,使用jQuery可以更加簡單的操作例如HTML文檔遍歷和操作懂昂、事件處理、Ajax没宾、動畫等凌彬。

2. jQuery 對象和 DOM 原生對象有什么區(qū)別?如何轉(zhuǎn)化榕吼?

區(qū)別:

  • 直接利用“===”進行判斷饿序,結(jié)果為false

  • 選擇的不同,jQuery對象要用jQuery方法選擇羹蚣,DOM對象要用原生JS方法選擇

  • 操作方法不同,jQuery對象要用jQuery方法操作乱凿,DOM對象要用原生JS方法操作

轉(zhuǎn)化:

  • 對jQuery對象使用下標(biāo)選擇可得到DOM原生對象顽素,
    例:$('xxx')[0] === document.querySelector('xxx'),結(jié)果為true

  • 對DOM原生對象使用$()可得到j(luò)Query對象徒蟆,雖然都是指向同一個對象胁出,但是得到的jQuery對象和直接用jQuery方法選擇的對象不同
    例:$(document.querySelector('xxx')) === $('xxx'),結(jié)果為false

3. jQuery中如何綁定事件段审?bind全蝶、unbind、delegate寺枉、live抑淫、on、off都有什么作用姥闪?推薦使用哪種始苇?使用on綁定事件使用事件代理的寫法?

jQuery可以使用bind,live,delegate,on這四種方式進行事件監(jiān)聽,還可以直接綁定例如a.click(function(){}); a.change(function(){})

對應(yīng)的筐喳,移除一個事件的處理函數(shù)的方法:unbind,die,undelegate,off

用法:

  • $(selector).bind(events,[data],fn); 對單個目標(biāo)元素進行監(jiān)聽

  • $(selector).live(events,[data],fn); 效果和bind相同催式,但是運用到事件委托機制

  • $(selector).delegate(childSelector,events,[data],fn); 實現(xiàn)事件代理

  • $(selector).on(events,[childSelector],[data],fn); 可以實現(xiàn)以上所有功能函喉,如單個目標(biāo)元素的監(jiān)聽,監(jiān)聽多個目標(biāo)

所以荣月,推薦使用on

<!DOCTYPE html>
<html>
<head>
  <title>demo</title>
  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
  <ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
    <li>test5</li>
  </ul>

  <script>
    $('ul').on('click','li',function(){
      console.log(this)
      })
  </script>  //對ul進行監(jiān)聽管呵,使用childSelector這個參數(shù),對子元素進行事件綁定
</body>
</html>

4. jQuery 如何展示/隱藏元素哺窄?

  1. 可以使用添加刪除元素實現(xiàn)撇寞,可用的函數(shù)有append,appendTo,prepend,prependTo,before,insertBefor,after,insertAfter, 例:在div添加$('div').append('<h1>title</h1>'); 刪除div$('div').remove()

  2. 使用jQuery動畫相關(guān)的函數(shù)堂氯,hide,show,toggel,fadeIn,fadeOut,fadeToggle,slideDown,slideUp,slideToggle, 例:隱藏div蔑担,$('div').hide(), 展示div,$('div').show(); 或者直接使用$('div').toggle()即可實現(xiàn)展示和隱藏的切換

  3. 寫CSS咽白,然后給目標(biāo)元素添加相應(yīng)的class達到展示/隱藏效果啤握,$('div').addClass()

5. jQuery 動畫如何使用?

寫一個demo展示jQuery動畫用法

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <style>
    .cnt {
      width: 100px;
      height: 100px;
      background: red;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
  <div class="cnt"></div>
  <button class="hide">hide</button>
  <button class="show">show</button>
  <button class="toggle">toggle</button>
  <button class="animate">自定義動畫</button>

  <script>
    var $cnt = $('.cnt')

    $('.hide').click(function(){
      $cnt.hide(4000,function(){
        elart('已隱藏')
        })
      })

    $('.show').click(function(){
      $cnt.show(4000,fucntion(){
        elart('已展示')
        })
      })

    $('.toggle').click(function(){
      $cnt.toggle(4000,function(){
        elart('切換隱藏或展示')
        })
      })

    $('.animate').click(function(){
      $cnt.animate(
        {
          width: '+=100px',
          height: '+=100px',
          opacity: 0.25
        })
          .animate({
            left: '+=200px'
          })
          .animate({
            top: '+=200px'
          })
          .animate({
            width: '-=100px',
            height: '-=100px',
            opacity: 1,
            left: '-=200px',
            top: '-=200px'
          },4000)
      })

    $('.finish').click(function(){
      $cnt.finish()
    })

    $('.stop').click(function(){
      $cnt.stop(true,true)
    })
  </script>
</body>
</html>

6. 如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容晶框?如何設(shè)置和獲取元素內(nèi)部文本排抬?

$('xxx').html(),不傳遞參數(shù)時獲取所選元素的HTML,當(dāng)傳遞參數(shù)時授段,$('xxx').html(string), 則會替換原HTML內(nèi)容蹲蒲。

$('xxx').text(),不傳遞參數(shù)時獲取所選元素的innerText,當(dāng)傳遞參數(shù)時,$('xxx').text(string), 則會替換原元素下的innerText侵贵。

7. 如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容届搁?如何設(shè)置和獲取元素屬性?

$('input').val(),不傳遞參數(shù)時窍育,獲取表單用戶輸入或選擇的內(nèi)容卡睦,當(dāng)傳遞參數(shù)時,$('input').val(string), 會修改input的value值為參數(shù)值漱抓。

獲取元素特定屬性的值 .attr(attributeName)

為元素屬性賦值 .attr(attributeName,value) / .attr(attributesJson) / .attr(attributeName,function(index,attr))

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末表锻,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子乞娄,更是在濱河造成了極大的恐慌瞬逊,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,084評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件仪或,死亡現(xiàn)場離奇詭異确镊,居然都是意外死亡,警方通過查閱死者的電腦和手機溶其,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評論 3 392
  • 文/潘曉璐 我一進店門骚腥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人瓶逃,你說我怎么就攤上這事束铭±椋” “怎么了?”我有些...
    開封第一講書人閱讀 163,450評論 0 353
  • 文/不壞的土叔 我叫張陵契沫,是天一觀的道長带猴。 經(jīng)常有香客問我,道長懈万,這世上最難降的妖魔是什么拴清? 我笑而不...
    開封第一講書人閱讀 58,322評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮会通,結(jié)果婚禮上口予,老公的妹妹穿的比我還像新娘。我一直安慰自己涕侈,他們只是感情好沪停,可當(dāng)我...
    茶點故事閱讀 67,370評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著裳涛,像睡著了一般木张。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上端三,一...
    開封第一講書人閱讀 51,274評論 1 300
  • 那天舷礼,我揣著相機與錄音,去河邊找鬼郊闯。 笑死妻献,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的虚婿。 我是一名探鬼主播旋奢,決...
    沈念sama閱讀 40,126評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼然痊!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起屉符,我...
    開封第一講書人閱讀 38,980評論 0 275
  • 序言:老撾萬榮一對情侶失蹤剧浸,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后矗钟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體唆香,經(jīng)...
    沈念sama閱讀 45,414評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,599評論 3 334
  • 正文 我和宋清朗相戀三年吨艇,在試婚紗的時候發(fā)現(xiàn)自己被綠了躬它。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,773評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡东涡,死狀恐怖冯吓,靈堂內(nèi)的尸體忽然破棺而出倘待,到底是詐尸還是另有隱情,我是刑警寧澤组贺,帶...
    沈念sama閱讀 35,470評論 5 344
  • 正文 年R本政府宣布凸舵,位于F島的核電站,受9級特大地震影響失尖,放射性物質(zhì)發(fā)生泄漏啊奄。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,080評論 3 327
  • 文/蒙蒙 一掀潮、第九天 我趴在偏房一處隱蔽的房頂上張望菇夸。 院中可真熱鬧,春花似錦仪吧、人聲如沸庄新。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽摄咆。三九已至,卻和暖如春人断,著一層夾襖步出監(jiān)牢的瞬間吭从,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評論 1 269
  • 我被黑心中介騙來泰國打工恶迈, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留涩金,地道東北人。 一個月前我還...
    沈念sama閱讀 47,865評論 2 370
  • 正文 我出身青樓暇仲,卻偏偏與公主長得像步做,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子奈附,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,689評論 2 354

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

  • jQuery jQuery是一個快速全度、簡潔的JavaScript庫。jQuery設(shè)計的宗旨是“write Less...
    IT男的成長記錄閱讀 268評論 0 1
  • jQuery 能做什么斥滤? 首先要明白jQuery是一個JavaScript函數(shù)庫将鸵,它極大地簡化了JavaScrip...
    _Dot912閱讀 358評論 3 5
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性佑颇。 1....
    LaBaby_閱讀 1,335評論 0 2
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式顶掉。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,171評論 0 1
  • Linux 目錄結(jié)構(gòu)及文件基本操作 Linux 目錄結(jié)構(gòu) Windows 一直是以存儲介質(zhì)為主挑胸,主要以盤符(C 盤...
    魚擺擺_a8ac閱讀 308評論 0 1