How to Use the AJAX jQuery Object for HTML5 and CSS3 Programming

The jQuery object in AJAX is interesting because it is easy to create from a variety of DOM elements for HTML5 and CSS3 programming, and because it adds wonderful, new features to these elements.

How to change the style of an element

If you can dynamically change the CSS of an element, you can do quite a lot to it. jQuery makes this process quite easy. After you have a jQuery object, you can use the css() method to add or change any CSS attributes of the object.

image0.jpg

The code displays a terseness common to jQuery code:

<!DOCTYPE html>
 <title>styleElements.html</title>
 <meta charset="UTF-8">
 <script type = "text/javascript"
   src = "jquery-1.10.2.min.js"></script>
 <script type = "text/javascript">
 $(init);
 function init(){
  $("h1").css("backgroundColor", "yellow");
  $("#myParagraph").css({"backgroundColor":"black",
        "color":"white"});
  $(".bordered").css("border", "1px solid black");
 }
 </script>
</head>
<body>
 <h1>I’m a level one heading</h1>
 <p id = "myParagraph">
  I’m a paragraph with the id "myParagraph."
 </p>
 <h2 class = "bordered">
  I have a border.
 </h2>
 <p class = "bordered">
  I have a border too.
 </p>
</body>
</html>

You find a few interesting things in this program. First, take a look at the HTML:

  • It contains an H1 tag. That's not too exciting, but you can use it to show how to target elements by DOM type.

  • There's a paragraph with the ID myParagraph. This will be used to illustrate how to target an element by ID.

  • There are two elements with the class. You have no easy way in ordinary DOM work to apply code to all elements of a particular class, but jQuery makes it easy.

  • Several elements have custom CSS, but no CSS is defined. The jQuery code changes all the CSS dynamically.

The init() function is identified as the function to be run when the document is ready. In this function, the powerful CSS method is used to change each element's CSS dynamically. Notice how the various elements are targeted.

How to select jQuery objects

jQuery gives you several alternatives for creating jQuery objects from the DOM elements. In general, you use the same rules to select objects in jQuery as you do in CSS:

  • DOM elements are targeted as is. You can include any DOM element inside the $(“”) mechanism to target all similar elements. For example, use $(“h1”) to refer to all H1 objects or $(“p”)to refer to all paragraphs.

  • Use the identifier to target a particular ID. This works exactly the same as in CSS. If you have an element with the ID myThing, use the code $(“myThing”).

  • Use the . identifier to target members of a class. Again, this is the same mechanism that you use in CSS, so all elements with the class bordered attached to them can be modified with the code $(“.bordered”).

  • You can even use complex identifiers. You can even use complex CSS identifiers like $(“li img”). This identifier only targets images inside a list item.

These selection methods (all borrowed from familiar CSS notation) add incredible flexibility to your code. You can now easily select elements in your JavaScript code according to the same rules you use to identify elements in CSS.

How to modify the style

After you've identified an object or a set of objects, you can apply jQuery methods. One very powerful and easy method is the method. The basic form of this css() method takes two parameters: a style rule and value.

For example, to make the background color of all H1 objects yellow, use the following code:

  $("h1").css("backgroundColor", "yellow");

If you apply a style rule to a collection of objects (like all H1 objects or all objects with the bordered class), the same rule is instantly applied to all the objects.

A more powerful variation of the style rule exists that allows you to apply several CSS styles at once. It takes a single object in JSON notation as its argument:

  $("#myParagraph").css({"backgroundColor":"black",
        "color":"white"});

This example uses a JSON object defined as a series of rule/value pairs.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com