Setting an Attribute Value

When the attr method is used to set an attribute value, the change is applied to all of the elements in the jQuery object. This is in contrast to the read version of this method, which returns a value from only the first element. Listing 8-3 demonstrates how to set an attribute.

Listing 8-3.  Setting an Attribute

...
<script type="text/javascript">
    $(document).ready(function() {
        $("img").attr("src", "lily.png");
    });
</script>
...

I select all of the img elements and set the value of the src attribute to lily.png. This value is applied to the src attribute of all the selected elements, and you can see the effect in Figure 8-1.

Setting Multiple Attributes

You can set multiple attributes in a single method call by passing an object to the attr method. The properties of this object are interpreted as the attribute names, and the property values will be used as the attribute values. This is known as a map object . Listing 8-4 provides a demonstration.

Listing 8-4.  Setting Multiple Elements Using a Map Object

...
<script type="text/javascript">
    $(document).ready(function() {
        var attrValues = {
            src: "lily.png",
            style: "border: thick solid red"
        };
          
        $("img").attr(attrValues);
    });
</script>
...

In this script I create a map object that has properties called src and style. I select the img elements in the document and pass the map object to the attr value. You can see the effect in Figure 8-2.

Setting Attribute Values Dynamically

You can tailor the values that you assign to an attribute by passing a function to the attr method. Listing 8-5 provides a demonstration.

Listing 8-5.  Setting Attribute Values with a Function

...
<script type="text/javascript">
    $(document).ready(function() {
        $("img").attr("src", function(index, oldVal) {
            if (oldVal.indexOf("rose") > -1) {
                return "lily.png";
            } else if ($(this).closest("#row2").length > 0) {
                return "carnation.png";
            }
        });
    });
</script>
...

The arguments passed to the function are the index of the element being processed and the old attribute value. The this variable is set to the HTMLElement being processed. If you want to change the attribute, then your function must return a string containing the new value. If you don’t return a result, then the existing value is used. In Listing 8-5, I use the function to selectively change the images shown by the img elements. You can see the effect in Figure 8-3.

Removing an Attribute

You can remove (unset) attributes by using the removeAttr method, as shown in Listing 8-6.

Listing 8-6.  Removing Attribute Values

...
<script type="text/javascript">
    $(document).ready(function() {
          
        $("img").attr("style", "border: thick solid red");
        $("img:odd").removeAttr("style");
          
    });
</script>
...

I use the attr method to set the style attribute and then use the removeAttr method to remove the same attribute from the odd-numbered elements. You can see the effect in Figure 8-4.

Working with Properties

For each form of the attr method, there is a corresponding prop method. The difference is that the prop methods deal with properties defined by the HTMLElement object, rather than attribute values. Often, the attributes and properties are the same, but this isn’t always the case. A simple example is the class attribute, which is represented in the HTMLElement object using the className property. Listing 8-7 shows the use of the prop method to read this property.

Listing 8-7.  Using the prop Method to Read a Property Value

...
<script type="text/javascript">
    $(document).ready(function() {
        $("*[class]").each(function(index, elem) {
            console.log("Element:" + elem.tagName + " " + $(elem).prop("className"));
        });
    });
</script>
...

In this example, I select all of the elements that have a class attribute and use the each method to enumerate them. For each element, I print out the type and the value of the className property, producing the following console output:

Element:DIV dtable
Element:DIV drow
Element:DIV dcell
Element:DIV dcell
Element:DIV dcell
Element:DIV drow
Element:DIV dcell
Element:DIV dcell
Element:DIV dcell

Adding and Removing Classes Using a Function

You can decide dynamically which classes should be added or removed from a set of elements by passing a function to the addClass or removeClass method. Listing 8-9 shows the use of a function with the addClass method.

Listing 8-9.  Using the addClass Method with a Function

...
<style type="text/css">
    img.redBorder {border: thick solid red}
    img.blueBorder {border: thick solid blue}
</style>
<script type="text/javascript">
    $(document).ready(function() {
        $("img").addClass(function(index, currentClasses) {
            if (index % 2 == 0) {
                return "blueBorder";
            } else {
                return "redBorder";
            }
        });
    });
</script>
...

