Continuing our Jquery series this is part 2 of the 5 part Jquery learn in a minute series continuation of part1.In this brief tutorial we will see how to retrieve content from our web page using Jquery Selectors and filters.

SELECTORS & FILTERS

  • In Jquery , in order to retrieve contents from page we use 'Selectors & Filters'
  • We can call this as the 'Query part of Jquery'
  • Jquery Selectors return an array of objects of matching criteria
  • The Array is not a set of 'DOM' elements
  • Jquery 'filters' opearate on a selector to further refine the results the selector returns.

 

BASIC JQUERY SELECTORS

SELECTOR PURPOSE
Tag name Find all the elements of the tag name
#identifier Find element by their id
.class name Find elements by class names
tag.classname Selects the corresponding class in the given tag
* Selects all the elements

Comparison Between traditional Js code and Jquery Code:

  • In the Document object Model (DOM) when we want to select all paragraph elements in the document we use

[JavaScript] document.getElementbyTagName(“p”);[/JavaScript]

  • But the same task in Jquery is performed with very short code,we use

       

[JavaScript]$(“p”);[/JavaScript]

Types of Jquery Selectors

All Selector (* Selector)

  • The all selector will select all the elements in a given html page
  • It is represented by the symbol '*'
  • In the below example we find out the count by using the length function
  • We store the length inside a variable and alert the user

[JavaScript]var count=$(‘*’).length; alert(count); [/JavaScript]

Specified Area Selector

  • If we want to select all the elements within a particular area say a div etc we use specified area selector
  • We use '#' to select within a specified area.
  • An Snippet is given below:

[JavaScript]var count=$(‘#area’).find(‘*’).length();[/JavaScript]

ID Selector

  • We can select elements by their id.
  • For eg. an input element can be given an id 'abc'
  • We use abc to select the element.
  • An Snippet is given below:

[JavaScript]var name=$(‘#abc’).val();alert(name); [/JavaScript]

Element Selector

  • We can select any particular element we want by specifying the element
  • In the element selector we can apply filters after a colon (:)
  • In the below example we select a paragraph and add hello to it.
  • In the next statement we specify an filter named 'first' which selects only the first paragraph
  • An Snippet is given below:

[JavaScript]$(‘p’).text(‘Hello’); [/JavaScript]

[JavaScript]$(‘p:first’).text(‘Hello’); [/JavaScript]

Submit and button Selectors

  • These Selectors come under the Form Selectors category.
  • The Symbol we use to select form selectors is generally ';' (semi-colon)
  • In the input typebelow example we select a paragraph and add hello to it.
  • In the next statement we specify an filter named 'first' which selects only the first paragraph
  • An Snippet is given below:

[JavaScript]$(‘p’).text(‘Hello’); [/JavaScript]

Text Selector

  • These Selectors come under the Form Selectors category
  • All Input types with text are selected using the text selector
  • An example Snippet is given below:

[JavaScript]$(‘;text’).focusIn(function(){alert(‘Hello’);}};[/JavaScript]


Multiple Selector

  • Multiple selectors select multiple html elements in a page
  • The selectors are separated by a comma(,)
  • In the below example when an html element is clicked an alert box pops up
  • An example Snippet is given below:

[JavaScript] $(‘#button,#paragraph’).click(function(){ alert(‘something was clicked’); }}; [/JavaScript]

Even/Odd Selector

  • This is a special type of Jquery Selector
  • It is used for example to select odd/even rows,columns or items in a table /list
  • Then the selected elements could be higlighted or made to use as desiredMultiple selectors select multiple html elements in a page
  • Please include a css class for higlight specifying some background color to differntiate the selected elements
  • An example Snippet is given below:

[JavaScript] $(document).ready(function(){$(‘.table tr:odd’).addclass(highlight’); [/JavaScript]

Attribute Selectors

  • Attribute Selectors can be applied to attributes on a html page
  • For eg in HTML5 we have input type name and email
  • If we want to select only email we can distinguish it with its attribute
  • An example Snippet is given below:

[JavaScript] $(‘input type=”email”‘);[/JavaScript]

Contains Selectors

  • The last selector we are going to look today is the Contains Selectors which is a kind of search script.
  • It looks in the list,paragarph,table etc whether it contains the searched string
  • We use the keyword 'contains'
  • For eg consider an ul with id 'names'
  • An example Snippet is given below:

[JavaScript] $(document).ready(function(){$(“#names li:contains(‘searchstring’);[/JavaScript]

Since selectors are so many filters will be covered in the next part.

The Subsequent parts will be posted in the coming days.

Thank u for reading this Article hope it was useful !

-Regards

Sathesh Bm


About Sathesh Bm

Sathesh Bm has written 26 post in this website.

Engineer, Web Lover, Thinker, Blogger

Related Posts Plugin for WordPress, Blogger...