Hi All,
JQuery is a awesome JavaScript api to handle HTML DOM elements. We can do client side form validation, DOM manipulation using the JQuery library. In this article I will show you how to select or manipulate a DOM element using it's attributes.
Suppose we have following line in HTML :
<a href="http://www.test.com" name="mysite > Click me </a>
Here we have <a> HTML tag and it's attributes are 'href' and 'name' . Now we can have different scenarios to select this element. Some of the conditions as follows :
1) If we need to select all elements having same attribute then we can write :
$("element[attribute]") or $("[attribute]")
For example :
$("div[width]").css("background-color", "green");
will select the all <div> tags having the width as an attribute and set the background color green.
2) Suppose we want to filter the the elements having value starts with given prefix. We can put condition starts with some value as follows :
$("element[attribute ^='value']")
For example :
$("[href ^='www']").css("color", "green");
This will select all the elements having attribute href and it's value should be starts with www and fill the text color as green.
3) If we want to select those elements which contains some value as it's attribute value, then we can follow the below syntax :
$("element[attribute *='value']")
For example :
$("[href *='java']").css("color", "red");
This will select all the elements having attribute href which having value with substring java and fill the text color as red for example java-tute.com, java-learning.com contains the java as a substring.
4) If we want to select those elements having value which ends with given value, then we can follow the below syntax :
$("element[attribute $='value']")
For example :
$("[href $='.in']").css("color", "red");
This will select all the elements having attribute href and it's value should be ends with .in and fill the text color as red.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a[href]").css("color","green");
$("[href ^='https://']").css("color","red");
$("[href *='download']").css("color","grey");
$('[href $=".in"]').css("color","yellow");
});
</script>
</head>
<body>
<a href="#" name="a1">A1</a>
<a href="http://test.com" name="a2">A2</a>
<a href="http://download.com" name="a3">A3</a>
<a href="https://www.test.com" name="a4">A4</a>
<a href="https://downloads.test.in" name="a5">A5</a>
</body>
</html>
Description : The above HTML file render the five links as follows
A1 A2 A3 A4 A5
But using the JQuery the colors of the text will be different. Can you guess ? Let me help you.
Look at the first condition inside the script, it is telling that all the <a> tags will be of green color. Ok fine all links looks as green color text.So the result will be as in color :
A1(green) A2(green) A3(green) A4(green) A5(green)
But now second condition comes which tells that all the links having attribute value starts with 'https:// string should have red color. So now the last two links A4 and A5 attributes value starts with https://. So now links shown as :
A1(green) A2(green) A3(green) A4(red) A5(red)
Now see the third condition which tells that all attributes containing download as in it's value should be shown in grey color. So the A3 and A5 contains download substring in it's attribute value. So now links shown as :
A1(green) A2(green) A3(grey) A4(red) A5(grey)
Now finally at the last condition we are saying that the href attribute having value ends with .in will shown in yellow color. So only A5 contains the href value as https://downloads.test.in as ends with .in. So final result, the links color shown as follows order :
A1(green) A2(green) A3(grey) A4(red) A5(yellow)
We can also selects elements using exact match like $('div[width=200]'); or $('div[width!=200]'); first condition will select all div having width equal to 200 and second will select all div not having width equal to 200.
0 Comment(s)