Web
Analytics
HTML Manipulation using Jquery - Tutorial

For Consultation : +91 9887575540

Stay Connected :

HTML Manipulation 

jQuery contains powerful methods for changing and manipulating HTML elements and attributes. It is also called DOM manipulation. It’s a very useful feature to build interactive application.

Getting and Setting Inner Content

alert(“HTML: ” + $(“#test”).html()); //Get content including HTML markup

$(“p”).html(“<div>Hello $!</div>”); //Sets  content of <p>

$(“div.a”).text($(“div.b”).html()); //Set Content  of <div> with class a using the content of <div> with class b




Getting and Setting Values of form elements

getting and Setting Inner Content

// get the value of the first checked checkbox

$(“input:checkbox:checked”).val();

Example

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”Scripts/jquery-2.2.3.js”></script>
<script>
$(document).ready(function () {
$(“#btn1”).click(function () {
var i = 0;
$(“input:checkbox:checked”).each(function () {

i += parseInt($(this).val());
})
$(“#result”).text(‘Total Value of ‘ + i);

})
});
</script>
</head>
<body>
<input type=”checkbox” name=”chk1″ value=”10″ />10
<input type=”checkbox” name=”chk1″ value=”20″ />20
<input type=”checkbox” name=”chk1″ value=”30″ />30
<input type=”checkbox” name=”chk1″ value=”40″ />40

<input type=”button” id=”btn1″ name=”btn1″ value=”Calculate values” />
<div id=”result”></div>
</body>
</html>

// set the value of the textbox

$(“input:text[name=’txt’]”).val(“Hello”);

// select or check lists or checkboxes with id=”lst”

$(“#lst”).val([“NY”,”IL”,”NS”]);

 Handling attributes

Getting and Setting Val

$(“a”).attr(“href”,”home.html”);    // <a  href=”home.html”>…</a>

 

example

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”Scripts/jquery-2.2.3.js”></script>
<script>
$(document).ready(function () {
$(“input:button[name=’btn1′]”).attr(“disabled”, “disabled”);
$(“input:button[name=’btn2′]”).attr(“accesskey”, “p”);

$(“input:button[name=’btn2′]”).click(function () {

alert(‘Button2 is clicked’);
})
$(“input:button[name=’btn3′]”).click(function () {

$(“input:button[name=’btn1′]”).removeAttr(“disabled”);

})
});
</script>
</head>
<body>
<input type=”button” id=”btn1″ name=”btn1″ value=”Button1″ />
<input type=”button” id=”btn2″ name=”btn2″ value=”Button2″ />
<input type=”button” name=”btn3″ value=”Enable Button1″ />

</body>
</html>

// set the disabled property of all button to same as the first one

$(“button:gt(0)”).attr(“disabled”,    $(“button:eq(0)”).attr(“disabled”));

// remove  attribute – enable

$(“button”).removeAttr(“disabled”)

Setting multiple attributes

$(“img”).attr(  {

});

Example :

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”Scripts/jquery-2.2.3.js”></script>
<script>
$(document).ready(function () {
$(“#btn1”).click(function () {
$(“img”).attr({ “width”: “200px”, “height”: “300px”, “border”: “5px solid #f6f6f6″ });
})
});
</script>
</head>
<body>
<img src=”images/Desert.jpg” width=”100px” height=”100px” alt=”Alternate Text” />
<input type=”button” id=”btn1″ name=”btn1″ value=”Change Attributes” />
</body>
</html>

$(“a”).attr(“href”,”home.html”);    // <a  href=”home.html”>…</a>

// set the disabled property of all button to same as the first one

$(“button:gt(0)”).attr(“disabled”,    $(“button:eq(0)”).attr(“disabled”));

// remove  attribute – enable

$(“button”).removeAttr(“disabled”)

Setting multiple attributes

$(“img”).attr(  {

“src” :  “/images/smile.jpg”, “alt” : “Smile”,

“width”  : 10, “height” : 10

});

ues of form elements

Handling  attributes

$(“a”).attr(“href”,”home.html”);    // <a  href=”home.html”>…</a>

// set the disabled property of all button to same as the first one

$(“button:gt(0)”).attr(“disabled”,    $(“button:eq(0)”).attr(“disabled”));

// remove  attribute – enable

$(“button”).removeAttr(“disabled”)

Inserting new Elements

// select & append to the end

$(“h1”).append(“<li>Hello   $!</li>”);

// select & append to the beginning

$(“ul”).prepend(“<li>Hello  $!</li>”);

// create & append/prepend to selector

$(“<span>Hello World!</span>”).appendTo(“p”);  //Insert span element at the  end of each p element

$(“<span>Hello World!</span>”).prependTo(“p”);  //Insert a <span> element  at the beginning of each <p>  element

$(“img”).after(“Some  text after”);

$(“img”).before(“Some  text before”);

Replacing  Elements

$(“p:first”).replaceWith(“Hello world!”); //Replace the first p element  with new text

$(“<h2>Hello world!</h2>”).replaceAll(“p”);   //Replace all <p> elements  with <h2> elements:

Replacing  Elements while keeping the content

$(“h3”).each(function(){

$(this).replaceWith(“<div>” + $(this).html()  + “</div>”);

});

Deleting / Removing  Elements

// remove all children

$(“#mainContent”).empty();   //Removes  the child elements only from the selected element

// remove  selection

$(“span.names”).remove();  //Removes  the selected element  (and its child elements)

//Filtering elements  to be removed

$(“p”).remove(“.italic”); //removes  all <p> elements  with class=”italic”:

CSS  Manipulations

// get style

$(“div”).css(“background-color”);

// set style

$(“div”).css(“float”,  “left”);

// set multiple style properties

$(“div”).css({“color”:”blue”,

“padding”: “1em”

“margin-right”: “0”, marginLeft:  “10px”});

// add and remove class

$(“h1, h2, p”).addClass(“blue”);

//add multiple classes

$(“#div1”).addClass(“important   blue”);

$(“p”).removeClass(“blue”).addClass(“red”);

// add if absent, remove  otherwise

$(“div”).toggleClass(“main”);

// test for class existence

if ($(“div”).hasClass(“main”))  { //… }

 

Dimensions
// get  window heightvar winHeight = $(window).height();// set element height

$(“#main”).height(winHeight);

 

//.width() – element

 

//.innerWidth() – .width() + padding

 

//.outerWidth() – .innerWidth() + border

 

//.outerWidth(true)  – including margin

 

 

The default measuring unit is Pixel (px)

Positioning

// To get position from the document

$(“div”).offset().top;

// To get the position from the parent element

$(“div”).position().left;

// scrolling position

$(window).scrollTop();




Select your currency