JQUERY Selector

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
1Tag Name
Represents a tag name available in the DOM. For example $('p') selects all paragraphs <p> in the document.
2Tag 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.
3Tag 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>



(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>
Previous
Next Post »