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

小練習：

題目1： jQuery 能做什么？

jQuery是一個快速，小巧，功能豐富的JavaScript庫，它使得HTML文檔遍歷和操作，事件處理，動畫和AJax等功能等實現更加方便，同時jQuery還支持插件機制，為開發者提供了更加便捷的開發；此外，jQuery還具有良好的瀏覽器兼容性，能夠提升開發效率。

題目2： jQuery 對象和 DOM 原生對象有什么區別？如何轉化？

jQuery對象即用jQuery類庫的選擇器獲得的對象；

DOM原生對象即用原生JavaScript方法獲得的對象。

區別
  1. jQuery對象是jQuery獨有的，jQuery$封裝的方法返回的是一個類數組對象，可以使用jQuery里的方法，無法使用DOM對象的任何方法；
  2. DOM對象不能使用jQuery里的方法。
轉化
  1. jQuery對象 --> DOM原生對象
  <div class="content">
    <p>this is test.</p>
  </div>
  • [index]
  var $content = $('.content');
  var content = $content[0];
  console.log(content); //  <div class="content">
  • .get(index)
  var $content = $('.content');
  var newContent = $content.get(0);
  console.log(newContent);  //  <div class="content">
  1. DOM原生對象 --> jQuery對象

只需要講DOM對象使用$()包裹起來，就可以得到jQuery對象：

  var content = document.getElementsByClassName('content');
  var $content = $(content);

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

jQuery封裝了很好的API，可以方便的進行事件處理，在1.7之前的版本中jQuery處理事件有多個方法，作用各不相同，后來統一的使用on/off方法。

.bind()為一個元素綁定一個事件處理程序。
.bind( eventType [, eventData ], handler(eventObject) )
  1. eventType：類型: String；一個包含一個或多個DOM事件類型的字符串，比如"click"或"submit,"或自定義事件的名稱。
  2. eventData：類型: Anything；一個對象，它包含的數據鍵值對映射將被傳遞給事件處理程序。
  3. handler(eventObject)：
    類型: Function()；每當事件觸發時執行的函數。

在jQuery 3.0中，.bind()已被標記為棄用。

.unbind()從元素上刪除一個以前附加事件處理程序。
.unbind( [eventType ] [, handler(eventObject) ] )
  1. eventType：類型: String；一個包含一個或多個 DOM 事件類型的字符串，比如 "click" 或 "submit," 或自定義的事件名。
  2. handler：類型: Function( Event eventObject )；這個函數今后不在執行。

在jQuery 3.0中，.unbind()已被標記為棄用。

.delegate()為所有匹配選擇器（selector參數）的元素綁定一個或多個事件處理函數，基于一個指定的根元素的子集，匹配的元素包括那些目前已經匹配到的元素，也包括那些今后可能匹配到的元素。
.delegate( selector, eventType, handler(eventObject) )
  1. selector：類型: String，選擇器字符串，用于過濾器觸發事件的元素。
  2. eventType：類型: String；一個包含一個或多個用空格隔開的JavaScript事件類型的字符串，比如"click"或"keydown,"或自定義事件的名稱。
  3. handler(eventObject)：類型: Function()；每當事件觸發時執行的函數。

在jQuery 3.0中，.delegate()已被標記為棄用。

.live()附加一個事件處理器到匹配目前選擇器的所有元素，現在和未來。
.live( events, handler(eventObject) )

events：類型: String；一個包含一個JavaScript事件類型的字符串，比如"click"或"keydown,"或自定義事件的名稱。從jQuery 1.4開始，字符串可以包含多個空格分隔的事件類型或自定義事件的名稱。
handler(eventObject)：類型: Function()；每當事件觸發時執行的函數。

從jQuery1.7開始， .live() 方法已經過時了。請使用.on()附加事件處理程序。 舊版本的jQuery中用戶，應優先使用.delegate()來取代.live()。

.on()在選定的元素上綁定一個或多個事件處理函數。
.on( events [,selector ] [,data ], handler(eventObject) )

  1. events：一個或多個空格分隔的事件類型和可選的命名空間，或僅僅是命名空間，比如"click", "keydown.myPlugin", 或者 ".myPlugin"

  2. selector：一個選擇器字符串，用于過濾出被選中的元素中能觸發事件的后代元素。如果選擇器是 null 或者忽略了該選擇器，那么被選中的元素總是能觸發事件

  3. data：當一個事件被觸發時，要傳遞給事件處理函數的event.data

  4. handler(eventObject)：事件被觸發時，執行的函數。若該函數只是要執行return false的話，那么該參數位置可以直接簡寫成 false

$('#dataTable tbody').on('click', function() {
  console.log($(this).text());
});
.off()移除一個事件處理函數。
.off( events [, selector ] [, handler ] )

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

