The JQuery is a popular open-source JavaScript library, created by John Resig in 2006, that’s designed to simplify the client-side scripting of HTML. You need a scripting library that allows you to change and add behavior on web pages. To change your web pages without reloading, we need Javascript to talk to your browser.
jQuery’s motto is “Write less, do more. The purpose of JQuery is to make less code and easier to use Javascript on the website. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like DOM traversal and manipulation, event handling, animation, and Ajax much simpler and an easy-to-use.
jQuery fundamentals
At its core, jQuery focuses on retrieving elements from HTML pages and performing operations on them. If you’re familiar with CSS, you’re already well aware of the power of selectors, which describe groups of elements by their type, attributes, placement within the document, and much more. With jQuery, you can use that knowledge and that degree of power to vastly simplify your JavaScript. jQuery places a high priority on ensuring that code will work consistently across all major browsers; many of the harder JavaScript problems have been silently solved for you.
Note: The JavaScript interpreter doesn’t change the original HTML and CSS files. It makes changes to the DOM’s representation of the page in the browser’s memory.
Using JQuery selector
Selecting DOM Element:
jQuery selects elements the same way CSS does. You already know more about jQuery than you realize. CSS selectors select elements to add style to those elements; jQuery selectors select elements to add behavior to those elements. We can select an element based on its name, class, ID, attribute, attribute value, and much more.
$(“Canbe”) Note Canbe can be element, class, Id.Selecting by Element name:
$(“h1”).text(“Hi All”);JQuery selector example
First, we have to use the jQuery method to select some document elements to act upon. We will use the most powerful and frequently use jQuery’s $() function: the selection of DOM elements via selectors. For example, we will select all h1 heading on-page as $(“h1”)
- Add some JQuery action :
$(“h1”).text(“Hi All”); An example above will delete and add new text to all h1 as Hi All, the $ is an alias or shortcut of jQuery() function which returns jQuery object containing a set of DOM elements that match the given criteria and also expose many of jQuery’s methods and properties. One of jQuery’s main strengths is that it allows you to work with the DOM
without having to know every little thing about it. Underneath it all, JavaScript is doing the heavy lifting.
jQuery Selector Syntax
The jQuery syntax for selecting HTML elements and performing some action on the element(s).
Basic syntax is: $(selector).action()
- $ sign to define/access jQuery
- (selector) to “query (or find)” HTML elements
- jQuery action() to be performed on the element(s)
Examples: $(“p”).hide() – hides all <p> elements.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h2").text("Hi All");
});
</script>
</head>
<body>
<h2>This is a heading 2</h2>
<h2>This is a heading 2.</h2>
<p>This is paragraph.</p>
</body>
</html>Note: We need to add DOM ready function, to make sure that DOM has finished loading before we can reliably use jQuery.
Selecting with ID and class
$(“#container”); Select the HTML element with ID container.
$(‘.country’); Select the HTML element with .country class.
JQuery Selector example
- Select all li element inside of ul with class breakfast and modifies new text “Eat Well”
<script>
$(document).ready(function(){
$("#breakfast > li").text("Eat Well");
});
</script>
</head>
<body>
<h2>An unordered HTML list</h2>
<ul id="breakfast">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>