Jared Heinrichs

  • Technology Blog
  • Winnipeg Computer Repair
  • Winnipeg Photographer
  • Cooking With Jared
You are here: Home / Programming / jQuery / How to read jQuery for beginners

Oct 21, 2010 By Jared Heinrichs Leave a Comment

How to read jQuery for beginners

I normally find that if you can “read” a programming language then writing it becomes so much easier. In this article I am going to go over how to read some very basic jQuery programing.

How to read jQuery for Beginners 01

This is how I read the code above:

Line 1: When the document is ready run some jQuery Code.

Line 2: Create a variable called slideState and give it the value of “down”

Line 3: If a Hyperlink is clicked, get ready and run everything inside this section

Line 4: If the variable SlideState is equal to Down (otherwise go to line 7) then I want to

Line 5: To grab anything with an ID of BOX and slide it up over 3 seconds.

Line 6: I Now want to let the browser know that the box is now in the “UP” position

Line 7: If the slideState is Up then I want to run some code instead

Line 8: Grab anything with the ID of Box and Slide the Item down over 3 seconds

Line 9: Reset the slideState variable back to the Down position

This jQuery code would work with this xhtml file

How to read jQuery for Beginners 02

The CSS needed would look something like this:

How to read jQuery for Beginners 03

Read my next article on How to read jQuery for Beginners (Part 2)

Filed Under: jQuery Tagged With: How To

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Board Game Rules
  • Camera
  • Computer Hardware
    • Blackberry
    • drivers
    • iPad
    • Magic Jack
    • USB
  • Damn Small Linux
  • Exam Notes
  • Facebook
  • FREE Flashcards
  • Games
    • PC
      • League of Legends
    • Wii
    • xbox 360
  • Music
  • Networking
    • Cisco Certification
    • Mitel
    • Palo Alto Firewall
  • News
    • Google
    • Microsoft
  • Operating System
    • Active Directory (2003)
    • Android
    • Command Prompt
    • Damn Small Linux
    • Group Policy
    • Hyper-V
    • IIS
    • ISA 2006
    • Mac OS X
    • Microsoft Exchange Server
    • Powershell
    • Security
    • SME Server
    • Terminal Server 2003
    • Ubuntu Linux
      • Adito Web SSL VPN
      • OpenVpn-als
      • Webmin
    • Virtual Machine Manager
    • Windows 2003 SBS
    • Windows 2003 Server
    • Windows 2008
    • Windows 2008 R2
    • Windows 2012R2
    • Windows 7
    • Windows 8
    • Windows Command Line
    • Windows Deployment Services
    • Windows Server Backup
    • Windows Vista
    • Windows XP
  • Phones
  • Photography
  • Photos
    • Animals
    • Misc
    • Nature
    • Portraits
  • Portfolio
  • Programming
    • CSS
    • HTML
    • jQuery
    • MySQL
    • PHP
    • Script
  • Programs
    • Acrobat
    • Acrobat Reader
    • Adobe Dreamweaver
    • Adobe Illustrator
    • Adobe Photoshop
    • Anti-virus Software
    • Antivirus
    • Backup Exec
    • Bittorent
    • Blackberry BESADMIN
    • Internet Explorer 9
    • Lightroom
    • Microsoft Office
    • Netbeans
    • Onenote
    • Outlook
    • Shelby
    • Sysprep
    • Trend
    • Video Editing
    • Visual Studio
    • Windows Live Writer
    • WireShark
    • XP Mode
    • Zarafa
  • Recipe
  • Review
  • Software Links
  • Troubleshooting
  • Uncategorized
  • Videos
  • Web Applications
    • Brage
    • Google
    • Spiceworks
    • Wordpress
  • Web Browsers
    • Internet Explorer
  • Web Server
    • XAMPP
  • Winnipeg
    • ISP

Try searching this site!

Copyright © 2021 Winnipeg Web Design