jQuery tricks for DOM Manipulation
jQuery tricks for DOM Manipulation
In this article we will explore jQuery’s methods that help a web developer in their daily work.
1. Changing attributes with jQuery
We can change HTML DOM elements like Divs, Lists, form elements etc ‘s attributes using jQuery very easily.
addClass
We can use add class to each set of matched element
This function can take a class name as .addClass(.className)
$('#item').addClass("blue");
or can take a function .addClass(function()) -> String
As of jQuery 1.4, the .addClass() method’s argument can receive a function.
$( "div" ).addClass(function( index, currentClass ) {
var addedClass;
if ( currentClass === "red" ) {
addedClass = "green";
$( "p" ).text( "There is one green div" );
}
return addedClass;
});
parents([])
parentts function have brackets inside it. It means this function can take an argument but that is optional and can be omitted.
.toggleClass(className)
$( "div.tumble" ).toggleClass( "bounce" )
.append Method
Jquery’s .append element inserts content at the end of each element in the set of all matched elements.
<h2>Subjects</h2> <div class="container"> <div class="inner">Computer Science</div> <div class="inner">Commerce</div> </div>
We use append method to append a new element at the end
$( ".inner" ).append( "<div class='inner'>Arts</div>" );
<h2>Subjects</h2> <div class="container"> <div class="inner">Computer Science</div> <div class="inner">Commerce</div> <div class="inner">Arts</div> </div>
.attr() method
Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
<p class="lang">PHP is a great Language</p>
var currentClass = $( "p" ).attr( "class" ); //To change the class
$( "p" ).attr( "class" , "container");
We will get class attribute of paragraph element.
.before
Insert content, specified by the parameter, before each element in the set of matched elements.
<h2>Subjects</h2> <div class="container"> <div class="inner">Computer Science</div> <div class="inner">Commerce</div> </div>
We use append method to append a new element at the end
$( ".inner" ).before('<div class="inner">Arts</div>')
And our HTML become as below.
<h2>Subjects</h2> <div class="container"> <div class="inner">Arts</div> <div class="inner">Computer Science</div> <div class="inner">Commerce</div> </div>
.css()
Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.
<p>This is a paragraph.</p>
Now with CSS method we change its color.
$(function){
$( "p" ).css( "color", "red" );
})
This command will change color to red.
.html
Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.
<div id="container"> <div class="row">This is heading</div> </div>
To change content of the container class we use .html method.
$( "#container" ) .html( "<p>This is a paragraph<em> with emphasized text!</em></p>" );
now HTML will become
<div class="container"> <p>This is paragraph <em> with emphasized!</em></p> </div>
.remove
Remove the set of matched elements from the DOM.
<div class="container"> <div class="hello">Hello</div> <div class="goodbye">Goodbye</div> </div>
To remove the content with class hello
$( ".hello" ).remove();
So the HTML content becomes
<div class="container"> <div class="goodbye">Goodbye</div> </div>
.text
Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div>
The code
$( "div.demo-container" ).text( "<p>This is a test.</p>" );
will produce the following DOM output:
<div class="demo-container"> <p>This is a test.</p> </div>
.val()
Get the current value of the first element in the set of matched elements or set the value of every matched element.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>val demo</title>
<style>
p {
color: blue;
margin: 8px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input type="text" value="some text">
<p></p>
<script>
$( "input" )
.keyup(function() {
var value = $( this ).val();
$( "p" ).text( value );
})
.keyup();
</script>
</body>
</html>
.wrap
Wrap an HTML structure around each element in the set of matched elements.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>wrap demo</title>
<style>
div {
border: 2px solid blue;
}
p {
background: yellow;
margin: 4px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
$( "p" ).wrap( "<div></div>" );
</script>
</body>
</html>
These are some JQuery methods for manipulating Dom.
In next article we will explore jQuery in depth.
Note: with reference from http://jquery.com
About Author
maz
Maz is a software engineer, and a Zend Certified Engineer . His area of expertise contains PHP /Mysql, Node JS / MongoDB, Angular JS, IOS and android.
