jQuery Awesome Dom Manipulation

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

In Plain old java-script we were write as below to select the DOM element to process in the java-script.

<div id=”some-element”></div>

document.getElementById(“some-element”);

jQuery change this in to as below for it’s short syntax style.

$(“#some-lement”);

Please note in jquery convention id will be use # notation where as class will be use . notation.

If we wanted to select element by class name,than we have to write

$(“.some-class”);

but here it defers from ID in a way that ID of the element should be unique in a web-page,where a class can be used in other elements as well,so if we selecting using class be careful to filter other elements if you do not want.

 

What a statement : #jquery changes the way people write the code

— ahesanali (@ahesan_suthar) May 7, 2014

Once you have selected an element using jQuery selectors you can do DOM manipulations using the API provided by jQuery. Below are some simple example.

To use jquery in your web page download jQuery script from http://jquery.com/download/.(Please download latest version so that you can have more features)

Add <script> tag to your page where src points to location of your jquery.js file

<script src=”jquery.js”></script>

1.  Add or Remove css classe to an element.

$(“#some-lement”).addClass(“class1 class2”);// Adding New css classes to element

$(“#some-lement”).removeClass(“class1 class2”);// removing css classes from element

2. Add or Retrieve an attribute of an element.

<img src=”http://myhost.net/image002&#8243; alt=”simple_image” id=”my_image” />

$(“#my_image”).attr(“alt”);// will return “simple_image” String

$(“#my_image”).attr(“alt”,”New Alt text”);// will set “New Alt text” to image element with id my_image.

This is just an example for <img> HTML tag, you can add or retrieve attribute of any HTML tag/element.

3.You can easily add, append or remove DOM

<div id=”my_elem”>

<p>Hello this is my para</P>

</div>

Add: $(“#my_elem”).add(“<span>Hello this simple new text</span>”);

Result:

<div id=”my_elem”>

<span>Hello this simple new text</span>

</div>

Append: $(“#my_elem”).append(“<span>Hello this simple new text</span>”);

Result:

<div id=”my_elem”>

<p>Hello this is my para</P>

<span>Hello this simple new text</span>

</div>

Remove: $(“#my_elem”).remove(“p”);

Result:

<div id=”my_elem”>

</div>

Above examples are very basic example of jQuery DOM manipulation, i can not cover all features provided by jQuery in this blog post because to do so content will be as long as compared to a book, but if you are really interested and explore more you can refer jQuery API Documentation.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s