50 more useful jquery code Snippets

1. How to create a nested filter:

Filters that allow you to reduce the matching elements in the collection,
Only those parts that match the given selector are left. In this case,
The query deleted any (: not) there (: has)
Contains a child node of class "Selected" (. selected).
. Filter (": Not (: Have (. selected))")
2. How to reuse element search

var AllItems = $ ("Div.item");
var keeplist = $ ("Div#container1 Div.item");
Now you can continue to work with these jquery objects. For example
Crop the keep list based on a check box, the name of the check box
Meet
< DIV >class names:
$ (Formtolookat + "input:checked"). each (function () {
Keeplist = Keeplist.filter ("." + $ (This). attr ("name"));
});
</div>
3. Use the has () to check if an element contains a class or element:

The JQuery 1.4.* contains support for this has method. This method finds
Whether an element contains another class of elements or any other
What you are looking for and what you want to do on top of it.
$ ("input"). has (". Email"). AddClass ("Email_icon");
4. How to use jquery to switch style sheets

Find out what type of media you wish to switch to (Media-type), and then set the href to the new style sheet.
$ (' link[media= ' screen '] '). attr (' href ', ' alternative.css ');
5. How to limit the selection (for optimization purposes):

Use the tag name as a prefix to the class name whenever possible.
So jquery doesn't have to spend more time searching for
The element you want. Another thing to keep in mind is that
The more specific the manipulation of the elements on your page,
The more time you can reduce execution and search.
var In_stock = $ (' #shopping_cart_items input.is_in_stock '); <ul id= "Shopping_cart_items" >
<li><input type= "Radio" value= "Item-x" name= "item" class= "Is_in_stock"/> Item x</li>
<li><input type= "Radio" value= "item-y" name= "item" class= "3-5_days"/> Item y</li>
<li><input type= "Radio" value= "Item-z" name= "item" class= "Unknown"/> Item z</li>
</ul>
6. How to use Toggleclass correctly:

The Toggle (toggle) class allows you to base a class
Whether it exists to add or remove the class.
In this case some developers use:
A.hasclass (' BlueButton ')? A.removeclass (' BlueButton '): A.addclass (' BlueButton ');
Toggleclass allows you to use the following statement to easily do this
A.toggleclass (' BlueButton ');
7. How to set the features specific to IE:

if ($.browser.msie) {
Internet Explorer is a sadist.
}
8. How to use jquery instead of an element:

$ (' #thatdiv '). ReplaceWith (' Fnuh ');
9. How to verify that an element is empty:

if ($ (' #keks '). HTML ()) {
Nothing was found;
}
10. How to find the index number of an element from an unordered collection

$ ("ul > Li"). Click (function () {
var index = $ (this). Prevall (). length;
});
11. How to bind a function to an event:

