Several common methods required for learning jquery

Jquery event processing

Ready (FN)

Code:

$(document).ready(function(){   // Your code here... })；

Function: it can greatly improve the response speed of Web applications. By using this method, you can call the function you bind immediately when the Dom is ready to read and manipulate, and 99.99% of JavaScript functions need to be executed at that moment.

BIND (type, [data], FN)

Code:

$("p").bind("click", function(){   
    alert( $(this).text() ); 
}); 

Purpose: bind an event processor function to a specific event that matches an element (such as click. It serves as an event listener.

Toggle (FN, FN)

Code:

$("td").toggle(   function () {     
$(this).addClass("selected");   },   function () {     
$(this).removeClass("selected");   } );

Purpose: Switch the function to be called each time you click. If a matching element is clicked, the specified first function is triggered. When the same element is clicked again, the specified second function is triggered. A very interesting function may be used to dynamically implement some functions. Events such as click (), focus (), and keydown () are not mentioned here. They are commonly used in development .)

Jquery appearance

Addclass (class) and removeclass (class)

Code:

$(".stripe tr").mouseover(function(){                  
$(this).addClass("over");}).mouseout(function(){                 
    $(this).removeClass("over");
    }) 
});

You can also write it as follows:

$(".stripe tr").mouseover(function() { $(this).addClass("over") }); 
$(".stripe tr").mouseout(function() { $(this).removeClass("over") });

Purpose: add or remove styles for the specified elements to achieve dynamic style effects. The code for moving the two-color table with the mouse in the above example

CSS (name, value)

Code:

$("p").css("color","red");

Purpose: set the value of a style attribute in the matching element. This personal feeling is a bit similar to the above addclass (class.

Slide (), hide (), fadein (), fadeout (), slideup (), slidedown ()

Code:

$("#btnShow").bind("click",function(event){ 
    $("#divMsg").show() 
}); 
$("#btnHide").bind("click",function(evnet){ 
    $("#divMsg").hide() 
});

Purpose: several commonly used dynamic effects functions provided by jquery. You can also add the parameter show (speed, [callback]) to show all matching elements in an elegant animation, and trigger a callback function after the display is complete.

Animate (Params [, duration [, easing [, callback])

Function: The function used to create an animation. It is very powerful and can be used continuously.

Search and filter

Map (callback)

HTML code:

< FORM>
< INPUT value=John name=name> 
< INPUT value=password name=password> 
< /FORM> 

Jquery code:

$("p").append( 
$("input").map(function(){   
return $(this).val(); 
}).get().join(", ") ); 

Result:

[ John, password]

Purpose: convert a group of elements into other arrays (whether it is an array of elements or not). You can use this function to create a list, whether it is a value, attribute, CSS style, or other special form. You can use '$. Map ()' to create a map.

Find (expr)

HTML code:

< SPAN>Hello< /SPAN>, how are you?

Jquery code:

$("p").find("span")

Result:

[<Span> Hello </span>]

Purpose: search for all elements that match the specified expression. This function is a good way to find the child element of the element being processed.

Document Processing

ATTR (Key, value)

HTML code:

< IMG>< IMG>

Jquery code:

$("img").attr("src","test.jpg");

Purpose: Get or set the attribute value of the matching element. This method can be used to conveniently obtain the value of an attribute from the First Matching Element. If the element does not have a property, undefined is returned. It is a required tool for controlling HTML tags.

HTML ()/html (VAL)

HTML code:

<DIV>Hello</DIV>

Jquery code:

1 $("div").html();

Result:

Hello

Purpose: obtain or set the HTML content of the matching element. Methods of the same type include text () and Val (). The former is used to obtain the content of all matching elements ., The latter is used to obtain the current value of the matching element. Similar to the three, they are often used in content operations.

Wrap (HTML)

HTML code:

Test Paragraph.

Jquery code:

$("p").wrap(" < DIV class="wrap">< /DIV>");

Result:

<Div class = "Wrap">

Test paragraph.

Purpose: wrap all matching elements with the structured tags of other elements. This packaging is most useful for inserting additional structured tags into a document and does not compromise the semantic quality of the original document. You can flexibly modify our Dom.

Empty ()

HTML code:

1 Hello, Person < A href="http://new.51cto.com/wuyou/news_edit.php?artID=127754#">and person< /A>

Jquery code:

1 $("p").empty();

Result:

Purpose: delete all child nodes in the matched element set.

Ajax Processing

Load (URL, [data], [callback])

URL (string): the URL of the HTML webpage to be loaded.

Data (MAP): (optional) Key/value data sent to the server.

Callback (callback): (optional) callback function when the load is successful.

Code:

$("#feeds").load("feeds.aspx", {limit: 25}, function(){    alert("The last 25 entries in the feed have been loaded");  });

 

Purpose: load the remote HTML file code and insert it into the Dom. This is also the most common and effective method for jquery to operate Ajax.

Tools

Jquery. Each (OBJ, callback)

Code:

$. Each ([0, 1, 2], function (I, n ){
Alert ("item #" + I + ":" + n );
});
// Traverse the Array
$. Each ({name: "John", Lang: "JS"}, function (I, n ){
Alert ("name:" + I + ", value:" + n); // traverses an object
});

 

Role: common case-over method, which can be used for case-over objects and arrays.

Jquery. makearray (OBJ)

HTML code:

First<DIV>Second</DIV>Third</DIV><DIV>Fourth< /DIV>

Jquery code:

var arr = jQuery.makeArray(document.getElementsByTagName("div"));

Result:

Fourth

Third

Second

First

Purpose: convert a class array object to an array object. This allows us to flexibly Convert Between arrays and objects.

Jquery. Trim (STR)

Purpose: You should be familiar with this, that is, remove the spaces at the beginning and end of the string.

Summary: in actual development, we may use other methods and attributes. The above are just some of the methods that I personally think new beginners must master when learning jquery. For your reference only. Do you have any suggestions.