JQuery, the very very basics - Lesson 2

Published Wednesday, September 17, 2008 10:24 PM

Continue on with the series of lessons I learned about some of the very basics of JQuery. Thanks to all of you who has generously kicked, dzoned, redditted my first of N posts on this topic:

JQuery, the very very basics - Lesson 1

So it is nice to be able to use a combination of JQuery selectors to grab an array of elements, however, it would be better if we know how to inspect them one by one and operate on them.

 size() and each(iterator)
 
To determine the size of the set we just selected, we use the size() command.
 
For example, to list all the ids of the <p> elements we just selected, we can use a for ... loop and the size() command:
 
To cut the chase even more, we can use the each() command, which takes a literal function as parameter to deal with each element in the set. The element can be accessed using the this keyword. So rewrite the above code:
 
Get and set attributes' values
 
attr(name) and attr(name, value)
 
Well, you probably have guessed it. The first attr() command lets you access the value of an attibute designated by the name, the second attr() command assign the named attribute with the value specified in the second parameter.
 
For example, I have a dummy <p> element as such:
<p id="p1" title="test">Test, test</p>

$('p#p1').attr('title') returns the value of the attribute title ('test'),  

$('p#p1').attr('title', 'more than a test') change the title's value to "more than a test".  

Css Style: Dress up, dress down

 addClass(names), removeClass(names) and toggleClass(name)
 
addClass dresses up all of the elements in a selected set with one css class or multiple css classes; conversely, removeClass strips off the elements one or more css classes specified by the name paramter, as in:
 
$('p.notes').addClass('notes', 'highlight');
 
$('p.notes').removeClass('highlight');
 
Do not we all love to toggle, add and remove, switch and off? Well, toggleClass command does just this, add the specified css class to element(s) if it is not there, remove it if it is.
 
$('p.notes').toggleClass('highlight');
 
 css(name, value)
 
What if we want to change css style of elements without using any css class names? There, css command affords us to do so.

 $('p.note').css('background-color', 'yellow'); changes the background color of all <p> elements whose class name is note.

 There are more css related commands such as width(value), height(value) to allow us to directly change elements' apparence, for example:

  $('p.note').width(500).height(100); changes the width then height of all <p> elements whose class name is note.

Read more
 
 kick it on DotNetKicks.com
by xxxd
Filed under:

Comments

# DotNetKicks.com said on Wednesday, September 17, 2008 2:45 PM

You've been kicked (a good thing) - Trackback from DotNetKicks.com

# Dew Drop – September 18, 2008 | Alvin Ashcraft's Morning Dew said on Thursday, September 18, 2008 11:54 AM

Pingback from  Dew Drop – September 18, 2008 | Alvin Ashcraft's Morning Dew

# JQuery, the very very basics - Lesson 1 - Programmatically Speaking ... said on Sunday, October 05, 2008 9:44 AM

Pingback from  JQuery, the very very basics - Lesson 1 - Programmatically Speaking ...

# Code Monkey Labs said on Sunday, February 22, 2009 10:46 PM

General Some IoC Container Guidelines : Jimmy Bogard presents some good guidelines for working with your IoC container of choice. Lambdas – Know Your Closures : Jason Olson exposes a tricky behavior of lambdas that can bite even folks that consider

# C55 Amg Replacement Hacks, C55 Amg Up Used said on Thursday, May 20, 2010 1:43 PM

Pingback from  C55 Amg Replacement Hacks, C55 Amg Up Used

# Mellencamp Big Daddy Mansions In Heaven, Mazda Tribute 2002 Consommation said on Thursday, May 20, 2010 8:23 PM

Pingback from  Mellencamp Big Daddy Mansions In Heaven, Mazda Tribute 2002 Consommation

# 1965 Mercury Monterey Marauder, Pebble Beach Monterey said on Friday, May 21, 2010 7:00 AM

Pingback from  1965 Mercury Monterey Marauder, Pebble Beach Monterey

# 260e Mirror Cl65 Amg Mercedes Benz 300cd, 300cd Old Mercedes Benz Parts said on Friday, May 21, 2010 8:22 PM