The arguments to the function are the index of the element and the current set of classes for which the element is a member. As for similar functions, jQuery sets the this variable to the HTMLElement object of the element being processed. You return the class that you want the element to join. In this example, I use the index argument to assign alternate elements to either the blueBorder or redBorder class. The effect is the same as the one shown in Figure 8-5.

You take a similar approach to removing elements from classes. You pass a function to the removeClass method, as shown in Listing 8-10.

Listing 8-10.  Removing Elements from Classes Using a Function

...
<style type="text/css">
    img.redBorder {border: thick solid red}
    img.blueBorder {border: thick solid blue}
</style>
<script type="text/javascript">
    $(document).ready(function() {
          
        $("img").filter(":odd").addClass("redBorder").end()
            .filter(":even").addClass("blueBorder");
          
        $("img").removeClass(function(index, currentClasses) {
            if ($(this).closest("#row2").length > 0
                &&currentClasses.indexOf("redBorder") > -1) {
                    return "redBorder";
            } else {
                return "";
            }
        });
    });
</script>
...

In this script, the function I pass to the removeClass method uses the HTMLElement object and the current set of classes to remove the redBorder class from any img element that is a member and that is a descendant of the element with the ID of row2. You can see the effect of this script in Figure 8-6.

Toggling Classes

In its most basic form, toggling a class means adding it to any element that is not a member and removing it from any element that is. You can achieve this effect by passing the name of the class you want to toggle to the toggleClass method, as shown in Listing 8-11.

Listing 8-11.  Using the toggleClass Method

...
<style type="text/css">
    img.redBorder {border: thick solid red}
    img.blueBorder {border: thick solid blue}
</style>
<script type="text/javascript">
    $(document).ready(function() {
          
        $("img").filter(":odd").addClass("redBorder").end()
            .filter(":even").addClass("blueBorder");
       
        $("<button>Toggle</button>").appendTo("#buttonDiv").click(doToggle);
          
        function doToggle(e) {
            $("img").toggleClass("redBorder");
            e.preventDefault();
        };
  
    });
</script>
...

I start this script by applying the redBorder class to the odd-numbered img elements and the blueBorder class to the even-numbered ones. I then create a button element and append it to the element whose id is buttonDiv. This places my new button alongside the one that is already on the page. I have used the click method to specify a function that jQuery will invoke when the user clicks the button. This is part of the jQuery support for events, which I describe fully in Chapter 9.

The function that is executed when the button is clicked is called doToggle , and the key statement is

...
$("img").toggleClass("redBorder");
...

This statement selects all of the img elements in the document and toggles the redBorder class. The argument to the function and the call to the preventDefault method are not important in this chapter and I explain them in Chapter 9. You can see the effect of this script in Figure 8-7, although this kind of example makes most sense when you load the document into a browser and click the button yourself.

If you are especially observant, you will notice something a little odd in the figure. Those elements with red borders no longer have them, but the elements that started with blue borders still have blue borders. What happened was that jQuery removed the redBorder class from the odd-numbered img elements and added it to the even-numbered element, just as expected, but the element to which the redBorder class was added is also a member of blueBorder. The blueBorder style is defined after redBorder in the style element, which means that its property values have higher precedence, as I explained in Chapter 3. So, the class toggling is working, but you have to take into account the subtleties of CSS as well. If you want the red borders to show through, then you can reverse the declaration order of the styles, as shown in Listing 8-12.

Listing 8-12.  Matching Style Declaration to Suit Class Toggling

...
<style type="text/css">
    img.blueBorder {border: thick solid blue}
    img.redBorder {border: thick solid red}
</style>
<script type="text/javascript">
    $(document).ready(function() {
        $("img").filter(":odd").addClass("redBorder").end()
            .filter(":even").addClass("blueBorder");
       
        $("<button>Toggle</button>").appendTo("#buttonDiv").click(doToggle);
          
        function doToggle(e) {
            $("img").toggleClass("redBorder");
            e.preventDefault();
        };
    });
</script>
...

Now when an element belongs to both the blueBorder and redBorder classes, the redBorder setting for the border property will be used by the browser. You can see the effect of this change in Figure 8-8.

Toggling Multiple Classes

