As i told before, jQuery library contains many features that can manipulate HTML/DOM elements, CSS manipulation etc. Here we are going to discuss different selectors using which we can easily select and manipulate HTML elements.
Each jQuery selector uses id, classes, name, attribute, attribute value, types and much more things to find HTML elements. Each selector starts with $ sign followed by parenthesis.
How to select a HTML element using Tag name:
Here we will select all the elements having tag name div. For example:
Now, we will select elements with their id. For this we use "#" symbol. For example select element whose id is select.
If we want to select an element using class then we use the '.' operator followed by the class name to do so. For example:
Other different selectors used to manipulate HTML/DOM elements are listed below.
$("*"):- This selector is used to select all elements. If used together with another element it selects all its child elements. For example:
$(document).ready(function(){
$("ul *").css("background-color","yellow");
});
$(":first"):- It is used together with an element and selects the first instance of the used element. For example: $("p:first").hide(); This will hide the first paragraph of the body.
$(":last"):- It works just opposite of :first. It selects the last element. For example: $("p:last").hide(); This will hide the last paragraph of the body.
$(":even"):-Selects all even child elements. For example: $("tr:even") it selects all even tr elements of a table.
$(":odd"):-$("tr:odd") This selects all odd tr elements of a table.
$(":only-child"):- Example $("p:only-child") selects all p elements that are the only child of their parent.
$(":only-of-type"):- Example $("p:only-of-type") It selects all those p elements that are the only p element of their parent.
$("parent> child"):-Selects all the direct child's of the parent. For example: $("ul> li") It selects all direct li element of the ul.
$("parent descendent"):- Selects all the siblings of the parent. For example $("ul li") Selects all li elements of the ul.
$("element + next"):- Example $("ul +div") Selects the div elements that are just next to ul.
$("element ~ siblings"):-Example $("div ~ p") Selects all p elements that are siblings of div.
$(":header"):-Selects all header elements.
$("animated"):-Selects all animated elements.
$(":focus"):-Selects element that is currently in focus.
$(":parent"):-Selects all parent element.
$(":hidden"):-Selects all hidden elements but will not work on elements whose visibility property is set to hidden.
$(":empty"):- Selects all empty elements.
$(":visible"):- Selects all visible elements.
$("root"):- Selects documents root element.
$(":eq(index)"):- Selects the element with the specified index. The index starts with 0. That is, first element will be indexed as 0, second as 1 and therefore. For example: $("li:eq(3)") selects the forth li element.
$(":gt(index)"):- Selects all the elements having index greater than the specified index. That is $("li: gt(1)") will select all the elements after first two elements in the list.
$(":lt(index)"):- Selects all the elements having index less than the specified index. That is $("li: lt(3)") selects first 3 elements having index 0,1,2.
$(":not(selector)"):- Example $("tr: not(:even)") selects all tr elements that are not even.
$(":first-child"):- Example $("p:first-child") Selects all p elements that are first child of their parent.
$(":first-of-type"):- Example $("p:first-of-type") Selects all p elements that are the first p elements of their parent.
$(":last-child"):- Example $("p:last-child") Selects all p elements that are the last child of their parent.
$(":last-of-type"):- Example $("p:last-of-type") Selects all p elements that are the last p element of their parent.
$(":nth-child(n)"):- Example $("p:nth-child(4)) Selects all p elements that are the 4th child of their parent.
$(":nth-of-type(n)"):- Example $("p:nth-of-type(4)") Selects all p elements that are the 4th p element of their parent.
$(":nth-last-child(n)"):- Example $("p:nth-last-child(4)) Selects all p elements that are the 4th child of their parent counting from the last.
$(":nth-last-of-type(n)"):- Example $("p:nth-last-of-type(4)") Selects all p elements that are the 4th p element of their parent from last.
$(":input"):- Selects all input elements.
$(":text"):- Selects all input elements with type=text.
$(":password"):- Selects all input elements with type=password.
$(":radio"):- Selects all input elements with type=radio.
$(":checkbox"):- Selects all input elements with type=checkbox.
$(":submit"):- Selects all input elements with type=submit.
$(":button"):- Selects all input elements with type=button.
$(":file"):- Selects all input elements with type=file.
$(":image"):- Selects all input elements with type=image.
$(":reset"):- Selects all input elements with type=reset.
$(":enabled"):- Selects all enabled elements.
$(":disabled"):- Selects all disabled elements.
$(":selected"):- Selects the selected element in a dropdown box.
$(":checked"):- Selects all checked elements of checkboxes or radio buttons.
$("[attribute]"):- Example $("[href]") Selects elements with href attribute.
$("[attribute=value]"):- Selects elements with the specified attribute-value pair.
$("[attribute!=value]"):-Selects elements with attribute whose value not equal to the specified value. For example $("[src!='C:/xyz/1.jpg']")
$("attribute^=value"):- Example $("input[type^='button']") Selects all input elements whose type starts with button.
$("attribute~=value"):-Example $("[name~='hello'") Selects all elements with attribute name with value containing the word hello.
$("attribute*=value"):- Example $("[href*='.com'") Selects all elements with attribute herf with value containing the string .com.
$("attribute$=value"):- Example $("[href*='.com'") Selects all elements with attribute herf with value ending with .com.
Each jQuery selector uses id, classes, name, attribute, attribute value, types and much more things to find HTML elements. Each selector starts with $ sign followed by parenthesis.
How to select a HTML element using Tag name:
Here we will select all the elements having tag name div. For example:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").css("background-color","red");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>Hello</p>
<div>This text is in div.</div>
<p>This text is in paragraph tag.</p>
<div>This is another div.</div>
<button>Click me</button>
</body>
</html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").css("background-color","red");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>Hello</p>
<div>This text is in div.</div>
<p>This text is in paragraph tag.</p>
<div>This is another div.</div>
<button>Click me</button>
</body>
</html>
Now, we will select elements with their id. For this we use "#" symbol. For example select element whose id is select.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#select").hide();
});
});
</script>
</head>
<body>
<h2>Hello World</h2>
<p>This is a paragraph.</p>
<p id="select">This is another paragraph with id select.</p>
<button>Click me</button>
</body>
</html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#select").hide();
});
});
</script>
</head>
<body>
<h2>Hello World</h2>
<p>This is a paragraph.</p>
<p id="select">This is another paragraph with id select.</p>
<button>Click me</button>
</body>
</html>
If we want to select an element using class then we use the '.' operator followed by the class name to do so. For example:
<!DOCTYPE html>
<html> <head> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("button").click(function(){
$(".big").hide();
});
});
</script>
</head>
<body>
<div class="big">
<p class="para1">This is first paragraph in div with class big.</p>
<p>This is second paragraph.</p>
</div>
<br />
<div class="medium" id="divid3">
<p>This is a para inside second division</p>
</div>
</body>
</html>
<html> <head> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("button").click(function(){
$(".big").hide();
});
});
</script>
</head>
<body>
<div class="big">
<p class="para1">This is first paragraph in div with class big.</p>
<p>This is second paragraph.</p>
</div>
<br />
<div class="medium" id="divid3">
<p>This is a para inside second division</p>
</div>
</body>
</html>
Other different selectors used to manipulate HTML/DOM elements are listed below.
$("*"):- This selector is used to select all elements. If used together with another element it selects all its child elements. For example:
$(document).ready(function(){
$("ul *").css("background-color","yellow");
});
$(":first"):- It is used together with an element and selects the first instance of the used element. For example: $("p:first").hide(); This will hide the first paragraph of the body.
$(":last"):- It works just opposite of :first. It selects the last element. For example: $("p:last").hide(); This will hide the last paragraph of the body.
$(":even"):-Selects all even child elements. For example: $("tr:even") it selects all even tr elements of a table.
$(":odd"):-$("tr:odd") This selects all odd tr elements of a table.
$(":only-child"):- Example $("p:only-child") selects all p elements that are the only child of their parent.
$(":only-of-type"):- Example $("p:only-of-type") It selects all those p elements that are the only p element of their parent.
$("parent> child"):-Selects all the direct child's of the parent. For example: $("ul> li") It selects all direct li element of the ul.
$("parent descendent"):- Selects all the siblings of the parent. For example $("ul li") Selects all li elements of the ul.
$("element + next"):- Example $("ul +div") Selects the div elements that are just next to ul.
$("element ~ siblings"):-Example $("div ~ p") Selects all p elements that are siblings of div.
$(":header"):-Selects all header elements.
$("animated"):-Selects all animated elements.
$(":focus"):-Selects element that is currently in focus.
$(":parent"):-Selects all parent element.
$(":hidden"):-Selects all hidden elements but will not work on elements whose visibility property is set to hidden.
$(":empty"):- Selects all empty elements.
$(":visible"):- Selects all visible elements.
$("root"):- Selects documents root element.
$(":eq(index)"):- Selects the element with the specified index. The index starts with 0. That is, first element will be indexed as 0, second as 1 and therefore. For example: $("li:eq(3)") selects the forth li element.
$(":gt(index)"):- Selects all the elements having index greater than the specified index. That is $("li: gt(1)") will select all the elements after first two elements in the list.
$(":lt(index)"):- Selects all the elements having index less than the specified index. That is $("li: lt(3)") selects first 3 elements having index 0,1,2.
$(":not(selector)"):- Example $("tr: not(:even)") selects all tr elements that are not even.
$(":first-child"):- Example $("p:first-child") Selects all p elements that are first child of their parent.
$(":first-of-type"):- Example $("p:first-of-type") Selects all p elements that are the first p elements of their parent.
$(":last-child"):- Example $("p:last-child") Selects all p elements that are the last child of their parent.
$(":last-of-type"):- Example $("p:last-of-type") Selects all p elements that are the last p element of their parent.
$(":nth-child(n)"):- Example $("p:nth-child(4)) Selects all p elements that are the 4th child of their parent.
$(":nth-of-type(n)"):- Example $("p:nth-of-type(4)") Selects all p elements that are the 4th p element of their parent.
$(":nth-last-child(n)"):- Example $("p:nth-last-child(4)) Selects all p elements that are the 4th child of their parent counting from the last.
$(":nth-last-of-type(n)"):- Example $("p:nth-last-of-type(4)") Selects all p elements that are the 4th p element of their parent from last.
$(":input"):- Selects all input elements.
$(":text"):- Selects all input elements with type=text.
$(":password"):- Selects all input elements with type=password.
$(":radio"):- Selects all input elements with type=radio.
$(":checkbox"):- Selects all input elements with type=checkbox.
$(":submit"):- Selects all input elements with type=submit.
$(":button"):- Selects all input elements with type=button.
$(":file"):- Selects all input elements with type=file.
$(":image"):- Selects all input elements with type=image.
$(":reset"):- Selects all input elements with type=reset.
$(":enabled"):- Selects all enabled elements.
$(":disabled"):- Selects all disabled elements.
$(":selected"):- Selects the selected element in a dropdown box.
$(":checked"):- Selects all checked elements of checkboxes or radio buttons.
$("[attribute]"):- Example $("[href]") Selects elements with href attribute.
$("[attribute=value]"):- Selects elements with the specified attribute-value pair.
$("[attribute!=value]"):-Selects elements with attribute whose value not equal to the specified value. For example $("[src!='C:/xyz/1.jpg']")
$("attribute^=value"):- Example $("input[type^='button']") Selects all input elements whose type starts with button.
$("attribute~=value"):-Example $("[name~='hello'") Selects all elements with attribute name with value containing the word hello.
$("attribute*=value"):- Example $("[href*='.com'") Selects all elements with attribute herf with value containing the string .com.
$("attribute$=value"):- Example $("[href*='.com'") Selects all elements with attribute herf with value ending with .com.
No comments:
Post a Comment