jQuery with HTML and CSS

References

jQuery with HTML

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

Some of the "HTML"-related jQuery functions are these:

$(selector).text() - Gets the combined text contents of each element in the set of matched elements, including their descendants.
$(selector).text(content) - Sets the text contents of the matched elements.
$(selector).html() - Gets the (inner) HTML of selected elements.
$(selector).html(content) - Changes the (inner) HTML of selected elements.
$(selector).attr("attribute_name") - Gets the value of the "attribute_name" of the selected elements. To retrieve HTML attributes, use the attr() method.
$(selector).attr("attribute_name", value) - Sets the value of the "attribute_name" of the selected elements, using the given value.
$(selector).prop("property_name") - Gets the value of the "property_name" property of the selected elements. The prop() method should be used to retrieve property values, e.g. DOM properties (like tagName, nodeName, defaultChecked) or your own custom made properties.
$(selector).prop("property_name", value) - Sets the value of the "property_name" property of the selected elements, using the given value.
$(selector).append(content) - Appends content to the (inner) HTML of selected elements.
$(selector).prepend(content) - "Prepends" content to the (inner) HTML of selected elements.
$(selector).after(content) - Adds HTML after selected elements.
$(selector).before(content) - Adds HTML before selected elements.

An .html() Example

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

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Samples.css">
  <title>Example of jQuery html() function</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("p").html("This paragraph's content was replaced by the html() function.");
    });
  });
  </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>Click me</button>
  </div>
</body>
</html>

Please note these points about the above code:

The selector in the click() event handler (anonymous) function is $("p"), which means that a mouse click on the button affects all of the paragraphs in the page.
The paragraph contents are replaced by using the html() jQuery function. This function replaces everything that the <p>...</p> tags contain, in this example.
This paragraph replacement is equivalent to assigning some content to the standard innerHTML JavaScript property for the page's paragraphs.

Another .html() Example

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

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Samples.css">
  <title>Some jQuery Fun</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    /* <![CDATA[ */
    $(document).ready(function(){
      $("button").click(
        function()
        {
          $("#secondP").html("<strong>Good grief, Charlie Brown! What's going on here?</strong>");
          $("button").html("Double-click me for the answer");
        }
      );
      
      $("button").dblclick(
        function()
        {
          $("#thirdP").html("<strong>We're playing football in the snow!</strong>");
          $("button").hide();
        }
      );
    });
    /* ]]> */
  </script>
  <style type="text/css">
    body
    {
      font-family: Arial,sans-serif;
    }
  </style>
</head>

<body>
  <div id="mainDiv">
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p id="secondP">This is another paragraph.</p>
    <p id="thirdP"></p>
    <button>Click me</button>
  </div>
</body>
</html>

Please note these points about the above code:

There are two jQuery selectors that are used in the click() event handler (anonymous) function.
1. The first one, which selects the paragraph with the "secondP" id attribute, is used to replace that paragraph's contents, using the html() jQuery function.
2. The second one, which selects the button, replaces the button's text.
Just for fun, the other event that is used in this page is a mouse double-click, which is captured by the jQuery dblclick event handler. This example's double-click event handler also uses two jQuery selectors to affect the page.
1. The first one, which selects the paragraph with the "thirdP" id attribute, is used to replace that paragraph's contents, using the html() jQuery function.
2. The second one, which selects the button, hides the button.

An .attr() Example

In this sample code, the .attr() jQuery function will be used to change the HTML attribute of a tag.

Specifically, this sample page will disable a form's submit button.

Now here is the code. This is page jqueryAttrFunction.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Samples.css">
  <title>Change an HTML attribute with the attr() function</title>
  <script src="jquery.js"></script>
  <script>
    $(document).ready(function(){
      $("#wombat").click(function(){
        $("#wombat").attr("disabled", true);
        $("#womForm").submit();
      });
    });
  </script>
</head>

<body>
  <div id="mainDiv">
    <form id="womForm" method="get" action="http://www.jimlink.net/PHPStuff/TestFormDataDelay.php">
      Your name:  <input type="text" id="yourName" name="yourName" autofocus>
      <br><br>
      <input type="submit" id="wombat" value="Submit the form">
    </form>
  </div>
</body>
</html>

Please note these points about the above code:

The click() function is doing two things to the page's tags:
1. It is using the jQuery attr() function to change the disabled attribute of the submit button to true. (The disabled attribute is false, or not set at all, by default.)
2. It is running the standard JavaScript submit() function for the form. (A disabled submit button will not complete the form's submission, even if the form was submitted before the button is disabled, in some browsers. But the form can be submitted by the JavaScript submit() function even though the submit button is disabled.)
The form's action attribute has the value "get". For some reason, from some networks, "post" does not process correctly on some PHP servers.

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:

$(selector).css(name) - Gets the style property value of the first matched element
$(selector).css(name,value) - Sets the value of one style property for matched elements
$(selector).css({properties}) - Sets multiple style properties for matched elements

Also, you can use the following two functions to directly change the width or height of a selected element:

$(selector).height(value) - Sets the height of the selected elements
$(selector).width(value) - Sets the width of the selected elements

.css() to Get a Property

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

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Samples.css">
  <title>Get a CSS property value with the css() function</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#box").click(function(){
        $("#firstPara").html("The background color of the box is " + $(this).css("background-color") + ".");
      });
    });
  </script>