You can supply multiple class names, separated by a space, to the toggleClass method, and each will be toggled for the selected elements. Listing 8-13 shows a single example.

Listing 8-13.  Toggling Multiple Classes

...
<style type="text/css">
    img.blueBorder {border: thick solid blue}
    img.redBorder {border: thick solid red}
</style>
<script type="text/javascript">
    $(document).ready(function() {
          
        $("img").filter(":odd").addClass("redBorder").end()
            .filter(":even").addClass("blueBorder");
       
        $("<button>Toggle</button>").appendTo("#buttonDiv").click(doToggle);
          
        function doToggle(e) {
            $("img").toggleClass("redBorder blueBorder");
            e.preventDefault();
        };
  
    });
</script>
...

In this example, I toggle the redBorder and blueBorder classes on all of the img elements. You can see the effect in Figure 8-9.

Toggling All Classes

You can toggle all of the classes that a set of elements belong to by calling the toggleClass method with no arguments. This is a clever technique because jQuery stores the classes that have been toggled so they are applied and removed correctly. Listing 8-14 contains an example of this use of the method.

Listing 8-14.  Toggling All of the Classes for Selected Elements

...
<style type="text/css">
    img.blueBorder {border: thick solid blue}
    img.redBorder {border: thick solid red}
    label.bigFont {font-size: 1.5em}
</style>
<script type="text/javascript">
    $(document).ready(function() {
          
        $("img").filter(":odd").addClass("redBorder").end()
            .filter(":even").addClass("blueBorder");
        $("label").addClass("bigFont");
       
        $("<button>Toggle</button>").appendTo("#buttonDiv").click(doToggle);
          
        function doToggle(e) {
            $("img, label").toggleClass();
            e.preventDefault();
        };
  
    });
</script>
...

In this example, I used the addClass method to add classes to the img and label elements. When the Toggle button is clicked, I select those same elements and call the toggleClass method without any arguments. You get a specific effect, which is shown in Figure 8-10.

When you first click the button, all of the classes are toggled off for the selected elements. jQuery makes a note of which classes were removed so that they can be reapplied when you click the button again.

Toggling Classes in One Direction

You can limit the way that toggling is performed by passing a boolean argument to the toggleClass method. If you pass false, the classes will only be removed, and if you pass true, the classes will only be added. Listing 8-15 gives an example.

Listing 8-15.  Restricting the Toggle Direction

...
<style type="text/css">
    img.blueBorder {border: thick solid blue}
    img.redBorder {border: thick solid red}
</style>
<script type="text/javascript">
    $(document).ready(function() {
          
        $("img").filter(":odd").addClass("redBorder").end()
            .filter(":even").addClass("blueBorder");
       
        $("<button>Toggle On</button>").appendTo("#buttonDiv").click(doToggleOn);
        $("<button>Toggle Off</button>").appendTo("#buttonDiv").click(doToggleOff);
          
        function doToggleOff(e) {
            $("img, label").toggleClass("redBorder", false);
            e.preventDefault();
        };
        function doToggleOn(e) {
            $("img, label").toggleClass("redBorder", true);
            e.preventDefault();
        };
    });
</script>
...

I have added two button elements to the document, each of which will toggle the redBorder class in only one direction. Once one of the button elements has been clicked, it will have no further effect until the other button is clicked too (because each button toggles classes in only one direction). You can see the effect in Figure 8-11.

Toggling Classes Dynamically

You can decide which classes should be toggled for elements dynamically by passing a function to the toggleClass method. Listing 8-16 provides a simple demonstration.

Listing 8-16.  Toggling Classes with a Function

...
<style type="text/css">
    img.blueBorder {border: thick solid blue}
    img.redBorder {border: thick solid red}
</style>
<script type="text/javascript">
    $(document).ready(function() {
          
        $("img").addClass("blueBorder");
        $("img:even").addClass("redBorder");
       
        $("<button>Toggle</button>").appendTo("#buttonDiv").click(doToggle);
  
        function doToggle(e) {
            $("img").toggleClass(function(index, currentClasses) {
                if (index % 2 == 0) {
                   return "redBorder";
                } else {
                    return "";
                }
            });
            e.preventDefault();
        };
    });
