• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Tips and Tricks HQ

  • Home
  • Blog
  • Projects
    • All Projects
    • Simple WP Shopping Cart
    • WP Express Checkout Plugin
    • WP Download Monitor
    • WP Security and Firewall Plugin
    • WP eStore Plugin
    • WP Affiliate Platform
    • WP eMember
    • WP Lightbox Ultimate
    • WP Photo Seller
  • Products
    • All Products
    • Checkout
  • Support
    • Support Portal
    • Customer Only Forum
    • WP eStore Documentation
    • WP Affiliate Software Documentation
    • WP eMember Documentation
  • Contact

JQuery: An introduction

You are here: Home / Web Development / JQuery: An introduction

Last updated: November 8, 2010





As a web developer we all are familiar with JavaScript. Sometimes we need complex functions to implement our business logic. It is very easy to write complex functions with a few lines of code using JavaScript libraries.

The JQuery library, referred to from here on simply as JQuery, is an extremely popular and easy to use JavaScript library originally written by John Resig. The initial release came on 14 January 2006 and since this time it has continued to be modified and refined by its creator and a growing community of contributors. It is open-source and completely free of charge.

JQuery is a small library based on few very simple intuitive principles. Working with RAW JavaScript or DOM Programming does bring-in its challenges while handling the browser-specific quirks. JQuery provides quite a few utilities to help working in browser agnostic environments. JQuery library strikes right balance between size, feature set and ease of use.

JQuery would help bring-in considerable productivity gains and it’s easy to learn and work. This tool has the potential to bring-about quiet a change in client side development with complex UI with front end logic in JavaScript library.



JQuery is primarily an element selection and DOM manipulation library. It supports the latest CSS3 and XPath selectors which enable us to get practically any element from a page.

JQuery has some advantages over other libraries. These are described below:

Easy DOM traversal: We can get a “<p>” element and then walk the DOM to its last-child, parent or next-sibling for example.

Effortless element manipulation: We can get or set the HTML or plain text content of any element for example, or remove, replace, copy or insert any number of elements.

Complete mastery of the CSS styles of any element: JQuery lets us get or set any CSS value on any element or series of elements.

Event Handling in JQuery: Events are handled very efficiently in JQuery. In JavaScript DOM manipulations for AJAX are done using Asynchronous calls which cause issues while working with different browsers because of DOM implementation. JQuery provides very easy mechanism for binding and unbinding event handlers and provides a normalized event model for all supported browsers. All events are called in the context of the element that caused the event and they receive a fixed up and browser normalized event object that is consistent. To accomplish that we get selectors, a whole slew of operations that can be performed on the wrapped set, DOM normalization for most browsers, Ajax functionality, a host of utility functions for object/array manipulation and a number of basic effect functionality. JQuery also supports JSON for any HTTP callbacks.

A rich effect portfolio: Show or hide, fade-in or fade-out, slide, or animate any element on the page – now it is very much quick and easy.

A unified AJAX request and response system: No more

