jQuery選擇器_Dom操作_樣式_事件處理_動畫

1. jquery 能做什么掀抹?

jquery是一個js工具類庫,封裝了常用的DOM操作方法,有更好的兼容性盖奈,利用jquery提供的api,可以完成以下工作:

  • 完成DOM的增刪改查等操作
  • 事件綁定操作
  • 樣式修改
  • 方便的動畫設置
  • ajax操作
  • 多種第三方插件可以使用

2. Jquery對象和DOM原生對象的區(qū)別宪塔,轉(zhuǎn)換

區(qū)別:

  1. jquery對象是使用jquer方法獲取的對象磁奖,可以調(diào)用jquery方法,jquery對象是一個類數(shù)組對象

  2. DOM原生對象是使用原生js方法獲取的對象某筐,是文檔對象模型比搭,只能調(diào)用原生的js方法

轉(zhuǎn)換方式:

  1. jquery對象轉(zhuǎn)DOM原生對象:通過下標方式選擇jquery對象,如:$('div')[0]

  2. DOM原生對象轉(zhuǎn)jQuery對象:調(diào)用jquery方法,如:$(document.querySelector('div'))


3.jquery中如何綁定事件南誊?bind身诺、unbind蜜托、delegate、live霉赡、on橄务、off都有什么作用?推薦使用哪種穴亏?使用on綁定事件使用事件代理的寫法蜂挪?

jquery提供了四種事件監(jiān)聽的方式,分別為bind嗓化、delegate棠涮、live和on

  • bind

      bind(type,[data],function(eventObject))
    

    在選擇的元素上綁定特定事件類型的監(jiān)聽函數(shù),其中data為可選參數(shù)

//定位找出所有的div元素給其添加click事件的函數(shù)
  $('div').bind('click',function(){
     console.log(this)
  })
  • unbind

    unbind(type,[data|fn]])
    

bind()的反向操作蟆湖,從每一個匹配的元素中刪除綁定的事件故爵。
如果沒有參數(shù),則刪除所有綁定的事件隅津。
你可以將你用bind()注冊的自定義事件取消綁定诬垂。
如果提供了事件類型作為參數(shù),則只刪除該類型的綁定事件伦仍。除指定類型的事件

//把所有段落的所有事件取消綁定
$("p").unbind()

//將段落的click事件取消綁定
$("p").unbind( "click" )
  • delegate

    delegate(selector,type,[data],fn)
    

指定的元素(屬于被選元素的子元素)添加一個或多個事件處理程序结窘,并規(guī)定當這些事件發(fā)生時運行的函數(shù)。

使用 delegate() 方法的事件處理程序適用于當前或未來的元素(比如由腳本創(chuàng)建的新元素)充蓝。

<div style="background-color:red">
<p>這是一個段落隧枫。</p>
<button>請點擊這里</button>
</div>

$("div").delegate("button","click",function(){
  $("p").slideToggle();
});
  • live

    live(type, [data], fn)

jQuery 給所有匹配的元素附加一個事件處理函數(shù),即使這個元素是以后再添加進來的也有效谓苟。

這個方法是基本是的 .bind() 方法的一個變體官脓。使用 .bind() 時,選擇器匹配的元素會附加一個事件處理函數(shù)涝焙,而以后再添加的元素則不會有卑笨。為此需要再使用一次 .bind() 才行。比如說:

<body>
  <div class="clickme">Click here</div>
</body>

//可以給這個元素綁定一個簡單的click事件:
$('.clickme').bind('click', function() {
  alert("Bound handler called.");
});

//有另一個元素添加進來了
$('body').append('<div class="clickme">Another target</div>');

//盡管這個新的元素也能夠匹配選擇器 ".clickme" 仑撞,但是由于這個元素是在調(diào)用 .bind() 之后添加的赤兴,所以點擊這個元素不會有任何效果。
//.live() 就提供了對應這種情況的方法隧哮。如果我們是這樣綁定click事件的:
$('.clickme').live('click', function() {
  alert("Live handler called."); 
});
 //然后再點擊新增的元素桶良,他依然能夠觸發(fā)事件處理函數(shù)。

事件委托

.live() 方法能對一個還沒有添加進DOM的元素有效沮翔,是由于使用了事件委托:綁定在祖先元素上的事件處理函數(shù)可以對在后代上觸發(fā)的事件作出回應陨帆。傳遞給 .live() 的事件處理函數(shù)不會綁定在元素上,而是把他作為一個特殊的事件處理函數(shù),綁定在 DOM 樹的根節(jié)點上歧譬。

  • on

    on(type,[selector],[data],fn)
    

在選擇元素上綁定一個或多個事件的事件處理函數(shù)岸浑。
on()方法綁定事件處理程序到當前選定的jQuery對象中的元素。在jQuery 1.7中瑰步,.on()方法 提供綁定事件處理程序所需的所有功能矢洲。幫助從舊的jQuery事件方法轉(zhuǎn)換,see .bind(), .delegate(), 和 .live().

  //給p綁定click事件處理方法
  $("p").on("click", function(){
    alert( $(this).text() );
  });
  • off

    off(events,[selector],[fn])
    

在選擇元素上移除一個或多個事件的事件處理函數(shù)缩焦。

//刪除所有p的綁定事件
$("p").off()

