My Recipes In jQuery - DOM Manipulation Part 1

DOM stands for Document Object Model and is a mechanism for representing and interacting with your HTML, XHTML or XML documents. JQuery provides methods to manipulate DOM in an efficient way. You do not need to write lengthy code to modify the value of any element's attribute. One very important part of jQuery is the possibility to manipulate the DOM.

Figure: JQuery Document Object Model

A few of these methods in this section manipulate the DOM in some manner.

.attr ()
.css ()
.add Class ()
.remove Class ()
.val ()
.attr ()

The attr () method sets or returns attributes and values of the selected elements. Get the value for each element individually using a looping construct such as jQuery's .each () or .map () method.

Syntax

Selector. attr (key, function)

attr

.css ()

JQuery includes a handy way to get and set CSS properties of elements. It’s really easy to change CSS with jQuery, this is the format of the .CSS () function.

Syntax

Selector.css ("property name")

css

.add Class ()

The add Class () method adds one or more class names to the selected elements. This method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.

Syntax

$(selector).add Class (class name, function (index, old class))

.remove Class ()

The removeClass () method removes one or more class names from the selected elements. If no class names are specified in the parameter, all classes will be removed.

Syntax

$(selector).removeClass(classname,function(index, current class))

.val ()

The Val () method returns or sets the value attribute of the selected elements such as input, select and text area. The Val () method is mostly used with HTML form elements.

Syntax

$(selector).val()

The following is the HTML code I used for this tutorial.

HTML

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>SAMPLE</TITLE>
</head>
<body>
<h1 align="center">
<imgclassimgclass="banner"src="https://cdn2.iconfinder.com/data/icons/micon-social-pack/512/jquery-128.png">
</h1>
<form>
<div id="shuffle">
<div id="cell1">1</div>
<div id="cell2">2</div>
<div id="cell3">3</div>
<div id="cell4">4</div>
<div id="cell5">5</div>
<div id="cell6">6</div>
<div id="cell7">7</div>
<div id="cell8">8</div>
<div id="cell9">9</div>
<div id="cell10">10</div>
<div id="cell11">11</div>
<div id="cell12">12</div>
<div id="cell13">13</div>
<div id="cell14">14</div>
<div id="cell15">15</div>
<div id="cell16">16</div>
<div id="cell17">17</div>
<div id="cell18">18</div>
<div id="cell19">19</div>
<div id="cell20">20</div>
<div id="cell21">21</div>
<div id="cell22">22</div>
<div id="cell23">23</div>
<div id="cell24">24</div>
<div id="cell25">25</div>
<div id="cell26">26</div>
<div id="cell27">27</div>
<div id="cell28">28</div>
<div id="cell29">29</div>
<div id="cell30">30</div>
</div>
<a href="#" id="btn1" class="button">Div Shuffle</a>
<br>
<a href="#" id="btn2" class="button">Background Theme</a>
<br>
<a href="#" id="btn3" class="button">Add and Remove Class</a>
<br>
<a href="#" id="btn4" class="button">Reload</a>
</form>
</body>
</html>

The preceding HTML code defines the div element groups and their child elements. Use the href attribute tag to add multiple buttons.

CSS

Use CSS code to make the look and feel for all the HTML elements as we used before in the HTML part. The following is the CSS code I used in this tutorial.

