Good programmers share jQuery web front-end route learning study skills, jQuery is an essential element in the web front end of the study, many small partners have encountered problems when learning this stage, today we have to talk about jQuery, let us take a look at it!
1, quoted on page elements
By jquery's $ reference elements include a method by id, class, element names and hierarchical relationships of elements and dom or xpath conditions, the object and returns to jquery object (a collection of objects), you can not invoke methods defined directly dom.
2, jQuery object into object dom
Only jquery object to use jquery defined. Note jquery dom objects and objects are different, when you call the method of operation is to pay attention to jquery dom object or objects. Common dom objects may generally be converted by $ jquery object.
Such as: $ (document.getElementById ( "msg")), compared with jquery object, you can use jquery methods.
Because jquery object is a collection itself. So if dom jquery object to be converted to the object must be removed at any of those generally be removed by an index.
Such as: $ ( "# msg") [0], $ ( "div") eq (1) [0], $ ( "div") get [1], $ ( "td") [5] these. objects are dom, dom methods may be used in, but can not use the Jquery methods.
The following versions are correct:
$("#msg").html;
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
3, how to obtain a particular set of jQuery
For obtaining a set of elements, wherein an item is acquired (specified by an index) may be used eq or get (n) or index number acquisition method, to be noted that, eq jquery object is returned, and get (n) and returned index dom element is an object. A method for using jquery jquery object only, and are only allowed dom dom methods, such as to obtain a third
Content element.
The following two methods:
. $ ( "Div") eq (2) .html; // call the jquery object method
. $ ( "Div") get (2) .innerHTML; // call the method attribute dom
4, to achieve the same function set and get
Jquery in many ways are true, mainly includes the following:
· $ ( "# Msg") html;. // Returns the id html content of the element node msg.
· $("#msg").html("new content");
* // The "new content" is written as a string html element node id msg content, the page displays bold new content
· $ ( "# Msg") text;. // returns the id of the text content of the element node msg.
· $("#msg").text("newcontent");
* // The "new content" is written as plain text string msg id element node is the content, the page displays new content
· $ ( "# Msg") height;. // returns the id of the element msg height
· $ ( "# Msg") height ( "300");. // The id of the element to the height msg 300
· $ ( "# Msg") width;. // returns the id of the element msg width
· $ ( "# Msg") width ( "300");. // set the id to the width of the element msg 300
· $ ( "Input") val ( ");. // Returns the value of form input box value
· $ ( "Input") val ( "test");. // The value value form input box to the test
· $ ( "# Msg") click;. // trigger msg id of the element click event
· $ ( "# Msg") click (fn);. // add the function to the click event for the element msg id
· Similarly blur, focus, select, submit events can be had two ways of calling methods
5, a set of processing functions
· $.extend({
· min:function(a, b){return a < b?a:b; },
· max:function(a, b){return a > b?a:b; }
*}); // jquery extension of two methods min, max
· Use extension (through. "$ Method name" call):
· alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
6. The method of support ligatures
The so-called ligatures, which can be a variety of different methods of continuous call to a jquery object.
E.g:
$("p").click(function{alert($(this).html)})
.mouseover(function{alert('mouseover event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i ]});
7, the operating elements of style
It includes the following ways:
· $ ( "# Msg") css ( "background");. // Returns the background color of the element
· $ ( "# Msg"). Css ( "background", "# ccc") // set element gray background
. · $ ( "# Msg") height (300); $ ( "# msg") width ( "200");. // set the width and height
· $ ( "# Msg") css. ({Color: "red", background: "blue"}); // set the style in the form of name-value pairs
· $ ( "# Msg") addClass ( "select");. // increase the element name for the class select the
· $ ( "# Msg") removeClass ( "select");. // delete the element name for the class select the
· $ ( "# Msg") toggleClass ( "select");. // If there is (does not exist) delete (add) the name of the class select
8, improved event handling
Jquery has provided us with a variety of event-handling method, we do not need to write events directly on the html element, and you can add events directly targeted by jquery acquired.
Such as:
$ ( "# Msg"). Click (function {alert ( "good")}) // add a click event for the element
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i ]})
// p for the three different elements of the click event are set different treatment
jQuery in several custom events:
(1) hover (fn1, fn2): mimic a hover event (the mouse is moved to and out of an object above the object) method. When the mouse moves to a matching element of the above, it will trigger the first function specified. When the mouse out of this element, it will trigger the second specified function.
// When the mouse is placed on the table when a row is set to the class over, is set to leave out.
$("tr").hover(function{
$(this).addClass("over");
},
function{
$(this).addClass("out");
});
(2) ready (fn): bind a function to be executed when the DOM is ready to query and manipulate.
$(document).ready(function{alert("Load Success")})
// page is loaded prompt "Load Success", the equivalent of the onload event. And $ (fn) equivalent
(3) toggle (evenFn, oddFn): each time you switch the function to be called when clicked. If you click on the elements of a match, then trigger the first function specified when you click on the same element again, triggering the second specified function. Subsequent clicks continue to take turns calling these two functions.
// add and delete each rotation of the selected class called when clicked.
$("p").toggle(function{
$(this).addClass("selected");
},function{
$(this).removeClass("selected");
});
(4) trigger (eventtype): Trigger a type of event on every matched element.
E.g:
. $ ( "P") trigger ( "click"); // trigger the click event of all elements p
(5) bind (eventtype, fn), unbind (eventtype): Bind and unbind events
From each element matching (add) event deletion binding.
E.g:
$ ( "P") bind ( "click", function {alert ($ (this) .text);});. // Add click events for each element p
$ ( "P") unbind;. // delete all events on all elements p
$ ( "P"). Unbind ( "click") // Delete the click event on all p elements
9, a few practical effects capabilities
And wherein the toggle state slidetoggle method provides switching function.
The method includes the toggle hide and show methods.
and a method comprising the slideDown slideToggle slideUp methods.
10, several useful jQuery method
$ .Browser browser type: Detect browser type. Effective parameters: safari, opera, msie, mozilla. Such as detecting whether ie:. $ Browser.isie, return true ie the browser.
$ .Each (obj, fn): generic iterator function. Iteration may be used to approximate the object and the array (instead of circular).
Such as
$.each([0,1,2], function(i, n){ alert( "Item #" + i + ": " + n );});
Equivalent to:
vartempArr=[0,1,2];
for(vari=0;i
alert("Item#"+i+": "+tempArr[ i ]);
}
Json data may be processed, such as
$.each({ name: "John", lang: "JS" }, function(i, n){ alert("Name: " + i + ", Value: " + n ); });
The results are:
Name:name,Value:John
Name:lang,Value:JS
$ .Extend (target, prop1, propN): with one or more other objects to extend an object, returns the object is expanded. This is the inheritance jquery to achieve.
Such as:
$.extend(settings,options);
// Merge settings and options, and combine the results to return settings, the equivalent of setting options inheritance and succession save the result in the setting.
var settings =$.extend({}, defaults, options);
// Merge defaults and options, and merge the results back to cover the default setting without content.
You can have multiple parameters (number of merger and return)
$ .Map (array, fn): Array mapping. The items in an array (post-processing conversion) to another to save the new array, and returns a new array generated.
Such as:
vartempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr says: [4,5,6]
vartempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr says: [2,3]
$ .Merge (arr1, arr2): merge two arrays and delete duplicate items.
Such as:. $ Merge ([0,1,2], [2,3,4]) // Returns [0,1,2,3,4]
$ .Trim (str): Delete blank characters at both ends of the string.
如：$.trim(" hello, how are you? "); //返回"hello,how are you? "
11, troubleshoot custom methods or other libraries with jQuery conflict
Many times we ourselves define $ (id) method to get an element, or some other js libraries such as prototype also defines the $ method, if both of these together will cause the contents of variables method defined conflict, Jquery for this special provides a method for solving this problem.
Using jquery in jQuery.noConflict; the variable method to give control of the $ first $ method before it the library or a custom implementation. After applying Jquery time as long as all of the $ jQuery can be replaced, such as the original reference object method $ ( "# msg") replaced jQuery ( "# msg").