Tutorial by Examples | RIP Tutorial

jQuery Namespace ("jQuery" and "$")

jQuery is the starting point for writing any jQuery code. It can be used as a function jQuery(...) or a variable jQuery.foo. $ is an alias for jQuery and the two can usually be interchanged for each other (except where jQuery.noConflict(); has been used - see Avoiding namespace collisions). Assumi...

jQuery • Getting started with jQuery

Getting Started

Create a file hello.html with the following content: <!DOCTYPE html> <html> <head> <title>Hello, World!</title> </head> <body> <div> <p id="hello">Some random text</p> </div> <script src=...

jQuery • Getting started with jQuery

Include script tag in head of HTML page

To load jQuery from the official CDN, go to the jQuery website. You'll see a list of different versions and formats available. Now, copy the source of the version of jQuery, you want to load. Suppose, you want to load jQuery 2.X, click uncompressed or minified tag which will show you something li...

jQuery • Getting started with jQuery

Avoiding namespace collisions

Libraries other than jQuery may also use $ as an alias. This can cause interference between those libraries and jQuery. To release $ for use with other libraries: jQuery.noConflict(); After calling this function, $ is no longer an alias for jQuery. However, you can still use the variable jQuery...

jQuery • Getting started with jQuery

Loading jQuery via console on a page that does not have it.

Sometimes one has to work with pages that are not using jQuery while most developers are used to have jQuery handy. In such situations one can use Chrome Developer Tools console (F12) to manually add jQuery on a loaded page by running following: var j = document.createElement('script'); j.onload ...

jQuery • Getting started with jQuery

The jQuery Object

Every time jQuery is called, by using $() or jQuery(), internally it is creating a new instance of jQuery. This is the source code which shows the new instance: // Define a local copy of jQuery jQuery = function( selector, context ) { // The jQuery object is actually just the init construct...

jQuery • Getting started with jQuery

Loading namespaced jQuery plugins

Typically when loading plugins, make sure to always include the plugin after jQuery. <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="some-plugin.min.js"></script> If you must use more than one version of jQuery, then m...

jQuery • Getting started with jQuery