Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialJeremiah Lugtu
9,910 Pointswhat did he mean by "it just stops jQuery selecting it again"?
at 6:20-6:32
he said we could use $(this), or $overlay since we saved it in a variable."It just stops jQuery selecting it again"
what does it mean?
What's the difference in this example? and the difference with the previous section of using $(this) instead of $button in the spoiler reveal section?
1 Answer
Hani Shawa
10,008 PointsThis link provides a decent explanation of why we create and use a variable like $overlay rather than $(this), and I'm including the most relevant passage below.
Selector Caching in jQuery
"The worst offender is the way developers handle jQuery selectors. Most commonly, I see things like $( this ) repeated several times within a callback function. Or $( '#selector' ) used throughout a script to both bind and unbind multiple events.
What new developers donβt realize is that every call to $( something } asks jQuery to rescan for the matching element, wrap it in a jQuery object, and create a new instance of something you already have in memory. If your code crashes due to memory cascades, overuse of redundant selectors might be related"
Everytime we use a selector such $("p") or use $(this), jQuery is having to do more work to traverse the DOM and find what we're referring to. In particular if we're going to keep selecting the same thing over and over again throughout our code, this would hinder performance and be inefficient.
So, by caching our selectors as we've done with $overlay, we've stored this as a jQuery object that can be easily and quickly referenced to, is great for reusabililty, and means that jQuery does not have to perform more work of scanning through the DOM and finding our selector.
So when Andrew mentions "it stops jQuery selecting again", he's basically saying that jQuery is not having to perform the extra work in scanning through the DOM and finding the selector we refer to.
Another decent link below that provides a better answer to the benefits of selector caching:
Why Cache jQuery Objects
Edward Ulick
2,756 PointsThank you so much, Hani! I was wondering myself, and that was an excellent and thorough answer.
Jesse C.
2,519 PointsHani, thank you for your thoughtful and detailed explanation!
liam johnshon
Courses Plus Student 904 Pointsliam johnshon
Courses Plus Student 904 Pointssuppose you are making an click event that element in which you assign click event will be considered as a $(this) inside a function