The use of the dollar sign "$" in jquery

"$" in jquery

In jquery, the most frequently used symbol is "$". $ provides a variety of rich features,

Includes one or a class of elements in the selection page, as a prefix for function functions, window.onload

Perfect, create pages of DOM nodes, etc...

1. Selector

The role of selectors in CSS is to select a class (category selector) element or an element (ID selector) in a page

, and the "$" in jquery, as a selector, also selects a class or class of elements, but jquery provides

More and more comprehensive selection methods. and has handled browser compatibility issues for the user

CSS can be selected by the following code to select all of the child tags contained under the

H2 a{

/* Add CSS Properties */

}

In jquery, you can use the following code to check all of the child tags contained under the

$ ("H2 a")

The general syntax for selectors in jquery is as follows:

$ (selector)

Or

JQuery (selector)

Where selector complies with CSS3 standards

------------------------------

$ ("#showDiv")

ID selector, equivalent to document.getElementById ("#showDiv") in JavaScript

You can see that jquery is a lot more concise.

$(". SomeClass ")

Category selector, select the CSS category as all node elements of "SomeClass", in JavaScript to implement the same selection,

Need to iterate through the DOM with a for loop

$ ("p:odd")

Select all the <p> marks in the odd line, and almost all the tags can use ": odd" or ": even" to achieve the parity selection

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

The first cell of all table rows is the first column. This is useful when modifying the properties of a column in a table. No longer need a row of rows to traverse a table

$ ("li > A")

Child selector, returns all child elements of the <li> tag <a>, excluding grandchild tags

$ ("a[href$=pdf]")

All hyperlinks are selected, and the href attribute of these hyperlinks ends with "PDF". With the property selector, you can select various feature elements in the page very well.

Attention:

In jquery, the dollar sign "$" is actually equivalent to "jquery", as you can see from the source code of jquery

"$" is often used instead of "jQuery" for the convenience of writing code

2. function function Prefix

In JavaScript, developers often take small functions to handle various operational details, such as when a user submits a form,

You need to clean up the front and end spaces in the text box, and JavaScript does not provide trim ()-like functionality, but introduces

After jquery, you can use the trim () function directly, for example

$.trim (sstring);

The above code is equivalent to:

Jquery.trim (sstring);

That is, the trim () function is a method of the jquery object.

3, resolve the conflict of window.onload function

Because the HMTL framework of the page needs to be used after the page is fully loaded, the Window,onload function in DOM programming

are frequently used. If you need to use this function in more than one place on the page, or another. js file contains the Window.onload function,

The conflict is tricky.

The Ready () method in jquery solves the above problem, and it can automatically run the function after the page is loaded.

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

$ (document). Ready (function () {

$ ("Table.datalist tr:nth-child (Odd)"). AddClass ("Altrow");

});

For the above code jquery also provides shorthand, you can omit the "(document). Ready" section, the code is as follows:

$ (function () {

$ ("Table.datalist tr:nth-child (Odd)"). AddClass ("Altrow");

});

4. Creating DOM elements

Using DOM methods to create element nodes, you typically need to document.createelement (), Document.create textnode (),

AppendChild () is cumbersome to use, while jquery uses the "$" notation to create DOM elements directly. For example

var ONEWP = $ ("<p> This is a good story </>")

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

var onewp = document.createelement ("P");//New node

var otext = document.createTextNode ("This is a good story");

Onewp.appendchild (Otext);

In addition, jquery provides the InsertAfter () method of the DOM element, which is the following pseudo-code:

$ (function () {//Ready function

var ONEWP = $ ("<p> This is a good story </>");//Create DOM element

Onewp.insertafter ("#myTarget");//InsertAfter () method

});

<body>

<p id= "Mytarget" > after inserting into this line of text </p>

<p> is inserted before this line of text, but this line has no ID or may not exist </p>

</body>

Custom Add "$"

jquery does not meet all the needs of all users, and there are some special needs are very small, and not suitable for the entire jquery framework,

The user can customize the method. The code is as follows:

$.fn.disable = function () {

Return This.each (function () {

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

});

}

The above code first sets "$.fn.disable", which indicates adding a method "Disable ()" for "$", where "$.fn" is required to extend jquery

The method is then defined using the anonymous function, which is to set the disabled property of each element that invokes this method to true (if the property exists)

6. Resolve the "$" conflict

If other frameworks also use "$", which can cause conflicts, jquery also provides the Noconflict () method to resolve the "$" conflict.

Jquery.noconflict ();

The above code allows "$" to be operated in the same way as other JavaScript frameworks, when "$" cannot be used in jquery, and jquery must be used.

For example $ ("div p") must be written in jquery ("Div p").

The use of the dollar sign "$" in jquery