</script>
...

I apply the blueBorder class to all of the img elements and the redBorder class to the even-numbered img elements. The arguments to the function are the index of the element you are processing and the current set of classes it belongs to. In addition, the this variable is set to the HTMLElement object for the current element. The result from the function is the name of the classes that should be toggled. If you don’t want to toggle any classes for the elements, then you return the empty string (not returning a result for an element toggles all of its classes). You can see the effect that the listing creates in Figure 8-12.

Getting and Setting a Single CSS Value

To read the value of a CSS property, you pass the property name to the css method. What you receive is the value from the first element in the jQuery object only. However, when you set a property, the change is applied to all of the elements. Listing 8-17 shows the basic use of the css property.

Listing 8-17.  Using the css Method to Get and Set CSS Property Values

...
<script type="text/javascript">
    $(document).ready(function() {
        var sizeVal = $("label").css("font-size");
        console.log("Size: " + sizeVal);
        $("label").css("font-size", "1.5em");
    });
</script>
...

In this script, I select all of the label elements and use the css method to get the value of the font-size property and write it to the console. I then select all of the label elements again and apply a new value for the same property to all of them.

The output of the script is as follows:

Size: 16px

Getting Multiple CSS Properties

You can get the value of multiple CSS properties by passing an array of property names to the css method. This method returns an object that has properties for each of the names in the array and the value of each property in the object is set to the value of the corresponding CSS property for the first element in the selection. In Listing 8-18, you can see how I have used the css method to get values for three CSS properties.

Listing 8-18.  Using the css Method to Get Multiple CSS Property Values

...
<script type="text/javascript">
    $(document).ready(function () {
        var propertyNames = ["font-size", "color", "border"];
        var cssValues = $("label").css(propertyNames);
        for (var i = 0; i < propertyNames.length; i++) {
            console.log("Property: " + propertyNames[i]
                + " Value: " + cssValues[propertyNames[i]]);
        }
    });
</script>
...

I create an array that contains the names of the three CSS properties I am interested in: font-size, color, and border. I pass this array to the css method and I receive an object that contains the values I want. That object can be expressed as follows:

{font-size: "16px", color: "rgb(0, 0, 0)", border: "0px none rgb(0, 0, 0)"}

To process the object, I iterate through the array of property names and read the corresponding property value, producing the following console output:

Property: font-size Value: 16px
Property: color Value: rgb(0, 0, 0)
Property: border Value: 0px none rgb(0, 0, 0)

Setting Multiple CSS Properties

You can set multiple properties in two different ways. The first is simply by chaining calls to the css method, as shown in Listing 8-19.

Listing 8-19.  Chaining Calls to the css Method

...
<script type="text/javascript">
    $(document).ready(function() {
        $("label").css("font-size", "1.5em").css("color", "blue");
    });
</script>
...

In this script, I set values for the font-size and color properties. You can achieve the same effect using a map object, as shown in Listing 8-20. The map object follows the same pattern as the object I received when I used the css method to get multiple property values in the previous section.

Listing 8-20. Setting Multiple Value Using a Map Object

...
<script type="text/javascript">
    $(document).ready(function() {
        var cssVals = {
            "font-size": "1.5em",
            "color": "blue"
        };
  
        $("label").css(cssVals);
    });
</script>
...

Both of these scripts create the effect shown in Figure 8-13.

Setting Relative Values

The css method can accept relative values, which are numeric values that are preceded by += or -= and that are added to or subtracted from the current value. This technique can be used only with CSS properties that are expressed in numeric units. Listing 8-21 demonstrates.

Listing 8-21.  Using Relative Values with the css Method

...
<script type="text/javascript">
    $(document).ready(function() {
     
        $("label:odd").css("font-size", "+=5")
        $("label:even").css("font-size", "-=5")
     
    });
</script>
...

These values are assumed to be in the same units that would be returned when the property value is read. In this case, I have increased the font size of the odd-numbered label elements by 5 pixels and decreased it for the even-numbered label elements by the same amount. You can see the effect in Figure 8-14.

Setting Properties Using a Function

