Scribd
Upload
56 views

Jquery

jQuery is a lightweight JavaScript library that simplifies HTML document manipulation and event handling. It allows developers to select elements, hide/show elements, handle events, and perform AJAX calls using simplified one-line code. jQuery is commonly included from a CDN like Google to improve page load speeds since the file is often cached by users visiting other sites. Elements can be selected using CSS-like selectors and then jQuery methods are used to manipulate the selected elements.

Uploaded by

pratik
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
56 views

Jquery

jQuery is a lightweight JavaScript library that simplifies HTML document manipulation and event handling. It allows developers to select elements, hide/show elements, handle events, and perform AJAX calls using simplified one-line code. jQuery is commonly included from a CDN like Google to improve page load speeds since the file is often cached by users visiting other sites. Elements can be selected using CSS-like selectors and then jQuery methods are used to manipulate the selected elements.

Uploaded by

pratik
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

jQuery is a lightweight, "write less, do more", and JavaScript library.

The purpose of jQuery is to make it much easier to use JavaScript on your website.

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.

jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM
manipulation.

The jQuery library contains the following features:

 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX
 Utilities

Adding jQuery to Your Web Pages

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

 Download the jQuery library from jQuery.com


 Include jQuery from a CDN, like Google

Query CDN

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

Google is an example of someone who host jQuery:

Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
One big advantage of using the hosted jQuery from Google:
Many users already have downloaded jQuery from Google when visiting another site. As a
result, it will be loaded from cache when they visit your site, which leads to faster loading time.
Also, most CDN's will make sure that once a user requests a file from it, it will be served from
the server closest to them, which also leads to faster loading time.
jQuery Syntax
The jQuery syntax is tailor-made for selecting HTML elements and performing some action on
the element(s).
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)
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".

The Document Ready Event

You might have noticed that all jQuery methods in our examples, are inside a document ready
event:
$(document).ready(function(){

  // jQuery methods go here...

});
This is to prevent any jQuery code from running before the document is finished loading (is
ready).

Tip: The jQuery team has also created an even shorter method for the document ready event:
$(function(){
  // jQuery methods go here...
});
Use the syntax you prefer. We think that the document ready event is easier to understand when
reading the code.

jQuery Selectors
jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes,
types, attributes, values of attributes and much more. It's based on the existing CSS Selectors,
and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
The element Selector
The jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this:
$("p")
Example
When a user clicks on a button, all <p> elements will be hidden:
Example
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
The #id Selector
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want to find a
single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the HTML
element:
$("#test")
Example
When a user clicks on a button, the element with id="test" will be hidden:
Example
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

The .class Selector


The jQuery .class selector finds elements with a specific class.
To find elements with a specific class, write a period character, followed by the name of the
class:
$(".test")
jQuery Selectors
Use our jQuery Selector Tester to demonstrate the different selectors.
Selector Example Selects
* $("*") All elements
#id $("#lastname") The element with id="lastname"
.class $(".intro") All elements with class="intro"
.class,.class $(".intro,.demo") All elements with the class "intro" or "demo"
element $("p") All <p> elements
el1,el2,el3 $("h1,div,p") All <h1>, <div> and <p> elements
     
:first $("p:first") The first <p> element
:last $("p:last") The last <p> element
:even $("tr:even") All even <tr> elements
:odd $("tr:odd") All odd <tr> elements
     
:first-child $("p:first-child") All <p> elements that are the first child of their parent
:first-of-type $("p:first-of-type") All <p> elements that are the first <p> element of
their parent
:last-child $("p:last-child") All <p> elements that are the last child of their parent
:last-of-type $("p:last-of-type") All <p> elements that are the last <p> element of their
parent
:nth-child(n) $("p:nth-child(2)") All <p> elements that are the 2nd child of their parent
:nth-last-child(n) $("p:nth-last-child(2)") All <p> elements that are the 2nd child of their parent,
counting from the last child
:nth-of-type(n) $("p:nth-of-type(2)") All <p> elements that are the 2nd <p> element of
their parent
:nth-last-of- $("p:nth-last-of-type(2)") All <p> elements that are the 2nd <p> element of
type(n) their parent, counting from the last child
:only-child $("p:only-child") All <p> elements that are the only child of their
parent
:only-of-type $("p:only-of-type") All <p> elements that are the only child, of its type, of
their parent
     
parent > child $("div > p") All <p> elements that are a direct child of a <div>
element
parent descendant $("div p") All <p> elements that are descendants of a <div>
element
element + next $("div + p") The <p> element that are next to each <div> elements
element ~ siblings $("div ~ p") All <p> elements that appear after the <div> element
     
:eq(index) $("ul li:eq(3)") The fourth element in a list (index starts at 0)
:gt(no) $("ul li:gt(3)") List elements with an index greater than 3
:lt(no) $("ul li:lt(3)") List elements with an index less than 3
:not(selector) $("input:not(:empty)") All input elements that are not empty
     
:header $(":header") All header elements <h1>, <h2> ...
:animated $(":animated") All animated elements
:focus $(":focus") The element that currently has focus
:contains(text) $(":contains('Hello')") All elements which contains the text "Hello"
:has(selector) $("div:has(p)") All <div> elements that have a <p> element
:empty $(":empty") All elements that are empty
:parent $(":parent") All elements that are a parent of another element
:hidden $("p:hidden") All hidden <p> elements
:visible $("table:visible") All visible tables
:root $(":root") The document's root element
:lang(language) $("p:lang(de)") All <p> elements with a lang attribute value starting
with "de"
     
