Jquery DOM
Written By: Avinash Malhotra
jQuery DOM
As compare to JavaScript, its easier to handle and manipulation DOM. JQuery methods are designed in a easier manner to handle DOM.
$(document) in jQuery is referring to DOM. We can add element, remove element, add attribute, remove attribute, and change css of an DOM Element using jquery.
jQuery DOM
$(document).ready(function(){
})
.html()
.html() method of jQuery is used to get and set innerHTML of html element. There is no argument required to get innerHTML. But to set innerHTML, we have to pass argument as string text or element.
.html() get
paragraph
<p>paragraph</p>
<script>
var p=$("p").html();
console.log(p);
</script>
<p> p <i>tag</i>. </p>
<script>
var p=$("p").html();
console.log(p);
</script>
.html() set
new text
$("p").html("new text");
new text
$("p").html("new <u>text</u>");
while getting html(), jQuery will pick first element from DOM, but in setting, jQuery will manipulation all p elements.
.text()
jQuery .text() method is used to get and set text content inside any element including descendants.
.text() get
paragraph
<p>paragraph</p>
<script>
var p=$("p").text();
console.log(p);
</script>
<p> p <i>tag</i>. </p>
<script>
var p=$("p").text();
console.log(p);
</script>
.text() set
new text
$("p").text("new text");
new <u>text</u>
$("p").text("new <u>text</u>");
while getting, jQuery text() will pick all elements from DOM, same in setting text().
.val()
jQuery .val() method is used to get and set value of inputs, radio buttons, checkbox, textarea, select dropdown and buttons. To get value, use .val(), and to set value, use .val(value).
Get Value
1234
<input type="text value="1234">
<script>
var val=$('input').val();
console.log(val);
</script>
Set Value
<input type="text">
<script>
$("input").val("1234");
</script>
.attr()
.attr() method is used to get and set html attributes form DOM. We can get and set attribute using same method. See example
get attribute
p1
<p id="p1">para</p>
<script>
var id=$("p").attr('id');
console.log(id);
</script>
set attribute
<p>para</p>
<script>
$("p").attr('id','p1');
</script>
If an attribute is already available, attr() will overwrite attribute.
addClass, removeClass and toggleClass
To add, remove and toggle class attribute and its value, jQuery has dedicated methods like addClass, removeClass and toggleClass.
.addClass()
.addClass() method is used to add class to element. If class is already available, this method will add multiple values for class.
<p>paragraph</p>
<script>
$('p').addClass('para');
</script>
<p class="para">paragraph</p>
<script>
$('p').addClass('even');
</script>
.removeClass()
.removeClass() method is used to remove existing class from element.
<p class="para">paragraph</p>
<script>
$('p').removeClass('para');
</script>
.toggleClass()
.toggleClass() method is used to add and remove class name from element. if class is not available, .toggleClass() will add class, but if class name is already there, .toggleClass() will remove class name.
<p class="para">paragraph</p>
<script>
$('p').toggleClass('para');
</script>
<p>paragraph</p>
<script>
$('p').toggleClass('para');
</script>
Add Class on Click
In this example, we are going to add class on multiple buttons on click using jQuery click function.
<style>
button{
padding: 6px 10px;
border:1px solid;
background:#fff;
}
.active{
background:#333;
color:#fff;
}
</style>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$(this).addClass("active");
});
})
</script>
Add Class on Single Element
In this example, we are going to add class on single button on click using jQuery click function.
<style>
button{
padding: 6px 10px;
border:1px solid;
background:#fff;
}
.active{
background:#333;
color:#fff;
}
</style>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("button").removeClass("active");
$(this).addClass("active");
});
})
</script>