In jQuery, the most frequently used symbol "$". $ provides a variety of rich functions,
including selecting one or a class of elements in the page, as the prefix of the function function, the
improvement of window.onload, the creation of the DOM node of the page, etc. . .
1. Selector
In CSS, the role of the selector is to select a certain class (category selector) element or an element (ID selector)
in the page, and the "$" in jQuery is used as a selector, which is also to select a certain element Class or a certain class of elements, but jQuery provides
more comprehensive selection methods. And to deal with browser compatibility issues for users,
CSS can use the following code to select all sub-tags <a> contained under the <h2> tag, and then add the corresponding style
h2 a{
/*Add CSS properties*/
}
and in In jquery, the following code can be used to select all sub-tags <a> contained under the <h2> tag as an array of objects for javascript to use
$("h2 a")
The general syntax of selectors in jquery is as follows:
$(selector )
or
jQuery(selector)
where selector conforms to CSS3 standard
------------------------------
$("#showDiv")
id select It is equivalent to document.getElementById("#showDiv"") in javascript,
you can see that jQuery's representation method is much simpler
$(".
Category selector, selects CSS category as all node elements of "SomeClass", to achieve the same selection in javascript, you
need to use a for loop to traverse the entire DOM
$("p : odd")
to select all <p> tags located on odd lines , Almost all tags can use ": odd" or ": even" to achieve odd-even selection
$("td:nth-child(1)")
The first cell of all table rows is the first column. This is very useful when modifying the properties of a column of a table. No longer need to traverse the table line by line
$("li > a")
child selector, return all child elements of <li> tag <a>, excluding grandchild tags
$("a[href$=pdf]")
Select all Hyperlinks, and the href attribute of these hyperlinks ends with "pdf". With the attribute selector, various feature elements in the page can be well selected.
Note:
The dollar sign "$" in jQuery is actually equivalent to "jQuery". From the source code of jQuery, it can be seen that
for the convenience of writing code, Usually "$" is used instead of "jQuery"
That is, a method of the jQuery object when the trim() function is used.
3. Resolve the conflict of the window.onload function
Since the HMTL framework of the page can be used after the page is fully loaded, the window and onload functions are
frequently used during DOM programming. If the function needs to be used in many places in the page, or other .js files also contain the window.onload function, the
conflict problem is very difficult
. The ready() method in jQuery solves the above problem very well, and it can automatically convert the The function runs after the page is loaded,
and multiple ready() methods can be used on the same page without conflicting with each other. For example
$(document).ready(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});
jQuery also provides a shorthand for the above code, which can be omitted In the "(document).ready" part, the code is as follows:
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});
4. Create DOM elements
use DOM methods to create element nodes, usually need to use document.createElement(), document.create TextNode(),
appendChild() together, which is very troublesome, and "$" is used in jQuery Symbols can directly create DOM elements.
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);
, jQuery also provides the insertAfter() method of DOM elements, the pseudo code is as follows:
$(function(){// ready function
var oNewP = $("<p>This is a good story</>");// Create DOM element
oNewP.insertAfter("#myTarget");// insertAfter() method
});
<body>
<p id="myTarget">Insert after this line of text</p>
<p>It is inserted into this Before the line of text, but there is no id in this line, and it may not exist.</p>
</body>
Add "$" custom
jQuery can not meet all the needs of all users, and some special needs are very niche and not suitable for Into the entire jQuery framework, the
user can customize this method. The code is as follows:
$.fn.disable = function(){
return this.each(function(){
if(typeof this.disabled !
The above code first sets "$.fn.disable", indicating that a method "disable()" is added to "$", where "$.fn" is necessary when extending jQuery,
and then an anonymous function is used to define this method, that is, use each () Set the disabled attribute of each element that calls this method to true (if the attribute exists)
6. Solve the conflict of "$"
If other frameworks also use "$", it will cause conflicts. jQuery also provides noConflict () method to solve the "$" conflict problem.
jQuery.noConflict();
The above code can make "$" operate in the way of other javascript frameworks. At this time, "$" cannot be used in jQuery, but jQuery must be used.
including selecting one or a class of elements in the page, as the prefix of the function function, the
improvement of window.onload, the creation of the DOM node of the page, etc. . .
1. Selector
In CSS, the role of the selector is to select a certain class (category selector) element or an element (ID selector)
in the page, and the "$" in jQuery is used as a selector, which is also to select a certain element Class or a certain class of elements, but jQuery provides
more comprehensive selection methods. And to deal with browser compatibility issues for users,
CSS can use the following code to select all sub-tags <a> contained under the <h2> tag, and then add the corresponding style
h2 a{
/*Add CSS properties*/
}
and in In jquery, the following code can be used to select all sub-tags <a> contained under the <h2> tag as an array of objects for javascript to use
$("h2 a")
The general syntax of selectors in jquery is as follows:
$(selector )
or
jQuery(selector)
where selector conforms to CSS3 standard
------------------------------
$("#showDiv")
id select It is equivalent to document.getElementById("#showDiv"") in javascript,
you can see that jQuery's representation method is much simpler
$(".
Category selector, selects CSS category as all node elements of "SomeClass", to achieve the same selection in javascript, you
need to use a for loop to traverse the entire DOM
$("p : odd")
to select all <p> tags located on odd lines , Almost all tags can use ": odd" or ": even" to achieve odd-even selection
$("td:nth-child(1)")
The first cell of all table rows is the first column. This is very useful when modifying the properties of a column of a table. No longer need to traverse the table line by line
$("li > a")
child selector, return all child elements of <li> tag <a>, excluding grandchild tags
$("a[href$=pdf]")
Select all Hyperlinks, and the href attribute of these hyperlinks ends with "pdf". With the attribute selector, various feature elements in the page can be well selected.
Note:
The dollar sign "$" in jQuery is actually equivalent to "jQuery". From the source code of jQuery, it can be seen that
for the convenience of writing code, Usually "$" is used instead of "jQuery"
That is, a method of the jQuery object when the trim() function is used.
3. Resolve the conflict of the window.onload function
Since the HMTL framework of the page can be used after the page is fully loaded, the window and onload functions are
frequently used during DOM programming. If the function needs to be used in many places in the page, or other .js files also contain the window.onload function, the
conflict problem is very difficult
. The ready() method in jQuery solves the above problem very well, and it can automatically convert the The function runs after the page is loaded,
and multiple ready() methods can be used on the same page without conflicting with each other. For example
$(document).ready(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});
jQuery also provides a shorthand for the above code, which can be omitted In the "(document).ready" part, the code is as follows:
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});
4. Create DOM elements
use DOM methods to create element nodes, usually need to use document.createElement(), document.create TextNode(),
appendChild() together, which is very troublesome, and "$" is used in jQuery Symbols can directly create DOM elements.
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);
, jQuery also provides the insertAfter() method of DOM elements, the pseudo code is as follows:
$(function(){// ready function
var oNewP = $("<p>This is a good story</>");// Create DOM element
oNewP.insertAfter("#myTarget");// insertAfter() method
});
<body>
<p id="myTarget">Insert after this line of text</p>
<p>It is inserted into this Before the line of text, but there is no id in this line, and it may not exist.</p>
</body>
Add "$" custom
jQuery can not meet all the needs of all users, and some special needs are very niche and not suitable for Into the entire jQuery framework, the
user can customize this method. The code is as follows:
$.fn.disable = function(){
return this.each(function(){
if(typeof this.disabled !
The above code first sets "$.fn.disable", indicating that a method "disable()" is added to "$", where "$.fn" is necessary when extending jQuery,
and then an anonymous function is used to define this method, that is, use each () Set the disabled attribute of each element that calls this method to true (if the attribute exists)
6. Solve the conflict of "$"
If other frameworks also use "$", it will cause conflicts. jQuery also provides noConflict () method to solve the "$" conflict problem.
jQuery.noConflict();
The above code can make "$" operate in the way of other javascript frameworks. At this time, "$" cannot be used in jQuery, but jQuery must be used.
For example $("div p") must be written as jQuery("div p").
Welcome everyone to actively discuss. This is East China E-commerce Technology College. We have successfully settled in Tencent Classroom. Currently, we have java direction, testing direction and artificial intelligence direction. If you have any related questions, please feel free to ask. Join the following QQ groups for discussion and learning:
java: 762850414, 762864509
Artificial intelligence: 763346374, 692760972
Test: 628589754 Tel: 13052068380