</head>

<body>
  <div id="mainDiv">
    <div id="box" style="width:100px;height:100px;background:#ff0000"></div>
    <p id="firstPara">Click in the square box to return the background color.</p>
  </div>
</body>
</html>

Please note these points about the above code:

The click event is for the div which has the background color set with an inline stylesheet.
The selector for the css() function is $(this), which selects the tag that handles the event. In this example, the <div> tag with the id attribute of "box" has the event handler, so the css() function gets the div's background color.

.css() to Set Properties

And now here is an example of how you can change multiple CSS property values with the css() function. This is page jQueryMultipleCSS.html:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Samples.css">
  <title>Multiple CSS Property Changes with jQuery css() function</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("p").css({"background-color":"yellow", "font-size":"200%", "border":"1px solid blue", "border-radius":"10px", "padding":"10px"});
    });
  });
</script>
</head>

<body>
  <div id="mainDiv">
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button>Click me</button>
  </div>
</body>
</html>

Please note these points about the above code:

The click event handler is for the button.
The css() function sets multiple CSS properties for the page's paragraph tags.
The syntax for multiple CSS properties in the css() function uses the standard JavaScript anonymous object notation. This notation encloses a comma-separated list of property:value pairs in a curly-brace block. Each property:value pair uses a colon to separate the property and the value.

A Combined Example

Here is an example which combines several of the functions that we looked at earlier in this e-handout. This is page CombinedQueryExample2.html:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Samples.css">
  <title>A Combined Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">
    /* <![CDATA[ */
    $(document).ready(function()
    {
      $("#para1").on("click", function()
      {
        $("#para4").text($(this).attr("label"));
        $("#para1").fadeOut(1000, function()
                                 {
                                   $("#para4").fadeIn(2000).delay(2000).fadeOut(2000, function()
                                                                                       {
                                                                                         $("#para2").fadeIn(1000);
                                                                                       });
                                 });
        
        
      });

      $("#para2").on("click", function()
      {
        $("#para4").text($(this).attr("label"));
        $("#para2").fadeOut(1000, function()
                                 {
                                   $("#para4").fadeIn(2000).delay(2000).fadeOut(2000, function()
                                                                                       {
                                                                                         $("#para3").fadeIn(1000);
                                                                                       });
                                 });
        
        
      });

      $("#para3").on("click", function()
      {
        $("#para4").text($(this).attr("label"));
        $("#para3").fadeOut(1000, function()
                                 {
                                   $("#para4").fadeIn(2000).delay(2000).fadeOut(1000);
                                 });
        
        
      });
  });
    /* ]]> */
  </script>
  <style type="text/css">
    body
    {
      font-family: Arial,sans-serif;
    }
    
    #para2
    {
      display: none;
    }
    
    #para3
    {
      display: none;
    }
    
    #para4
    {
      display: none;
      font-style: italic;
    }
    
    #mainDiv
    {
      height: 450px;
    }
    
    #diary
    {
      height: 280px;
    }
    
    .citation
    {
      text-decoration: underline;
      font-style: italic;
    }
    
    .citeP
    {
      font-size: 0.7em;
    }
  </style>
</head>

<body>
  <div id="mainDiv">
    <div id="diary">
      <h2>A Mysterious Diary</h2>
      <p id="para1" label="Hello, Harry Potter. My name is Tom Riddle. How did you come by my diary?">My name is Harry Potter.</p>
      <p id="para2" label="Lucky that I recorded my memories in some more lasting way than ink.">Someone tried to flush it down a toilet.</p>
      <p id="para3" label="I can show you, if you like...  I can take you inside my memory...">It's happening again now.  There have been three attacks...  Who was it last time?</p>
      <p id="para4"></p>
    </div>
    <div id="bottomStuff">
      <h4>(Click the top (non-italic) paragraph three times, for a surprise each time.  WAIT for the surprise to disappear before you click again.)</h4>
      <p class="citeP">Text used here is from <span class="citation">Harry Potter and the Chamber of Secrets</span> by J.K. Rowling.</p>
    </div>
  </div>
</body>
</html>

Please note these points about the above code:

The three paragraphs are being selected by a jQuery "id" selector. For the first paragraph, for instance, the selector is $("#para1").
The jQuery .on() action/function is being used to handle the "click" events on the paragraphs.
The body of the anonymous function which is the "click" event handler for each paragraph, has three or four separate actions which are performed on various paragraphs. Some of the actions are "chained", because they affect the same paragraph. The non-chained actions are other nested "callback" functions, all of them selected with more "id" jQuery selectors.
The first action in each main anonymous function uses the .text() function to set the contents of the "#para4" paragraph.
In this .text() function, the value argument is another jQuery selector, which gets the value of the label attribute from the clicked-on paragraph. The jQuery $(this) selector is used to refer to the clicked-on paragraph. It is this code:
```
$(this).attr("label")
```
which selects, and gets the value of the label attribute from, that paragraph.
Nested callback functions are used so the previous action must be completed before the next action happens, on different paragraphs. For the actions that are applied to the same paragraph, the actions are chained.

Richland College Multimedia Learning Center

jQuery with HTML and CSS

References

jQuery with HTML

An .html() Example

Another .html() Example

An .attr() Example

jQuery with CSS

.css() to Get a Property

.css() to Set Properties

A Combined Example