What are the core functions of jquery

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 "a6f776b766579c28d02706af09482172", "01ffcd5d1a840d2341909ced6bafa76c94b3e26ee717c64999d7867364b1b4a3", "d0659237eeb5c5f8cf72d25d81da40c994b3e26ee717c64999d7867364b1b4a3" (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:

// 选择当前文档中所有的p标签DOM元素
$("p");

// 选择id属性为username的DOM元素
$("#username");

// 选择所有包含test样式的DOM元素，(例如：class="test")
$(".test");

// 选择所有p标签中带test样式的DOM元素
$("p .test");

• jQuery( [ obj ] Sample code:

var dom = document.getElementById("username");
// 将DOM元素封装为jQuery对象
$(dom);

var doms = document.getElementsByName("book_id");
// 将DOM元素数组封装为jQuery对象
$(doms);

// 将body元素封装为jQuery对象
$(document.body);

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

// 创建一个空的span标签的临时DOM元素，并将其封装为jQuery对象
// 以下三种方式的效果一致
$(&#39;<span/>&#39;);
$(&#39;<span></span>&#39;);
$(&#39;<span>&#39;); // 但不推荐使用这种方式

// 创建一个p标签，内部包含带有test样式的span标签
$(&#39;<p><span class="test"></span></p>&#39;);

// 创建一个表格
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:

// 创建一个临时的链接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(){
        // 统计点击次数       
    }
});
// 追加到body标签内容的末尾
tempLink.appendTo("body");


$(&#39;<input/>&#39;, {
    type: &#39;checkbox&#39;,
    val: &#39;def&#39;, // 表示表单元素的value属性值或textarea的输入内容
    click: function(){
        alert("点击了复选框");
    }
}).appendTo("body");

• jQuery( callback )Sample code:

$(function(){
    // 本文档页面载入完成后自动执行
    alert("文档加载完毕!");
});

// 这相当于ready()函数如下用法的简写

$(document).ready(function(){
    // 本文档页面载入完成后自动执行
    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!