jQuery syntax summary and precautions

1. Regarding the reference of page elements
Referencing elements through jquery's $() includes methods such as id, class, element name, hierarchical relationship of elements, dom or xpath conditions, etc., and the returned object is a jquery object (collection object), Methods defined by DOM cannot be called directly.

2. Conversion between jQuery objects and dom objects
Only jquery objects can use the methods defined by jquery. Note that there is a difference between dom objects and jquery objects. When calling methods, you should pay attention to whether you are operating on dom objects or jquery objects.
Ordinary DOM objects can generally be converted into jQuery objects through $().
For example: $(document.getElementById("msg")) is a jquery object, and you can use jquery methods.
Since the jquery object itself is a collection. Therefore, if the jquery object is to be converted into a dom object, one of the items must be retrieved, which can generally be retrieved through an index.
For example: $("#msg")[0], $("p").eq(1)[0], $("p").get()[1], $("td")[ 5] These are dom objects, you can use methods in dom, but you can no longer use Jquery methods.
The following writing methods are correct:
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0) [0].innerHTML;
$("#msg").get(0).innerHTML;

3. How to get an item of the jQuery collection
For the obtained element collection, get an item (through index Specified) can be obtained using the eq or get(n) method or the index number. Note that eq returns a jquery object, while get(n) and index return a dom element object. For jquery objects, you can only use jquery methods, and for dom objects, you can only use dom methods. For example, you want to get the content of the third < p> element. There are the following two methods:
$("p").eq(2).html(); //Call the jquery object method
$("p").get(2).innerHTML; //Call the dom method Method attributes

4. The same function implements set and get
Many methods in Jquery are like this, mainly including the following:
$("#msg").html(); //Return the element node with the id of msg html content.
$("#msg").html("new content");
//Write "new content" as an html string with the id msg In the element node content, the page displays bold new content

$("#msg").text(); //Returns the text content of the element node with the id of msg.
$("#msg").text("new content");
//Write "new content" as a normal text string with the id msg In the element node content, the page displays bold new content

$("#msg").height(); //Returns the height of the element with id msg
$("# msg").height("300"); //Set the height of the element with id msg to 300
$("#msg").width(); //Return the width of the element with id msg
$( "#msg").width("300"); //Set the width of the element with id msg to 300

$("input").val("); //Return the value of the form input box
$("input").val("test"); //Set the value of the form input box to test

$("#msg").click(); //Trigger the click of the element with id msg Click event
$("#msg").click(fn); //Add a function for the click event of the element with id msg
Similarly, blur, focus, select, and submit events can have two calling methods

5. Collection processing function
For the collection content returned by jquery, we do not need to loop through and process each object separately. jquery has provided us with a very convenient method to process the collection
including two forms:
$("p. ").each(function(i){this.style.color=['#f00','#0f0','#00f']})
//For the p elements with indexes 0, 1, and 2 respectively Set different font colors.

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
// Achieve the effect of interlaced color changing of tables

$("p").click(function(){.html())})
//Added click event for each p element, click on a p element to pop up Its content

6. Extend the functions we need
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > $.min(10,20));

7. Supports continuous writing of methods
The so-called continuous writing means that you can continuously call various methods on a jquery object.

For example:

$("p").click(function(){.html())})
.mouseover(function(){})
.each(function(i){this.style.color=[ '#f00','#0f0','#00f']});

8. Manipulating the style of elements
mainly includes the following methods:
$("#msg").css("background"); //Return the background color of the element
$("#msg").css(" background","#ccc") //Set the background of the element to gray
$("#msg").height(300); $("#msg").width("200"); //Set the width High
$("#msg").css({ color: "red", background: "blue" });//Set the style in the form of name-value pairs
$("#msg").addClass(" select"); //Add a class named select to the element
$("#msg").removeClass("select"); //Remove the class named select for the element
$("#msg").toggleClass( "select"); //If it exists (does not exist), delete (add) the class named select

