jQuery Tutorials
Getting Started / Manipulating Elements
Subtitles of the Movie (jQuery / Getting Started / Manipulating Elements)
Now that we've seen how to select elements on a page with jQuery and we even saw how we can use the CSS function to alter the appearance of those elements, let's now learn some other ways we can alter the appearance of behavior of elements once we have selected them. Create an HTML document with the code shown here or refer to the included file 2.1.html. On line thirteen we have an empty DIV with an ID called greeting. On line sixteen we select that DIV by using pound sign greeting. We then apply the HTML function who's only attribute is the HTML containing the phrase hello world in bold. When we view this page in a browser, we can see that the content of the DIV tag has changed to the text we specified in the HTML function. Now try this code which demonstrates a very flexible function that you will find extremely useful, called attribute or ATTR. This code is located in 2.2.html. On line thirteen we have an HTML link with a blank H ref value. On line sixteen we use the A colon first selector to choose the first HTML link on the page. Then we add the ATTR function which takes two Properties. The first Property is the name of the attribute we wish to change, which in this case is the H ref content and is now set to go to the VTC.com website. On line seventeen we set the value of the target attribute to underscore blank. Now view this page in your browser and test the link. When clicked it will open a new window, because we specified a blank target and will go to VTC.com. The ATTR function is especially useful as you can use it to manipulate just about any attribute of most HTML tags. Of course if we have the ability to add an attribute to something, we want to have the option to take it away. So in this example shown here, with the code in 2.3.html, we have a working link on line thirteen which is already set to go to VTC.com when clicked and has the target attribute set to blank. However on line sixteen, we use the remove ATTR function to remove the target attribute. When you test this file in your browser, clicking the link works, but it does not open in a new window because we removed the target attribute with jQuery. Now we'll take a look at the add class function which allows us to dynamically add CSS classes to selected elements. Try the code above which can be found in 2.4.html. The head section of this code contains a CSS style definition and a class called red box. We have a simple DIV on line 24 displaying text. Line 28 shows how we use the add class function to add the red box class to the first DIV on the page. Viewing this page in our browser, we can see that jQuery assigned the class to our DIV. Just like the attribute method has a remove attribute method, we can use the remove class method to remove a class from any element that we select. Now I want you to try something on your own. Go ahead and use the remove class method to alter 2.4.html so that the red box class is removed and plain text is shown without the colorful CSS. The trick is to do this without removing any existing code from 2.4.html. We have gone over some of the most useful jQuery functions to manipulate HTML elements and we'll continue to use these methods and many others as we continue.
Tutorial Information
| Course: | jQuery |
| Author: | John Fontana |
| SKU: | 34277 |
| ISBN: | 978-1-61866-020-6 |
| Release Date: | 2011-11-18 |
| Duration: | 7 hrs / 102 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