You can set property values dynamically by passing a function to the css method, as demonstrated by Listing 8-22. The arguments passed to the function are the index of the element and the current value of the property. The this variable is set to the HTMLElement object for the element, and you return the value you want to set.

Listing 8-22.  Setting CSS Values with a Function

...
<script type="text/javascript">
    $(document).ready(function() {
        $("label").css("border", function(index, currentValue) {
            if ($(this).closest("#row1").length > 0) {
                return "thick solid red";
            } else if (index % 2 == 1) {
                return "thick double blue";
            }
        });
    });
</script>
...

You can see the effect of this script in Figure 8-15.

Using the Property-Specific CSS Convenience Methods

In addition to the css method, jQuery defines a number of methods that can be used to get or set commonly used CSS properties and information derived from them. Table 8-5 describes these methods.

Most of these methods are self-evident, but a couple warrant explanation. The result from the offset and position methods is an object that has top and left properties, indicating the location of the element. Listing 8-23 provides a demonstration using the position method .

Listing 8-23.   Using the position Method

...
<script type="text/javascript">
    $(document).ready(function() {
        var pos = $("img").position();
        console.log("Position top: " + pos.top + " left: " + pos.left);
    });
</script>
...

This script writes out the value of the top and left properties of the object returned by the method. The result is as follows:

Position top: 108.078125 left: 18

...
<script type="text/javascript">
    $(document).ready(function() {
        $("#row1 img").css("border", "thick solid red")
            .height(function(index, currentValue) {
                return (index + 1) * 25;
            });
    });
</script>
...

Setting Element Content

You can set the content of elements using either the html or text method. My flower shop example document doesn’t have any text content to speak of, so Listing 8-26 shows how to use the html method.

Listing 8-26.  Using the html Method to Set Element Content

...
<script type="text/javascript">
    $(document).ready(function() {
        $("#row2 div.dcell").html($("div.dcell").html());
    });
</script>
...

This script sets the HTML contents of the div elements in the dcell class that are descendants of the row2 element. For the content I have used the html method to read the HTML from the first div.dcell element. This has the effect of setting the lower row of cells in the layout to have the aster content, as shown in Figure 8-17.

Setting Element Content Using a Function

As with many of the other methods in this chapter, you can use the html and text methods with a function to set content dynamically. In both cases, the arguments are the index of the element in the jQuery object and the current text or HTML content. The this variable is set to the element’s HTMLElement object, and you return the value you want to set as the result from the function. Listing 8-27 shows how you can use a function with the text method.

Listing 8-27.  Setting Text Content Using a Function

...
<script type="text/javascript">
    $(document).ready(function() {
        $("label").css("border", "thick solid red").text(function(index, currentValue) {
            return "Index " + index;
        });
    });
</script>
...

In this script I set the text content of the label elements using the index value (I also use the css method to add a border to the elements I change). You can see the result in Figure 8-18.

Setting Form Element Values

You can use the val method to set the value of all of the elements in a jQuery object by simply passing the value you want as an argument to the method. Listing 8-29  demonstrates.

Listing 8-29.  Setting Element Values with the val Method

...
<script type="text/javascript">
    $(document).ready(function () {
        $("<button>Set Values</button>").appendTo("#buttonDiv")
            .click(function (e) {
                $("input").val(100);
                e.preventDefault();
            })
    });
</script>
...

In this script I have added a button element to the document and specified an inline function that is called when it is clicked. The function selects all of the input elements in the document and uses the val method to set their value to 100. You can see the effect in Figure 8-19. (The call to the preventDefault method stops the browser posting the HTML form back to the web server—I explain how jQuery supports events in detail in Chapter 9).

Setting Form Element Values Using a Function

As you might expect by now, you can also use a function to set values with the val method. The arguments to the method are the index of the element and the element's current value. The this variable is set to the HTMLElement object representing the element being processed. By using the val method in this way, you can set new values dynamically, as demonstrated in Listing 8-30.

Listing 8-30.  Using the val Method with a Function

...
<script type="text/javascript">
    $(document).ready(function() {
        $("input").val(function(index, currentVal) {
            return (index + 1) * 100;
        });
    });
</script>
...

In this example, I set the value based on the index argument. You can see the effect in Figure 8-20.