Quick Contact

    jQuery Syntax

    A jQuery statement usually begins with a dollar sign ($) and finished with a semicolon (;).

    The dollar sign ($) is simply an identifier for jQuery. Look at the following example code, which illustrates a most basic jQuery declaration.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Syntax</ title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    	< script>
    		$(document).ready(function(){
    			// Some code to be executed...
    			alert("Hello World!");
    		});
    	< /script>
    < /head>
    < body>
    	< !--Contents will be inserted here-->
    < /body>
    < /html>
    

    Explanation of code

    If you’re new to jQuery, users might be wondering what that code was all about. OK, let’s go over each section of this script one by one.

    • The < script> element —

      SincejQuery is just a JavaScript library, so the jQuery code can be placed inside the < script> element. However, if you want to place it in an external JavaScript file, which is preferred, you just remove this part.

    • The $(document).ready(handler); —

      This statement is typically known as ready event. Where the handler is basically a function that is passed to the ready() method to be executed safely as soon as the document is ready to be manipulated i.e. when the DOM hierarchy has been fully constructed.

    The jQuery ready() method is typically used with an anonymous function. So, the above example can also be written in a shorthand notation like this:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Shorthand Syntax< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    	< script>
    		$(function(){
    			// Some code to be executed...
    			alert("Hello World!");
    		});
    	< /script>
    < /head>
    < body>
    	< !--Contents will be inserted here-->
    < /body>
    < /html>
    

    Further, inside an event handler function you can write the jQuery statements to perform any action following the basic syntax, like: $(selector).action();

    Where, the $(selector) basically selects the HTML elements from the DOM tree so that it can be manipulated and the action() applies some action on the selected elements such as changes the CSS property value, or sets the element’s contents, etc. Let’s consider another example that sets the paragraph text after the DOM is ready:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Document Ready Demo< /title>
    < link rel="stylesheet" type="text/css" href="/examples/css/style.css">
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
            $(document).ready(function(){
                $("p").text("Hello World!");
            });
    < /script>
    < /head>
    < body>
    < p>Not loaded yet.< /p>
    < /body>
    < /html>
    

    In the jQuery statement of the example above (line no-10) the p is a jQuery selector which select all the paragraphs i.e. the

    elements in the document, later the text() method set the paragraph’s text content to “Hello World!” text.

    The paragraph text in the example above is replaced automatically when the document is ready. But what if we want the user to perform some action before executing the jQuery code to replace the paragraph text. Let’s consider one last example:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Click Handler Demo< /title>
    < link rel="stylesheet" type="text/css" href="/examples/css/style.css">
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
            $(document).ready(function(){
                $("button").click(function(){
                    $("p").text("Training and Tutorial");
                });            
            });
    < /script>
    < /head>
    < body>
    < p>Not loaded yet.< /p>
    < button type="button">Ducat< /button>
    < /body>
    < /html>
    

    In the above example the paragraph text is replaced only when a click event is occur on the “Ducat” < button> that simply means when a user click this button.

    Note:
    Put the jQuery code within the document prepared event to ensure that it runs whenever the document is prepared to be started working on.

    FAQS

    Q1. What is the syntax of jQuery?

    The jQuery syntax is designed specifically for selecting HTML elements and performing actions on them (s).

    Examples:

    $(this).hide() – hides the current element. $(“p”).hide() – hides all < p> elements.

    Q2. What is Ajax syntax?

    In jQuery, the ajax() method is used to make an AJAX or adaptive HTTP request. Syntax: $.ajax({name:value, name:value, … })

    Q3. Is jQuery a programming language?

    jQuery is a cross-platform Javascript framework, not a programming language. There are several other JavaScript open source libraries, such as MooTools, Knockout, or even Angular (but while Angular uses TypeScript, it eventually compiles to JavaScript), and jQuery is one of the most popular.

    Q4. What is AJAX used for?

    AJAX is an abbreviation for Asynchronous JavaScript And XML. It involves the use of the XMLHttpRequest entity to interact with web server in a nutshell. It can communicate and receive data in a variety of formats such as JSON, XML, HTML, and text files.

    Q5. Is jQuery used in 2022?

    It’s useful to know jQuery, and there are still applications for it. However, you should not devote too much time to learning it. This year, avoid focusing on jQuery. The most significant advantage of jQuery now is the ability to manipulate the DOM with less code.

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.