jQuery
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.
What is jQuery?
jQuery is a lightweight, "write less, do more", 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:
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
Why jQuery?
There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable.
Many of the biggest companies on the Web use jQuery, such as:
Get
jQuery DOM Manipulation
Many of the biggest companies on the Web use jQuery, such as:
- Microsoft
- IBM
- Netflix
Get
jQuery DOM Manipulation
Important part of jQuery is the possibility to manipulate the DOM.
jQuery comes with a bunch of DOM related methods that make it easy to access and manipulate elements and attributes.
Get Content - text(), html(), and val()
jQuery comes with a bunch of DOM related methods that make it easy to access and manipulate elements and attributes.
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
Example:
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
There are two usage of jQuery attr() method.
To return an attribute's value:
To set an attribute and value:
To set an attribute and value by using a function:
To set multiple attributes and values:
Example:
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
jQuery attr()
The jQuery attr() method is used to set or return attributes and values of the selected elements.There are two usage of jQuery attr() method.
- To return attribute value: This method returns the value of the first matched element.
- To set attribute value: This method is used to set one or more attribute/value pairs of the set of matched elements.
To return an attribute's value:
- $(selector).attr(attribute)
- $(selector).attr(attribute,value)
- $(selector).attr(attribute,function(index,currentvalue))
- $(selector).attr({attribute:value, attribute:value,...})
Parameters of jQuery attr() method
| Parameter | Description |
|---|---|
| Attribute | This parameter is used to specify the name of the attribute. |
| Value | This parameter is used to specify the value of the attribute. |
| Function (index, currentvalue) | It is a parameter to specify a function that returns an attribute value to set.
|
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").attr("width", "500");
});
});
</script>
</head>
<body>
<img src="good-morning.jpg" alt="Good Morning Friends"width="284" height="213"><br>
<button>Set the width attribute of the image</button>
</body>
</html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").attr("width", "500");
});
});
</script>
</head>
<body>
<img src="good-morning.jpg" alt="Good Morning Friends"width="284" height="213"><br>
<button>Set the width attribute of the image</button>
</body>
</html>
Benefits of using jQuery attr() method
It provides two main benefits:- Convenience: When you use jQuery attr() method to get the value of the attribute of an element then it can be call directly on a jQuery object and chained to other jQuery methods.
- Cross-browser consistency: You can get rid from inconsistently changing of attribute's value on different browsers or even on different versions of a single browser.
jQuery remove()
The jQuery remove() method is used to remove the selected elements out of the DOM. It removes the selected element itself, as well as everything inside it (including all texts and child nodes). This method also removes the data and the events of the selected elements.
Parameters of jQuery remove() method:
2) Set a CSS property
This property is used to set a specific value for all matched element.
3) Set multiple CSS properties
| Selector: It is an optional parameter. It specifies whether to remove one or more elements. if you have to remove more than one element then you should separate them with comma (,). |
Example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>remove demo</title>
<style>
p {
background: pink;
margin: 6px 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello Guys!</p>
This is javatpoint.com<br/>
<p>A place for all technology.</p>
<button>Execute remove() method on paragraphs</button>
<script>
$( "button" ).click(function() {
$( "p" ).remove();
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>remove demo</title>
<style>
p {
background: pink;
margin: 6px 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello Guys!</p>
This is javatpoint.com<br/>
<p>A place for all technology.</p>
<button>Execute remove() method on paragraphs</button>
<script>
$( "button" ).click(function() {
$( "p" ).remove();
});
</script>
</body>
</html>
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove();
});
});
</script>
</head>
<body>
<p>Welcome Guys!</p>
<p><b>This is javatpoint.com</b></p>
<button>Click here to execute remove() method</button>
</body>
</html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove();
});
});
</script>
</head>
<body>
<p>Welcome Guys!</p>
<p><b>This is javatpoint.com</b></p>
<button>Click here to execute remove() method</button>
</body>
</html>
jQuery empty()
The jQuery empty() method is used to remove all child nodes and content from the selected elements. This method doesn't remove the element itself.
Example:
jQuery CSS() method provides two ways:
1) Return a CSS property
It is used to get the value of a specified CSS property.
Example:
<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).empty();
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click any of the box given below to see the result:</p>
<div class="div" style="background-color:yellow;">Click me!</div>
<div class="div" style="background-color:green;">Click me!</div>
<div class="div" style="background-color:red;">Click me!</div>
</body>
</html>
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).empty();
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click any of the box given below to see the result:</p>
<div class="div" style="background-color:yellow;">Click me!</div>
<div class="div" style="background-color:green;">Click me!</div>
<div class="div" style="background-color:red;">Click me!</div>
</body>
</html>
jQuery css()
The jQuery CSS() method is used to get (return)or set style properties or values for selected elements. It facilitates you to get one or more style properties.jQuery CSS() method provides two ways:
1) Return a CSS property
It is used to get the value of a specified CSS property.
2) Set a CSS property
This property is used to set a specific value for all matched element.
3) Set multiple CSS properties
It is just an extension of Set CSS property. It facilitates you to add multiple property values together.
Comments
Post a Comment