The JQUERY Selector:
Selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element.
The $() factory function
jQuery selectors start with the dollar sign and parentheses − $(). The factory function $() makes use of following three building blocks while selecting elements in a given document −
| S.N. | Selector & Description |
|---|---|
| 1 | Tag Name
Represents a tag name available in the DOM. For example $('p') selects all paragraphs <p> in the document.
|
| 2 | Tag ID
Represents a tag available with the given ID in the DOM. For example $('#some-id') selects the single element in the document that has an ID of some-id.
|
| 3 | Tag Class
Represents a tag available with the given class in the DOM. For example $('.some-class') selects all elements in the document that have a class of some-class.
|
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: $().
(1)TAG Name (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")
When a user clicks on a button, all <p> elements will be hidden:
Example :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me to hide paragraphs</button>
</body>
</html>
(2)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:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button> Click me</button>
</body>
</html>
(3)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")
Example :
When a user clicks on a button, the elements with class="test" will be hidden:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between hide() and show()</button>
</body>
</html>
(4) jQuery css() Method :
The css() method sets or returns one or more style properties for the selected elements.
Return a CSS Property
To return the value of a specified CSS property, use the following syntax:
css("propertyname");
The following example will return the background-color value of the FIRST matched element:
Example :
$("p").css("background-color");
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "yellow");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>
<p>This is a paragraph.</p>
<button>Set background-color of p</button>
</body>
</html>
(5)Set Multiple CSS Properties :
To set multiple CSS properties, use the following syntax:
css({"propertyname":"value","propertyname":"value",...});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>
<p>This is a paragraph.</p>
<button>Set multiple styles for p</button>
</body>
</html>
========================================================================
Login and Regsitration hide and show using jquery :
=======================================================================
<!DOCTYPE html>
<html>
<head>
<style>
#login{
display:none;
}
#register{
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#click1").click(function(){
$("#login").show();
$("#register").hide();
});
});
$(document).ready(function(){
$("#click2").click(function(){
$("#register").show();
$("#login").hide();
});
});
</script>
</head>
<body>
<button id=click1> LOGIN</button>
<button id=click2> REGISTER</button>
<div id="login">
<form action=login.php method=post>
Make Login
email <input type=text name=email>
password<input type=password name=password>
<input type=submit name=submit value=Login>
</form>
</div>
<div id="register">
Make Registration
<form action=register.php method=post>
email <input type=text name=email>
password<input type=password name=password>
confirm password<input type=password name=password>
<input type=submit name=submit value=Login>
</form>
</div>
</body>
</html>
==============================================================================================================================================================
jQuery toggle() Method:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between hide() and show()</button>
</body>
</html>
Comments
Post a Comment