web前端-js小記(14)-jQuery選擇器_Dom操作_樣式_事件處理_動畫

1、jQuery 能做什么？

  1. 方便快捷獲取DOM元素
    原生js用document.getElementById等方法來獲取DOM元素，方法名稱長，不方便且功能有限。jQuery定義了一套選擇器規(guī)則，幾乎支持所有類型的CSS3選擇器，方便使用：

|選擇器|含義|
|::|::|
|$("*")|匹配所有元素|
|$("#id")|id選擇器|
|$(".class")|類選擇器|
|$("element")|元素選擇器|
|$("E,F")|多元素選擇器，同時(shí)匹配元素E或元素F|
|$("E F")|后代選擇器，匹配E元素所有的后代元素F|
|$("E>F")|子元素選擇器，匹配E元素的所有直接子元素|
|$("E+F")|直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F|
|$("E~F")|普通相鄰選擇器，匹配E元素之后的同級元素F（無論直接相鄰與否）|
|$(".class1.class2")|匹配類名中既包含class1又包含class2的元素|
|$("E:first")|所有E中的第一個(gè)|
|$("E:last")|所有E中的最后一個(gè)|
|$("E[attr]")|含有屬性attr的E|
|$("E[attr=value]")|屬性attr=value的E|
|$("E[attr!=value]")|屬性attr！=value的E|
|$("E:nth-child(n)")|E的第n個(gè)子節(jié)點(diǎn)|
|$("E:nth-child(3n+1)")|E的index符合3n+1表達(dá)式的子節(jié)點(diǎn)|
|$("E:first-child")|所有E的第一個(gè)子節(jié)點(diǎn)|
|$("E:last-child")|所有E的最后一個(gè)子節(jié)點(diǎn)|
|$(":check")|被選中的checkbox或radio|
|$("option:select")|被選中的option|
|$("E:even")|所有E中index是偶數(shù)|
|$("E:old")|所有E中index是奇數(shù)|
|$("E:eq(n)")|所有E中index為n的元素|
|$("E:gt(n)")|所有E中index大于n的元素|
|$("E:lt(n)")|所有E中index小于n的元素|
|$("E:has(a)")|子元素中有F的元素，$('div:has(a)'):包含a標(biāo)簽的div|
|$("E:parent")|父元素是E的元素，$('td: parent'):父元素是td的元素|

  1. 修改頁面樣式
$("#id").addClass("class1 class2").removeClass("class3 class4");  //為元素增加class1,class2樣式后刪除class3,class4樣式
var str= $("#id").css("width");     //獲取元素寬度，返回的類型為字符串：如"200px"
$("#id").css("width","200px");   //設(shè)置元素寬度，綁定到元素的style屬性中
$("#id").css({"width":"200px","height":"300px"});   //給元素設(shè)置多個(gè)樣式，綁定到元素的style屬性中
$("#id").hasClass("class1");    //檢查元素中是否包含class1，若有，返回true
$("#id").toggleClass("class1")   //切換元素中的class1的元素，若有class1，則刪除，若沒有，則增加
  1. 動態(tài)改變DOM內(nèi)容
1、append():
    //1. 
    $(".wrap").append('<div><span>done</span></div>');
    //2. 
    <div class="wrap"><span>hello</span><p>I would like to say:</p></div>
    $(".wrap p").append($("span"));         //移動span的元素和內(nèi)容，等價(jià)于<div class="wrap"><p>I would like to say:<span>hello</span></p></div>
     //3. 
     <div class="wrap"><p>I would like to say:</p></div>
     $(".wrap p").append(document.createTextNode("hello"));   //等價(jià)于<div class="wrap"><p>I would like to say:hello</p></div>
2、appendTo():
    //1. 
    $('<div><span>done</span></div>').appendTo($(".wrap"));
    //2.
    <div class="wrap"><span>hello</span><p>I would like to say:</p></div>
     $("span").appendTo($(".wrap p"));    //移動span的元素和內(nèi)容，等價(jià)于<div class="wrap"><p>I would like to say:<span>hello</span></p></div>
3、prepend()、prependTo()和append()、appendTo()用法類似，只是添加元素的位置不同
4、
      $( ".inner" ).before( "<p>Test</p>" );   //在$(".inner")前面插入，和$(".inner")屬于同級
      $( "h2" ).insertBefore( $( ".container" ) );   //把$("h2")移動到$(".container")前面，和$(".container")屬于同級
5、
      $( ".inner" ).after( "<p>Test</p>" );   //在$(".inner")后面插入，和$(".inner")屬于同級
      $( "h2" ).insertAfter( $( ".container" ) );   //把$("h2")移動到$(".container")后面，和$(".container")屬于同級
6 、
     $(".inner").remove();    //刪除元素及其子元素
7、
     $('body').empty();    //清空被元素內(nèi)的所有元素
8、
     $(".wrap").html();   //獲取wrap內(nèi)所有的元素，返回innerHtml
     $(".wrap").html("<span>hello</span>");    //把wrap里面的元素?fù)Q成<span>hello</span>
9、
     $(".wrap").test();     //獲取元素內(nèi)的innerText
     $(".wrap").test("hello");           //修改元素內(nèi)的innerText
  1. 響應(yīng)用戶的交互操作
    jQuery提供了截獲形形色色的頁面事件（比如用戶單擊某個(gè)鏈接）的適當(dāng)方式，而不需要使用事件處理程序拆散HTML代碼。此外，它的事件處理API也消除了經(jīng)常困擾Web開發(fā)人員瀏覽器的不一致性。
