JQuery

JQuery is the library of JavaScript, it is lightweight “write less, do more” JavaScript library, compatible with all popular browser i.e. IE 9 / 10, Firefox, Chrome, Safari, etc.

  • The jQuery library contains the following features:
  • HTML element selections
  • HTML element manipulation
  • CSS manipulation
  • HTML event functions
  • JavaScript Effects and animations
  • HTML DOM traversal and modification AJAX Utilities

How to add JQuery? Very Simple if we know how to .js file

<script type=”text/javascript” src=”jquery.js”></script>

Rather further due we straight jump in JQuery Syntax

jQuery Selectors


jQuery selectors allow you to select and manipulate HTML elements as a group or as a single element.


jQuery Selectors

It is a key point to learn how jQuery selects exactly the elements you want to apply an effect to.

jQuery selectors allow you to select HTML elements (or groups of elements) by element name, attribute name or by content.

lamp In HTML DOM terms:Selectors allow you to manipulate DOM elements as a group or as a single node.

jQuery Element Selectors

jQuery uses CSS selectors to select HTML elements.

$(“p”) selects all <p> elements.

$(“p.intro”) selects all <p> elements with.

$(“p#demo”) selects all <p> elements with id=”demo”.


jQuery Attribute Selectors

jQuery uses XPath expressions to select elements with given attributes.

$(“[href]”) select all elements with an href attribute.

$(“[href=’#’]”) select all elements with an href value equal to “#”.

$(“[href!=’#’]”) select all elements with an href attribute NOT equal to “#”.

$(“[href$=’.jpg’]”) select all elements with an href attribute that ends with “.jpg”.


jQuery CSS Selectors

jQuery CSS selectors can be used to change CSS properties for HTML elements.

The following example changes the background-color of all p elements to yellow:

Example

$(“p”).css(“background-color”,”yellow”);

Some More Examples

Syntax Description
$(this) Current HTML element
$(“p”) All <p> elements
$(“p.intro”) All <p> elements with
$(“p#intro”) All <p> elements with id=”intro”
$(“p#intro:first”) The first <p> element with id=”intro”
$(“.intro”) All elements with
$(“#intro”) The first element with id=”intro”
$(“ul li:first”) The first <li> element of the first <ul>
$(“ul li:first-child”) The first <li> element of every <ul>
$(“[href$=’.jpg’]”) All elements with an href attribute that ends with “.jpg”
$(“div#intro .head”) All elements with inside a <div> element with id=”intro”

Courtesy by  [http://www.w3schools.com]

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