jQuery HTML and CSS

Updated 8/7/2018 at 7:40pm

jQuery with HTML

jQuery has some very handy functions that you can use to change HTML tags and attributes.

Some of the "HTML" functions are these:


jQuery HTML Example 1

Here is an example of how the html() method changes the contents (innerHTML) of HTML elements that you select. This is page jQueryHTML.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Example of jQuery html() function</title>
  <link rel="stylesheet" type="text/css" href="jQuerySamples.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#button1").click(function(){
      $("p").html("Four score and seven years ago...");
    });
    $("#button2").click(function(){
      $("p").html("The quick brown fox jumped over the lazy dogs.");
    });
  });
  </script>
</head>

<body>
  <div id="mainDiv">
    <h2>Example of jQuery html() Function</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button id="button1">First Set of Contents</button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button id="button2">Second Set of Contents</button>
  </div>
</body>
</html>


jQuery HTML Example 2

Here is another example of HTML actions with jQuery. This is page jQueryMystified.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Some jQuery Fun</title>
  <link rel="stylesheet" type="text/css" href="jQuerySamples.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
    /* <![CDATA[ */
    $(document).ready(function(){
      $("button").click(
        function()
        {
          var someStuff = " What's going on here?";
          $("#secondP").html("<strong>Good grief, Charlie Brown!" + someStuff + "</strong>");
          $("button").html("Double-click for the answer");
        }
      );
      
      $("button").dblclick(
        function()
        {
          $("#thirdP").html("<strong>We are playing football in the snow!</strong>");
        }
      );
    });
    /* ]]> */
  </script>
</head>

<body>
  <div id="mainDiv">
    <h2>Single- and Double-click html() Example</h2>
    <p id="secondP"></p>
    <p id="thirdP"></p>
    <button id="buttonMystified">Click Once</button>
  </div>
</body>
</html>


jQuery HTML Example 3

Here is another example of HTML actions with jQuery. In this example, the jQuery html() function is being used to set a value into a <textarea>...</textarea> tag in a form, and the jQuery val() function is being used to set a value into an <input> tag. This is page jQueryValSample.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Example of jQuery val() function</title>
  <link rel="stylesheet" type="text/css" href="jQuerySamples.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#button1").click(function(){
      $("#comments").html("The val() function must be used with input tags.");
    });
    $("#button2").click(function(){
      $("#comments").html("The html() function may be used with textarea tags.");
    });
    $("#button3").click(function(){
      $("#testInput").val("The weather in Texas is hot.");
    });
  });
  </script>
</head>

<body>
  <div id="mainDiv">
    <h2>Example of jQuery val() Function</h2>
    <p>Here are some comments:</p>
    <form action="" method="post">
	  Some input: <input type="text" id="testInput" value="TEST IT">
	  <br><br>
      <textarea id="comments" rows="4" cols="50"></textarea>
    </form>
    <button id="button1">First Set of Contents</button>
          
    <button id="button2">Second Set of Contents</button>
          
    <button id="button3">Replace the Input Tag's contents</button>
  </div>
</body>
</html>

jQuery with CSS

jQuery has one main function that you can use to change the CSS properties of selected elements. This function is css().

The css() function has three different syntaxes, which you use to accomplish different CSS-related tasks. These syntaxes are:

Also, you can use height() and width() to directly change the width or height of a selected element:


jQuery CSS Example 1

Here is an example of how you can use the css() function to find the value of a CSS property of various tags. This is page jQueryCSSFunction.html:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <link rel="stylesheet" type="text/css" href="jQuerySamples.css">
  <style>
    div.colorDiv {
      width: 60px;
      height: 60px;
      margin: 5px;
      float: left;
    }
    #result {
      clear: both;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div id="mainDiv">
    <div style="background-color:blue;" class="colorDiv"></div>
    <div style="background-color:rgb(15,99,30);" class="colorDiv"></div>
    <div style="background-color:#123456;" class="colorDiv"></div>
    <div style="background-color:#f11;" class="colorDiv"></div>
    <br><br><br><br>
    <span id="result">Click on a color square.</span>
     
    <script>
    $( ".colorDiv" ).click(function() {
      var color = $( this ).css( "background-color" );
      $( "#result" ).html( "That div is <span style='color:" +
        color + ";'>" + color + "</span>." );
    });
    </script>
  </div>
</body>
</html>

jQuery CSS Example 2

Here is an example of how you can use the css() function to set the value of CSS properties. This is page jQueryMultipleCSS.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Multiple CSS Property Changes with jQuery css() function</title>
  <link rel="stylesheet" type="text/css" href="jQuerySamples.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#button1css").click(function(){
      $("p").css({"background-color":"yellow","font-size":"200%"});
    });
    $("#button2css").click(function(){
      $("p").css({"background-color":"white","font-size":"100%"});
    });
  });
  </script>
</head>

<body>
  <div id="mainDiv">
    <h2>Button Challenge</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <div id="buttonDiv">
      <button id="button1css">Click me</button>
      <button id="button2css">No, click me!</button>
    </div>
  </div>
</body>
</html>

Please note these points about the above code:


jQuery CSS Example 3

Here is an example of how you can use the css() function to both get and set the value of CSS properties. This is page jQueryFontValues.html:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Font jQuery CSS Demo</title>
  <link rel="stylesheet" type="text/css" href="jQuerySamples.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    div.fontDiv {
      width: 180px;
      height: 25px;
      margin: 5px;
      border: 1px solid gray;
      padding: 7px;
      cursor: pointer;
    }
    #result {
      clear: both;
    }
    #FontStuff {
      position: absolute;
      left: 400px;
      top: 20px;
      width: 200px;
      height: 280px;
      border: 1px solid gray;
      border-radius: 10px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div id="mainDiv" style="position:relative;">
    <div style="font-family:Arial;" class="fontDiv">Arial</div>
    <div style="font-family:'Comic Sans MS';" class="fontDiv">Comic Sans MS</div>
    <div style="font-family:'Times New Roman';" class="fontDiv">Times New Roman</div>
    <div style="font-family:Courier;" class="fontDiv">Courier</div>
    <br><br>
    <span id="result">Click on a font sample above.</span>
    <div id="FontStuff">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel condimentum nisl.
      Nam molestie sem id velit luctus, vel commodo nisl viverra.
    </div>
    <script>
    $( ".fontDiv" ).click(function() {
      var fontFamily = $( this ).css( "font-family" );
      $( "#FontStuff" ).css({"font-family":fontFamily});
    });
    </script>
  </div>
</body>
</html>

Please note this point about the above code:



Examples Stylesheet

Here is the stylesheet, jQuerySamples.css, which is used by the sample files in this handout:

body
{
  font-family: Arial, sans-serif;
  font-size: 1.2em;
}

#mainDiv
{
  position: relative;
  width: 600px;
  height: 300px;
  border: 1px solid gray;
  border-radius: 20px;
  padding: 20px;
  margin: 0 auto;
}

#buttonMystified
{
  position: absolute;
  left: 2em;
  bottom: 2em;
}

#buttonDiv
{
  position: absolute;
  left: 2em;
  bottom: 2em;
}