DEV Community

Gaurav Tiwari
Gaurav Tiwari

Posted on

Neat and Easy to Use jQuery Examples

jQuery is the most popular JavaScript library in use today. It gives web developers a great relief by abstracting away the complex tasks of traversing the DOM, creating elements, handling events and much more. Many people search for some amazing and simple jQuery tutorials on the web. Here I will show you some simple jQuery tutorial which helps you a lot.

1)Disable right click option (jQuery tutorial)

If you want to disable the right click option (context menu) on a webpage in your browser then you can use this small jquery trick.

$(document).ready(function(){
$(document).on(“contextmenu”,function(e){ e.preventDefault(); });
});
Enter fullscreen mode Exit fullscreen mode

The code above listens for contextmenu event, and calls the preventDefault() method.

2)Define an exists function (jQuery tutorial)

If you want to check, if element exists or not then you can use this small jquery trick also.
There are two ways to check if element exists:

//old way :
console.log($(‘#element’).length == 1 ? “exists!” : “doesn’t exist!”);
Enter fullscreen mode Exit fullscreen mode
//new trick:
jQuery.fn.exists = function(){ return this.length > 0; }
console.log($(‘#element’).exists() ? “exists!” : “doesn’t exist!”);
Enter fullscreen mode Exit fullscreen mode

In both tricks you can use length property and a ternary conditional statement. But the second way is more useful than the first because you can extend jQuery with your own functions and you can use exists() function normally as you can use other functions in jQuery.

3)Find external links and Mark them (jQuery tutorial)

In this example, I will show you how to mark external links with text “external link” using jquery.

HTML

<ul id=”Links”>
<li><a href=”index.html”>Home</a></li>
<li><a href=”./cat.html”>Category</a></li>
<!– External Link: –>
<li><a href=”http://www.google.com/”>Google</a></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

jQuery

$(document).ready(function(){
// Loop through all the links
$(‘#Links a’).each(function(){
if(this.hostname != location.hostname){
// The link is external
$(this).append(‘<span> – (External Link)</span>’).attr(‘target’,’_blank’); }
});
});
Enter fullscreen mode Exit fullscreen mode

The code above will loop through all the links and checks if the link’s hostname is equal to the website’s hostname, if the hostname of link is not equal to the hostname of the website. Then the link is marked as an external link.

Top comments (2)

Collapse
 
wpgaurav profile image
Gaurav Tiwari

Lol. This draft was laying unused in my google docs, thought it'd be better to post it.

Collapse
 
mzaini30 profile image
Zen

Hahahha 😄