First jQuery Code
One of the best methods to grasp jQuery’s possibilities when you first start working with it is to go right into real-world application by making basic examples. You may rapidly gain an understanding of the framework’s capabilities and how it streamlines web development using this practical method.
A concise and efficient JavaScript library, jQuery simplifies event handling, animation, HTML page traversal, and Ajax interactions.. This allows for quick web development. With its “write less, do more” philosophy, developers may accomplish sophisticated features using a lot less code than with conventional JavaScript.
Key Concepts for Your First jQuery Code
A few basic jQuery ideas that are essential for developing your first script should be understood before moving on to an example:
The $ (or jQuery()) Function: The main way to use jQuery is through the $ (or jQuery()) Function. A shortcut for referencing web page items is the $ symbol. The “factory” receives a CSS selector to “query” or “find” HTML components. This function creates a jQuery object for DOM interaction.
$(document).ready() Method: First JQuery code organisation relies on $(document).ready(). It ensures that code within it is only run when the DOM is constructed and the web page loads. JavaScript code executes as soon as the browser meets it, therefore modifying things before they are in the DOM would fail. The $(document).ready() function prevents browser-dependent issues and delays element access. It often replaces the native window because it starts as soon as the DOM is available and doesn’t wait for all images and to load.onload. Although the longer version is more descriptive, shorter syntax like $(function() { // code here }); may be used.
Accessing Elements: jQuery gives developers a powerful and effective selector technique that makes it simple to get the precise section of the document that needs to be examined or changed. It beats JavaScript, which might cause issues and take many characters to access an element.
Event Handling: jQuery’s event handling technique can intercept many events when a user clicks a link. By eliminating browser incompatibilities, its event-handling API ensures code works across browsers. This simplifies user event responses and eliminates inline event handlers in HTML. Click() and similar methods are essential for this.
Modifying Elements (DHTML): Your initial examples may frequently entail dynamically altering a web page’s visual look or content; this is known as dynamic HTML (DHTML). For instance, jQuery offers easy-to-use tools like adding and removing CSS classes.
A Simple “First jQuery Code” Example
Let’s create a basic example to demonstrate selecting an element, managing an event, and changing page content. Consider a simple webpage with a button and paragraph. Pressing the button should change the paragraph’s text.
This is the HTML structure with your custom script and the reference to the jQuery library:
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First jQuery Page</title>
<! Load jQuery from a CDN >
<script src=</script>
<script type="text/javascript">
// Ensure the DOM is fully loaded
$(document).ready(function(){
// When the button is clicked
$("#myButton").click(function(){
// Change the content of the paragraph
$("#outputArea").html("You clicked the button! jQuery rocks!");
});
});
</script>
</head>
<body>
<!-- Button to trigger jQuery event -->
<button id="myButton">Change Text</button>
<!-- Paragraph that will be updated -->
<p id="outputArea">This is the original text.</p>
</body>
</html>Output:
This is the original text.
Change Text
You clicked the button! jQuery rocks!Explanation of the Code Example
<!DOCTYPE html>: The fundamental structure of HTML an HTML5 standard document is defined by these lines.
<head> section: An essential component of an HTML document, the section specifies how the web page should be displayed and function by providing non-visual information about it. It acts as the parent element for different metadata and connections and is directly nestled inside the tag.
- With the <title>My First jQuery Page</title>, the browser tab title is set.
- JavaScript <script type=”text/javascript” src=”lib/jquery-1.8.min.js”>//script> (Line 7): Important line. JQuery is used. Install jQuery (jquery-1.8.min.js) in a lib subfolder next to your HTML file for this example. The page may use all jQuery features.
- The type of the script is “text/javascript”> (Line 8): This is the location of your unique JavaScript code.
$(document).ready(function(){ … }); (Line 9): $(document).ready(function()…); JQuery is wrapped here. It performs the function’s code only after the browser loads and parses HTML. This avoids errors from working with unloaded items.
$(“#myButton”).click(function(){ … }); (Line 10): In jQuery, “myButton” refers to a web page’s HTML button element that jQuery can manipulate. Use a or tag with a unique id attribute, such as or , instead of a literal “myButton” tag.
- $(“#myButton”): This selection is part of jQuery. The $ function finds an HTML element by its id from a # string.
- Here, the target is the <button> element with id=”myButton”.
- The function function(){… };: This event method is part of jQuery. It gives the selected element a “event handler”. Clicking the button runs the function in parenthesis.
$(“#outputArea”).html(“You clicked the button! jQuery rocks!”); (Line 11):
- jQuery selector “#outputArea” targets the element with id=”outputArea”.
- .html( “You clicked the button! jQuery rocks!” );: This jQuery DOM manipulation technique is used. It inserts text or HTML into the element. A button press replaces “You clicked the button! With “This is the original text.” jQuery great!
Using a few lines of jQuery code, complex, browser-specific JavaScript tasks become simple, concise, and cross-browser compatible. JQuery became a client-side scripting standard due to its simplicity and capability.