What does the dollar sign $ do in jQuery?

The role of the dollar sign "$" in jQuery: 1. As a jQuery wrapper, using selectors to select DOM elements; 2. As a prefix for the namespace of several common utility functions; 3. Create DOM elements; 4. Extend jQuery; 5. Resolve conflicts in the "window.onload" function.

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

Recommended tutorial: jq tutorial

1. Selector

Selector in CSS The function is to select a certain category (category selector) element or a certain element (ID selector)

on the page, while "$" in jQuery is used as a selector, and it also selects a certain category or element. A type of element, but 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. Customize to add "$"

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.

Users can customize this method. code show as below:

$.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同样提供了noConflict()方法来解决""冲突问题

jQuery.noConflict();

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

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

更多编程相关知识，请访问：编程入门！！

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