Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about the confusing knowledge points in jQuery, which may not be well understood by many people. In order to make you understand better, the editor has summarized the following contents for you. I hope you can gain something according to this article.

First, what is jquery?

JQuery is another excellent Java crushing pt framework after prototype. Its purpose is-WRITE LESS,DO MORE, write less code, do more things. To put it bluntly, jquery is javascript. It's just that it encapsulates a more powerful framework according to people's habitual thinking. There is also a point that jquery can separate html from javascript as much as possible, which is an important reason why I am willing to use jquery. Jqueryt is very flexible, too flexible, it can be said that it is one of his strengths and weaknesses, to achieve an effect, ten people may use ten different ways to achieve this process, the result is the same, the process is different, is this good or bad? Let's go our separate ways.

Second, the confusion of learning and using jquery

1) $.fn.extend ({}) and $.extend ({})

$.fn.extend extends the set of jQuery elements to provide new methods (usually used to make plug-ins). To explain, the jquery method generated through $.fn.extend is not included in the jquery's own object when calling jquery, which is inherited from the situation of the extension. You can think of it as extend in php. For instance

Extend ({checkname: function () {if ($.trim ($(this). Val ())! = ") {return true;} else {return false;})

When called, $("input.name") .checkname ()

Extend extends the jQuery object itself. To explain, this means that the jquery method generated by $. Extend is included in the jquery's own object when jquery is called. To put it bluntly, add methods to the jquery object, such as

Extend ({checkname: function (name) {if ($.trim (names = "") {return true;} else {return false;})

When called, $.checkname ($("input.name") .val ())

2) $() .each ({}) and $.each ({})

$() .each ({}) is used to loop arrays and objects

Glen Tane Ralph

Here is the loop object

$("ul li") .each (function (k key= v) {alert ("key=" + k + ", value=" + $(v) .each ();});)

The following is a circular array

Array = [0Jing 1jue 2]; $(array) .each (function (krecov) {alert ("key=" + k + ", value=" + v);})

$.each ({}) can be used to loop through all arrays and objects. Personally, there is no difference between them, except that they are written differently.

The following is a circular array

Array = [0Jing 1jue 2]; $.each (array,function (KJE v) {alert ("key=" + k + ", value=" + v);})

Here is the loop object

$.each ($("ul li"), function (v) {alert ("key=" + k + ", value=" + $(v). Html ());})

Note: function (k) where k is the subscript, function (kpene v) this is k or subscript, v is not necessarily, it may be a value in the array, it may also be an object, if it is an object, if the parameter is not written out, the default is this

3), $(": contains ()") and $(": has ()")

$(": contains ()") matches the element that contains the given text, and the contains includes the space inside the text.

$("li:contains ('Ra')"). Css (' color','red')

$(": has ()") matches the element that contains the element matched by the selector, and the has contains a tag.

$("li:has (div)"). Css ('color','red')

4), $(": first") and $(": first-child")

$(": first") matches the * elements found

$(": first-child") matches * * child elements,': first' matches only one element, and this selector matches one child element for each parent element

List item 1 list item 2 list item 2 Mura list item 2Mub list item 3 list item 4 $("ul li:first"). Css ('color','red'); / / only matches * times, $("ul li:first-child") .css (' color','red') / / match each object that meets the requirements 5), $() .html () and $() .text () $() .html () get the html content of * matching elements. This function cannot be used for XML documents. But it can be used for XHTML documents. The result of $() .text () is a combination of text content contained in all matching elements. This method works for both HTML and XML documents.

Hello

$('span'). Html (); / / the result is

Hello

$('span'). Texxt (); / / the result is Hello 6), $(). Empty () and $(). Remove () $(). Empty () empties the inner space in the matching element, but does not empty itself, $() .remove (), empties the inner space in the matching element, and itself

Hello

The result of $('p'). Empty () / / is

The result of $('p'). Remove () / / is that after reading the above content, do you have any further understanding of the confusing knowledge points in jQuery? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.