The main purpose of these selectors is to select elements on a web page that meet certain criteria. The criteria can be anything like their id, classname, attributes or a combination of any or all of these. Most of the selectors in jQuery are based on existing CSS selectors but the library also has its […]
Category: jQuery
Caching Returned Elements
When you have to use the same selector many times, it is much better to cache the returned element(s) in a variable. This will avoid multiple scans and improve performance. As an example: can be written as: This way the browser only has to scan the document once rather than three times. Even though the […]
A Comprehensive Look at jQuery Selectors
A Comprehensive Look at jQuery Selectors By Baljeet Rathi August 02, 2016 This article was peer reviewed by Matt Smith and Tim Severien. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! More from this author A History of CSS Image Replacement Five Ways to Hide Elements in […]
Find all the elements with an id
Find all the elements with an id The answer to the question is $(“[id$=’txtTitle’]”), as Mark Hurd answered, but for those who, like me, want to find all the elements with an id which starts with a given string (for example txtTitle), try this (doc) : $(“[id^=’txtTitle’]”) If you want to select elements which id […]
jQuery Tips You Should Know
Back to Top Button By using the animate and scrollTop methods in jQuery you don’t need a plugin to create a simple scroll-to-top animation: // Back to top $(‘a.top’).click(function (e) { e.preventDefault(); $(document.body).animate({scrollTop: 0}, 800); }); <!– Create an anchor tag –> <a class=”top” href=”#”>Back to top</a> Changing the scrollTop value changes where you wants […]
Hosted Libraries
jQuery 1 snippet: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script> 2 snippet: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script> site: jquery.com versions: 2.1.4, 2.1.3, 2.1.1, 2.1.0, 2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.11.3, 1.11.2, 1.11.1, 1.11.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3 note: […]
Result of browser window resize
Simply we handle the resize event of the window. We can thus adjust the size or appearance of the elements depending on the window size. $(window).resize(myHandler); function myHandler() { alert(‘Do something …’); }
Number of matching elements found
This simple trick gives us information of how many elements of the document matches the selector (e.g. find by the CSS class) alert($(“.our-class-css”).size());
Checking if a checkbox is checked
It’s simple – can be done in such a way: if ($(“#myCheckBoxID”).is(‘:checked’)) { … }; or by checking an attribute: if ($(‘#myCheckBoxID’).attr(‘checked’)) { … };
Run JavaScript Only After Entire Page Has Loaded
This is when the whole page has finished loading. For example, this will wait for images to be finished loading, so that you can measure their widths and heights accurately. $(window).bind(“load”, function() { // code here });