What is jQuery?

Posted on Updated on

Image result for jqueryWhat is jQuery?

An open source JavaScript library that simplifies the interaction between HTML and JavaScript.

Built in an attempt to simplify the existing DOM APIs and abstract away cross-browser issues.

Why jQuery?

  • Fully documented.
  • Great community.
  • Tons of plugins.
  • Small size (23kb)
  • Everything works in IE 6+, Firefox 2+, Safari 3+, Chrome, and Opera 9+

Who uses jQuery?

  • Microsoft
  • Google
  • Mozilla
  • IBM
  • Amazon
  • HP
  • Intel
  • Ruby on Rails
  • WordPress
  • Django
  • Drupal
  • CakePHP
  • NET MVC
  • Everyone can agree that jQuery is awesome
  • jQuery is pretty popular.
  • 95% of all sites use jQuery (see Builtwith.com).
  • Google Trends
  • Easy to learn and master
  • Uses CSS to layer functionality.
  • Easy to separate behavior.

The Focus of jQuery

$(“div”).addClass(“special”);

  • Find some elements.
  • Do something with them.

Note: All jQuery methods, in the examples, are linked to the documentation. 

The jQuery Object

$(“div”).addClass(“special”);

  • $ is the jQuery Object (also named jQuery)
  • “div” finds some elements using CSS selectors
  • $(“div”) returns a jQuery set (containing 0 to many DOM nodes).
  • addClass(…) modifies all the divs

Graceful Scripting

$(“.idontexist”).addClass(“special”);

jQuery will gracefully fail when it can’t find anything to run against.

Works just like CSS – write your queries to match what you want, doesn’t break when nothing is found.

Ready Event

$(document).ready(function(){ 
    // Your jQuery code goes in here 
});

In order to traverse and manipulate the page we must wait until it’s ready to be used.

jQuery has a ready event that fires the instant the DOM is ready to be worked with.

Stick all your jQuery code in a ready block, load it unobtrusively.

Find Some Elements

CSS Selector 1-3 support.

Better CSS Selector support than most browsers.

Plus a bunch of custom selectors that make life easier.

(Such as :first, :last, :has(), :visible, :hidden)

Selectors in jQuery

Top of Form

Selector: 

Bottom of Form

 

 

Some Header

 

Paragraph 1

Paragraph 2

</div>

Some Header

Paragraph 1

Paragraph 2

Traversing

$(“button”).parent().css(“border”, “3px solid red”);

Sometimes CSS selectors alone aren’t enough.

jQuery provides a full suite of methods for walking the DOM tree.

.parent(), .next(), .prev(), .children(), .siblings() and many more.

Now that we’ve found the elements we’re looking for, let’s change them!

  • Attributes (addClass, attr)
  • CSS (css)
  • Manipulation (append, prepend, remove, clone)
  • Events (click, hover, toggle)
  • Effects (hide, show, slideDown, fadeOut)
  • Ajax (load, get, post)

For more details and queries please feel free to email, visit or call us. Wishing you the very best for all your future endeavors.

Helpline: 9814666333, 8699444666

Email:info@technocampus.co.in

**************************************************************************************************************

Please fill the FORM and we shall contact you soon.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s