if (browser == ie) {//do something}
else {//do the same thing differently}.

JQuery manages the request and response via an easy to use and practical interface with built in success and failure handlers.

Wrapped set operations: The real power of JQuery wrapped set comes forth when we apply JQuery operations to all DOM selected elements. JQuery.fn has more than a 100 functions that can operate on matched set and allows manipulating and retrieving selected DOM objects in a batch. If we want to apply styles to alternate rows or any specific rows it is very easy to do that dynamically. Class names can also be dynamically applied. Few methods allow us to go for “get” and “set” operations for .CSS(). Attributes can also be retrieved and set using .ATTR() or retrieve or set a value using .VAL(), .HTML() or .TEXT(). An element can also be cloned from the HTML document and injected into another document either to append or be reversed. Wrapped set operations are also chainable using methods into single command which means it can be taken once and used many times. It can be expanded using .FIND(), .FILTER() or .ADD() methods.

Easy plug-ins: JQuery is a language with DOM extension library with tight focus on core functionality. For everything else JQuery provides an easy plug-in API for almost all operations we can do with DOM operations. JQuery API allows extending the core JQuery object operations simply by creating a function and passing parameter to JQuery wrapped set. Using this method allows us to use the plug-ins which will receive a wrapped set and can operate and participate in JQuery chaining. If no plug-ins satisfies our requirement, we can write our own plug-in which gives us more comfort. This simple and powerful plug-in model is easy to learn and work.

This lightweight open source JavaScript library has become one of the most popular libraries on the web in a relatively short span of time. Software giants like Google, Microsoft recommends this and are using this library in a wide range. So JQuery is becoming the most advanced and strongest tool in web development industry. Now you are ready to spice up your WordPress site with JQuery.

Related Posts

  • Spice up your WordPress Site with JQuery
  • 10 Common HTML Mistakes to Avoid
  • Apache Mod Security update, How to Fix ‘Error 406’ or ‘Not Acceptable’ issue
  • Tools for the Modern PHP Developer

Web Development HTML,  Javascript,  JQuery,  Web Development

Reader Interactions

Comments (8 responses)

  1. Coleen Sosa says:
    December 23, 2010 at 3:10 pm

    […] cool JQuery plugins available on the Internet for download and use. Don’t forget to read the JQuery introduction article if you are new to […]

  2. Fred says:
    December 20, 2010 at 8:57 am

    Very good introduction indeed. Recently i try to learn JQuery, but it’s not easy especialy for a guy not quite familiar with javascript fundamentals. I get some video tutorials and i’m try paying attention to what people explain.
    Greetings

  3. Real Estate Mumbai says:
    November 28, 2010 at 9:30 am

    Excellent JQuery introduction.
    Very very helpful for the beginners.
    For more tutorials visit :
    http://www.w3schools.com/jquery/default.asp

  4. Amr Boghdady says:
    November 21, 2010 at 4:40 pm

    Thanks for the great introduction 🙂
    I plan to learn JavaScript and JQuery as soon as I find some spare time 🙂

  5. Josh Ray says:
    November 17, 2010 at 6:50 am

    Thanks for the link to the official page at the bottom. I don’t know much about programming but I’m always trying to learn more.

  6. Brian Rogel says:
    November 16, 2010 at 4:48 am

    Awesome overview about what JQuery is, where it came from, and how it can be used. It really is an extremely powerful tool in web development, especially in the right hands. It is the perfect resource to compliment an XHTML website with CSS. Thanks for the really helpful information!

  7. admin says:
    November 9, 2010 at 12:06 am

    The official JQuery site is a great place to start with. Check out this page:

    http://docs.jquery.com/Tutorials

  8. David says:
    November 8, 2010 at 9:43 am

    Hi,
    You’ve inspired me to learn JQuery.
    Are there any tutorials online you’d recommend for learning it?

    Great post,
    Dave

Leave a Reply

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

Primary Sidebar

Featured & Popular Articles

Video Answers to Top WordPress QuestionsWordPress Optimization Tips and Tricks for Better Performance and SpeedEssential WordPress Security Tips - Is Your Blog Protected?WordPress Simple PayPal Shopping Cart PluginTop 15 Search Engine Optimization (SEO) Techniques I Forget to DoList of the Best and Must Use WordPress PluginsHow do I Start a Blog and Make Money Online?Good Domain Name Picking Tips for Your Blog SetupFind Out Which WordPress Web Hosting Company Offers the Cheapest and Reliable Web Hosting Solution

Featured WordPress Plugins

wordpress estore plugin
wordpress membership plugin
WP Express Checkout Plugin
WordPress Lightbox Ultimate Plugin
WordPress photo seller plugin
wordpress affiliate plugin

Recent Posts

  • Accept Donations via PayPal from Your WordPress Site Easil [...]
  • Buy Now Button Graphics for eCommerce Websites [...]
  • Subscription Button Graphics for eCommerce Websites [...]
  • Adding PayPal Payment Buttons to Your WordPress Sidebar Ea [...]
  • PayPal QR Codes [...]

Comment & Socialize

  • @Rodrigo Souza, Thank you f ...
    - admin
  • The example for 'slm_add_ed ...
    - Rodrigo Souza
  • @Ron, All the valid transac ...
    - admin
  • Hello, when people have sel ...
    - Ron
  • We have hte following featu ...
    - admin

Check out our solutions

View our WordPress plugin collection and start using them on your site.

Our WordPress Solutions

Footer

Company

  • About
  • Privacy Policy
  • Terms and Conditions
  • Affiliate Login

Top WordPress Plugins

  • Simple Shopping Cart
  • PayPal Donations
  • WP Express Checkout
  • WP eStore
  • WP eMember

Blogging Tips

  • How to Start a Blog
  • Selecting a Good Domain
  • Cheap WP Hosting
  • WP Video Tutorials
  • Simple SEO Tips

Search


Keep In Touch

Copyright © 2023 | Tips and Tricks HQ