9. Complete event processing function
Jquery has provided us with various event processing methods, and we do not need to add it to the html element Write events directly on the object, and you can directly add events to the objects obtained through jquery.
For example:
$("#msg").click(function(){}) //Add a click event to the element
$("p").click(function(i){this.style.color= ['#f00','#0f0','#00f']})
//Set different processing for three different p element click events
Several custom events in jQuery:
(1 )hover(fn1,fn2): A method that simulates hover events (the mouse moves over and out of an object). When the mouse moves over a matching element, the first specified function will be triggered. When the mouse moves out of this element, the specified second function will be triggered.
//When the mouse is placed on a row of the table, set the class to over, and when leaving it, set the class to out.
$("tr").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
} );
(2) ready(fn): Bind a function to be executed when the DOM is loaded and ready for query and manipulation.
$(document).ready(function(){})
//When the page is loaded, it prompts "Load Success", which is equivalent to the onload event. Equivalent to $(fn)
(3) toggle(evenFn,oddFn): Switch the function to be called every time it is clicked. If a matching element is clicked, the first function specified is triggered, and when the same element is clicked again, the second function specified is triggered. Each subsequent click repeats the call to these two functions in turn.
//Alternately add and delete the class named selected every time you click.
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
}) ;
(4)trigger(eventtype): Trigger a certain type of event on each matching element.
For example:
$("p").trigger("click"); //Trigger click events of all p elements
(5) bind(eventtype,fn), unbind(eventtype): binding and unbinding of events Determine
Remove (add) the bound event from each matching element.
For example:
$("p").bind("click", function(){.text());}); //Add a click event to each p element
$("p").unbind (); //Delete all events on all p elements
$("p").unbind("click") //Delete all click events on all p elements

10. Several practical special effects functions
Among them toggle () and slidetoggle() methods provide state switching functions.
For example, the toggle() method includes hide() and show() methods.
slideToggle() method includes slideDown() and slideUp methods.

11. Several useful jQuery methods
$.browser. Browser type: Detect browser type. Valid parameters: safari, opera, msie, mozilla. For example, if you check whether it is IE: $.browser.isie, if it is an IE browser, it will return true.
$.each(obj, fn): General iteration function. Can be used to iterate over objects and arrays approximately (instead of looping).
Such as
$.each( [0,1,2], function(i, n){ ; });
is equivalent to:
var tempArr=[0,1,2];
for(var i=0 ;i;
}
can also process json data, such as
$.each( { name: "John", lang: "JS" }, function(i, n){ ; } );
The result is:
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN): Extend an object with one or more other objects and return the extended object Object. This is the inheritance method implemented by jquery.
For example:
$.extend(settings, options);
//Merge settings and options, and return the merged result to settings, which is equivalent to options inheriting setting and saving the inherited result in setting.
var settings = $.extend({}, defaults, options);
//Merge defaults and options, and return the merged result to the setting without overwriting the default content.
Can have multiple parameters (combine multiple items and return)
$.map(array, fn): array mapping. Saves the items in an array (after processing the transformation) into a new array and returns the resulting new array.
For example:
var tempArr=$.map([0,1,2], function(i){ return i + 4; });
tempArr content is: [4,5,6]
var tempArr=$. map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr content is: [2,3]
$.merge(arr1,arr2): Merge two arrays and remove duplicate items.
For example: $.merge( [0,1,2], [2,3,4] ) //Return [0,1,2,3,4]
$.trim(str): Delete both ends of the string White space characters.
For example: $.trim(" hello, how are you? "); //Return "hello, how are you? "

12. Solve conflicts between custom methods or other class libraries and jQuery
Many times we define it ourselves The $(id) method is used to obtain an element, or some other js libraries such as prototype also define the $ method. If these contents are put together at the same time, it will cause a variable method definition conflict. Jquery provides a special method for this. used to solve this problem.
Use the jQuery.noConflict(); method in jquery to transfer control of the variable $ to the first library that implements it or the previously customized $ method. When using Jquery later, just replace all $ with jQuery. For example, the original reference object method $("#msg") is changed to jQuery("#msg").
For example:
jQuery.noConflict();
// Start using jQuery
jQuery("p p").hide();
// Use other libraries' $()
$("content").style.display = 'none';

The above is a summary of jQuery syntax and precautions. For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!