Hello dear readers! Welcome back to another edition of our tutorial on JQuery. In this tutorial guide, we are going to be discussing about the JQuery Utilities.
JQuery provides several utilities in the format of $( name space). These methods are very helpful to complete the programming task. A few of these jQuery utility methods are disccused below.
JQuery provides several utilities in the format of $( name space). These methods are very helpful to complete the programming task. A few of these jQuery utility methods are disccused below.
$.trim()
$.trim() is used to remove leading and trailing white space.
$.trim( " lots of extra whitespace " );
$.each()
$.each() is used for iterating 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 );
} );
console.log( "element " + idx + "is" + val );
} );
$.each( { foo: "bar", baz: "bim" }, function( k, v ) {
console.log( k + " : " + v );
} );
.each can be used on selection to iterate over elements contained in the selection. .each( ), not $.each( ), should be used for iterating over elements in a selection.
RECOMMENDED POST: Working with JQuery UI themes
$.inArray()
$.inArray() is used for returning a value's index in an array, or -1 if the value is not found in the array.
var myArray = [ 1, 2, 3, 4, 5, 6 ];
if ( $.inArray( 4, myArray ) !== -1 ) {
console.log( " found it! " );
}
if ( $.inArray( 4, myArray ) !== -1 ) {
console.log( " found it! " );
}
$.extend()
$.extend() is used in changing the properties of the first object using 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 );
var secondObject = { foo: "baz" };
var newObject = $.extend( firstObject, secondObject );
console.log( firstObject.foo );
console.log( newObject.foo );
$.proxy()
$.proxy() is used for returning a function that will always run in a provided scope. That is, it 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( );
console.log( this );
}
var myObject = { foo: "bar" };
myFunction( ); // window
var myProxyFunction = $.proxy( myFunction, myObject );
myProxyFunction( );
RECOMMENDED POST: JQuery UI Library Based Methods
$.browser()
$.browser() is used for giving the information about browsers.
jQuery.each( jQuery.browser, function( i , val ) {
$( "<div>" + i + " : <span>" + val + "</span>" )
.appendTo( document.body );
} );
$( "<div>" + i + " : <span>" + val + "</span>" )
.appendTo( document.body );
} );
$.contains()
$.contains() is used to return true if the DOM element given by the second argument, is a descendant of the DOM element provided by the first argument, whether it is a direct child node or nested more deeply.
$.contains( document.documentElement, document.body );
$.contains( document.body, document.documentElement );
$.contains( document.body, document.documentElement );
$.data()
$.data() is made use of for giving the information about data.
<html lang = "en">
<head>
<title>JQuery Example</title>
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
<div>
The values stored were <span></span>
and <span></span>
</div>
<script type = "text/javascript">
var div = $( "div" )[ 0 ];
jQuery.data( div, "test" , {
first: 40,
last: "Web design tutorialz"
} );
$( "span:first" ).text( jQuery.data( div, "test" ).first );
$( "span:last" ).text( jQuery.data( div, "test" ).last);
</script>
</body>
</html>
<head>
<title>JQuery Example</title>
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
<div>
The values stored were <span></span>
and <span></span>
</div>
<script type = "text/javascript">
var div = $( "div" )[ 0 ];
jQuery.data( div, "test" , {
first: 40,
last: "Web design tutorialz"
} );
$( "span:first" ).text( jQuery.data( div, "test" ).first );
$( "span:last" ).text( jQuery.data( div, "test" ).last);
</script>
</body>
</html>
Output
Below is the output of the above example -
The values stored were 40 and Web design tutorialz
RECOMMENDED: Understanding JQuery Effect Methods
$.fn.extend()
$.fn.extend( ) is made use of for extending the jQuery prototype.
<html lang = "en">
<head>
<title>JQuery Example</title>
<script type = "text/javascript"
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 type = "text/javascript">
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>
<head>
<title>JQuery Example</title>
<script type = "text/javascript"
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 type = "text/javascript">
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>
Output
Below is the output of the above example -
$.isWindow()
$.isWindow() is used to recognize the window.
<html lang = "en">
<head>
<title>JQuery Example</title>
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
Is 'window' a window? <b></b>
<script type = "text/javascript">
$( "b" ).append( " " + $.isWindow( window ) );
</script>
</body>
</html>
<head>
<title>JQuery Example</title>
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
Is 'window' a window? <b></b>
<script type = "text/javascript">
$( "b" ).append( " " + $.isWindow( window ) );
</script>
</body>
</html>
Output
Below is the output of the above example -
is 'window' a window? true
RECOMMENDED: The Definitive Guide to JQuery Effects
$.now()
$.now() returns a number which is representing the current time.
( new Date ).getTime( )
$.isXMLDoc()
$.isXMLDoc() is used to check if a file is an xml or not.
jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )
jQuery.isXMLDoc( document.body )
$.globalEval()
$.globalEval() is used to execute the JavaScript globally.
function test( ) {
jQuery.globalEval( "var newVar = true; " )
}
test( );
jQuery.globalEval( "var newVar = true; " )
}
test( );
$.dequeue()
$.dequeue( ) is used for executing the next function in the queue.
<html lang = "en">
<head>
<title>JQuery Example</title>
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
<style>
div {
margin: 2px;
width: 40px;
position: absolute;
height: 60px;
left: 10px;
top: 25px;
background-color: yellow;
border-radius: 45px;
}
div.red {
background-color: green;
}
</script>
</head>
<body>
<button>Start</button>
<div></div>
<script type = "text/javascript">
$( "button" ).click( function( ) {
$( "div" )
.animate( { left: ' + = 300px ' } , 2000 )
.animate( { top: '0px' } , 600 )
.queue( function( ) {
$( this ).toggleClass( "red" );
$.dequeue( this );
} );
.animate( { left: '10px', top: '30px' } , 700 );
} );
</script>
</body>
</html>
<head>
<title>JQuery Example</title>
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
<style>
div {
margin: 2px;
width: 40px;
position: absolute;
height: 60px;
left: 10px;
top: 25px;
background-color: yellow;
border-radius: 45px;
}
div.red {
background-color: green;
}
</script>
</head>
<body>
<button>Start</button>
<div></div>
<script type = "text/javascript">
$( "button" ).click( function( ) {
$( "div" )
.animate( { left: ' + = 300px ' } , 2000 )
.animate( { top: '0px' } , 600 )
.queue( function( ) {
$( this ).toggleClass( "red" );
$.dequeue( this );
} );
.animate( { left: '10px', top: '30px' } , 700 );
} );
</script>
</body>
</html>
You can try the above code out to see the result for yourselves.
RECOMMENDED: A Complete Guide to JQuery AJAX Event Methods
Alright guys! This is where we are rounding up for this tutorial post. In our next tutorial guide, we are going to be introducing the jQuery Plugins to you guys.
Do feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Do feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.