[attribute] $("[href]") All elements with a href attribute
[attribute=value] $("[href='default.htm']") All elements with a href attribute value equal to
"default.htm"
[attribute!=value] $("[href!='default.htm']") All elements with a href attribute value not equal to
"default.htm"
[attribute$=value] $("[href$='.jpg']") All elements with a href attribute value ending with
".jpg"
[attribute|=value] $("[title|='Tomorrow']") All elements with a title attribute value equal to
'Tomorrow', or starting with 'Tomorrow' followed by
a hyphen
[attribute^=value] $("[title^='Tom']") All elements with a title attribute value starting with
"Tom"
[attribute~=value] $("[title~='hello']") All elements with a title attribute value containing the
specific word "hello"
[attribute*=value] $("[title*='hello']") All elements with a title attribute value containing the
word "hello"
     
:input $(":input") All input elements
:text $(":text") All input elements with type="text"
:password $(":password") All input elements with type="password"
:radio $(":radio") All input elements with type="radio"
:checkbox $(":checkbox") All input elements with type="checkbox"
:submit $(":submit") All input elements with type="submit"
:reset $(":reset") All input elements with type="reset"
:button $(":button") All input elements with type="button"
:image $(":image") All input elements with type="image"
:file $(":file") All input elements with type="file"
:enabled $(":enabled") All enabled input elements
:disabled $(":disabled") All disabled input elements
:selected $(":selected") All selected input elements
:checked $(":checked") All checked input elements

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 content of selected elements (including HTML
markup)
 val() - Sets or returns the value of form fields
The following example demonstrates how to get content with the
jQuery text() and html() methods:

Example
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>

<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>

<button>Show Value</button>

</body>
</html>

With jQuery, it is easy to add new elements/content.

Add New HTML Content


We will look at four jQuery methods that are used to add new content:
 append() - Inserts content at the end of the selected elements
 prepend() - Inserts content at the beginning of the selected elements
 after() - Inserts content after the selected elements
 before() - Inserts content before the selected elements

jQuery append() Method


The jQuery append() method inserts content AT THE END of the selected HTML
elements.

Example
$("p").append("Some appended text.");

With jQuery, it is easy to remove existing HTML elements.

Remove Elements/Content
To remove elements and content, there are mainly two jQuery methods:

 remove() - Removes the selected element (and its child elements)


 empty() - Removes the child elements from the selected element

jQuery remove() Method


The jQuery remove() method removes the selected element(s) and its child
elements.

Example
$("#div1").remove();
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-


color:yellow;">

This is some text in the div.


<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>

</div>
<br>

<button>Remove div element</button>

</body>
</html>

High charts

Highcharts is a pure JavaScript based charting library meant to enhance web applications by
adding interactive charting capability. It supports a wide range of charts. Charts are drawn using
SVG in standard browsers like Chrome, Firefox, Safari, Internet Explorer(IE). In legacy IE 6,
VML is used to draw the graphics.

Features of Highcharts Library

Let us now discuss a few important features of the Highcharts Library.


 Compatability − Works seemlessly on all major browsers and mobile platforms like
android and iOS.
 Multitouch Support − Supports multitouch on touch screen based platforms like android
and iOS.Ideal for iPhone/iPad and android based smart phones/ tablets.
 Free to Use − Open source and is free to use for non-commercial purpose.
 Lightweight − highcharts.js core library with size nearly 35KB, is an extremely
lightweight library.
 Simple Configurations − Uses json to define various configurations of the charts and
very easy to learn and use.
 Dynamic − Allows to modify chart even after chart generation.
 Multiple axes − Not restricted to x, y axis. Supports multiple axis on the charts.

Using Downloaded Highcharts


Include the Highcharts JavaScript file in the HTML page using the following script −
<head>
<script src = "/highcharts/highcharts.js"></script>
</head>
Using CDN
We are using the CDN versions of the Highcharts library throughout this tutorial.
Include the Highcharts JavaScript file in the HTML page using the following script −
<head>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>
These are the primarily parts of a chart:

 Title displays the name of a chart on top


 Subtitles are placed right under the title
 Series refers to one or more data series presented on a chart
 Tooltips are descriptions of particular data displayed by hovering over
part of a chart
 Legend displays the name and/or the symbol of each series on a chart.
By clicking on the name of the series in a legend, one can enable or
disable the series.
 Print and download let's users print or export the chart. 
Step 1: Create HTML Page
Create an HTML page with the jQuery and Highcharts javascript libraries.
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>

<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>

<script language = "JavaScript">


$(document).ready(function() {
});
</script>

</body>
</html>
Here the container div is used to contain the chart drawn using Highcharts library.

Step 2: Create Configurations


Highcharts library uses very simple configurations using json syntax.
$('#container').highcharts(json);
Here json represents the json data and configuration which the Highcharts library uses
to draw a chart within the container div using the highcharts() method. Now, we will
configure the various parameters to create the required json string.
title
Configure the title of the chart.
var title = {
text: 'Monthly Average Temperature'
};
subtitle
Configure the subtitle of the chart.
var subtitle = {
text: 'Source: WorldClimate.com'
};
xAxis
Configure the ticker to be displayed on the X-Axis.
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};
yAxis
Configure the title, plot lines to be displayed on the Y-Axis.
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
tooltip
Configure the tooltip. Put suffix to be added after value (y-axis).
var tooltip = {
valueSuffix: '\xB0C'
}
legend
Configure the legend to be displayed on the right side of the chart along with other
properties.
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
series
Configure the data to be displayed on the chart. Series is an array where each element
of this array represents a single line on the chart.
var series = [
{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}
];

Step 3: Build the json data


Combine all the configurations.
var json = {};

json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;

Step 4: Draw the chart


$('#container').highcharts(json);

You might also like