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

Tags: