jQuery Utilities

Previous Next

jQuery offers several utility methods that help developers perform common tasks efficiently. These methods are available on the jQuery object and simplify operations like iteration, data type checking, JSON handling, and more.

1. `$.each()` Loop

The $.each() method is used to iterate over objects and arrays.

Example: Looping through an array

<ul id="fruits"></ul>

<script>
$(document).ready(function(){
    var fruits = ["Apple", "Banana", "Cherry"];
    $.each(fruits, function(index, value){
        $('#fruits').append("<li>" + value + "</li>");
    });
});
</script>

2. `$.trim()`, `$.type()`, `$.isArray()`

`$.trim()`

Removes whitespace from both ends of a string.

<p id="trim-result"></p>

<script>
$(document).ready(function(){
    var rawText = "   Hello jQuery!   ";
    var trimmed = $.trim(rawText);
    $('#trim-result').text("Trimmed text: '" + trimmed + "'");
});
</script>

`$.type()`

Returns a string indicating the type of the object passed.

<p id="type-result"></p>

<script>
$(document).ready(function(){
    var value = [1, 2, 3];
    $('#type-result').text("Type of value: " + $.type(value));
});
</script>

`$.isArray()`

Checks if a value is an array.

<p id="array-check"></p>

<script>
$(document).ready(function(){
    var items = [1, 2, 3];
    $('#array-check').text("Is it an array? " + $.isArray(items));
});
</script>

3. `$.extend()`

Merges the contents of two or more objects into the first object.

Example: Merge two objects

<p id="extend-result"></p>

<script>
$(document).ready(function(){
    var obj1 = {name: "John", age: 25};
    var obj2 = {age: 30, city: "Delhi"};
    var merged = $.extend({}, obj1, obj2);
    $('#extend-result').text(JSON.stringify(merged));
});
</script>

4. `$.map()`

Creates a new array by applying a function to each item in the original array.

Example: Square each number in an array

<p id="map-result"></p>

<script>
$(document).ready(function(){
    var nums = [1, 2, 3, 4];
    var squares = $.map(nums, function(val){
        return val * val;
    });
    $('#map-result').text("Squares: " + squares.join(", "));
});
</script>

5. Working with JSON in jQuery

You can work with JSON data using jQuery’s $.getJSON() or handle static JSON objects easily.

Example: Parsing and displaying JSON data

<ul id="user-list"></ul>

<script>
$(document).ready(function(){
    var data = [
        {name: "Alice", age: 22},
        {name: "Bob", age: 28}
    ];

    $.each(data, function(i, user){
        $('#user-list').append("<li>" + user.name + " (Age: " + user.age + ")</li>");
    });
});
</script>

If you have any questions, feel free to ask. Thank you for reading!

Previous Next

If you have any query or question, please contact through below form. Our team will be in touch with you soon.

Please provide your valueable feedback or suggession as well.