The core functions of jquery: 1. jQuery(), mainly used to obtain HTML DOM elements and encapsulate them into jQuery objects; 2. "jQuery.noConflict()", used to transfer the variable "$" jQuery control.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

jQuery Core Function

Function	Description
jQuery()	Accepts a string containing a CSS selector used to match a collection of elements.
jQuery.noConflict()	Run this function to transfer control of the variable $ to the first library that implements it.

Function description

jQuery():

The jQuery() function is the core function of the jQuery library, and everything in jQuery is based on this function. This function is mainly used to obtain HTML DOM elements and encapsulate them into jQuery objects, so that other properties and methods provided by jQuery objects can be used to operate on DOM elements.

The jQuery() function is very powerful. It can intelligently encapsulate various types of parameters into jQuery objects.

Syntax

• jQuery(selector, [ context ])
  Encapsulate the HTML DOM element corresponding to the selector string selector into a jQuery object. The optional parameter context is used to specify the scope of searching for DOM elements.
• jQuery( [ obj ])
  Encapsulates the specified object obj into a jQuery object. This object can be a DOM element (Element), an array of DOM elements, a jQuery object (clone it), or other objects. You can also omit this parameter, returning an empty jQuery object.

jQuery 1.4 Added new usage of omitting parameter obj: without passing in any parameters, an empty jQuery object will be returned

• jQuery(html, [ ownerDocument ])
  Dynamically creates a temporary DOM element based on the HTML tag string html and encapsulates it as a jQuery object. The optional parameter ownerDocument is used to specify the document in which the temporary DOM element is created (if there are multiple documents, such as a frame page).

jQuery 1.0 added this usage.

• jQuery(html, properties)
  Dynamically based on the HTML tag string html and the properties object containing its additional properties, events and methods. Create a temporary DOM element and encapsulate it as a jQuery object.

jQuery 1.4 added this usage.

• jQuery( callback )
  After the current document is loaded, execute the specified function callback. This usage is the abbreviation of the following usage of the ready() function: jQuery(document).ready(callback).

jQuery 1.0 added this usage.

Parameters

Attributes	Description
selector	String type The specified selector string, used to find the corresponding DOM element.
context	Optional/Object type Specifies the search range of the selector string, which can be DOM elements, DOM element arrays, documents, jQuery object. If this parameter is omitted, it defaults to the current document.
obj	Optional/Object type The specified object is used to encapsulate a jQuery object. It can be a DOM element, DOM element array, document, jQuery object, etc.
html	Object type Specified HTML tag string, such as "<p/>", "< p></p>", "<p id='tagId'></p>" (tags can also be nested in tags, as long as they comply with html syntax).
ownerDocument	Document type Specifies the document on which the DOM element is temporarily created. The default is the current document.
properties	Object type The specified object is used to specify the properties, events and methods of the DOM element. For example: {name:”username”, “click”:function(){}}
callback	Function type Specified function, Used to be executed immediately after the DOM document is loaded.

Return value

The return value of the jQuery() function is of jQuery type and returns a jQuery object.

Example & Description:

• ##jQuery(selector, [ context])Example code:

// 選擇當(dāng)前文檔中所有的p標(biāo)簽DOM元素
$("p");

// 選擇id屬性為username的DOM元素
$("#username");

// 選擇所有包含test樣式的DOM元素，(例如：class="test")
$(".test");

// 選擇所有p標(biāo)簽中帶test樣式的DOM元素
$("p .test");

• jQuery( [ obj ] Sample code:

var dom = document.getElementById("username");
// 將DOM元素封裝為jQuery對象
$(dom);

var doms = document.getElementsByName("book_id");
// 將DOM元素數(shù)組封裝為jQuery對象
$(doms);

// 將body元素封裝為jQuery對象
$(document.body);

• jQuery( html, [ ownerDocument ])Sample code:

// 創(chuàng)建一個空的span標(biāo)簽的臨時DOM元素，并將其封裝為jQuery對象
// 以下三種方式的效果一致
$(&#39;<span/>&#39;);
$(&#39;<span></span>&#39;);
$(&#39;<span>&#39;); // 但不推薦使用這種方式

// 創(chuàng)建一個p標(biāo)簽，內(nèi)部包含帶有test樣式的span標(biāo)簽
$(&#39;<p><span class="test"></span></p>&#39;);

// 創(chuàng)建一個表格
var html = &#39;<table>&#39;;
html += &#39;<tr>&#39;;
html += &#39;<td>單元格1</td>&#39;;
html += &#39;<td>單元格2</td>&#39;;
html += &#39;</tr>&#39;;
html += &#39;<tr>&#39;;
html += &#39;<td>單元格3</td>&#39;;
html += &#39;<td>單元格1</td>&#39;;
html += &#39;</tr>&#39;;
html += &#39;</table>&#39;;
$(html);

• jQuery(html, properties)Sample code:

// 創(chuàng)建一個臨時的鏈接jQuery對象
var tempLink = $(&#39;<a/>&#39;, {
    id: &#39;goback&#39;,
    title: &#39;CodePlayer&#39;,
    html: &#39;CodePlayer&#39;, // 表示鏈接的錨文本，也就是innerHTML的值
    href: &#39;http://www.365mini.com/&#39;,
    click: function(){
        // 統(tǒng)計點擊次數(shù)       
    }
});
// 追加到body標(biāo)簽內(nèi)容的末尾
tempLink.appendTo("body");


$(&#39;<input/>&#39;, {
    type: &#39;checkbox&#39;,
    val: &#39;def&#39;, // 表示表單元素的value屬性值或textarea的輸入內(nèi)容
    click: function(){
        alert("點擊了復(fù)選框");
    }
}).appendTo("body");

• jQuery( callback )Sample code:

$(function(){
    // 本文檔頁面載入完成后自動執(zhí)行
    alert("文檔加載完畢!");
});

// 這相當(dāng)于ready()函數(shù)如下用法的簡寫

$(document).ready(function(){
    // 本文檔頁面載入完成后自動執(zhí)行
    alert("文檔加載完畢!");
});

jQuery.noConflict()

The noConflict() method cedes jQuery control of variable $.

This method releases jQuery’s control of $ variable.

This method can also be used to specify a new custom name for a jQuery variable.

Tip: This method is useful when other JavaScript libraries use $ for their functions.

Syntax:

jQuery.noConflict(removeAll)

• removeAll Boolean value. Indicates whether to allow complete restoration of jQuery variables.

Related video tutorial recommendations:

jQuery Tutorial (Video)

The above is the detailed content of What are the core functions of jquery. For more information, please follow other related articles on the PHP Chinese website!