Tag Archives: jquery

Make jQuery library available to any webpage using Browser JavaScript Console

Hey there,

jQuery is a powerful & easy to use JavaScript library for DOM manipulation. You can do alot of activities in the HTML DOM with this awesome library. Normally I play with jQuery within the Browser Console (Using Firebug in Mozilla Firefox/Chrome Dev Tools in Google Chrome) So I can play inside HTML DOM using this library with one condition that JQuery has to be present in the webpage already. But in some cases, You might have noticed an unavailability of jQuery in some websites. So In that case, you can’t apply any jQuery methods using the browser console. But You can still play with jQuery functions by dynamically including the library using the Console itself. The below JavaScript will help you to do so.



Now you can perform normal jQuery functionalities inside HTML DOM just like the below example.

That’s it. Cheers..!! :)

Difference between ‘$(this)’ and ‘this’ keyword selector when using in jQuery

Hey there,

‘this’ and ‘$(this)’ in jQuery refers to the same element. The only difference is the way they are used. ‘this’ is used in traditional sense, when ‘this’ is wrapped in ‘$()’ then it becomes a jQuery object and you are able to use the power of jQuery.

$(this) Example:

this Example:

In the above example, this is an object but since it is not wrapped in $(), we can’t use jQuery method and use the native JavaScript this keyword to get the value of span element.

Load jQuery library from Microsoft, Google, Jquery.com CDNs

Hey there,

There are Mainly 3 popular jQuery CDNs.

1. Google.
2. Microsoft
3. jQuery.com

The Main Advantages of using CDN.

  1.  It reduces the load from your server.
  2.  It saves bandwidth. jQuery framework will load faster from these CDN.
  3.  The most important benefit is it will be cached, if the user has visited any site which is using jQuery framework from any of these CDN

load jQuery from CDN

Code to load jQuery library from Google CDN

Code to load jQuery library from Microsoft CDN

Code to load jQuery library from jQuery.com (EdgeCast CDN)

 load jQuery locally when CDN fails

It is a good approach to always use CDN but sometimes what if the CDN is down (rare possibility though). Below given jQuery code checks whether jQuery is loaded from Google CDN or not, if not then it references the jQuery.js file from your folder.

It first loads the jQuery from Google CDN and then checks the jQuery object. If jQuery is not loaded successfully then it will references the jQuery.js file from hard drive location. In the above code, the jQuery.js is loaded from Scripts folder.

 

How to test whether an element is hidden using jQuery?

Hey there,

The below code helps you to test if an element is visible or hidden using jQuery.

For all elements,

You can use the hidden selector:

And the visible selector:

Enjoy Coding..Cheers..:)