$ (' #foo '). Bind (' click ', function () {
Alert (' User clicked on ' foo. ');
});
12. How to append or add HTML to an element:

$ (' #lal '). Append (' Sometext ');
13. How to use object literals (literal) to define attributes when creating elements

var e = $ ("", {href: "#", Class: "A-class Another-class", Title: "..."});
14. How to use multiple properties to filter

When using many similar input elements with different types,
This precision-based approach is useful
var elements = $ (' #someid Input[type=sometype][value=somevalue] '). get ();
15. How to preload an image using jquery:

Jquery.preloadimages = function () {
for (var i = 0; i < arguments.length; i++) {
$ ("}
};
Usage
$.preloadimages (' image1.gif ', '/path/to/image2.png ', ' some/image3.jpg ');
16. How to set an event handler for any element that matches the selector:

$ (' Button.someclass '). Live (' click ', someFunction);
Note that in jquery 1.4.2, the delegate and Undelegate options
Be introduced instead of live because they provide better context support
For example, in the case of table, you used to
. Live ()
$ ("table"). each (function () {
$ ("TD", this). Live ("hover", function () {
$ (this). Toggleclass ("hover");
});
});
Now with
$ ("table"). Delegate ("TD", "hover", function () {
$ (this). Toggleclass ("hover");
});
17. How to find an option element that has been selected:

$ (' #someElement '). Find (' option:selected ');
18. How to hide an element that contains a value text:

$ ("P.value:contains (' Thetextvalue ')"). Hide ();
19. If you scroll to an area of the page automatically

JQuery.fn.autoscroll = function (selector) {
$ (' html,body '). Animate (
{scrolltop: $ (selector). Offset (). Top},
500
};
}
Then scroll like this to the class/area you want to go to.
$ ('. Area_name '). AutoScroll ();
20. How to detect various browsers:

Detects Safari (if ($.browser.safari)),
Detect IE6 and later versions (if ($.browser.msie && $.browser.version > 6)),
Detect IE6 and Previous versions (if ($.browser.msie && $.browser.version <= 6)),
Detects Firefox 2 and later (if ($.browser.mozilla && $.browser.version >= ' 1.8 '))
21. How to replace words in a string

var el = $ (' #id ');
El.html (el.html (). Replace (/word/ig, "));
22. How to disable the right-click context menu:

$ (document). Bind (' ContextMenu ', function (e) {
return false;
});
23. How to define a custom selector

$.expr[': '].mycustomselector = function (element, index, meta, stack) {
Element-a DOM element
Current cyclic index in the index– stack
meta– Meta data about selectors
stack– the stack of all the elements to loop
Returns true if the current element is included
Returns False if it does not contain the current element;
How to use custom selectors:
$ ('. Someclasses:test '). dosomething ();
24. How to check if an element exists

if ($ (' #someDiv '). Length) {
Hail!!! It exists ...
}
25. How to use jquery to detect both right and left mouse clicks:

$ ("#someelement"). Live (' click ', Function (e) {
if ((!$.browser.msie && E.button = = 0) | | ($.browser.msie && E.button = = 1)) {
Alert ("Left Mouse button Clicked");
} else if (E.button = = 2) {
Alert ("Right Mouse button Clicked");
}
});
26. How to display or delete the default values in the input field

This code shows that when a user does not enter a value,
How to preserve the text type in the input field
A default value
Wap_val = [];
$ (". Swap"). each (function (i) {
Wap_val[i] = $ (this). Val ();
$ (this). Focusin (function () {
if ($ (this). val () = = Swap_val[i]) {
$ (this). Val ("");
}
}). Focusout (function () {
if ($.trim (this). val ()) = = "") {
$ (this). Val (Swap_val[i]);
}
});
});
27. How to automatically hide or close elements after a period of time (1.4 versions supported):

This is the way we use settimeout in 1.3.2.
SetTimeout (function () {
$ ('. Mydiv '). Hide (' blind ', {}, 500)
}, 5000);
And this is the way that you can use the delay () feature in 1.4 (this is much like hibernation)
$ (". Mydiv"). Delay ("."). Hide (' blind ', {}, 500);
28. How to dynamically add elements that have been created to the DOM:

var newdiv = $ (');
NEWDIV.ATTR (' id ', ' mynewdiv '). AppendTo (' body ');
29. How to limit the number of characters in the "Text-area" field:

JQuery.fn.maxLength = function (max) {
This.each (function () {
var type = This.tagName.toLowerCase ();
var inputtype = This.type? This.type.toLowerCase (): null;
if (type = = "Input" && inputtype = = "Text" | | inputtype = = "Password") {
Apply the standard maxLength
This.maxlength = max;
}
else if (type = = "textarea") {
this.onkeypress = function (e) {
var ob = e | | Event
var keycode = Ob.keycode;
var hasselection = document.selection? Document.selection.createRange (). text.length > 0:this.selectionstart! = this.selectionend;
Return! (This.value.length >= Max && (KeyCode > | | keycode = = | | keycode = 0 | | keycode = +) &&!ob . Ctrlkey &&!ob.altkey &&!hasselection);
};
This.onkeyup = function () {
if (This.value.length > Max) {
This.value = this.value.substring (0,max);
}
};
}
});
};
Usage
$ (' #mytextarea '). MaxLength (500);
30. How to create a basic test for a function

Put the test separately in the module
Module ("Module B");
Test ("Some other test", function () {
Indicates how many assertions inside the test are expected to run
Expect (2);
A comparison assertion, equivalent to JUnit's assertequals
Equals (True, false, "failing test");
Equals (True, true, "passing Test");
});
31. How to clone an element in jquery:

var cloned = $ (' #somediv '). Clone ();
32. How to test whether an element is visible in jquery

if (Element). Is (': visible ') = = ' true ') {
The element is visible
}
33. How to place an element in the center of the screen:

JQuery.fn.center = function () {
This.css (' position ', ' absolute ');
This.css (' Top ', ($ (window). Height ()-this.height ())/+$ (window). scrolltop () + ' px ');
This.css (' Left ', ($ (window). Width ()-this.width ())/2+$ (window). ScrollLeft () + ' px ');
return this;
}
This will use the above function:
$ (Element). Center ();
34. How to put the values of all elements with a particular name in an array:

var arrinputvalues = new Array ();
$ ("Input[name= ' table[]"). each (function () {
Arrinputvalues.push ($ (this). Val ());
});
35. How to remove HTML from an element

(function ($) {
$.fn.striphtml = function () {
var regexp =/< ("[^"]* "| ') [^ ']* ' | [^ ' ";]) *>/gi;
This.each (function () {
$ (this). HTML ($ (this). html (). Replace (RegExp, ""));
});
return $ (this);
}
}) (JQuery);
Usage:
$ (' P '). striphtml ();
36. How to use closest to get the parent element:

$ (' #searchBox '). Closest (' div ');
37. How to use Firebug and Firefox to record the jquery event log:

Allow chained logging
Usage:
$ (' #someDiv '). Hide (). log (' div hidden '). addclass (' SomeClass ');
JQuery.log = JQuery.fn.log = function (msg) {
if (console) {
Console.log ("%s:%o", MSG, this);
}
return this;
};
38. How to force a link to open in a pop-up window:

JQuery (' A.popup '). Live (' click ', function () {
Newwindow=window.open ($ (this). attr (' href '), ', ' height=200,width=150 ');
if (Window.focus) {
Newwindow.focus ();
}
return false;
});
39. How to force a link to open in a new tab:

JQuery (' A.newtab '). Live (' click ', function () {
Newwindow=window.open ($ (this). href);
JQuery (this). target = "_blank";
return false;
});
40. How to use. Siblings () in jquery to select sibling elements

Don't do that
$ (' #nav li '). Click (function () {
$ (' #nav Li '). Removeclass (' active ');
$ (this). addclass (' active ');
});
An alternative approach is
$ (' #nav li '). Click (function () {
$ (this). addclass (' active '). Siblings (). Removeclass (' active ');
});
41. How to toggle all the check boxes on the page:

var tog = false;
Or True if they are selected at load time
$ (' a '). Click (function () {
$ ("Input[type=checkbox]"). attr ("Checked",!tog);
Tog =!tog;
});
42. How to filter a list of elements based on some input text:

If the value of the element matches the input text
The element will be returned
$ ('. SomeClass '). Filter (function () {
return $ (this). attr (' value ') = = $ (' Input#someid '). Val ();
})
43. How to get the mouse pad cursor position x and Y

$ (document). Ready (function () {
$ (document). MouseMove (function (e) {
$ (' #XY '). HTML ("X Axis:" + E.pagex + "| Y Axis "+ e.pagey);
});
});
44. How to turn the entire list element (Element,li) into clickable

$ ("ul Li"). Click (function () {
window.location=$ (This). Find ("a"). attr ("href");
return false;
});
<ul>
<li><a href= "#" >link 1</a></li>
<li><a href= "#" >link 2</a></li>
<li><a href= "#" >link 3</a></li>
<li><a href= "#" >link 4</a></li>
</ul>
45. How to use jquery to parse XML (the basic example):

function Parsexml (XML) {
Find each tutorial and print out author
$ (XML). Find ("Tutorial"). each (function () {
$ ("#output"). Append ($ (this). attr ("author") + "");
});
}
46. How to check if the image has been fully loaded in

$ (' #theImage '). attr (' src ', ' image.jpg '). Load (function () {
Alert (' This Image has Been Loaded ');
});
47. How to use jquery to specify namespaces for events:

Events can bind namespaces like this
$ (' input '). Bind (' Blur.validation ', function (e) {
// ...
});
The data method also accepts namespaces
$ (' input '). Data (' Validation.isvalid ', true);
48. How to check if cookies are enabled

var dt = new Date ();
Dt.setseconds (Dt.getseconds () + 60);
Document.cookie = "cookietest=1; Expires= "+ dt.togmtstring ();
var cookiesenabled = document.cookie.indexOf ("cookietest=")! =-1;
if (!cookiesenabled) {
Cookies are not enabled
}
49. How to expire cookies:

var date = new Date ();
Date.settime (Date.gettime () + (x * 60 * 1000));
$.cookie (' Example ', ' foo ', {expires:date});
50. How to use a clickable link to replace any URL in the page

$.fn.replaceurl = function () {
var regexp =/((FTP|HTTP|HTTPS): \/\/(\w+:{0,1}\w*@)? ( \s+) (: [0-9]+)? (\/|\/([\w#!:.? +=&%@!\-\/])?) /gi;
This.each (function () {
$ (this). HTML (
$ (this). html (). Replace (RegExp, ' <a href= ' >$1</a> ')
);
});
return $ (this);
}
Usage
$ (' P '). Replaceurl ();

50 more useful jquery code Snippets