Modern websites are interactive; for instance, a button’s color can change upon clicking. This dynamic behavior is enabled by the DOM (Document Object Model), which lets programming languages modify the page’s structure, style, and content using nodes and objects.
- document.getElementById(): This method retrieves an HTMLElement by its id attribute.
- element: This variable holds the reference to the retrieved HTMLElement.
- textContent: A property of HTMLElement that gets or sets the text content.
What is jQuery?
- $ sign: The $ sign grants access to jQuery. It is an alias of the jQuery object that is used to access the functions provided by the jQuery library, i.e., $("#id") would work the same as jQuery("#id").
- (selector): The (selector) is used to find HTML elements.
- jQuery action(): The jQuery action() is used to perform actions on the elements. These actions are either pre-defined or user defined functions. These actions could be .click() to regulate click events, .hide() to hide an element, .hover() to regulate hover events etc.`
- jQuery: Simplifies common tasks with concise methods, reducing code length.
|The user needs to write the complete js code||The user only needs to write the required jQuery code|
|The code chunks are gigantic and complex.||The code chunks are simple and less sized.|
|Developers need to make necessary changes to their own code for handling multi-browser compatibility.||No requirement for handling multi-browser compatibility issues. It is supported by all browsers.|
How to Add jQuery in the HTML Document?
There are two ways to add jQuery to the HTML document:
- Download and Include jQuery file: In order to include jQuery in our HTML file, we can download the jQuery file from the official website. Then this file can be included using the <script> tag.
- Include the jQuery by CDN: We can also include jQuery in our HTML document using CDN. In order to include jQuery using CDN, we need to pass a link to the src attribute in the <script> tag.
In this example, we will create two buttons using HTML, clicking upon which will change the color of the text above.
Explanation of the Example:
In the above example, the onclick will trigger the changeColor() function. We are selecting the p using var elem = document.getElementById('para') and the elem.style.color = 'green' will change the color of the text.
Following is the jQuery implementation of the code:
Explanation of the Example:
In the above example, the $("button") is selecting the button, and upon clicking it, the click event will be triggered. The $("#para").css('color', 'green'); will change the text color to green.
Why is jQuery Created, and What are the Special Capabilities of jQuery?
Following are some of the Special Capabilities of jQuery:
- jQuery has in-built plugins that directly perform an operation on the web page. These plugins create abstractions of animations.
- jQuery also allows us to make custom plugins, thus allowing us to add personalized inputs.
- jQuery has a high-level UI widget library with a range of plugins that can be imported to the webpage. These widgets can be used readily.
Advantages of jQuery
- Simple code: The code written in jQuery is simple, clear, readable, and reusable.
- Great documentation: JQuery has well-structured documentation that helps the developers to get started.
- Ajax support – jQuery provides several methods for AJAX functionality. The jQuery AJAX methods can be used to request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post. Also, we can load the external data directly into the selected HTML elements of our web page.
- jQuery has in-built plugins that directly perform an operation on the web page.