Basic jQuery Usage

2022-09-24

Word count: 885 | Reading time≈ 5 min

jQuery Intro

jQuery is a lightweight,”write less, do more”, JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish,
and wraps them into methods that you can call with a single line of code.
The jQuery library contains the following feature:

HTML/DOM manipulations
CSS manipulations
HTML event methods
Effects and animations
AJAX
Utilities

jQuery Start

Adding jQuery to web pages

There are several ways to start using jQuery on your web site:

Download the jQuery library from jQuery.com
Include jQuery from a CDN,like Google.

jQuery CDN

If you don’t want to download and host jQuery yourself,
you can include it from a CDN(Content Delivery Network).
Google Hosted Libraries

1
2
3

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>

jQuery Syntax

The jQuery syntax is tailor-made for selecting HTML elements,
and performing some action on the elements.

Basic Syntax is

$(selector).action

A $ sign to define/access jQuery.
A (selector) to “query”(or find) HTML elements.
A jQuery action() to be performed on the element(s).

jQuery - Get and Set Content and Attributes

One very important part of jQuery is the possibility to manipulate the DOM.
DOM = Document Object Model
The DOM defines a standard for accessing HTML and XML documents.

Get Content - text(),html(),and val()

Three simple,but useful,jQuery methods for DOM manipulation are:

text() -Sets or returns the text content of selected elements.
html() -Sets or returns the text content of selected elements(including HTML markup).
val() -Sets or returns the value of form fields.

Example

//get the content of the div element.
$("#div").text()
//set the content of the p element(including HTML markup)
$("#p").html("<b>Hello World!</b>")

Difference between attr() and prop()

Both are used to get attribute values.
Boolean attributes such as checked only set the default or initial value.
The most common boolean attributes are checked, selected, disabled, and readOnly

doc
The prop() method should be used for boolean attributes/properties and for properties which don't exist in html( such as window.location).
All other attributes (ones you can see) can and should continue to be manipulated with the attr() method.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        #a1 {
            background-color: green
        }
    </style>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                var a1 = $("#a1")
                var a2 = $("#a2")
                alert("$('#a1').attr():" + a1.attr("style"));
                // $('#a1').attr():undefined
                alert("$('#a2').attr():" + a2.attr("style"));
                //$('#a2').attr():background-color : yellow
                alert("$('#a1').prop():" + a1.prop("style"));
                //$('#a1').prop():[object CSSStyleDeclaration]
                alert("$('#a1')'s href(prop):" + a1.prop("href"));
                //$('#a1')'s href(prop):
                alert("$('#a1')'s href(attr):" + a1.attr("href"));
                //$('#a1')'s href(attr):undefined
                alert("$('#a1').css():" + a1.css("background-color"));
                //$('#a1').css():rgb(0, 128, 0)
            });
        });
    </script>
</head>
<body>
<p><a id="a1">link a1</a></p>
<p><a id="a2" style="background-color : yellow">link a2</a></p>
<button>Show Value</button>
</body>
</html>

Get and Set CSS Classes

jQuery has several methods for CSS manipulation.

addClass() -Adds one or more classes to the selected elements.
removeClass() -Removes one or more classes from the selected elements.
toggleClass() -Toggles between adding/removing classes from the selected elements.
css() -Sets or returns the style attributes.

Example


<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("h1, h2, p").toggleClass("blue");
                //    first add classed to the elements
                //  and then remove the classes from the elements.
            });
        });
    </script>
    <style>
        .blue {
            color: blue;
        }
    </style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Toggle class</button>
</body>
</html>

Return a CSS Property.

To return the value of a CSS property,use the following syntax
css("propertyName")
To set the value of a css property,use the following syntax
css("propertyName","value")

Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.