Professional Documents
Culture Documents
htm
In today’s post I’m going to show you guys 50 jQuery Snippets that can help you with your JavaScript
projects. Some of these snippets are going to be things that have just been supported with jQuery 1.4.2
whilst others are really useful functions or methods that can help you do things better or quicker. I’ve tried
to bare in mind optimal performance with these snippets so if there’s anything you see that you think
could be done better, please feel free to post your version in the comments!. I hope you find the post
useful.
01. //a filter allows you to reduce the set of matched elements
02. //to those that match a given selector. In this case the query
03. //removes anything which doesn't (:not) have (:has) a child with
04. //class "selected" (.selected)
05.
06. .filter(":not(:has(.selected))")
01. //jQuery 1.4.* includes support for the has method. This method will find
02. //if a an element contains a certain other element class or whatever it is
03. //you are looking for and do anything you want to them.
04.
05. $("input").has(".email").addClass("email_icon");
01. //Look for the media-type you wish to switch then set the href to your new style she
02. $('link[media='screen']').attr('href', 'Alternative.css');
01. //Where possible, pre-fix your class names with a tag name
02. //so that jQuery doesn't have to spend more time searching
03. //for the element you're after. Also remember that anything
04. //you can do to be more specific about where the element is
05. //on your page will cut down on execution/search times
06.
07. var in_stock = $('#shopping_cart_items input.is_in_stock');
01. $('#thatdiv').replaceWith('fnuh');
01. $('#lal').append('sometext');
01. var e = $("", { href: "#", class: "a-class another-class", title: "..." });
16. How to set an event handler for any element that matches a
selector:
view plain copy to clipboard print ?
01. $('#someElement').find('option:selected');
01. $("p.value:contains('thetextvalue')").hide();
25. How to Detect Both Right & Left Mouse-clicks with jQuery:
view plain copy to clipboard print ?
01. //This snippet will show you how to keep a default value
02. //in a text input field for when a user hasn't entered in
03. //a value to replace it
04.
05. swap_val = [];
06. $(".swap").each(function(i){
07. swap_val[i] = $(this).val();
08. $(this).focusin(function(){
09. if ($(this).val() == swap_val[i]) {
10. $(this).val("");
11. }
12. }).focusout(function(){
13. if ($.trim($(this).val()) == "") {
14. $(this).val(swap_val[i]);
15. }
16. });
17. });
34. How to put the values of all the elements of a particular name
into an array:
view plain copy to clipboard print ?
01. (function($) {
02. $.fn.stripHtml = function() {
03. var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
04. this.each(function() {
05. $(this).html(
06. $(this).html().replace(regexp,”")
07. );
08. });
09. return $(this);
10. }
11. })(jQuery);
12.
13. //usage:
14. $('p').stripHtml();
01. $('#searchBox').closest('div');
42. How to filter down a list of elements based on some input text:
view plain copy to clipboard print ?
01. //If the value of the element matches that of the entered text
02. //it will be returned
03. $('.someClass').filter(function() {
04. return $(this).attr('value') == $('input#someId').val() ;
05. })
01. $(document).mousemove(function(e){
02. $(document).ready(function() {
03. $().mousemove(function(e){
04. $(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
05. });
06. });
01. <ul>
02. <li><a href="#">Link 1</a></li>
03.
04.
05. <li><a href="#">Link 2</a></li>
06.
07.
08. <li><a href="#">Link 3</a></li>
09.
10.
11. <li><a href="#">Link 4</a></li>
12.
13. </ul>