Interating with DOM (Jquery)

Interacting with DOM :

Iterating through Nodes,
Modifying Dom Object
Modifying Attributes
Adding and removing Nodes
Modifying Styles
Modifying Classes

Iterating Through Nodes :

.each(function(index,Element)) is used to iterate through Jquery Object.

$(‘div’).each(function(index)

{
Alert(index+ ’=’ +$(this).text());
});

Iterates through each div element and returns its index number and text.

$(‘div’).each(function(index,elem)

{
Alert(index+ ’=’ +$(elem).text());
});

Elem = this

Example :

Div id are  blueDIv and RedDiv

$(documents).ready(function(){

Var output= $(‘#outputDIv);

$(‘div.bluediv,div.reddiv’).each(function (index)

{

Output.html(output.html()+”</br>” + index+ “ ”  + $(this).text())
}
});

This means raw DOM object

Modifying DOM Objects Properties :

The This.PropertyName statement can be used to modify an object’s Properties directly:

$(‘div).each(function(i)

{
This.title=”my Index=” +i;
});

Iterates through each div and modifies the title. If the property does not exist ,it will be added.

Modifying Multiple Attributes :

TO modify multiple attributes, Pass a JSON Object  containing Name/Value Pairs :
All the image |

$(‘img’).attr ({

Title: ‘My Image Title;,

Style:’border:2px solid back;’

});

Json Object passed and used to change title and border

Modifying Attributes :

Objecct attribures can be accessed using   attr();

Var val=$(‘#CustomerDiv’).attr(‘title’);

Retrieves the values of the Title attribute :

.attr(attributeName,Value) is the method used to access an object attributes modify the value:

$(‘img’).attr(‘title’,’My Image Title’);

Change the title attribute to a value of my image Title.

Whats, Json :

JSON Delimits object using   {  and  }

The  : character separates properties and values
{

FirstName : ‘jhon’,

LastName : ‘Doe’,
Address :    // THis is nested Json object
   {

             Street : ‘1234 anywhere st ,’,

            City : ‘GA’,
           State : ‘AX’
          Zipcode : 85675
   }
}

Adding and removing Nodes :

Four key methods handle inserting nodes into elements:

.append()

.appenTo()
.prepend()
.prependTo()

To remove node from an element use . Remove()

$(‘<Span> (office) </span>’).appendTo(‘.officePhone’);

Or

$(‘.officePhone’).append(‘<span>(office)</span>’);

Would result in (office) being added into each .officephone class element

Wrapping Elements :

<div class=”State”> Arizona<div>

$(‘.state’).wrap(‘<div class=”US_State” />’);

Result:

<div class=”US_State”>
<div class=”State”>Arizona </div>
</div>

.remove :

$(‘.phone,.location’).remove();

Modifying Styles :

 The .css() function can be used to modify an object’s style :

$(“div”).css(“color”,”red”);

All the DIVs

Multiple styles can be modified by passing a JSON object :

$(‘div’).css(
{
‘color’:’#ccff’,
‘font-weight’:bold’
});

Modifying Classes :

The four methods for working with CSS class attributes are  :

.addClass()

.hasClass()

.removeClass()

.toggleClass()

Example :  

$(‘p’).addClass(‘ClassOne’);

More than once class :

$(‘p’).addclass(‘classOne  ClassTwo’);

.hasClass() return true if the selected element has a matching class that is specified :

If($(‘p’).hasClass(‘styleSpecifi’))

{

// perform work

}

.removeCLass() can remove one or more classes :

 $(‘p’).removeclass(‘classone classTwo’);

Remove all class attribures for the matching selector

$(‘p’).removeclass();

Toggling CSS Classes :

.toggleClass() alternates adding or removing a class based on the current presence or absence of the class

$(‘#phoneDetails’).toggleClass(‘highlight’);

<style type=”text\css”>

.highlight  { background:yellow; }

</style>

Example :

$(‘input[type=’text’]’).addclass(Highlight);


Example ( Text allows only charters)

HTML : 

Number : <input type="text" name="quantity" id="quantity" />&nbsp;
phone : <input type="text" name="namePhone" id="idphone"/> 
<span id="errmsg">
</span>

Jquery 

$(document).ready(function () {
  //called when key is pressed in textbox
  $("#quantity ,#idphone").keypress(function (e) {
     //if the letter is not digit then display error and don't type anything
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        //display error message
        $("#errmsg").html("Digits Only").show().fadeOut("slow");
               return false;
    }
   });

});

CSS : 

#errmsg
{
color: red;

}