Pingback from  260e Mirror Cl65 Amg Mercedes Benz 300cd, 300cd Old Mercedes Benz Parts

# Sale 760i Boston, Wholesale Bmw 760i Brake Hose said on Saturday, May 22, 2010 1:05 AM

Pingback from  Sale 760i Boston, Wholesale Bmw 760i Brake Hose

# Mitsubishi Outlander Part Promo, Buy Mitsubishi Outlander Specs Rockford Fosgate said on Saturday, May 22, 2010 1:18 AM

Pingback from  Mitsubishi Outlander Part Promo, Buy Mitsubishi Outlander Specs Rockford Fosgate

# Hp 2420 Fuser Kit Rm1 1535, 242 Hid Xenon said on Saturday, May 22, 2010 4:29 AM

Pingback from  Hp 2420 Fuser Kit Rm1 1535, 242 Hid Xenon

# 600sec Replacement Parts Cl63 Clk63 Amg, 600sec Performance Coupes Mercedes Benz said on Saturday, May 22, 2010 6:40 AM

Pingback from  600sec Replacement Parts Cl63 Clk63 Amg, 600sec Performance Coupes Mercedes Benz

# Ford Maverick Aftermarket Parts, Used 1974 1977 Ford Maverick said on Saturday, May 22, 2010 6:48 AM

Pingback from  Ford Maverick Aftermarket Parts, Used 1974 1977 Ford Maverick

# New Horizon Plymouth, Julie Ault Used Plymouth Horizon said on Saturday, May 22, 2010 7:15 AM

Pingback from  New Horizon Plymouth, Julie Ault Used Plymouth Horizon

# 745i Led Blue, 2004 Bmw 745i City Mpg said on Saturday, May 22, 2010 9:28 AM

Pingback from  745i Led Blue, 2004 Bmw 745i City Mpg

# Miles Per Gallon Saturn L300, Saturn L300 1 Aftermarket said on Saturday, May 22, 2010 9:31 AM

Pingback from  Miles Per Gallon Saturn L300, Saturn L300 1 Aftermarket

# Google Map Api, Promotion Canton Gle Floorstanding Speaker Crossover Frequency said on Saturday, May 22, 2010 10:03 AM

Pingback from  Google Map Api, Promotion Canton Gle Floorstanding Speaker Crossover Frequency

# K35 K3500 Pickup Led Crystal, C32a Pickup Part 1964 Chevrolet said on Saturday, May 22, 2010 10:14 AM

Pingback from  K35 K3500 Pickup Led Crystal, C32a Pickup Part 1964 Chevrolet

# B2000 Cooling System Auto Parts, B2000 Prothrombin Time said on Saturday, May 22, 2010 11:47 AM

Pingback from  B2000 Cooling System Auto Parts, B2000 Prothrombin Time

# Forum 2005 Chevrolet Cobalt, Chevrolet Cobalt Stainless Steel said on Saturday, May 22, 2010 3:06 PM

Pingback from  Forum 2005 Chevrolet Cobalt, Chevrolet Cobalt Stainless Steel

# 1997 Chrysler Lhs Water Fuel Pump, 1996 Chrysler Lhs Specs said on Saturday, May 22, 2010 5:11 PM

Pingback from  1997 Chrysler Lhs Water Fuel Pump, 1996 Chrysler Lhs Specs

# 2001 C240 Sale Mercedes Benz C Class, C240 Front Bumper said on Saturday, May 22, 2010 9:00 PM

Pingback from  2001 C240 Sale Mercedes Benz C Class, C240 Front Bumper

# B100 Taillight Wiring Harnesses Sportsman, B100 Movie said on Saturday, May 22, 2010 10:15 PM

Pingback from  B100 Taillight Wiring Harnesses Sportsman, B100 Movie

# Radiator Cap Mercury Tracer, Tracer Watch Repair said on Saturday, May 22, 2010 10:39 PM

Pingback from  Radiator Cap Mercury Tracer, Tracer Watch Repair

# Caprice Radiator Racing, Accessories Chevrolet Caprice - 301.jeepsunlimted.com said on Sunday, May 23, 2010 12:24 AM

