jQuery Selectors

Using jQuery Selectors


JQuery uses selectors to select and manipulate an HTML element or a group of elements. You can select a HTML element by:
  • Using element name
  • Using attribute name
  • Using CSS selectors
1. Using element name

jQuery can be used to select an HTML element or a group of HTML elements by using its name. Using jQuery , HTML elements can be selected by referring to their name , ID,  or class to which they belong.

Consider the following code snippet to select all the <H1> elements in a document:

$(h1)

In the preceding code snippet , the <H1> element are referred to by the name , h1. However, HTML elements can also be selected by using class or ID. To select an element with a  specific ID  by using jQuery . You can use the following syntax:

$("#Element_ID")

In the preceding syntax,  Element_ID represents ID  of the element to be selected . For example to select  and element having the ID, header, you  can use the following code snipped:

$("#header")

To select elements  with a specific class , you can use the following syntax:

$(".Element_class")

In the preceding syntax , .Element_class  represents the class of the elements  to be selected . For example, to select the elements having the value of the class attribute as header,  you can use the following code snippet:

"(.header")

For example, you have created the class selector named exClass and the ID  selector named  exId on the <H1> tag as shown below:

<H1 class="exClass">
<H1 ID="exId">

Now, you want to manipulate the <H1>tag with the specified class  and ID. You need to use the following code:

$("h1.exClass")
$("h1#exId")

Here, by using the $("h1.exClass") statement, only the <H1> header elements specified with the exClass value for the  class attribute will be selected and by using the $("h1#exId") statement, only the <H1> header elements that are specified with the exId value for the ID attribute will be selected.


jQuery also supports nesting of elements. This allows applying the action on the elements that are nested within other elements.For example, a list item nested insde a list.
Consider the example of ShopForYor online shopping website where the web designer want to implement a menu and submenu.
The submenu items must be linked to display their  details in a new document.
A menu comprises a list and list items that are denoted  by a <UL> and <LI> tags.

Consider the following code snippet to build a button, menu and submenu and to attach links to the submenu items:

<BODY>
<P>PRODUCT MENU</P>
<H4>PRODUCT CATEGORIES</H4>
<UL ID="menu">
<LI><A>Laptops</A>
<UL>
<LI><A href="">L-150</A></LI>
<LI><A href="">L-160</A></LI>
<LI><A href="">L-180</A></LI>
<LI><A href="">L-260</A></LI>
<LI><A href="">L-678</A></LI>
</UL>
</LI>
<LI><A>Phones</A>
<UL>
<LI><A href="">P-1150</A></LI>
<LI><A href="">P-1260</A></LI>
<LI><A href="">P-1180</A></LI>
<LI><A href="">P-2260</A></LI>
<LI><A href="">P-6708</A></LI>
</UL>
</LI>
<LI><A>Cameras</A>
<UL>
<LI><A href="">C-50</A></LI>
<LI><A href="">C-60</A></LI>
<LI><A href="">C-80</A></LI>
<LI><A href="">C-60</A></LI>
<LI><A href="">C-08</A></LI>
</UL>
</LI>
<LI><A>Music Players</A>
<UL>
<LI><A href="">MP-1150</A></LI>
<LI><A href="">MP-1160</A></LI>
<LI><A href="">MP-1180</A></LI>
<LI><A href="">MP-1260</A></LI>
<LI><A href="">MP-1208</A></LI>
</UL>
</LI>
</UL>
<BUTTON>HIDE LIST</BUTTON>
</BODY>

Consider the following code snippet to hide all the nested <UL> items on the button click of a user,  for which menu is specified as the ID  attribute value:

<HEAD><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-9961622779713084",
    enable_page_level_ads: true
  });
</script>

<SCRIPT src="jquery-1.8.3.js">
</SCRIPT>
<SCRIPT>
$(document).ready(function(){
$("button").click(function(){
$('#menu u1 ').hide();
});
});
</SCRIPT>
</HEAD>

2.Using Attribute Name

The HTML elements can also be selected by using the name of the attribute. the following syntax is used to select elements by using an attribute name:

$("[attribute-name]")
In the preceding syntax, attribute-name specifies  the name of the attribute .

Consider the consider following code snippet:

$("[src]")
In the preceding code snippet,  all the elements with the src  attribute are selected.

Consider the following code snippet:

$("[src"='movie.jpg']")
In the preceding  code snippet, all the elements that have the src attribute  as movie.jpg  are selected.

3. Using CSS Selectors

jQuery provides CSS selectors to modify the CSS properties of an HTML elements  or document.
The following is used to apply CSS selectors to modify the document or modify properties:

selector.css( PropertyName, PropertyValue);

Consider the following code snippet to change the color and font size of the text of the <DIV> element to green:

$("div").css("color","green");
In the preceding code snippet, all the div elements are selected in the document, and the CSS color property value is modified to green.

With CSS selectors, you can set multiple properties  on an HTML elements The following syntax is used to set multiple CSS properties :

css({"propertyname":"value","properyname":"value",...});


Consider the following code snippet to change the color and font size of the text of the <DIV> element:

$("div").css("color":"green", "font-size":"200%");

In the preceding code snippet, all the  div elements are selected in the document , and CSS property value is modified to green  and the font-size set to 200%.


About Codingwelove

Codingwelove
Recommended Posts × +

0 comments:

Post a Comment