//刪除所有p的代理事件
$("p").off( "click", "**" )

var foo = function () {
  // code to handle some kind of event
};

// body代理所有p的點擊事件读虏,p點擊時,會執(zhí)行foo方法
$("body").on("click", "p", foo);


// 解除body代理的p點擊事件
$("body").off("click", "p", foo); 

推薦使用
推薦使用on方法

在jQuery 1.7中袁滥,.on()方法 提供綁定事件處理程序所需的所有功能盖桥。幫助從舊的jQuery事件方法轉(zhuǎn)換,see .bind(), .delegate(), 和 .live().

on綁定事件使用事件代理寫法:

//只需為tbody綁定點擊事件處理方法题翻,
//在tr發(fā)生點擊事件后揩徊,會通過冒泡傳遞給tbody,然后調(diào)用處理方法
$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

4. jquery 如何展示/隱藏元素嵌赠?

.show([speed],[callback])       //顯示元素
.hide([speed],[callback])       //隱藏元素
.fadeIn([speed], [callback]      //淡入顯示隱藏元素
.fadeOut([speed], [callback]):  //淡出隱藏顯示元素
.slideUp([speed],[callback])     //以滑動的方式隱藏顯示元素
.slideDown([speed],[callback])     //以滑動的方式隱藏顯示元素

.toggle([speed], [callback])        //顯示隱藏元素塑荒,隱藏顯示元素
fade.toggle([speed], [callback])    //淡入淡出顯示隱藏元素,隱藏顯示元素

- speed:  規(guī)定速度姜挺,取值:'slow', 'normal', 'fast'或毫秒
- callback:顯示或隱藏后執(zhí)行的函數(shù)

5. jquery 動畫如何使用齿税?

$(selector).animate(styles,speed,easing,callback)

//例子:
<body>
  <p style="border:1px solid red";>nihao</p>
  <script src="jquery-3.2.1.min.js"></script>
  <script>
    var $p=$("p")
    $p.on('click',function(){
      $p.animate({
        height:'100px'
      },1000)
    })
  </script>
</body>

6.如何設置和獲取元素內(nèi)部 HTML 內(nèi)容?如何設置和獲取元素內(nèi)部文本炊豪?

  • $().html()獲取html內(nèi)容

  • $().text()獲取文本內(nèi)容

      $('div').html()           //無參數(shù)凌箕,用于返回元素的innerHTML
      $('div').html(string)       //有參數(shù),設置元素為內(nèi)部HTML內(nèi)容
    
      $('div').text()           //無參數(shù)词渤,用于返回元素的innerText
      $('div').text(string)       //有參數(shù)牵舱,設置元素的內(nèi)部文本
    

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

.val([string])
無參數(shù)時芜壁,獲取表單用戶的輸入值
有參數(shù)時,設置表單的輸入值

.attr('attrName')
獲取元素特定屬性的值
.attr('attrName','attrVal')     //傳遞兩個參數(shù)志笼,即屬性名稱和對應的值
設置單個的屬性值

8. 邊欄菜單

http://js.jirengu.com/rayoj/3/edit

image.png

9. tab頁切換

http://js.jirengu.com/kimoj/3/edit

image.png

10. 添加元素

http://js.jirengu.com/lobih/10/edit

image.png

11. tab頁滑動切換

http://js.jirengu.com/pusup

image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市把篓,隨后出現(xiàn)的幾起案子纫溃,更是在濱河造成了極大的恐慌,老刑警劉巖韧掩,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件紊浩,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機坊谁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進店門费彼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人口芍,你說我怎么就攤上這事箍铲。” “怎么了鬓椭?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵颠猴,是天一觀的道長。 經(jīng)常有香客問我小染,道長翘瓮,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任裤翩,我火速辦了婚禮资盅,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘踊赠。我一直安慰自己呵扛,他們只是感情好,可當我...
    茶點故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布臼疫。 她就那樣靜靜地躺著择份,像睡著了一般。 火紅的嫁衣襯著肌膚如雪烫堤。 梳的紋絲不亂的頭發(fā)上荣赶,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天,我揣著相機與錄音鸽斟,去河邊找鬼拔创。 笑死,一個胖子當著我的面吹牛富蓄,可吹牛的內(nèi)容都是我干的剩燥。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼立倍,長吁一口氣:“原來是場噩夢啊……” “哼灭红!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起口注,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤变擒,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后寝志,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體娇斑,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡策添,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了毫缆。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片唯竹。...
    茶點故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖苦丁,靈堂內(nèi)的尸體忽然破棺而出浸颓,到底是詐尸還是另有隱情,我是刑警寧澤芬骄,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布猾愿,位于F島的核電站,受9級特大地震影響账阻,放射性物質(zhì)發(fā)生泄漏蒂秘。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一淘太、第九天 我趴在偏房一處隱蔽的房頂上張望姻僧。 院中可真熱鬧,春花似錦蒲牧、人聲如沸撇贺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽松嘶。三九已至,卻和暖如春挎扰,著一層夾襖步出監(jiān)牢的瞬間翠订,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工遵倦, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留尽超,地道東北人。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓梧躺,卻偏偏與公主長得像似谁,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子掠哥,可洞房花燭夜當晚...
    茶點故事閱讀 43,543評論 2 349

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