// 普通事件綁定，最簡單的用法
$('div').on('click', function(e){
    console.log(this);
    console.log(e);
});
// 事件委托或者事件代理，想讓div 下面所有的span綁定事件，可以把事件綁定到div上
$('div').on('click', 'span', function(e){
    console.log(this);
    console.log(e);
});
// 可以在綁定的時(shí)候給事件處理程序傳遞一些參數(shù)
$('div').on('click', {name: 'Byron', age: 24}, function(e){
    console.log(e.data);
});
//
//off()的使用方法：
//定義函數(shù)
function aClick() {
  $("div").show().fadeOut("slow");
}
//添加事件
$("#bind").click(function () {
  $("body").on("click", "#theone", aClick)
    .find("#theone").text("Can Click!");
});
//刪除事件
$("#unbind").click(function () {
  $("body").off("click", "#theone", aClick)
    .find("#theone").text("Does nothing...");
});
//
//trigger()的使用方法：
$('#foo').on('click', function() {
  alert($(this).text());
});
$('#foo').trigger('click');
  1. 統(tǒng)一Ajax操作
    jQuery統(tǒng)一了多種瀏覽器的Ajax操作，使得開發(fā)人員更多的專注服務(wù)器端開發(fā)。
$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});
  1. 簡化常見的JavaScript任務(wù)
    除了這些完全針對文檔的特性之外，jQuery也改進(jìn)了對基本的JavaScript數(shù)據(jù)結(jié)構(gòu)（例如迭代和數(shù)組操作等）。
$.each(obj, function(key, value) {
total += value;
});

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

jQuery 對象是 DOM 對象被 jquery 包裝后產(chǎn)生的對象，屬于 jQuery 獨(dú)有，可以使用 jQuery 的方法。
DOM 對象，就是原生的 DOM 對象。
jQuery 對象不等于DOM 對象，各自使用各自的方法。

document.getElementById(id)                   //dom對象
$(document.getElementById(id))              //jQuery對象

$('#id')                                     //jQuery對象
$('#id') [0]                                //dom對象

3、jQuery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？

jQuery綁定事件：$("ul").on("click","li",function(){});

事件 作用
.bind( eventType [, eventData ], handler ) 為元素綁定事件，已被棄用。
.unbind( eventType [, handler ] ) 為元素解除事件，已被棄用。
.delegate( selector, eventType, eventData, handler ) 為元素綁定事件，且指定元素為特定根元素的子元素。以后有新的該元素出現(xiàn)，事件同樣生效。已棄用。
.live( events [, data ], handler ) 為元素綁定事件，不僅僅是現(xiàn)在存在，也包括以后該元素新出現(xiàn)后。已經(jīng)棄用。
.on( events[, selector][, data ], handler(eventObject) ) 為元素綁定事件，推薦使用
.off( events, selector[, handler ] ) 為元素解除事件，推薦使用 
//用on綁定事件使用事件代理的寫法
$('#list').on('click', 'li', function() {
    //function code here.
});

4、jQuery 如何展示/隱藏元素？

//展示:
.show( [duration ] [, easing ] [, complete ] )
//隱藏:
.hide([duration ] [,easing ] [,complete ])
//duration：動畫持續(xù)多久，5000（5秒）
//easing：表示過渡使用哪種緩動函數(shù)，jQuery自身提供"linear" 和 "swing"
//complete：在動畫完成時(shí)執(zhí)行的函數(shù)

5、 jQuery 動畫如何使用？

.animate( properties [, duration ] [, easing ] [, complete ] )
//properties是一個(gè)CSS屬性和值的對象,動畫將根據(jù)這組對象移動。如:{"left":"100px","top":"10px"}
//duration (default: 400)：一個(gè)字符串或者數(shù)字決定動畫將運(yùn)行多久。默認(rèn)值: "normal"， 三種預(yù)定速度的字符串("slow", "normal", 或 "fast"或表示動畫時(shí)長的毫秒數(shù)值(如：1000) ）
//easing (default: swing)：一個(gè)字符串，表示過渡使用哪種緩動函數(shù)。jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件
//complete：在動畫完成時(shí)執(zhí)行的函數(shù)
.stop( [clearQueue ] [, jumpToEnd ] )
//停止匹配元素當(dāng)前正在運(yùn)行的動畫。

//如果同一元素調(diào)用多個(gè)動畫方法，尚未被執(zhí)行的動畫被放置在元素的效果隊(duì)列中。這些動畫不會開始，直到第一個(gè)完成。當(dāng)調(diào)用.stop()的時(shí)候，隊(duì)列中的下一個(gè)動畫立即開始。如果clearQueue參數(shù)提供true值,那么在隊(duì)列中的動畫其余被刪除并永遠(yuǎn)不會運(yùn)行。
//如果提供jumpToEnd參數(shù)，并且值為true時(shí)，當(dāng)前動畫將停止，但該元素上的 CSS 屬性會被立刻修改成動畫的目標(biāo)值。

6、如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設(shè)置和獲取元素內(nèi)部文本？

$('div').html() //獲取
$('div').html(‘hhh’)//修改

$('div').text() //獲取
$('div').text(‘hhh’)//修改

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

$("input").val()      //獲取值
$("input").val(‘hhhh’)   //修改
$("#input:checked").val()//獲取表單選擇內(nèi)容
$("#input:checked").val(String)//設(shè)置表單選擇內(nèi)容
$('.target').attr(String)//獲取元素屬性
$('.target').attr('src',$img.attr('data-img'))//設(shè)置元素屬性

8、 使用 jQuery實(shí)現(xiàn)如下效果

代碼

9、使用 jQuery 實(shí)現(xiàn)如下效果

代碼

10、實(shí)現(xiàn)如下效果

代碼

11、 模仿視頻6，完成 左右切換的 Tab 效果

代碼

(mission 14)

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容