jQuery Selectors

jQuery selectors allows you to select and manipulate HTML elements as a group or as a single element.

It  selects HTML elements (or groups of elements) by element name, attribute name or by content.

JQUERY ELEMENT SELECTORS:

It uses CSS selector to select HTML elements

$(“p”) selects all <p> elements.

$(“p.intro”) selects all <p> elements with.

$(“p#demo”) selects all <p> elements with id=”demo”.

JQUERY ATTRIBUTE SELECTORS:

jQuery uses XPath expressions to select elements with given attributes.

$(“[href]”) select all elements with an href attribute.

$(“[href=’#’]”) select all elements with an href value equal to “#”.

$(“[href!=’#’]”) select all elements with an href attribute NOT equal to “#”.

$(“[href$=’.jpg’]”) select all elements with an href attribute that ends with “.jpg”.

JQUERY CSS SELECTORS:

jQuery CSS selectors can be used to change CSS properties for HTML elements.

$(“p”).css(“background-color”,”red”);

EXAMPLE:


<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","red");
});
});
</script>
</head>

<body>
<h2>LEARN WEB DEVELOPMENT</h2>
<p>THE QUOTES</p>
<p>THE QTP</p>
<button>Click me</button>
</body>
</html>

For more selectors refer http://www.w3schools.com/jquery/jquery_ref_selectors.asp

Posted in jQuery Tagged with: , ,