- jQuery - AJAX
- jQuery - Attributes
- jQuery - Events
- jQuery - Selectors
- jQuery - Syntax
- jQuery - Basics
- jQuery - Overview
- jQuery - Home
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
- jQuery - Weather.js
- jQuery - Megadropdown.js
- jQuery - Producttour.js
- jQuery - Blockrain.js
- jQuery - Checkout.js
- jQuery - Whatsnearby.js
- jQuery - Filer.js
- jQuery - LogosDistort.js
- jQuery - Tagsort.js
- jQuery - Drawsvg.js
- jQuery - Slideshow.js
- jQuery - Progressbar.js
- jQuery - Alertify.js
- jQuery - Rowgrid.js
- jQuery - Slidebar.js
- jQuery - Multiscroll.js
- jQuery - Flickerplate.js
- jQuery - PagePiling.js
- jQuery - Plugins
jQuery Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
jQuery - Utipties
Jquery provides serveral utipties in the formate of $(name space). These methods are helpful to complete the programming tasks.a few of the utipty methods are as show below.
$.trim()
$.trim() is used to Removes leading and traipng whitespace
$.trim( " lots of extra whitespace " );
$.each()
$.each() is used to Iterates over arrays and objects
$.each([ "foo", "bar", "baz" ], function( idx, val ) { console.log( "element " + idx + " is " + val ); }); $.each({ foo: "bar", baz: "bim" }, function( k, v ) { console.log( k + " : " + v ); });
.each() can be called on a selection to iterate over the elements contained in the selection. .each(), not $.each(), should be used for iterating over elements in a selection.
$.inArray()
$.inArray() is used to Returns a value s index in an array, or -1 if the value is not in the array.
var myArray = [ 1, 2, 3, 5 ]; if ( $.inArray( 4, myArray ) !== -1 ) { console.log( "found it!" ); }
$.extend()
$.extend() is used to Changes the properties of the first object using the properties of subsequent objects.
var firstObject = { foo: "bar", a: "b" }; var secondObject = { foo: "baz" }; var newObject = $.extend( firstObject, secondObject ); console.log( firstObject.foo ); console.log( newObject.foo );
$.proxy()
$.proxy() is used to Returns a function that will always run in the provided scope — that is, sets the meaning of this inside the passed function to the second argument
var myFunction = function() { console.log( this ); }; var myObject = { foo: "bar" }; myFunction(); // window var myProxyFunction = $.proxy( myFunction, myObject ); myProxyFunction();
$.browser
$.browser is used to give the information about browsers
jQuery.each( jQuery.browser, function( i, val ) { $( "<span>" + i + " : <span>" + val + "</span>" ) .appendTo( document.body ); });
$.contains()
$.contains() is used to returns true if the DOM element provided by the second argument is a descendant of the DOM element provided by the first argument, whether it is a direct child or nested more deeply.
$.contains( document.documentElement, document.body ); $.contains( document.body, document.documentElement );
$.data()
$.data() is used to give the information about data
<html lang = "en"> <head> <title>jQuery.data demo</title> <script src = "https://code.jquery.com/jquery-1.10.2.js"> </script> </head> <body> <span> The values stored were <span></span> and <span></span> </span> <script> var span = $( "span" )[ 0 ]; jQuery.data( span, "test", { first: 25, last: "tutorials" }); $( "span:first" ).text( jQuery.data( span, "test" ).first ); $( "span:last" ).text( jQuery.data( span, "test" ).last ); </script> </body> </html>
An output would be as follows
The values stored were 25 and tutorials
$.fn.extend()
$.fn.extend() is used to extends the jQuery prototype
<html lang = "en"> <head> <script src = "https://code.jquery.com/jquery-1.10.2.js"> </script> </head> <body> <label><input type = "checkbox" name = "android"> Android</label> <label><input type = "checkbox" name = "ios"> IOS</label> <script> jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } }); // Use the newly created .check() method $( "input[type = checkbox ]" ).check(); </script> </body> </html>
It provides the output as shown below −
$.isWindow()
$.isWindow() is used to recognise the window
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery.isWindow demo</title> <script src = "https://code.jquery.com/jquery-1.10.2.js"> </script> </head> <body> Is window a window? <b></b> <script> $( "b" ).append( "" + $.isWindow( window ) ); </script> </body> </html>
It provides the output as shown below −
$.now()
It returns a number which is representing the current time
(new Date).getTime()
$.isXMLDoc()
$.isXMLDoc() checks whether a file is an xml or not
jQuery.isXMLDoc( document ) jQuery.isXMLDoc( document.body )
$.globalEval()
$.globalEval() is used to execute the javascript globally
function test() { jQuery.globalEval( "var newVar = true;" ) } test();
$.dequeue()
$.dequeue() is used to execute the next function in the queue
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery.dequeue demo</title> <style> span { margin: 3px; width: 50px; position: absolute; height: 50px; left: 10px; top: 30px; background-color: green; border-radius: 50px; } span.red { background-color: blue; } </style> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <button>Start</button> <span></span> <script> $( "button" ).cpck(function() { $( "span" ) .animate({ left: + = 400px }, 2000 ) .animate({ top: 0px }, 600 ) .queue(function() { $( this ).toggleClass( "red" ); $.dequeue( this ); }) .animate({ left: 10px , top: 30px }, 700 ); }); </script> </body> </html>
It provides the output as shown below −
Advertisements