@
import url(http: //fonts.googleapis.com/css?family=Varela+Round);
body {
background - color: DodgerBlue;
}
form {
margin - left: 25 % ;
margin - right: 25 % ;
width: 100 % ;
}
.highlight {
background: green;
opacity: 0.3;
filter: alpha(opacity = 1);
}#
shuffle > div {
float: left;
text - align: center;
line - height: 50 px;
width: 50 px;
height: 50 px;
color: rgba(0, 0, 0, 0.5);
background - color: Gold;
border - radius: 5 px;
margin: 5 px;
}
#
shuffle {
background - color: DodgerBlue;
max - width: 100 px;
line - height: 40 px
height: 360 px;
float: left;
font - size: 16 pt;
filter: alpha(opacity = 40);
padding: 10 px;
max - width: 300 px;
}
.button {
border: 1 px# E1AD00 solid; - webkit - border - radius: .25e m; - moz - border - radius: .25e m;
border - radius: .25e m;
display: inline - block;
color: #7B5F00;
font-size: .9em;
background: # F4D03F;
background: -moz - linear - gradient(top, #FFF2C7 0, #FFD548 4 % , #FAC100 100 % );
background: -webkit - gradient(linear, left top, left bottom, color - stop(0 % , #FFF2C7), color - stop(4 % , #FFD548), color - stop(100 % , #FAC100));
background: -webkit - linear - gradient(top, #FFF2C7 0, #FFD548 4 % , #FAC100 100 % );
background: -o - linear - gradient(top, #FFF2C7 0, #FFD548 4 % , #FAC100 100 % );
background: -ms - linear - gradient(top, #FFF2C7 0, #FFD548 4 % , #FAC100 100 % );
background: linear - gradient(to bottom, #FFF2C7 0, #FFD548 4 % , #FAC100 100 % );
filter: progid: dximagetransform.microsoft.gradient(startColorstr = '@color', endColorstr = 'darken(@color, 15%)', GradientType = 0);
padding: 8 px 14 px;
position: relative;
text - align: center;
text - decoration: none;
text - shadow: 0 1 px 0 rgba(255, 255, 255, 0.25);
font - size: 15 px;
font - family: 'Helvetica Neue',
Helvetica,
Arial,
sans - serif;
margin: 2e m;
}
.button: active {
background: #F5D76E;
border - color: #AE8600# E1AD00# E1AD00;
padding: 9 px 14 px 7 px;
top: auto;
}

Before adding the CSS code, be sure it covers the entire browser display area. The preceding CSS code defines the entire HTML element design process.

JQuery scripting

The first step in the jQuery scripting part is to include the required jQuery library reference in the head element of your page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

The following is the complete jQuery and JavaScript code I used in this tutorial.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#shuffle div").click(function(e) {
var Original = ($(this).attr("id"));
alert("You Clicked : " + Original)
});
$("#shuffle div").hover(function() {
$(this).css('cursor', 'pointer');
}, function() {
$(this).css('cursor', 'auto');
});
$('#btn1').click(function() {
var parent = $("#shuffle");
var divs = parent.children();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
$('#btn2').click(function() {
$("body,#shuffle").css("background-color", get_random_color());
});
$('#btn3').click(function() {
var $divs = $("#shuffle > div ").removeClass('highlight');
rnd = Math.floor(Math.random() * $divs.length);
$divs.eq(rnd).addClass('highlight');
});
$('#btn4').click(function() {
location.reload();
});
});
</script>

The preceding JQuery scripting code improves the performance of the application and defines the entire HTML element UI functionality and effects.

Complete code

The following is the complete HTML, CSS and JQuery scripting codes I used in this tutorial.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>SAMPLE</TITLE>
<style>
@import url(http://fonts.googleapis.com/css?family=Varela+Round);
body {
background-color: DodgerBlue;
}
form {
margin-left: 25%;
margin-right: 25%;
width: 100%;
}
.highlight {
background: green;
opacity: 0.3;
filter: alpha(opacity=1);
}
#shuffle > div {
float: left;
text-align: center;
line-height: 50px;
width: 50px;
height: 50px;
color: rgba(0, 0, 0, 0.5);
background-color: Gold;
border-radius: 5px;
margin: 5px;
}
#shuffle {
background-color: DodgerBlue;
max-width: 100px;
line-height: 40px height: 360px;
float: left;
font-size: 16pt;
filter: alpha(opacity=40);
padding: 10px;
max-width: 300px;
}
.button {
border: 1px #E1AD00 solid;
-webkit-border-radius: .25em;
-moz-border-radius: .25em;
border-radius: .25em;
display: inline-block;
color: #7B5F00;
font-size: .9em;
background: #F4D03F;
background: -moz-linear-gradient(top, #FFF2C7 0, #FFD548 4%, #FAC100 100%);
background: -webkit-gradient(linear, left top, left bottom, color- stop(0%, #FFF2C7), color-stop(4%, #FFD548), color-stop(100%, #FAC100));
background: -webkit-linear-gradient(top, #FFF2C7 0, #FFD548 4%, #FAC100 100%);
background: -o-linear-gradient(top, #FFF2C7 0, #FFD548 4%, #FAC100 100%);
background: -ms-linear-gradient(top, #FFF2C7 0, #FFD548 4%, #FAC100 100%);
background: linear-gradient(to bottom, #FFF2C7 0, #FFD548 4%, #FAC100 100%);
filter: progid: dximagetransform.microsoft.gradient(startColorstr='@color', endColorstr='darken(@color, 15%)', GradientType=0);
padding: 8px 14px;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
font-size: 15px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 2em;
}
.button:active {
background: #F5D76E;
border-color: #AE8600 #E1AD00 #E1AD00;
padding: 9px 14px 7px;
top: auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#shuffle div").click(function(e) {
var Original = ($(this).attr("id"));
alert("You Clicked : " + Original)
});
$("#shuffle div").hover(function() {
$(this).css('cursor', 'pointer');
}, function() {
$(this).css('cursor', 'auto');
});
$('#btn1').click(function() {
var parent = $("#shuffle");
var divs = parent.children();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
$('#btn2').click(function() {
$("body,#shuffle").css("background-color", get_random_color());
});
$('#btn3').click(function() {
var $divs = $("#shuffle > div ").removeClass('highlight');
rnd = Math.floor(Math.random() * $divs.length);
$divs.eq(rnd).addClass('highlight');
});
$('#btn4').click(function() {
location.reload();
});
});
</script>
</head>
<body>
<h1 align="center"><img class="banner" src="https://cdn2.iconfinder.com/data/icons/micon-social-pack/512/jquery-128.png"></h1>
<form>
<div id="shuffle">
<div id="cell1">1</div>
<div id="cell2">2</div>
<div id="cell3">3</div>
<div id="cell4">4</div>
<div id="cell5">5</div>
<div id="cell6">6</div>
<div id="cell7">7</div>
<div id="cell8">8</div>
<div id="cell9">9</div>
<div id="cell10">10</div>
<div id="cell11">11</div>
<div id="cell12">12</div>
<div id="cell13">13</div>
<div id="cell14">14</div>
<div id="cell15">15</div>
<div id="cell16">16</div>
<div id="cell17">17</div>
<div id="cell18">18</div>
<div id="cell19">19</div>
<div id="cell20">20</div>
<div id="cell21">21</div>
<div id="cell22">22</div>
<div id="cell23">23</div>
<div id="cell24">24</div>
<div id="cell25">25</div>
<div id="cell26">26</div>
<div id="cell27">27</div>
<div id="cell28">28</div>
<div id="cell29">29</div>
<div id="cell30">30</div>
</div>
<a href="#" id="btn1" class="button">Div Shuffle</a>
<br>
<a href="#" id="btn2" class="button">Background Theme</a>
<br>
<a href="#" id="btn3" class="button">Add and Remove Class</a>
<br>
<a href="#" id="btn4" class="button">Reload</a>
</form>
</body>
</html>

Output

1. Open the main Index html file in the web browser.

Figure 1: Main index page

2. Press the div element to get div value.

Figure 2: DIV element value

3. Press the div shuffle button to shuffle the div elements group.

Figure 3: Shuffle div elements group

Figure 4: Shuffle div elements group

4. Press background theme button to change theme.

Figure 5: Shuffle div elements group

Figure 6: Shuffle div elements group

5. Press add and remove class button to add the class dynamically.

Figure 7: Add and remove class dynamically

Figure 8: Add and remove class dynamically

6. Press reload button to reset the page setup.

Figure 9: Reset the page setup

Conclusion

I hope you liked this useful article. It will be useful for jQuery beginners. Please provide your valuable feedback and suggestions.

Live demo link: Jsfiddle

References

10 Comments

Join the conversation! Your thoughts help the community grow.

Karthikeyan K11y ago
Thank you Santhakumar sir
Karthikeyan K11y ago
Thank you Pankaj
Karthikeyan K11y ago
Thank you Mohammed Ibrahim sir
Karthikeyan K11y ago
Thank you Rajeesh sir
Karthikeyan K11y ago
Thanks Harshad Pansuriya
Santhakumar Munuswamy11y ago
Good Article. Thanks for sharing
Pankaj Kumar Choudhary11y ago
Great Article Sir..........
Mohammed Ibrahim11y ago
nice
Rajeesh Menoth11y ago
Good Explanation...
Harshad Pansuriya11y ago
Nice One