• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer
  • Core Java
  • Design Patterns
  • JSP
  • Servlets
  • Building Tools
  • jQuery
  • Spring
  • Hibernate
  • Mongo DB
  • More
    • HTML
    • SCJP
    • AJAX
    • UML
    • Struts
    • J2EE
    • Testing
    • Angular JS

J2EE Reference

  • Home
  • About Us
    • Java Learning Centers
  • Contact Us

jQuery

Adding and Removing CSS classes using Jquery methods

January 23, 2013 By j2eereference Leave a Comment

addClass() method of Jquery

Adding a class to an element in jquery is very simple.  The classes can be added using addClass() method. One or more classes can be added to element. Single class can be added to multiple elements. The following example shows adding single class to multiple elements and also adding more than one class to single element.

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html><html>
 
<head>
 
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
 
<script>
 
$(function(){
 
$("button").click(function(){
 
$("p,h3").addClass("htmlClass");
 
$("div").addClass("cssClass");
 
});
 
});
 
</script>
 
<style>
 
.htmlClass {
 
font-style: italic;
 
color: #D02357;
 
}
 
.cssClass {
 
font-weight: bold;
 
color: #28721B;
 
}
 
</style>
 
</head>
 
<body>
 
<p> Jquery is a Javascript library!! </p>
 
<h3> This is from j2eereference.com</h3>
 
<div> Learn jQuery from j2eereference.com </div>
 
<button>Click to add class</button>
 
</body>
 
</html>

 

jQuery-2

On click output will be :

jQuery-3

removeClass() method of Jquery

The classes can be removed using removeClass() method. One or more classes can be removed of an element.The following example shows removing single class of multiple elements and removing more than one class of single element.

Above same example is modified to remove the classes.

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
$(function(){
$("button").click(function(){
$("p,h3").removeClass("htmlClass");
$("div").removeClass("cssClass");
});
});
</script>
 
<style>
.htmlClass {
font-style: italic;
color: #D02357;
}
.cssClass {
font-weight: bold;
color: #28721B;
}
</style>
</head>
 
<body>
<p class="htmlClass"> Jquery is a Javascript library!! </p>
<h3 class="htmlClass"> This is from j2eereference.com </h3>
<div class="cssClass"> Learn jQuery from j2eereference.com </div>
<button>Click to remove css class</button>
</body>
</html>

 

jQuery-4

On click output will be :

jQuery-5

Filed Under: jQuery

jQuery and AJAX

January 22, 2013 By j2eereference 1 Comment

jQuery and AJAX

jQuery provides several methods for AJAX functionality.

By using jQuery AJAX methods, we can get text, HTML, XML, or JSON from the server using either HTTP Get or HTTP Post . We can load the external data directly into the selected HTML elements of your web page.

Now let’s see how we can load the external data directly into a selected HTML element of our page using jQuery AJAX methods.

Here in the below example we have myPage.html file which will invoke the jQuery AJAX method to load the data from another HTML file called myData.html

Make sure that you have jquery-1.8.2.js saved under the folder script.

myPage.html

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>j2eereference.com - jQuery Ajax </title>
<style type="text/css">
body{
width: 400px;
margin: 50px auto;
}
#myDiv{
width: 400px;
height: 150px;
background-color: #999999;
color: #333333;
}
button{
width: 400px;
}
</style>
<script type="text/javascript" src="script/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function(){
$("#myBtn").click(function(){
$("#myDiv").load("myData.html a:eq(0)", function(response,status,xhr){
if(status == "error"){
alert(xhr.statusText)
}
});
})
})
</script>
</head>
<body>
<div id="myDiv"></div>
<button id="myBtn"> Get Data</button>
</body>
</html>

myData.html

XHTML
1
2
3
4
5
6
7
8
9
10
<html>
<head>
<title> Hello i am the details page </title>
</head>
<body>
<div id="MainContent">Hello every one I am the Main Content</div>
<a name="ajax"  href="http://wwww.j2eereference.com">j2eereference.com</a>
<a name="jQuery"  href="http://209.97.166.197/2012/12/adding-css-using-jquery/">Adding css using jQuery</a><br/>
</body>
</html>

Output:

jqueryAjax-1

Here you can notice that when you click on Get Data button , You are getting data from myData.html.