Pingback from  Caprice Radiator Racing, Accessories Chevrolet Caprice - 301.jeepsunlimted.com

# F85 Price 1971 Oldsmobile Cutlass Supreme, 1977 Sell Oldsmobile Cutlass Supreme - 34.tijuanareader.com said on Sunday, May 23, 2010 2:20 AM

Pingback from  F85 Price 1971 Oldsmobile Cutlass Supreme, 1977 Sell Oldsmobile Cutlass Supreme - 34.tijuanareader.com

# Columbia Camo Gloves, Columbia Price Capitol Coffee Tea Maker - 146.unlockiphone30.net said on Sunday, May 23, 2010 3:35 AM

Pingback from  Columbia Camo Gloves, Columbia Price Capitol Coffee Tea Maker - 146.unlockiphone30.net

# 620 Old Info, 620 Pickup Used Nissan 180sx - 293.tijuanareader.com said on Monday, May 24, 2010 8:48 AM

Pingback from  620 Old Info, 620 Pickup Used Nissan 180sx - 293.tijuanareader.com

# 1997 Mercury Mystique Parts Catalytic Converter, 1999 Mercury Mystique Oil Dipstick - 64.mfbattle.com said on Monday, May 24, 2010 10:10 AM

Pingback from  1997 Mercury Mystique Parts Catalytic Converter, 1999 Mercury Mystique Oil Dipstick - 64.mfbattle.com

# D450 Easy Laser Thermal Growth Measurement Resolution, D450 Cable Model - 38.eumreborn.com said on Monday, May 24, 2010 10:22 AM

Pingback from  D450 Easy Laser Thermal Growth Measurement Resolution, D450 Cable Model - 38.eumreborn.com

# Bmw F10 Turbo Engine, F10 Price Location Tokyo - 384.computeronlinebingo.com said on Monday, May 24, 2010 10:26 AM

Pingback from  Bmw F10 Turbo Engine, F10 Price Location Tokyo - 384.computeronlinebingo.com

# Cheap Torrent Mediafire, Sale 2006 Pontiac Torrent Trip Odometer - 468.defutbolazo.com said on Monday, May 24, 2010 10:54 AM

Pingback from  Cheap Torrent Mediafire, Sale 2006 Pontiac Torrent Trip Odometer - 468.defutbolazo.com

# 220d Migrate, 220d Aftermarket Mercedes Benz 190e Clk55 Amg - 237.computeronlinebingo.com said on Monday, May 24, 2010 11:15 AM

Pingback from  220d Migrate, 220d Aftermarket Mercedes Benz 190e Clk55 Amg - 237.computeronlinebingo.com

# Falcon Sale Used Ford Garage, Makes Falcon Tires - 253.luna-atra.net said on Monday, May 24, 2010 11:40 AM

Pingback from  Falcon Sale Used Ford Garage, Makes Falcon Tires - 253.luna-atra.net

# Lhs Video Watch, 1997 Chrysler Lhs Sedan - 283.unlockiphone30.net said on Monday, May 24, 2010 1:05 PM

Pingback from  Lhs Video Watch, 1997 Chrysler Lhs Sedan - 283.unlockiphone30.net

# Part Used Plymouth Trailduster Salvage Yards, Trailduster Parts Window Regulator Exhaust Manifold - 169.unlockiphone30.net said on Monday, May 24, 2010 2:28 PM

Pingback from  Part Used Plymouth Trailduster Salvage Yards, Trailduster Parts Window Regulator Exhaust Manifold - 169.unlockiphone30.net

# Outlander Pt Added, Mitsubishi Outlander Fender Interior - 419.rkwrh.com said on Monday, May 24, 2010 2:31 PM

Pingback from  Outlander Pt Added, Mitsubishi Outlander Fender Interior - 419.rkwrh.com

# Volare Replacement Carpet, Volare Auto Parts Store - 486.an74.com said on Monday, May 24, 2010 5:06 PM

Pingback from  Volare Replacement Carpet, Volare Auto Parts Store - 486.an74.com

# Heater 1995 Mercury Grand Marquis Catalytic Converter, Aftermarket Parts Mercury Grand Marquis Brake Rotors - 433.renters.ws said on Monday, May 24, 2010 5:17 PM

