* By Andy Croxall
The explosion of JavaScript libraries and frameworks such as jQuery onto the front-end development scene has opened up the power of JavaScript to a far wider audience than ever before. It was born of the need — expressed by a crescendo of screaming by front-end developers who were fast running out of hair to pull out — to improve JavaScript’s somewhat primitive API, to make up for the lack of unified implementation across browsers and to make it more compact in its syntax.
All of which means that, unless you have some odd grudge against jQuery, those days are gone — you can actually get stuff done now. A script to find all links of a certain CSS class in a document and bind an event to them now requires one line of code, not 10. To power this, jQuery brings to the party its own API, featuring a host of functions, methods and syntactical peculiarities. Some are confused or appear similar to each other but actually differ in some way. This article clears up some of these confusions.
[Offtopic: by the way, have you already visited Smashing Magazine’s Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]
1. .parent() vs. .parents() vs. .closest()
All three of these methods are concerned with navigating upwards through the DOM, above the element(s) returned by the selector, and matching certain parents or, beyond them, ancestors. But they differ from each other in ways that make them each uniquely useful.
parent(selector)
This simply matches the one immediate parent of the element(s). It can take a selector, which can be useful for matching the parent only in certain situations. For example:
view source
print?
1 $(‘span#mySpan’).parent().css(‘background’, ‘#f90’);
2 $(‘p’).parent(‘div.large’).css(‘background’, ‘#f90’);
The first line gives the parent of #mySpan. The second does the same for parents of all
tags, provided that the parent is a div and has the class large.
Tip: the ability to limit the reach of methods like the one in the second line is a common feature of jQuery. The majority of DOM manipulation methods allow you to specify a selector in this way, so it’s not unique to parent().
The explosion of JavaScript libraries and frameworks such as jQuery onto the front-end development scene has opened up the power of JavaScript to a far wider audience than ever before. It was born of the need — expressed by a crescendo of screaming by front-end developers who were fast running out of hair to pull out — to improve JavaScript’s somewhat primitive API, to make up for the lack of unified implementation across browsers and to make it more compact in its syntax.
All of which means that, unless you have some odd grudge against jQuery, those days are gone — you can actually get stuff done now. A script to find all links of a certain CSS class in a document and bind an event to them now requires one line of code, not 10. To power this, jQuery brings to the party its own API, featuring a host of functions, methods and syntactical peculiarities. Some are confused or appear similar to each other but actually differ in some way. This article clears up some of these confusions.
[Offtopic: by the way, have you already visited Smashing Magazine’s Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]
1. .parent() vs. .parents() vs. .closest()
All three of these methods are concerned with navigating upwards through the DOM, above the element(s) returned by the selector, and matching certain parents or, beyond them, ancestors. But they differ from each other in ways that make them each uniquely useful.
parent(selector)
This simply matches the one immediate parent of the element(s). It can take a selector, which can be useful for matching the parent only in certain situations. For example:
1 |
$( 'span#mySpan' ).parent().css( 'background' , '#f90' ); |
2 |
$( 'p' ).parent( 'div.large' ).css( 'background' , '#f90' ); |
The first line gives the parent of #mySpan
. The second does the same for parents of all <p>
tags, provided that the parent is a div
and has the class large
.
Tip: the ability to limit the reach of methods like the one in the second line is a common feature of jQuery. The majority of DOM manipulation methods allow you to specify a selector in this way, so it’s not unique to parent()
. Leer más “Commonly Confused Bits Of jQuery”
-34.552356
-58.443076
Me gusta esto:
Me gusta Cargando...