30 jQuery code development skills and jquery development skills you should know

30 jQuery code development skills and jquery development skills you should know

1. Create a nested Filter

. Filter (": not (: has (. selected)") // remove all elements that do not contain the. selected class.

2. reuse your element Query

Var allItems = $ ("div. item "); var keepList = $ (" div # container1 div. item "); <div> class names: $ (formToLookAt +" input: checked "). each (function () {keepListkeepList = keepList. filter (". "+ $ (this ). attr ("name") ;}); </div>

3. Use has () to determine whether an element contains a specific class or element.

// JQuery 1. 4. * supported des support for the has method. this method will find // if a an element contains a certain other element class or whatever it is // you are looking for and do anything you want to them. $ ("input "). has (". email "). addClass ("email_icon ");

4. Use jQuery to switch the style

// Look for the media-type you wish to switch then set the href to your new style sheet $ ('link [media = 'screen'] '). attr ('href ', 'Alternative.css ');

5. Restrict the selected region

// Where possible, pre-fix your class names with a tag name // so that jQuery doesn't have to spend more time searching // for the element you're after. also remember that anything // you can do to be more specific about where the element is // on your page will cut down on execution/search times var in_stock = $ ('# shopping_cart_items input. is_in_stock '); <ul id = "shopping_cart_items"> <li> <input value = "Item-X" name = "item" type = "radio"> Item X </li> <li> <input value = "Item-Y" name = "item" type = "radio"> Item Y </li> <input value = "Item-Z" name = "item" type = "radio"> Item Z </li> </ul>

6. How to correctly use ToggleClass

// Toggle class allows you to add or remove a class // from an element depending on the presence of that // class. where some developers wocould use:. hasClass ('bluebutton ')? A. removeClass ('bluebutton'): a. addClass ('bluebutton'); // toggleClass allows you to easily do this using a. toggleClass ('bluebutton ');

7. Set the function specified by IE

If ($. browser. msie) {// Internet Explorer is a sadist .}

8. Use jQuery to replace an element.

$ ('# Thatdiv'). replaceWith ('fnuh ');

9. Verify whether an element is empty

If ({('{keks'}.html () {// Nothing found ;}

10. Search for the index of an element in the unordered set.

$ ("Ul> li"). click (function () {var index = $ (this). prevAll (). length ;});

11. Bind a function to an event

$ ('# Foo'). bind ('click', function () {alert ('user clicked on "foo ."');});

12. Add HTML to an element

$ ('# Lal'). append ('sometext ');

13. Define attributes using objects when creating elements

Var e = $ ("", {href: "#", class: "a-class another-class", title :"..."});

14. filter multiple attributes

// This precision-based approached can be useful when you use // lots of similar input elements which have different types var elements = $ ('# someid input [type = sometype] [value = somevalue] '). get ();

15. Use jQuery to pre-load images

JQuery. preloadImages = function () {for (var I = 0; I '). attr ('src', arguments [I]) ;}}; // Usage example .preloadimages('image1.gif ','/path/to/image2.png ', 'some/image3.jpg ');

16. set any event handler that matches a selector

$ ('Button. someClass '). live ('click', someFunction); // Note that in jQuery 1.4.2, the delegate and undelegate options have been // introduced to replace live as they offer better support for context // For example, in terms of a table where before you wocould use .. //. live () $ ("table "). each (function () {$ ("td", this ). live ("hover", function () {$ (this ). toggleClass ("hover") ;}); // Now use .. $ ("table "). delegate ("td", "hover", function () {$ (this ). toggleClass ("hover") ;}); 17. locate the selected option Element

$ ('# SomeElement'). find ('option: selected ');

18. Hide elements that contain specific values

$ ("P. value: contains ('thetextvalue')"). hide ();

19. Automatically scroll to a specific area of the page

JQuery. fn. autoscroll = function (selector) {$ ('html, body '). animate ({scrollTop: $ (selector ). offset (). top}, 500);} // Then to scroll to the class/area you wish to get like this: $ ('. area_name '). autoscroll ();

20. Detect various browsers

Detect Safari (if ($. browser. safari), Detect IE6 and over (if ($. browser. msie & amp; $. browser. version & gt; 6), Detect IE6 and below (if ($. browser. msie & amp; $. browser. version & lt; = 6), Detect FireFox 2 and above (if ($. browser. mozilla & amp; $. browser. version & gt; = '1. 8 ') 21. replace the word in the string

Var el = $ ('# id'); el.html(el.html (). replace (/word/ig ,''));

22. Close the right-click menu

$ (Document). bind ('textmenu ', function (e) {return false ;});

23. Define a custom Selector

$. Expr [':']. mycustomselector = function (element, index, meta, stack) {// element-is a DOM element // index-the current loop index in stack // meta-meta data about your selector // stack-stack of all elements to loop // return true to include current element // Return false to explude current element }; // Custom Selector usage: $ ('. someClasses: test '). doSomething ();

24. determine whether an element exists

If ($ ('# somediv'). length) {// hooray !!! It exists ...}

25. Use jQuery to determine the left and right mouse keys

$ ("# Someelement"). live ('click', function (e) {if ((! $. Browser. msie & amp; e. button = 0) | ($. browser. msie & amp; e. button = 1) {alert ("Left Mouse Button Clicked");} else if (e. button = 2) alert ("Right Mouse Button Clicked ");});

26. display or delete the default value of the input box

// This snippet will show you how to keep a default value // in a text input field for when a user hasn't entered in // a value to replace it swap_val = []; $ (". swap "). each (function (I) {swap_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]) ;}}) ;}; <INPUT value = "Enter Username here .. "type = text>

27. Automatically hide or close elements after a specified time (1.4 supported)

// Here's how we used to do it in 1.3.2 using setTimeout (function () {$ ('. mydiv '). hide ('blind', {}, 500) }, 5000); // And here's how you can do it with 1.4 using the delay () feature (this is a lot like sleep) $ (". mydiv "). delay( 5000 ). hide ('blind', {}, 500 );

28. dynamically create elements to the DOM

Var newgbin1Div = $ (''); newgbin1Div. attr ('id', 'gbin1. com'). appendTo ('body ');

29. Limit the number of characters in textarea

JQuery. fn. maxLength = function (max) {this. each (function () {var type = this. tagName. toLowerCase (); var inputType = this. type? This. type. toLowerCase (): null; if (type = "input" & amp; 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 & gt; 0: this. selectionStart! = This. selectionEnd; return! (This. value. length & gt; = max & amp; (keyCode & gt; 50 | keyCode = 32 | keyCode = 0 | keyCode = 13) & amp; & amp ;! Ob. ctrlKey & amp ;! Ob. altKey & amp ;! HasSelection) ;}; this. onkeyup = function () {if (this. value. length & gt; max) {this. value = this. value. substring (0, max) ;}}}) ;}; // Usage: $ ('# gbin1textarea '). maxLength (1, 500 );

30. Create a basic test case for the function

// Separate tests into modules. module ("Module B"); test ("some other gbin1.com test", function () {// Specify how many assertions are expected to run within a test. CT (2); // A comparison assertion, equivalent to JUnit's assertEquals. equals (true, false, "failing test"); equals (true, true, "passing test ");});