JQuery tutorial – manipulating— Part 2

3. Manipulating tags,  how .html(), wrap and inert works

$(“document”).ready(function() {
//$(“a”).attr(“target”, “_blank”);
//$(“img”).attr({ src: “images/Spring.jpg”, alt: “spring” });

// change the html of the UL
//$(“#list1”).html(“<li>This is a new item</li>”);
// create a new p set the content of para2 to the new p
//var newItem = $(“<p>This is a new paragraph</p>”);
// set the text content of the last paragraph
//$(“p:last”).text(“this is the last paragraph”);

//$(“p”).append(” with some content appended”);
//$(“p”).prepend(“Hello! “);

//$(“p”).wrap(“<div style=’color:red’/>”);
//$(“p”).wrapAll(“<div style=’border:3px solid red’/>”);

4.Using jQuery manipulating CSS

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<title>jQuery CSS Sizing and Positioning</title>
<script type=”text/javascript” src=”/jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#innerH”).html($(“#theDiv”).innerHeight()); //this will add the padding
$(“#outerH”).html($(“#theDiv”).outerHeight()); // this will subtract the border and margion
$(“#offset”).html($(“#theDiv”).offset().top + “, ” + $(“#theDiv”).offset().left);
$(“#position”).html($(“#theDiv”).position().top + “, ” + $(“#theDiv”).position().left);
<style type=”text/css”>
div#theDiv {
width: 250px;
height: 180px;
margin: 10px;
padding: 20px;
background: blue;
border: 2px solid black;
cursor: pointer;
p, span {
font-size: 16pt;
Using jQuery to compute element size and position</p>
<div id=”theDiv”>
<div><span>Height: </span><span id=”height”></span></div>
<div><span>Width: </span><span id=”width”></span></div>
<div><span>innerHeight: </span><span id=”innerH”></span></div>
<div><span>innerWidth: </span><span id=”innerW”></span></div>
<div><span>outerHeight: </span><span id=”outerH”></span></div>
<div><span>outerWidth: </span><span id=”outerW”></span></div>
<div><span>offset: </span><span id=”offset”></span></div>
<div><span>position: </span><span id=”position”></span></div>

5. Manipulating Data

<!DOCTYPE html>
<title>Using the Data Methods</title>
<style type=”text/css”>
#div1 {
width: 200px;
height: 100px;
background-color: blue;
color: white;
display: inline-block;
<script type=”text/javascript” src=”/jquery-1.9.1.js”></script>
$(“document”).ready(function() {
$(“#store”).click(function () {
// store some arbitrary data on the DIV object
$(“#div1”).data(“key1”, 1234);
$(“#div1”).data(“key2”, “Joe Marini”);

$(“#remove”).click(function () {
// clear the data from the DIV

$(“#show”).click(function () {
// if there is any data, display it
// alert($(“#div1”).data(“key1”));
// alert($(“#div1”).data(“key2”));

alert(JSON.stringify($(“#div1″).data(), null, ”  “));
<h1>Using the Data Methods</h1>
<p>jQuery can associate arbitrary data with page elements. Use the controls below to exercise the data() and removeData() functions.</p>
<div id=”div1″ data-key3=”data attribute”>Sample DIV</div>
<button id=”store”>Click to store data</button>&nbsp;
<button id=”remove”>Click to remove data</button>&nbsp;
<button id=”show”>Click to show data</button></p>


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s