Create a New Style Sheet in the CSS Styles Panel
How to Apply CSS3 Effects and Transforms in Dreamweaver
CSS Code Hinting in Dreamweaver

How to Select Elements with jQuery in CSS3

You can use jQuery to perform a vast array of object selections in your CSS3 application, but for the most part, you use the basic selectors. You can read more about them at jQuery. Here’s a list of basic selectors that you commonly use:

  • All selector (“*”): Selects all the elements in the document.

  • Object selector (object): Selects the specific object types. The most commonly used object is document.

  • Class selector (“.class”): Selects a specific class as specified by the class attribute for an element. This selector always appears within quotes and is preceded by a period.

  • Element selector (“element”): Accesses all the elements with a particular tag name, such as p for the <p> tag. This selector always appears within quotes.

  • ID selector (“#id”): Chooses a specific element with the id attribute value specified. This selector always appears within quotes and is preceded by a pound sign (#).

  • Multiple selector (“selector1, selector2, selectorN”): Selects each of the elements specified in the comma delimited list.

One of the more commonly used selectors is the element selector. After you select an element, you can change it in a number of ways. For example, you might choose to change the text associated with that element in some way (later examples will show all sorts of other ways to manipulate output).

The following example shows how to select elements and modify their associated text. (You can find complete code for this example in the \Chapter 06\jQuery folder of the downloadable code as SelectingElements.html.)

<!DOCTYPE html>
<html>
<head>
 <title>Selecting Elements</title>
 <script
 src="http://code.jquery.com/jquery-latest.js">
 </script>
</head>
<body>
 <h1></h1>
 <p></p>
 <script type="text/javascript">
 $("h1").text("A Sample Header")
 $("p").text("This is a sample paragraph.")
 </script>
</body>
</html>

The example begins with simple <h1> and <p> tags that don’t contain any text. If you displayed this page without the script, you’d see a blank page. However, with the script in place, the page now contains information. It’s also possible to use the text() method to obtain the current value of an object of any sort (assuming the object actually contains text).

image0.jpg
blog comments powered by Disqus
Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
How to Create a Media Query in Dreamweaver
Basics of the CSS3 Units of Measure
CSS References and Resources
How to Grab Colors with ColorZilla’s Eyedropper for CSS3 Sites
Advertisement

Inside Dummies.com