Skip to main content

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>

Comments

Post a Comment

Popular posts from this blog

How to handle XML with PHP

What is XML? The  eXtensible Markup Language  is a way to structure your data for sharing across sites. Some of the technologies that are crucial to the web like  RSS  (Real Simple Syndication) and  Podcasts  are special flavors of XML. The beautiful thing about XML is that you can easily roll your own for anything you need. XML is easy to create because it’s a lot like HTML…except you can make up your own tags. Let’s say, for example that you’re putting together a feed for a list of songs playing at your own radio station. We’ll keep this simple, so we’ll just encode the name of the artist, the title of the song, plus the time when the song was played. We make up a couple of tags called  <title>  and  <artist>  and wrap each of them around a  <song>  tag. We’ll create a dateplayed attribute for each song with the date and time the song was played. You might encode something like that in this manner. ...
5 comments
Read more

XSLT QUICK GUIDE

E X tensible  S tylesheet  L anguage  T ransformation commonly known as XSLT is a way to transform the XML document into other formats such as XHTML. XSL Before learning XSLT, we should first understand XSL which stands for E X tensible  S tylesheet  L anguage. It is similar to XML as CSS is to HTML. Need for XSL In case of HTML document, tags are predefined such as table, div, and span; and the browser knows how to add style to them and display those using CSS styles. But in case of XML documents, tags are not predefined. In order to understand and style an XML document, World Wide Web Consortium (W3C) developed XSL which can act as XML based Stylesheet Language. An XSL document specifies how a browser should render an XML document. Following are the main parts of XSL − ·          XSLT  − used to transform XML document into various other types of document. ·       ...
8 comments
Read more

Jquery Sliding

jQuery Sliding Methods:-  With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: slideDown() slideUp() slideToggle() (1)slideDown()  example:- <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("#flip").click(function(){     $("#panel").slideDown("slow");   }); }); </script> <style> #panel, #flip {   padding: 5px;   text-align: center;   background-color: #e5eecc;   border: solid 1px #c3c3c3; } #panel {   padding: 50px;   display: none; } </style> </head> <body> <div id="flip">Click to slide down panel</div> <div id="panel">Hello world!</div> </body> </html> (2)sldeUP()  example:- <html> <head> <script src="https://ajax....
11 comments
Read more