HTML Manipulation using Jquery

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

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

// 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();

Getting and Setting Values of form elements

Getting and Setting Val

Handling attributes

Submit a Comment Cancel reply