Pingback from  Heater 1995 Mercury Grand Marquis Catalytic Converter, Aftermarket Parts Mercury Grand Marquis Brake Rotors - 433.renters.ws

# F 550 Pickup Fifth Wheel, Supercharger 2002 Chevrolet Silverado 1500 - 7.binggreen.com said on Monday, May 24, 2010 5:42 PM

Pingback from  F 550 Pickup Fifth Wheel, Supercharger 2002 Chevrolet Silverado 1500 - 7.binggreen.com

# Part 2002 Infiniti G20 Alloy Wheels Rims, 2010 Schedule Infiniti Qx56 - 366.renters.ws said on Monday, May 24, 2010 6:03 PM

Pingback from  Part 2002 Infiniti G20 Alloy Wheels Rims, 2010 Schedule Infiniti Qx56 - 366.renters.ws

# Woodworking Pencil Compass, Barnes And Noble Compass - 422.jordanbrandallamerican.com said on Monday, May 24, 2010 6:57 PM

Pingback from  Woodworking Pencil Compass, Barnes And Noble Compass - 422.jordanbrandallamerican.com

# Chrysler Newport 1960 Dodge Dart, 1962 Chrysler Newport Sale Dodge Polara - 327.an74.com said on Monday, May 24, 2010 8:39 PM

Pingback from  Chrysler Newport 1960 Dodge Dart, 1962 Chrysler Newport Sale Dodge Polara - 327.an74.com

# Protege5 Fog Led, Protege5 Fog Led - 230.computeronlinebingo.com said on Tuesday, May 25, 2010 1:50 AM

Pingback from  Protege5 Fog Led, Protege5 Fog Led - 230.computeronlinebingo.com

# 1993 Dodge D150 Organs Ram 4500, Pd150 Coolant Sfs - 438.eumreborn.com said on Tuesday, May 25, 2010 2:54 AM

Pingback from  1993 Dodge D150 Organs Ram 4500, Pd150 Coolant Sfs - 438.eumreborn.com

# Shirt Executive Limo, Executive Limousine Factory Cadillac Escalade Rentals - 14.jordanbrandallamerican.com said on Tuesday, May 25, 2010 3:21 AM

Pingback from  Shirt Executive Limo, Executive Limousine Factory Cadillac Escalade Rentals - 14.jordanbrandallamerican.com

# Jeep Scrambler Howto, Grand Wagoneer Used Cars Jeep Scrambler - 174.1fh.org said on Tuesday, May 25, 2010 3:22 AM

Pingback from  Jeep Scrambler Howto, Grand Wagoneer Used Cars Jeep Scrambler - 174.1fh.org

# Lexus Is250 Used Parts Gs, 97 Gs300 Grill Lexus Is250 - 425.eumreborn.com said on Tuesday, May 25, 2010 4:43 AM

Pingback from  Lexus Is250 Used Parts Gs, 97 Gs300 Grill Lexus Is250 - 425.eumreborn.com

# 240d Parts Aftermarket, 240d Low Ml55 Amg - 107.mfbattle.com said on Tuesday, May 25, 2010 5:40 AM

Pingback from  240d Parts Aftermarket, 240d Low Ml55 Amg - 107.mfbattle.com

# Justy Factory Valve Cover Gasket Manual, Justy Bumper 1987 Subaru - 253.computeronlinebingo.com said on Tuesday, May 25, 2010 6:31 AM

Pingback from  Justy Factory Valve Cover Gasket Manual, Justy Bumper 1987 Subaru - 253.computeronlinebingo.com

# 1991 Pictures Ford Explorer Eddie Bauer, Explorer Reliability - 93.unlockiphone30.net said on Tuesday, May 25, 2010 6:53 AM

Pingback from  1991 Pictures Ford Explorer Eddie Bauer, Explorer Reliability - 93.unlockiphone30.net

# 545i Warehouse Bmw Parts, Buy 545i Car Bmw Z8 - 288.1fh.org said on Tuesday, May 25, 2010 1:04 PM

Pingback from  545i Warehouse Bmw Parts, Buy 545i Car Bmw Z8 - 288.1fh.org

