cycling jQuery_Succinctly | Page 24

Inside the anonymous function that is passed to the mouseenter() method, we use the keyword this to refer to the current element. Each time the mouse touches the "jQuery.com" text, the browser will alert which element has been moused-over by identifying its id attribute value. In the previous example, it is also possible to take the this reference and pass it to the jQuery function so that the DOM element is wrapped with jQuery functionality. So instead of this: // Access the ID attribute of the DOM element. alert(this.id); We could have done this: // Wrap the DOM element with a jQuery object, // and then use attr() to access ID value. alert($(this).attr('id')); This is possible because the jQuery function not only takes selector expressions, it will also take references to DOM elements. In the code, this is a reference to a DOM element. The reason you might want to wrap jQuery functionality around a DOM element should be obvious. Doing so gives you the ability to use jQuery chaining, should you have need for it. Iterating over a set of elements contained in the jQuery wrapper set is somewhat similar to the concept we just discussed. By using the jQuery each() method, we can iterate over each DOM element contained in a wrapper set. This allows access to each DOM element individually, via the usage of the this keyword. Building upon the markup in the previous example, we can select all elements in the page and use the each() method to iterate over each element in the wrapper set, accessing its id attribute. Here is an example. 24