jQuery中$()函數有幾種用法

原創

2019-09-06 00:27

jQuery想必是當前前端開發中必不可少的組件。它提供了DOM對象的封裝、統一的事件機制、以及一系列的工具函數。由於面試中突然被問及jQuery中$()有幾種用法，瞬間有點懵並未答全。雖說這樣的問法頗似孔乙己問“茴香豆的茴有幾種寫法？”，但還是藉此機會來整理知識，伺機學習一把！

首先我們需要引入jQuery，如果你還沒有聽過jQuery，請移步其他文章或者在你的網站中引入這個：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

jQuery的$()函數文檔在這裏： http://api.jquery.com/jQuery/ jQuery的$()函數的用法包括：

DOM選擇

最常用的便是通過選擇符來選擇：

jQuery( selector [, context ] )

看到沒？第二個可選參數可以指定上下文，它的類型可以是DOM對象也可以是jQuery對象。例如，找ul下的所有li：

$ul = $('ul');
$li = $.('li', $ul);

相當於：

$li = $ul.find('li');

除了選擇符，還可以用DOM對象、DOM對象數組、jQuery對象、甚至一個普通對象作爲參數。它們將會被包裝成jQuery對象。

用jQuery來創建DOM也是常見操作，例如在ul下創建一個li：

// 方法聲明
jQuery( html [, ownerDocument ] )
// 例子
$('<li>').appendTo($ul);

注意第二個可選參數，默認值是當前jQuery被載入的那個Document。如果希望在IFrame中創建的元素，則必須指定Document，因爲jQuery是使用window.document.createElement來創建DOM元素的。這裏要求知道新元素所屬的document對象。例如：

$("<p>hello iframe</p>", $("#myiframe").prop("contentWindow").document)

創建DOM元素時，除了可以指定document，還可以指定元素屬性：

// 方法聲明
jQuery( html, attributes )
// 例子
$('<a>', {
    href: 'http://jquery.com'
});
// 當然你笨笨地寫也是可以的：
$( "<a href='http://jquery.com'></a>" );

更加有趣的是，從jQuery1.8開始，創建元素時不僅可以指定屬性，所有$.fn.方法都可以指定，例如：

$( "<div/>", {
  "class": "test",
  text: "Click me!",
  click: function() {
    $( this ).toggleClass( "test" );
  }
}).appendTo( "body" );

通常JavaScript需要在DOM加載完成後執行，否則DOM操作可能會失效。jQuery提供了一個方便的方法來監聽DOM加載完成：

// 方法聲明
jQuery( callback )
// 例子
$(function(){
    // DOM載入後執行
});

$(callback)只是$(document).ready(callback)的縮寫，兩種寫法的作用相同，返回值也都是包含document的jQuery對象。

這裏提一下$(document).ready和$(window).load的區別：

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.