Learning jQuery

To work with an element on the web page, first we need to find them. To find the html element in jQuery we use selectors. jQuery provides many selectors out of the box. Let me explain some of the very useful selectors in “how to” ways.

How to select all elements of the page? - All Selector (“*”)
To select all elements of the page, we can use all selectors, for that we need to use *(asterisk symbol).

<script language="javascript" type="text/javascript">
$("*").css("border", "5px dashed green");
</script>

Above code will select all elements of the web page and apply border width as 5 pixel, style as dashed and color as green.

How to select a particular element having a specific class? - Class Selector (“.class”)
To select an element with a specific class, class selector can be used. We need to prefix the class name with “.” (dot).

<script language="javascript" type="text/javascript">
$(".class1").css("border", "5px solid green");
</script>

Above code will select all elements of the web page having class as “class1” and apply css style border width as 5 pixel, style as solid and color as green.

How to select all elements of specific type? - Element Selector (“element”)
To select all elements of specific type, we can use element selector. We need to use the html tag name.

<script language="javascript" type="text/javascript">
$("p").css("border", "5px solid green");
</script>

Above code will select all p (paragraph) elements of the web page and apply css style border width as 5 pixel, style as solid and color as green.

How to select an element having a specific id - ID Selector (“#id”)
To select an element having a specific id, id selector can be used. We need to prefix the id with “#” (hash symbol).

<script language="javascript" type="text/javascript">
$("#p1").css("border", "5px solid green");
</script>

Above code will select all html elements having id attribute as “p1” and apply css style border width as 5 pixel, style as solid and color as green.

How to select multiple elements at a time? Multiple Selector (“selector1, selector2, selectorN”)
To select multiple elements having different attributes, multiple selector can be used. We can mix the class selector, element selector, id selector all in this selector separated by “,” (comma).

<script language="javascript" type="text/javascript">
$("p.class1, #p1").css("border", "5px solid green");
</script>

Above code will select all paragraph (p) having class attribute set as “class1” and all html elements having id attribute as “p1” and apply css style border width as 5 pixel, style as solid and color as green.

How to select an element based on its attribute - Attribute Selector (element[‘attribute$=“name”]’)
To select an element based on a particular attribute value, attribute selector can be used. For example, if we have multiple textboxes on the page but we want to select all the textboxes which ends with id as “txtName”, we can use attribute selector.

<script language="javascript" type="text/javascript">
$('input[id$="txtName"]').val('My data');
</script>

Above code snippet will select the textboxes having id ending with “txtName” and set its value as “My data”.

Notice that as against all other selectors, this selector is written in the single quote (‘) instead of double quote (“) however the attribute value is written in the double quote (“).

How to select the first child of the parent element? - First child selector
To select first child of the parent element first child selector can be used.

<script language="javascript" type="text/javascript">
$("#div2 p:first-child").css("background", "red");
</script>

Above code snippet will select the first paragraph (p) element that is inside the div element whose id is “div2” and will change the background color as red.

How to select last child of the parent element? – Last child selector
To select the last child of the parent element last child selector can be used.

<script language="javascript" type="text/javascript">
$("#div2 p:last-child").css("background", "red");
</script>

Above code snippet will select the last paragraph (p) element that is inside the div element whose id is “div2” and will change the background color as red.

How to select a specific child of the parent element? nth child selector
To select the specific child of the parent element nth child select can be used.

<script language="javascript" type="text/javascript">
$("#div2 p:nth-child(2)").css("background", "red");
</script>

Above code snippet will select the 2nd paragraph (p) element that is inside the div element whose id is “div2” and will change the background color as red.

Feel free to contact me for any help related to jQuery, I will gladly help you.