Applying Different Styles using jQuery

Applying Styles

The addClass(classes) method can be used to apply defined style sheets onto all the matched elements. You can specify multiple classes separated by space.

 

Example

Following is a sample example which set src attribute of an image tag to a correct location.

<html>

<head>

<title>The title</title>

<script type=”text/javascript” src=”/jquery/jquery-1.3.2.min.js”></script>

<script type=”text/javascript” language=”javascript”>

$(document).ready(function(){

$(“em”).addclass(“selected”);

$(“#myid”).addClass(“highlight”);

});

</script>

<style>

.selected {color:red; }

.highlight{background:yellow;}

</style>

</head>

<body>

<em title=”Bold and Brave”> This is first paragraph.</em>

<p id=”myid”> This is second paragraph.</p>

</body>

</html>

 

Useful Attribute Methods

Following table lists down few useful methods which you can use to manipulate attributes and properties:

 

MethodsDescription
attr(properties)Set a key /value object as properties to all matched elements.
attr(key,fn)Set a single property to a computes value, on all matched elements.
removeAttr(name)Remove an attribute from each of the matched elements.
hasclass(class)Returns true if the specified class is present on at least one of the set of matched elements.
removeClass(class)Removes all or the specified class(es) form the set of matched elements.
toggleClass(class)Adds the specified class if it is not present, removes the specified class if it is present.
html()Get the html contents (innerHTML) of the first matched element
html(val)Set the html contents of every of every matched element.
text()Get the combined text contents of all matched elements.
text(val)Set the text contents of all matched elements.
val()Get the input value of the first matched element
val(val)Set the attribute of every matched element if it is called on <input> but if it is called on <select>  with the passed <option> value then passed option would be selected, if it is called on check box or radio box then all the matching check box an d radiobox would be checked.

 

 

Similar to above syntax and examples, following examples give you understanding on using various attribute methods in different situation

 

$(“#myID”).attr(“custom”)        2 This would return value of attribute custom for the first element matching with ID myID.

 

$(“img”).attr(“alt”,”Sample Image”)  2 This sets the alt attribute of all the images to a new value “Sample Image”

 

$(“input”).attr({value:””,”Sample Image”);   2Sets the value of all <input> elements to the empty string, as well as sets the title to the string please enter a value.

 

$(“a[href^=http://]”).attr(“target”,”_blank”)    2 selects all links with an href attribute starting with http:// and set its target attribute to _blank

 

$(“a”).removeAttr(“target”)    2 This would remove target attribute of all the links.

 

$(“form”).submit(function() { $(“:submit”,this).attr(“disabled”,”disabled”);});   2 This would modify the disabled attribute to the value “disabled” while clicking submit button.

 

$(“p:last”).hasClass(“selected”)      2 This return true if last <p> tag has associated classselected.

 

$(“p”).text()  2 Returns string that contains the combined text contents of all matched<p> elements.

 

$(“p”).text(“<i>Hello World</i>”)   2 this would set “<i>Hello World</I> as text content of the matching <p> elements

 

$(“p”).html()    2 This returns the HTML content of the all matching paragraphs.

 

$(“div”).html(“Hello World”)      2 This would set the HTML Content of al matching <div> to Hello world.

 

$(“input:checkbox:checked”).val()     2Get the first value from a checked checkbox

 

$(“input:radio[name=bar]:checked”).val()   2Get the first value from a set of radio buttons

 

$(“button”).val(“Hello”)   2Sets the value attribute of every matched element <button>

 

$(“input”).val(“on”)       2 This would check all the radio or check box button whose value is “on”.

 

$(“select”).val(“Orange”)   2This would select Orange option in a dropdown box with options Orange, Mango and Banana.

 

$(“select”).val(“Orange”,”Mango”)  2 This would select orange and Mango options in a dropdown box with options Orange, Mango and Banana.

 

JQuery DOM Traversing

JQuery is a very powerful tool which provides a variety of DOM traversal methods to help us select elements in a document randomly as well as in sequential method.

Most of the DOM Traversal Methods do not modify the JQuery object and they are used to filter our elements from a document based on given conditions.

Find Elements by index 

Consider a simple document with the following HTML content.

<html>

<head>

<title>the title</title>

</head>

<body>

<div>

<ul>

<li> List item 1</li>

<li>list item 2</li>

<li>list item 3</li>

<li>list item4 </li>

<li>list item5 </li>

<li>list item6 </li>

</ul>

</div>

</body>

</html>

  • Above every list has list own index, and can be located directly by using eq(index) method as below
  • Every child element starts its index from Zero,thus,list item2 would be accessed by using $(“li”).eq(1) and so on.

 

Example:

Following is a simple example which adds the color to second item.

<html>

<head>

<title> The title</title>

<script type=”text/javascrpit” src=”/jquery/jquery-1.3.2.min.js></script>

<script type=”text/javascript” language=”javascript”>

$(document).ready(function(){

$(“li”).eq(2).addClass(“selected”);

});

</script>

<style>

.selected{color:red;}

</style>

</head>

<body>

<div>

<ul>

<li> list item 1</li>

<li> list item 2</li>

<li> list item 3</li>

<li> list item 4</li>

<li> list item 5</li>

<li> list item 6</li>

</ul>

</div>

</body>

</html>