$(“#myBtn”).click(function(){  //This will trigger the click action on myBtn
$(“#myDiv”).load(“myData.html a:eq(0)”, function(response,status,xhr){ // will load the value of  first  Anchor tag in data .html
if(status == “error”){
alert(xhr.statusText)
}
});
})

 

Filed Under: jQuery

Adding css using jQuery

December 5, 2012 By j2eereference Leave a Comment

It is very easy to add css using jQuery. Lets understand this by different examples below.

Example 1:

Adding css for <li> tag

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
&lt;title&gt;jQuery Basics&lt;/title&gt;
&lt;script type="text/javascript" src="script/jquery-1.8.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(function(){
$("li").css("border","2px solid red");
})
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;ul id="item1"&gt;
    &lt;li&gt;List Item one&lt;/li&gt;
    &lt;li&gt;List Item two&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt; Paragraph One &lt;/p&gt;
  &lt;p&gt; Paragraph two&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Output

Here  you can notice that the css is applied for all the <li>.

Example 2:

Adding multiple style properties.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
&lt;title&gt;jQuery Basics&lt;/title&gt;
&lt;script type="text/javascript" src="script/jquery-1.8.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(function(){
$("li").css({border: "2px solid red" , margin: "10px"});
})
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;ul id="item1"&gt;
    &lt;li&gt;List Item one&lt;/li&gt;
    &lt;li&gt;List Item two&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt; Paragraph One &lt;/p&gt;
  &lt;p&gt; Paragraph two&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Output

Here  you can notice that the margin and border properties are applied for all the <li>.

Example 3 :

Adding css for a particular ID.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
&lt;title&gt;jQuery Basics&lt;/title&gt;
&lt;script type="text/javascript" src="script/jquery-1.8.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(function(){
$("#item1").css("border","2px solid red");
})
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;ul id="item1"&gt;
    &lt;li&gt;List Item one&lt;/li&gt;
    &lt;li&gt;List Item two&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt; Paragraph One &lt;/p&gt;
  &lt;p&gt; Paragraph two&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Output

Here  you can notice that css is applied for all the tags coming under the id ‘item 1’.

Filed Under: jQuery

jQuery

December 3, 2012 By j2eereference Leave a Comment

What is jQuery

jQuery is a JavaScript Library which simplifies JavaScript programming, HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Your first jQuery code

Lets see an example which will popup an alert while loading the page using jQuery.

1
2
3
4
5
6
7
8
9
10
&lt;html&gt;
&lt;script type="text/javascript" src="script/jquery-1.8.2.js"&gt; &lt;/script&gt;
&lt;script  type="text/javascript"&gt;
window.jQuery("document").ready(function(){
alert("This is from j2eereference.com");
})
&lt;/script&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;

 

Here you can notice that we have included a java script file –  jquery-1.8.2.js , Which provides many features. You can download this js file from jQuery website.

 

jQuery provides a shortcut ‘$ ‘ for window.jQuery(“document”).ready , By which we can rewrite the code as below.

1
2
3
4
5
6
7
8
9
10
&lt;html&gt;
&lt;script type="text/javascript" src="script/jquery-1.8.2.js"&gt; &lt;/script&gt;
&lt;script  type="text/javascript"&gt;
$(function(){
alert("This is from j2eereference.com");
})
&lt;/script&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;

 

Filed Under: jQuery

Primary Sidebar

FOLLOW US ONLINE

  • View J2eereference-166104970118637’s profile on Facebook
  • View j2eereference’s profile on Twitter
  • View j2eereference’s profile on LinkedIn

Subscribe by email

Recent posts

  • Java Buzzwords
  • Anonymous Inner Class in Java
  • Network Programming – java.net Package
  • Java Regular Expressions
  • Method Local Inner Class in Java
  • URL Processing in Java
  • Iterator Design Pattern Implementation using Java
  • Strategy Design Pattern Implementation using Java
  • Decorator Design Pattern
  • Adapter Design Pattern Implementation using Java
  • JSF Composite Components
  • JSF UI Components
  • What is JavaServer Faces (JSF)?
  • GOF Design Patterns
  • History and Need for Design Patterns

Footer

Core Java
Design Patterns
JSP
Servlets
HTML
Building Tools
AJAX
SCJP
jQuery
Testing
Spring
UML
Struts
Java Centers
Java Training
Home
About Us
Contact Us
Copyright © j2eereference.com. All right reserved.