DEV Community

Gaurav Tiwari
Gaurav Tiwari

Posted on

2

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.

Image of Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

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 😄

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay