Sunday, July 10, 2016

Home » , » jQuery HTML - Basic concept

jQuery HTML - Basic concept

No comments
According to w3school jQuery contains powerful methods for changing and manipulating HTML elements and attributes.
The more explanation is given by w3school under
Get Content - text(), html(), and val()
Three simple, but useful, jQuery methods for DOM manipulation are:
  1. jQuery - Get Content and Attributes
  2. jQuery - Set Content and Attributes
  3. jQuery - Add Elements
  4. jQuery - Remove Elements
  5. jQuery - Get and Set CSS Classes
  6. jQuery - css() Method
  7. jQuery - Dimensions

1. Get Content - text(), html(), and val()

  1. text() - Sets or returns the text content of selected elements
  2. html() - Sets or returns the content of selected elements (including HTML markup)
  3. val() - Sets or returns the value of form fields
Examples: Note: In the first example we will use all the required code, and after we will only change the code between body tag.

1. text() get content

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>JQuery Tutorial</title>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">  
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
 </head>  
 <body>  
 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">  
 Detail Information  
 </p>  
 <script>  
 $(document).ready(function(){  
      $("#tab").click(function(){  
           alert($("#tab").text());  
 });  
 });  
 </script>  
 </body>  
 </html>

2. html() get content

 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">  
 <b>Detail Information</b>  
 </p>  
 <script>  
 $(document).ready(function(){  
      $("#tab").click(function(){  
           alert($("#tab").html());  
 });  
 });  
 </script>

3. val() get content

 <p>Name: <input type="text" id="test" value="JQuery"></p>  
 <button>Show Value</button>  
 </script>

2. Set Content - text(), html(), and val()

Same three method will also be use here
  1. text() - Sets or returns the text content of selected elements
  2. html() - Sets or returns the content of selected elements (including HTML markup)
  3. val() - Sets or returns the value of form fields
Examples: Note: In the first example we will use all the required code, and after we will only change the code between body tag.

1. text() set content

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>JQuery Tutorial</title>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">  
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
 </head>  
 <body>  
 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">  
 Detail Information  
 </p>  
 <script>  
 $(document).ready(function(){  
      $("#tab").click(function(){  
           $("#tab").text("Text will appear after click!");  
 });  
 });  
 </script>  
 </body>  
 </html>

2. html() set content

 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">  
 Detail Information  
 </p>  
 <script>  
 $(document).ready(function(){  
      $("#tab").click(function(){  
           $("#tab").html("<b>Text will appear after click!</b>");  
 });  
 });  
 </script>

3. val() set content

 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">  
 Detail Information  
 </p>  
 <input type="submit" value="Click" id="btn">  
 <script>  
 $(document).ready(function(){  
      $("#btn").click(function(){  
           $("#btn").val('Clicked');  
 });  
 });  
 </script>

3. jQuery - Add Elements

This concept is used to add new HTML Elements
The more commenly used methods for jQuery Add Elements are four in number
  1. append() - Inserts content at the end of the selected elements
  2. prepend() - Inserts content at the beginning of the selected elements
  3. after() - Inserts content after the selected elements
  4. before() - Inserts content before the selected elements
Examples: Note: In the first example we will use all the required code, and after we will only change the code between body tag.

1. append()

 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">  
 <b>Detail Information</b>  
 </p>  
 <script>  
 $(document).ready(function(){  
   $("#tab").click(function(){  
     $("#tab").append("more text appended.");  
   });  
 });  
 </script>

2. prepend()

 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">  
 <b>Detail Information</b>  
 </p>  
 <script>  
 $(document).ready(function(){  
   $("#tab").click(function(){  
     $("#tab").prepend("more text prepened.");  
   });  
 });  
 </script>

3. after() 

 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">  
 <b>Detail Information</b>  
 </p>  
 <script>  
 $(document).ready(function(){  
   $("#tab").click(function(){  
     $("#tab").after("This text will display after the p.");  
   });  
 });  
 </script>

4. before()

 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">  
 <b>Detail Information</b>  
 </p>  
 <script>  
 $(document).ready(function(){  
   $("#tab").click(function(){  
     $("#tab").before("This text will appear before the p");  
   });  
 });  
 </script>