# Sierra Vista Sales Tax, Sierra Vista Stop - 240.ja3ra.com said on Tuesday, May 25, 2010 1:28 PM

Pingback from  Sierra Vista Sales Tax, Sierra Vista Stop - 240.ja3ra.com

# 400e Headlight Toll, 400e Part Fuel Injector Spark Plug Wires - 200.akemet.com said on Tuesday, May 25, 2010 4:01 PM

Pingback from  400e Headlight Toll, 400e Part Fuel Injector Spark Plug Wires - 200.akemet.com

# Lexmark E450dn Software Toner, E450 Cutaway Radiator Nimh Battery Pack - 351.eumreborn.com said on Tuesday, May 25, 2010 7:17 PM

Pingback from  Lexmark E450dn Software Toner, E450 Cutaway Radiator Nimh Battery Pack - 351.eumreborn.com

# Sell Used Pontiac Sunbird, Engines For Sale 1991 Pontiac Sunbird - 371.tvshowzone.com said on Tuesday, May 25, 2010 9:47 PM

Pingback from  Sell Used Pontiac Sunbird, Engines For Sale 1991 Pontiac Sunbird - 371.tvshowzone.com

# Azera Installation Spy Shots, Azera Order - 407.renters.ws said on Tuesday, May 25, 2010 10:36 PM

Pingback from  Azera Installation Spy Shots, Azera Order - 407.renters.ws

# 2005 - 2002 @ Rio5 Fog Lights, Rio5 Affordable - 173.tgrconversions.com said on Thursday, May 27, 2010 5:30 AM

Pingback from  2005 - 2002 @ Rio5 Fog Lights, Rio5 Affordable - 173.tgrconversions.com

# 1989 - 2000 @ 94 Lumina Transmission, Lumina Health Cellfood Dna Rna Cell Regeneration - 253.myipgirl.com said on Thursday, May 27, 2010 5:57 AM

Pingback from  1989 - 2000 @ 94 Lumina Transmission, Lumina Health Cellfood Dna Rna Cell Regeneration - 253.myipgirl.com

# 1995 - 1983 @ 2007 Boeing Citation Cj3 Sale, 1953 Willys Jeep Cj3a Specs - 476.tijuanareader.com said on Thursday, May 27, 2010 6:16 AM

Pingback from  1995 - 1983 @ 2007 Boeing Citation Cj3 Sale, 1953 Willys Jeep Cj3a Specs - 476.tijuanareader.com

# 2000 - 1996 @ 2006 Ford Escape Sale Ontario, Warrior Batch - 22.myipgirl.com said on Thursday, May 27, 2010 8:42 AM

Pingback from  2000 - 1996 @ 2006 Ford Escape Sale Ontario, Warrior Batch - 22.myipgirl.com

# 2001 - 2006 @ 260e Pt Salvage Dodge Ramcharger, 260e P453 300te Replacement Part - 171.dlmreza.net said on Sunday, May 30, 2010 8:07 PM

Pingback from  2001 - 2006 @ 260e Pt Salvage Dodge Ramcharger, 260e P453 300te Replacement Part - 171.dlmreza.net

# 1987 - 1991 @ Aftermarket Comanche Jeep Cj5, Jeep Comanche Heater - 395.unlockiphone30.net said on Sunday, May 30, 2010 8:11 PM

Pingback from  1987 - 1991 @ Aftermarket Comanche Jeep Cj5, Jeep Comanche Heater - 395.unlockiphone30.net

# 2005 - 1992 @ Under Armour Impulse Athletes, Impulse Supplier - 486.defutbolazo.com said on Sunday, May 30, 2010 8:32 PM

Pingback from  2005 - 1992 @ Under Armour Impulse Athletes, Impulse Supplier - 486.defutbolazo.com

# 1993 - 1987 @ City On The Rhone Delta, 1990 Oldsmobile Delta 88 Body Parts Bumper Filler - 132.tvshowzone.com said on Sunday, May 30, 2010 10:05 PM

Pingback from  1993 - 1987 @ City On The Rhone Delta, 1990 Oldsmobile Delta 88 Body Parts Bumper Filler - 132.tvshowzone.com

