What does $ in jquery do?

The functions are: 1. As a jQuery wrapper, use selectors to select DOM elements, the syntax "$("selector")"; 2. Function prefix, as the namespace of general utility functions Prefix, for example "$.trim(sString);"; 3. Resolve conflicts in the window.onload function; 4. Create DOM elements, for example "$("

This is a good story>") "; 5. Customize methods to extend jQuery; 6. Use jQuery and other libraries; 7. Set up document readiness handlers.

The operating environment of this tutorial: windows7 system, jquery3.6 version, Dell G3 computer.

1. As a jQuery wrapper, use a selector to select DOM elements

The function of a selector in CSS is to select a certain element on the page. A type (category selector) element or a certain element (ID selector)

, and "$" in jQuery as a selector also selects a certain type or type of element, except that jQuery Provides

more and more comprehensive selection methods. And it handles browser compatibility issues for users

(1) CSS can select all sub-tags contained under the

tag through the following code, and then add the corresponding style

h2 a{
/添加CSS属性/
}

In jquery, you can use the following code to select all sub-tags contained under the

tag, as an object array for use by javascript

$("h2 a")

(2) The general syntax of selectors in jquery is as follows:

$(selector)

or

jQuery(selector)

where selector complies with CSS3 standards

(3) id selector, equivalent to document.getElementById in javascript ("#showp"")

You can see that jQuery's representation method is much simpler

$("#showp“)

(3) Category selector, select the CSS category as all node elements of "SomeClass", in javascript To achieve the same selection,

needs to use a for loop to traverse the entire DOM

$(".SomeClass")

(4) Select all

tags located on odd-numbered lines, almost all tags can be used." : odd" or ": even" to achieve odd and even selection

$("p : odd")

(5) The first cell of all table rows is the first column. This is very useful when modifying the properties of a column of the table Useful. No more need to traverse the table row by row

$("td:nth-child(1)")

(6) Child selector, return all child elements of

tag, excluding grandchild tag

$("li > a")

(7) Select all hyperlinks, and the href attributes of these hyperlinks end with "pdf". With the attribute selector, you can select various characteristic elements in the page

("a[href=pdf]")

Note:

The dollar sign "$" in jQuery is actually equivalent to "jQuery", from It can be seen from the source code of jQuery

For the convenience of writing code, "$" is usually used instead of "jQuery"

2. Function prefix

In JavaScript, developers often need to carry out some small functions to handle various operation details. For example, when the user submits a form,

needs to change the front end of the text box and The spaces at the end are cleared. JavaScript does not provide a function similar to trim(). After introducing

jQuery, you can use the trim() function directly. For example,

$.trim(sString);

The above code is equivalent to:

jQuery.trim(sString);

The trim() function is a method of the jQuery object.

3. Resolve the conflict of the window.onload function

Since the HMTL framework of the page needs to be fully loaded before it can be used, so in the DOM The window.onload function

is frequently used when programming. If this function needs to be used in multiple places on the page, or other .js files also contain the window.onload function,

The conflict problem is very difficult

The ready() method in jQuery is very good It solves the above problem. It can automatically run the functions after the page is loaded.

And multiple ready() methods can be used in the same page without conflicting with each other. For example

$(document).ready(function(){

$("table.datalist tr:nth-child(odd)").addClass("altrow");

});

jQuery also provides abbreviations for the above code, you can omit the "(document).ready" part, the code is as follows:

$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});

4. Create DOM Element

Use DOM methods to create element nodes, usually you need to use document.createElement(), document.create TextNode(),

appendChild() together, which is very troublesome , and the "$" symbol can be used to directly create DOM elements in jQuery. For example

var oNewP = $("

This is a good story>")

The above code is equivalent to the following code in javascript:

var oNewP = document.createElement("p");// 新建节点

var oText = document.createTextNode("这是一个好故事");

oNewP.appendChild(oText);

In addition, jQuery also provides the insertAfter() method of DOM elements. The pseudo code is as follows:

$(function(){           // ready函数

var oNewP = $("<p>这是一个好故事</>");// 创建DOM元素

oNewP.insertAfter("#myTarget");// insertAfter()方法

});

<body>

<p id="myTarget">插入到这行文字之后</p>

<p>也就是插入到这行文字之前，但这行没有id,也可能不存在</p>

</body>

5. Extend jQuery--Customize adding "$"

jQuery cannot meet all the needs of all users, and some special needs are very niche and are not suitable for inclusion in the entire jQuery framework.

用户可以自定义该方法。代码如下：

$.fn.disable = function(){

return this.each(function(){

if(typeof this.disabled != "undefined") this.disabled = true;

});

}

以上代码首先设置".fn.disable",表明为""添加一个方法“disable()”,其中“$.fn”是扩展jQuery时所必须的

然后利用匿名函数定义这个方法，即用each()将调用这个方法的每个元素的disabled属性均设置为true(如果该属性存在)

6、使用jQuery和其他库

例如：Prototype库也是使用$符号，jQuery提供noConflict函数避免冲突，jQuery.noConflict();把$符号还原到非jQuery库定义的含义。

7、文档就绪处理程序，相当于$(document).ready(...)

例如：

$(function(){...}); //里面的函数会在DOM树加载完之后执行

扩展知识：解决"$"的冲突

如果其他框架也是用了“",会引起冲突，jQuery同样提供了noConflict()方法来解决""冲突问题

jQuery.noConflict();

以上代码可以使""按照其他javascript框架的方式运算，这时再jQuery中便不能在使用“”，而必须使用jQuery，

例如$("p p") 必须写成jQuery("p p").

【推荐学习：jQuery视频教程、web前端视频】

The above is the detailed content of What does $ in jquery do?. For more information, please follow other related articles on the PHP Chinese website!