In the following article we will see how to fetch and modify the elements on the page.
JQuery Selectors
The first task when working with JQuery is selecting the elements so that we can call any JQuery function on the returned elements to manipulate them .The elements that we want selected could be specified by using simple selectors or we need to use some complex selectors to specify the elements we want to operate upon.
JQuery uses the same selector syntax as the CSS we are already familiar with. In CSS to specify the elements we want we use following basic types of selectors.
Div This matches all the <div> elements
#ID This matches the elements that have the id of ID
.ClassName This matches the elements where Class ClassName is used.
p div This matches div which are declared inside <p> elements
These basic selectors gives us high level of control over the elements we want to select.
Child Selectors
One of the important types of JQuery selectors are Child Selectors in which we separate the parent of the element and the element using the > character. If we want to select the direct <a> child of the <div> we can use the following
div > a
If we use the following markup and script in the page we get the output as shown below.
<script type="text/javascript">
$(document).ready(function () {
alert($("div > p").html());
});
</script>
<div id="div2">
<p>
Hi from ashish
</p>
</div>
Attribute selectors
Attribute selectors are used select the elements that have specific value for a particular attribute.
$("Input[type='text']")
The above matches all the input elements that have type attribute as text.
To match elements whose attribute value end with some specific string we use
$("Input[type$='text']")
Positional Selectors
Sometimes we need to select an element based on its location on the page. For Instance we may need to select the first div on the page or every alternate row in a table. JQuery provides positional selectors for such kind of scenario.
Suppose if we want to select the first paragraph on the page we can use p:first. If we want to select the odd numbered <p> element on the page we can use p:odd. Similarly if we want to select the even numbered elements on the page we can use p:even.
We can also specify the hierarchy like if want to select the first <p> element contained inside a table cell we can use td p:first.
Creating New HTML
We can easily create new HTML and add it to the DOM tree .Its as simple as calling the $() function with the HTML we want to add to the page. We can add the HTML to the page using the appendTo() method on the existing HTML element.
$("<div>
</div>").appendTo("#myDiv");
The above statement append the <div> element to the existing <div> element having ID "myDiv".
Modifying elements
As we know selectors returns the matched element set .So first task is identifying the elements which we want to modify. To identify the elements which we want to modify we use the each(function) function. This function takes a function as an argument.
$("div").each(function(n){ this.HTML="div"});
The above statement executes the function specified as the parameter of the each() function for each matched element.
To modify the attributes we use the attr(name,value) function.
There are two important things to note about this function.
- This function sets the value of each matched element.
- The value parameter can be string, object or a function.
$('div').attr('innerHTML',function(index)
{
return 'I am a div having the name'+this.id
});
The above statement sets the HTML attribute of each <div> element to the string we specified in the fuction.
In order to remove the attribute from the DOM we use removeAttr(name)function.
As we saw earlier to modify the HTML of an element we use the html(string) function. When used without any parameters this html() function returns the HTML of the first matched element in the set.
As we know the JQuery function returns the a group of matched elements .To convert this group of elements to an array we use the get() function.
The following creates an array of all the <div> on the page.
var matchedElements = $('div').get();
The val() function gets the value of the first matched element .When used with a parameter the val(string) function sets the value of each element in the set.