4. jQuery - Remove Elements

For Removing Elements there is two methods used more commonly.
  1. remove() - Removes the selected element (and its child elements)
  2. empty() - Removes the child elements from the selected element
Examples: Note: In the first example we will use all the required code, and after we will only change the code between body tag.

1. remove()

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>JQuery Tutorial</title>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">  
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
 </head>  
 <body>  
 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">  
 <b>Detail Information</b>  
 </p>  
 <script>  
 $(document).ready(function(){  
   $("#tab").click(function(){  
     $("#tab").remove();  
   });  
 });  
 </script>  
 </body>  
 </html>

2. empty()

 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">  
 <b>Detail Information</b>  
 </p>  
 <script>  
 $(document).ready(function(){  
   $("#tab").click(function(){  
     $("#tab").empty();  
   });  
 });  
 </script>

5. jQuery - Get and Set CSS Classes

jQuery used many methods for CSS, the most important method that every web designer/developer show keep in mind are four in number
  1. addClass() - Adds one or more classes to the selected elements
  2. removeClass() - Removes one or more classes from the selected elements
  3. toggleClass() - Toggles between adding/removing classes from the selected elements
  4. css() - Sets or returns the style attribute
Examples: Note: In the first example we will use all the required code, and after we will only change the code between body tag.

1. addClass()

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>JQuery Tutorial</title>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">  
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
 <style>  
 .body {  
      background-color:rgb(103, 250, 255);  
 }  
 .body2{  
      background-color:#ffe758;  
 }  
 </style>  
 </head>  
 <body class="body">  
 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">  
 Change background color  
 </p>  
 <script>  
 $(document).ready(function(){  
   $("#tab").click(function(){  
     $("body").addClass("body2");  
   });  
 });  
 </script>  
 </body>  
 </html>

2. removeClass()

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>JQuery Tutorial</title>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">  
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
 <style>  
 .body {  
      background-color:rgb(103, 250, 255);  
 }  
 .body2{  
      background-color:#ffe758;  
 }  
 </style>  
 </head>  
 <body class="body">  
 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">  
 Change background color  
 </p>  
 <script>  
 $(document).ready(function(){  
   $("#tab").click(function(){  
     $("body").removeClass();  
   });  
 });  
 </script>  
 </body>  
 </html>

3. toggleClass() 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>JQuery Tutorial</title>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">  
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
 <style>  
 .body {  
      background-color:rgb(103, 250, 255);  
 }  
 .body2{  
      background-color:#ffe758;  
 }  
 </style>  
 </head>  
 <body class="body">  
 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">  
 Change background color  
 </p>  
 <script>  
 $(document).ready(function(){  
   $("#tab").click(function(){  
     $("body").toggleClass();  
   });  
 });  
 </script>  
 </body>  
 </html>

4. css()

 <script>  
 $(document).ready(function(){  
   $("button").click(function(){  
     alert("Background color = " + $("p").css("background-color"));  
   });  
 });  
 </script>  
 </head>  
 <body>  
 <h2>This is a heading</h2>  
 <p style="background-color:#ff0000">This is a paragraph.</p>  
 <p style="background-color:#00ff00">This is a paragraph.</p>  
 <p style="background-color:#0000ff">This is a paragraph.</p>  
 <button>Return background-color of p</button>

6. jQuery - css() Method

The css() method used by jQeury is a powerful method to sets or returns one or more style properties for the selected elements.
Example:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>JQuery Tutorial</title>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">  
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
 </head>  
 <body>  
 <p id="p1" style="width:330px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">  
 Click me to add CSS to the following pharagraph!  
 </p>  
 <p id="p2">This CSS is added by jQuery!</p>  
 <script>  
 $(document).ready(function(){  
   $("#p1").click(function(){  
     $("#p2").css({ "width":"286","height":"10","background-color":"#3ef8ff","padding":"18","text-align":"center"});  
   });  
 });  
 </script>  
 </body>  
 </html>

7. jQuery - Dimensions

