jQuery
jQuery is
JavaScript Library which aids developer to play with JavaScript quickly. There
are many features covered in the library which are tested on IE 6.0+, FF 2+,
Safari 3.0+, Opera 9.0+, Chrome. It has around 19KB of footprint.
In JavaScript, we are using document.getElementById
to get the element which we want. And then we operate upon it. The
same functionality is used by $. But if getElementById is
DROP then $ is full RIVER.
There are many parts of learning
jQuery
1.
Selectors: Help you to select the element(s) from the page. It could be one
element or array of elements
$( expression, context ) will be used to select element(s). There are many type of expression supported by jQuery to
easily select what we want. expression will be string with quotes.
Following are the type of selection
we can make with the jQuery
Basic
Selectors
- Suppose you want to select all the div present in the
page, you will write $(“div”), same way for td, its $(“td”)
- If you want element with some ID, remember the CSS
stuff. In CSS when you make class with # sign, it will apply to element
contain that ID. Concept is similar here. jQuery uses CSS selector the
same way. So you can write $(“#Manish”) and it will return element with
id=”Manish”.
·
Same way, remember CSS for class. You put . (dot) before class and apply
that class to any element to enable the style written in class. Here if you
want to find elements which has some class value, you must use .(dot) before that. Suppose you wanted
to find elements with “red” class style throughout page, use $(“.red”).
·
You can mix two or more selector and make your own selector. So you can
write like
$(“div ,p, span”) and it will return array of
all div+p+span tag elements. You can also specify the id/class with the tag.
e.g. $(“p.manish”). It will return all <p> tag with “manish” class.
Index
Filters
With index filters, you can select
the tags with specified index or indexing function. And index filter will be
specified by : (Colon) sign. Actually all the filters will be specified
by : (Colon)
- If you need to select first element from the array for
certain tag, you can query like $(“tr:first”). This will return first
<tr> from the page. Same way $(“tr:last”), $(“tr:even”), $(“tr:odd”)
work.
- There are some function index also, which provides array of elements for criteria known as eq,lt,gt. For example $(“tr:eq(2)”) gives second tr from the page. $(“tr:lt(4)”) provides tr less than 4
Content Filters
With this filter you can query page
using content in query. There are four type of content selector. :Contains(text), :empty, :has(selector),
:parent. example of each is in order.. $(“div:contains(‘Manish’)”),
$(“div:empty”), $(“div:has(p)”, $(“div:parent”) returns all div contains
manish, all div which are empty, all div which has p tag, and last all div
which are parents, accordingly.
Visibility
Filters
Simplest filters of all. Filters are
$(“div:hidden”) and $(“div:visible”)
Attribute
Filters
With attribute filters, you can
query html page with the tags with provided attribute criteria. Attribute
criteria is provided in [ ] (Square
brackets). Please note that in function filters or in attribute filters,
you are using “ (Quotes) anywhere. You can query for input tag which has text
attribute equal to Manish. At some places, you can see @ sign for attribute but
it is deprecated from version 1.2 and removed from 1.3.
- $(“div[id]”) returns all div on the page with id
attribute.
- $(“div[id=’Manish’]”) returns div with id=Manish. Here
you need to provide quotes. same way $(“div[id!=’Manish’]”)
- There are 3 more attribute filter which has blood
relation with regular expression. If you are aware of ^, $ and * sign, it
would be easy to understand. If i write ^Manish, then it will return all
the words started with Manish. If I write $Manish, it will return words
end with Manish. and * is for contains. That means *Manish can find words
which cotains Manish, no matter at which position. Same funda will be used
in $(“input[name^=’btn’]”),
$(“input[name$=’btn’]”),$(“input[name*=’btn’]”)
Generally selectors are used to select
elements from the page and then manipulate the appearance of that element. For
example, $(“p”).css(“color”,”red”) when executed, change the color of all
paragraph to red!!!
0 comments:
Post a Comment