// ... now foo will be called when paragraphs are clicked ...
$("body").on("click", "p", foo);

// ... foo will no longer be called.
$("body").off("click", "p", foo);

題目4：jQuery 如何展示/隱藏元素？

.hide()/.show() 
.hide([duration ] [,easing ] [,complete ])

.hide()可以用來隱藏元素，沒有參數的時候等同于直接設置display屬性。

  1. duration：表示隱藏動畫持續時間。以毫秒為單位的，數值越大，動畫越慢。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。
  2. easing：表示過渡使用哪種緩動函數，jQuery自身提供"linear" 和 "swing"，其他可以使用相關的插件。
  3. complete： 在動畫完成時執行的函數。
$('#dataTable tbody').hide('slow', 'linear', function() {
  console.log('animation complete.');
});

.show()用于顯示元素，用法和.hide()類似。

.css()

可以使用.css()方法來為指定元素添加樣式屬性值。

  • 顯示元素：
$('dataTable tbody').click(function() {
  $(this).css('display', 'inline-block');
});
  • 隱藏元素：
$('dataTable tbody').click(function() {
  $(this).css('display', 'none');
});
.addClass()/removeClass()

可以在樣式表中添加樣式后再使用.addClass()/removeClass()進行元素的隱藏和顯示。

題目5： jQuery 動畫如何使用？

基礎動畫
  1. .hide()：用來隱藏元素。
  2. .show()：用來顯示元素。
  3. .toggle()：用來切換元素的隱藏、顯示，類似于toggleClass，用法和show、hide類似。
漸變
  1. .fadeIn()：通過淡入的方式顯示匹配元素。
.fadeIn( [duration ] [, easing ] [, complete ] )
  1. .fadeOut()：通過淡出的方式隱藏匹配元素。
.fadeOut( [duration ] [, easing ] [, complete ] )
  1. .fadeTo()：調整匹配元素的透明度。
.fadeTo( duration, opacity [, easing ] [, complete ] )
  1. fadeToggle()：通過匹配的元素的不透明度動畫，來顯示或隱藏它們，方法執行匹配元素的不透明度動畫。當被可見元素調用時，元素不透明度一旦達到0，display樣式屬性設置為none ，所以元素不再影響頁面的布局。
滑動

  1. .slideDown()：用滑動動畫顯示一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑下去，彌補了顯示的方式。

  2. slideUp()：用滑動動畫隱藏一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑上去，當一個隱藏動畫后，高度值達到0的時候，display 樣式屬性被設置為none，以確保該元素不再影響頁面布局。 display 樣式屬性將被設置為none，以確保該元素不再影響頁面布局。

  3. .slideToggle()：用滑動動畫顯示或隱藏一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面中，在這個元素下面的內容往下或往上滑。display屬性值保存在jQuery的數據緩存中，所以display可以方便以后可以恢復到其初始值。

如果一個元素的display屬性值為inline，然后是隱藏和顯示，這個元素將再次顯示inline。當一個隱藏動畫后，高度值達到0的時候，display 樣式屬性被設置為none，以確保該元素不再影響頁面布局。

自定義動畫
  1. .animate()：根據一組 CSS 屬性，執行自定義動畫。
.animate( properties [, duration ] [, easing ] [, complete ] )

properties：類型: PlainObject；一個CSS屬性和值的對象,動畫將根據這組對象移動。

duration (默認: 400)：類型: Number or String；一個字符串或者數字決定動畫將運行多久。（注：默認值: "normal"， 三種預定速度的字符串("slow", "normal", 或 "fast")或表示動畫時長的毫秒數值(如：1000) ）

easing (默認: swing)：類型: String；一個字符串，表示過渡使用哪種緩動函數。（譯者注：jQuery自身提供"linear" 和 "swing"）

complete：類型: Function()；在動畫完成時執行的函數。

jquery animate demo：點擊查看

題目6：如何設置和獲取元素內部 HTML 內容？如何設置和獲取元素內部文本？

  • .html()獲取集合中第一個匹配元素的HTML內容 或 設置每一個匹配元素的html內容。

  • .text()得到匹配元素集合中每個元素的文本內容結合，包括他們的后代，或設置匹配元素集合中每個元素的文本內容為指定的文本內容。

題目7：如何設置和獲取表單用戶輸入或者選擇的內容？如何設置和獲取元素屬性？

  • .val()獲取匹配的元素集合中第一個元素的當前值或設置匹配的元素集合中每個元素的值。

  • .attr()獲取匹配的元素集合中的第一個元素的屬性的值或 設置每一個匹配元素的一個或多個屬性。

練習小作品：查看地址

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容