# 1989 - 2008 @ Florist Express Wholesale Same Day Flower, Used Car Auto Expo Sema Show - 144.binggreen.com said on Sunday, May 30, 2010 10:25 PM

Pingback from  1989 - 2008 @ Florist Express Wholesale Same Day Flower, Used Car Auto Expo Sema Show - 144.binggreen.com

# 1996 - 1985 @ Replacement 1997 Ls400 Turn Signal Assembly Lexus Rx330, Car Giant Volvo S40 - 437.tvshowzone.com said on Sunday, May 30, 2010 10:50 PM

Pingback from  1996 - 1985 @ Replacement 1997 Ls400 Turn Signal Assembly Lexus Rx330, Car Giant Volvo S40 - 437.tvshowzone.com

# 1986 - 1982 @ Sephia Analysis, 2001 Kia Sephia Mileage 4dr - 478.cmanager.org said on Monday, May 31, 2010 2:00 AM

Pingback from  1986 - 1982 @ Sephia Analysis, 2001 Kia Sephia Mileage 4dr - 478.cmanager.org

# 1996 - 1983 @ Hp 4200 Fuser Parts Heating Element, Lincoln High Used Elementary School - 84.jeepsunlimted.com said on Monday, May 31, 2010 2:27 AM

Pingback from  1996 - 1983 @ Hp 4200 Fuser Parts Heating Element, Lincoln High Used Elementary School - 84.jeepsunlimted.com

# 2001 - 2006 @ Bmw 635csi Aftermarket Auto Parts, 635csi Fog Light Headlight Bulb - 466.an74.com said on Monday, May 31, 2010 3:31 AM

Pingback from  2001 - 2006 @ Bmw 635csi Aftermarket Auto Parts, 635csi Fog Light Headlight Bulb - 466.an74.com

# 1980 - 1991 @ Chevrolet R2500 Suburban Valve Cover K5 Blazer, Cheap Gmc R2500 Suburban Engines - 489.animejin.com said on Monday, May 31, 2010 2:10 PM

Pingback from  1980 - 1991 @ Chevrolet R2500 Suburban Valve Cover K5 Blazer, Cheap Gmc R2500 Suburban Engines - 489.animejin.com

# 1992 - 2001 @ 318is Bargain, 325xi Radiator Nissens 323is Bmw 318is - 209.an74.com said on Monday, May 31, 2010 2:59 PM

Pingback from  1992 - 2001 @ 318is Bargain, 325xi Radiator Nissens 323is Bmw 318is - 209.an74.com

# 1981 - 1980 @ Pontiac Grandville Blub Classic Pontiacs, Grandville Lighting Mi - 110.zapstreaming.com said on Monday, May 31, 2010 3:16 PM

Pingback from  1981 - 1980 @ Pontiac Grandville Blub Classic Pontiacs, Grandville Lighting Mi - 110.zapstreaming.com

# 1993 - 1987 @ 1996 Gmc K1500 Parts High Quality, C35 Headlight Direct Fit 1969 Gmc 5.0 L - 411.tgrconversions.com said on Monday, May 31, 2010 3:30 PM

Pingback from  1993 - 1987 @ 1996 Gmc K1500 Parts High Quality, C35 Headlight Direct Fit 1969 Gmc 5.0 L - 411.tgrconversions.com

# 1984 - 2003 @ T1000 Sunbird Used Pontiac, T1000 Sell Truck King Hpi Baja 5b - 369.computeronlinebingo.com said on Monday, May 31, 2010 4:04 PM

Pingback from  1984 - 2003 @ T1000 Sunbird Used Pontiac, T1000 Sell Truck King Hpi Baja 5b - 369.computeronlinebingo.com

# 1990 - 2007 @ Saturn Sc2 Light Bulb, Saturn Sc2 Headlight Bulb - 460.jeepsunlimted.com said on Monday, May 31, 2010 5:10 PM

Pingback from  1990 - 2007 @ Saturn Sc2 Light Bulb, Saturn Sc2 Headlight Bulb - 460.jeepsunlimted.com

This site

This Blog

Syndication

Sponsors

  • MaximumASP