With jQuery, we used some important and powerful methods to handle dimensions of elements and browser window.
There are six commonly used methods which also called jQuery Dimension Methods
  1. width()
  2. height()
  3. innerWidth()
  4. innerHeight()
  5. outerWidth()
  6. outerHeight()

width() & height()

Example:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>JQuery Tutorial</title>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">  
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
 <style>  
 #div1 {  
   height: 100px;  
   width: 300px;  
   padding: 10px;  
   margin: 3px;  
   border: 1px solid blue;  
   background-color: lightblue;  
 }  
 </style>  
 </head>  
 <body>  
 <div id="div1"></div>  
 <br>  
 <button>Display dimensions of div</button>  
 <p>width() - returns the width of an element.</p>  
 <p>height() - returns the height of an element.</p>  
 <script>  
 $(document).ready(function(){  
   $("button").click(function(){  
     var txt = "";  
     txt += "Width of div: " + $("#div1").width() + "</br>";  
     txt += "Height of div: " + $("#div1").height();  
     $("#div1").html(txt);  
   });  
 });  
 </script>  
 </body>  
 </html>

innerWidth() & innerHeight()

Example:
 <div id="div1"></div>  
 <br>  
 <button>Display dimensions of div</button>  
 <p>innerWidth() - returns the width of an element (includes padding).</p>  
 <p>innerHeight() - returns the height of an element (includes padding).</p>  
 <script>  
 $(document).ready(function(){  
   $("button").click(function(){  
     var txt = "";  
     txt += "Width of div: " + $("#div1").width() + "</br>";  
     txt += "Height of div: " + $("#div1").height() + "</br>";  
     txt += "Inner width of div: " + $("#div1").innerWidth() + "</br>";  
     txt += "Inner height of div: " + $("#div1").innerHeight();  
     $("#div1").html(txt);  
   });  
 });  
 </script>

5. outerWidth() & outerHeight()

Example:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>JQuery Tutorial</title>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">  
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
 <style>  
 #div1 {  
   height: 100px;  
   width: 300px;  
   padding: 10px;  
   margin: 3px;  
   border: 1px solid blue;  
   background-color: lightblue;  
 }  
 </style>  
 </head>  
 <body>  
 <div id="div1"></div>  
 <br>  
 <button>Display dimensions of div</button>  
 <p>outerWidth() - returns the width of an element (includes padding and border).</p>  
 <p>outerHeight() - returns the height of an element (includes padding and border).</p>  
 <script>  
 $(document).ready(function(){  
   $("button").click(function(){  
     var txt = "";  
     txt += "Width of div: " + $("#div1").width() + "</br>";  
     txt += "Height of div: " + $("#div1").height() + "</br>";  
     txt += "Outer width of div: " + $("#div1").outerWidth() + "</br>";  
     txt += "Outer height of div: " + $("#div1").outerHeight();  
     $("#div1").html(txt);  
   });  
 });  
 </script>  
 </body>  
 </html>

More Examples:

 $("button").click(function(){  
   var txt = "";  
   txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";  
   txt += "Outer height (+margin): " + $("#div1").outerHeight(true);  
   $("#div1").html(txt);  
 });  


 $("button").click(function(){  
   var txt = "";  
   txt += "Document width/height: " + $(document).width();  
   txt += "x" + $(document).height() + "\n";  
   txt += "Window width/height: " + $(window).width();  
   txt += "x" + $(window).height();  
   alert(txt);  
 });  


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>JQuery Tutorial</title>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">  
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
 <script>  
 $(document).ready(function(){  
   $("button").click(function(){  
     $("#div1").width(500).height(500);  
   });  
 });  
 </script>  
 <style>  
 #div1 {  
   height: 100px;  
   width: 300px;  
   padding: 10px;  
   margin: 3px;  
   border: 1px solid blue;  
   background-color: lightblue;  
 }  
 </style>  
 </head>  
 <body>  
 <div id="div1"></div>  
 <br>  
 <button>Resize div</button>  
 </body>  
 </html>

For more detail please visit w3 jQuery

Share:

0 comments:

Post a Comment

Contact Form

Name

Email *

Message *