JQuery is the most popular JavaScript library among front-end developers. Not only easy to use, jQuery is also the expert in creating dynamic web pages and user-friendly web-based applications.
If you are a jQuery frequent-user, here we summarize the 10 tricks to use, which developers rarely know, quoted from Pro Blog Design. These tricks will help you write jQuery code more professionally and efficiently, both for those of you who are beginners and experts.
Table of Contents
JQuery Tricks For More Professional and Efficient Coding
1. Loop Backwards
Usually we use each() to loop elements in JQuery. However, not many people know that we can also loop backwards or reverse. This is the trick:
$(function(){
var reversedSet = $("li").get().reverse();
//Use get() to return an array of elements, and then reverse it
$(reversedSet).each(function(){
//Now we can enter the set that has been reversed
});
});
2. Check the jQuery object
This one trick might be very basic in jQuery, but not many know how to do it in an efficient way. For example, find out if there is an element with the class ‘active’ in the DOM. You can check the length of object properties in the following way:
$(function(){
if( $(".active").length ){
//Now the code here will only be executed if there is at least one active element
}
});
This trick works because 0 evaluates false and only true if there is at least one element in the jQuery object. You can also use size() to do the same thing.
Check Out: Penetration Testing, Protection for Your Web Security
3. Accessing the iFrame element
Because of the difficulty level, most web developers are trying to avoid using iFrame. But there are times of certain problems, iFrame must be used. For that, you need to know how to easily access the elements in it, one of the ways is with contents() which is able to load DOM iFrame in one line, such as:
$(function(){
var iFrameDOM = $("iframe#someID").contents();
//You can use <strong>find()</strong> to access any element on iFrame:
iFrameDOM.find(".message").slideUp();
//Use slideUp on all elements of class 'message' on iFrame
});
4. Equate different column widths
You don’t need to bother setting the column height one at a time. In jQuery, there is a trick for this, which is by automatically equalizing the column width to the broadest. The key is in equalHeight().
$(function(){
jQuery.fn.equalHeight = function () {
var tallest = 0;
this.each(function() {
tallest = ($(this).height() > tallest)? $(this).height() : tallest;
});
return this.height(tallest);
}
//Add equalHeight here
$(".content-column").equalHeight();
});
5. Find sentences and manipulate them
If you want to find a sentence or a word and then want to replace it, or want to manipulate an existing string, use this code:
$(function(){
//First, specify which string you want to manipulate, its replacement, and the context:
var phrase = "old string";
var replacement = "new string";
var context = $(body);
//
context.html(
context.html().replace(new RegExp(phrase, 'gi'), replacement);
);
});
Check Out: Build Desktop Apps With These 5 Javascript Frameworks
6. Manage the Search box
Adding a question like “Looking for something?” in your Search box will be more attractive to visitors. JQuery can manage it easily. You can also remove it if the box is being typed. Use this code:
$(function(){
//set default value:
$("#searchbox")
.val('search?');
.focus(function(){this.val('')})
.blur(function(){
(this.val() === '')? this.val('search?') : null;
});
});
7. Reappear the ‘Back-to-Top’ link
To be able to bring back the ‘Back-to-Top’ link that was removed, you only need to add the link again as usual, then add the code as below:
$(function(){
/* set the variables locally to improve performance */
var scroll_timer,
displayed = false,
$message = $('#message a'),
$window = $(window),
top = $(document.body).children(0).position().top;
/* react to scroll event on window */
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () { // use a timer to increase performance
if($window.scrollTop() <= top) // hide if it's on the top screen
{
displayed = false;
$message.fadeOut(500);
}
else if(displayed == false) // show if it's scrolling
{
displayed = true;
$message.stop(true, true).show().click(function () { $message.fadeOut(500); });
}
}, 100);
});
});
8. Enter the htmlentities() function in jQuery
If you need PHP functions like htmlentities() into your code that come from the jQuery library, you don’t have to use them. You just have to make your code give the same results as using the htmlentities() function. This is the trick:
$(function(){
var text = $("#someElement").text();
var text2 = "Some <code> & such to encode";
//You can specify strings or text from an element
var html = $(text).html();
var html2 = $('<div/>').text(text2).html();
//Done - html and html2 now hold the encoded value!
});
Check Out: 5 JavaScript Tools For Faster Website
9. Allows the user to set the display font size
You can set the website font to be easily set by visitors with the following tricks:
$(function(){
// Reset Font Size
var originalFontSize = $('html').css('font-size');
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('html').css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
return false;
});
});
10. Open an external link in the new Window
If you want to enable all external links to be opened in a new window, you can add the following code:
$(function(){
$('a[rel$='external']').click(function(){
this.target = "_blank";
});
});
Don’t forget to add the rail attribute as below:
<a href="about.html" rel="external">about</a>
Those are 10 JQuery tricks that will be very useful for the speed and efficiency of your coding. So that you become more expert, keep practicing and experimenting. The more you get used to these tricks, the more quickly your project will be completed.
If you have expertise in programming techniques, Logique Digital Indonesia is currently opening web developer vacancies for you. At Logique, we will help you dig in your potency so you can improve yourself with an international company like us.
Not only in Jakarta, we are also opening web developer vacancies for you who are staying in Yogyakarta. If you have special needs and are not able to work in our office, we also accept employees to work with a remote system.
Sign yourself now and send your CV to this link. For more information about other vacancies at Logique, please visit Logique Digital Indonesia career page.
