How to use JQuery Form Filters : Examples

JQuery Form filters let you deal with form elements in the DOM easily. For more information and usage about JQuery form filters please refer this post.

This post written by me has more about jquery form filters in details.
In this tutorial we will demonstrate how to select form elements with Jquery filters and apply some CSS changes for it.

Usage of JQuery Form Filters

selecting form elements can be done with JQuery form filters easily. They work like other selectors but starts with colon(:) like regular filters. There are 5 more types of filters and please refer this post about Jquery basic filters for details about other filters.

Here is a list of usage of JQuery Form Filters

JQuery Child Filters

Child filters are one type of filters among 6 different types of filters That provide by JQuery. Please refer this post for details about other JQuery Filters.

With JQuery child filters you can refine by examining the relationship each element has with its parent elements.

Here is the list of usage of child filters.

JQuery Content Filters Visibility Filters

There are 6 different types of filters in JQuery to provide more control over selecting elements. Usage about content filters and visible filters will be discussed in this post.

These filters provide ability to examine the content of selected elements or their visibility property to determine whether they should be included or excluded from the final set.

How to use JQuery attribute filters : Examples

JQuery filters make our work easy by providing a great control over selecting DOM elements.
In this post, examples for using JQuery attribute filters will be demonstrated.
Refer this post for get more details about JQuery attribute filters and their usage.

Lets see some examples of how to select elements with JQuery attribute filters.

Usage of JQuery attribute filters

Filters work with selectors and provide a great control for selecting the elements in DOM. So basically it makes easy our work for selecting elements in DOM.

JQuery filters fall in to six different categories. 

1. Basic filters
2. Content filters
3. Visibility filters
4. Attribute filters
5. Child filters
6. Form filters

In this post is about Attribute filters.

How to use Jquery Basic filters

JQuery filters provide a great control for selecting the elements in DOM as we discussed in earlier post.
For get a better understand about filters read more about JQuery flters from this link.

In this post lets see how to select elements using JQuery filters and applying simple CSS on them

Same HTML file used in previous tutorial for JQuery selectors will be used in this tutorial as well.

Lets get in to work.

here are the JQuery code snippets for filtering DOM elements

1. Get the first element from a returned set
   $("p:first").css("border","3px solid red");
   This will get the first paragraph element and put a red border around it


2. Get the last element from a returned set
   $("p:last").css("border","3px solid red");
   This will get the last paragraph element and put a red border around it


3. Get the odd elements from a returned set
   $("p:odd").css("border","3px solid red");
   This will get the odd paragraph elements and put red borders around them


4. Get the even elements from a returned set
   $("p:even").css("border","3px solid red");
   This will get the even paragraph elements and put red borders around them


5. Get the elements past an index from a returned set
   $("p:gt(1)").css("border","3px solid red");
   This will get the paragraph elements indexed as greater than 1 and put red borders around them


6. Get the element equal to an index from a returned set
   $("p:eq(1)").css("border","3px solid red");
   This will get the paragraph element indexed as equal to 1 and put red borders around it


7. Get the element not equal to an index from a returned set
   $("p:not(p:eq(1))").css("border","3px solid red");
   This will get all the paragraph elements not indexed as 1 and put red borders around them

Try these simple JQuery selectors and make easy manipulating your DOM.

Please add a comment if you have some thing to add or you are not clear with something.

Basic JQuery filters

Filters work with selectors and provide a great control for selecting the elements in DOM. So basically it makes easy our work for selecting elements in DOM.

JQuery filters fall in to six different categories. 

1. Basic filters
2. Content filters
3. Visibility filters
4. Attribute filters
5. Child filters
6. Form filters

In this post I'm going to discuss about Basic JQuery filters. It provides basic filtering like getting first, last and even and odd numbered items in a returned set.

A List of usage of JQuery filters.

Filter	Purpose
:first	selects only the first instance of the selector's returned set
:last	selects only the last instance of the selector's returned set
:even	selects only even numbered elements of the selector's returned set
:odd	selects only odd numbered elements of the selector's returned set
:eq(n)	filters out elements that are positioned at the given index
:gt(n)	include elements that are past the given index
:lt(n)	include elements that are before the given index
:header	select all header elements (H1, H2, H3 etc)
:animated	selects all elements that are currently being animated in some way
:not(selector)	includes elements that do not match the given selector

This is just a list of what can be done with JQuery filters.

Please refer this post for practical examples of usage of JQuery basic selectors.

How to use basic JQuery selectors - Part II

This is  the part II of basic JQuery selectors tutorial. You can read Part 1 get example test html file from previous post.
In this post I'm going to talk about retrieve elements with hierarchical relationships using JQuery selectors.

JQuery heirarchical selectors

• $("p, li.b").css("border","3px solid red");
  This will get the paragraph elements and List elements that has class attribute "b" and putt a red border around them


• $("ul li.a").css("border","3px solid red");
  this is called descendent selector (for more details). This will get all the list elements has class "a" with in <ul> elements.


• $("ul+p").css("border","3px solid red");
  This will get the paragraph element next to <ul> element


• $("#list1 ~ p").css("border","3px solid red");
  This is called sibling selector(for more details). This will get the every paragraph element after element with ID of "list1"

Please feel free to add a comment if you have any problem or some thing to add.

How to use basic JQuery selectors

JQuery selectors are a great way to retrieve content form a page and manipulate the DOM. Its is far more easy to use than using plain browser DOM.

First lets see how to use JQuery selectors to retrieve content from a page and manipulate it.

Examples

<!DOCTYPE html >
<html>
<head>
 <title>Document</title>
 <script type="text/javascript" src="Scripts/jquery-1.11.3.js"></script>
 <script >
  $("document").ready(function(){
   //Your jquery code run when document is ready
  });
 </script>
 <style type="text/css">
  .a { color: Navy; }
  .b { color: Maroon; }
 </style>
</head>
<body>
 <ul id="list1">
 <li class="a">item 1</li>
 <li class="a">item 2</li>
 <li class="b">item 3</li>
 <li class="b">item 4</li>
 </ul>
 <p class="a">This is paragraph 1</p>
 <p>This is paragraph 2</p>
 <p class="b">This is paragraph 3</p>
 <p>This is paragraph 4</p>
</body>
</html> 

This is the code for the html file
In this tutorial we select the elements and put a red border around that element. lets see how to select elements with JQuery. Test following select methods by using codes in place where"Your jquery code run when document is ready" comment appears.

1. Get elements by type
   $("p").css("border","3px solid red");
   This will get all elements type of  "p" that is paragraph elements and put a red border around it. 


2. Get elements by ID name
   $("#list1").css("border","3px solid red"); This will get all elements that has ID of "list1" and put a red border around it


3. Get elements by class attribute
   $(".a").css("border","3px solid red");
   This will get all elements that has class name "a" and put a red border around it.


4. Get one type type of elements which has a particular class name
   $("p.b").css("border","3px solid red");
   this will get all the paragraph elements which has class attribute of "b".

NOTE:
You need to make sure that you have given correct path to your jquery.js file

Here is a more comprehensive list of JQuery selectors

Selectors and their uses. 

• tagname - Finds all elements that have type "tagname"
• #identified - Finds all elements that have ID of "identifier"
• .className - Finds all elements that have a class attribute of "className"
• tag.className - Finds all elements that have the type "tag" and a class attribute of "className"
• tag#id.className -  Finds all elements type of "tag" that has ID of "id" and a class attribute of "className"
• * - Finds all the elements on the page

For more JQuery Selectors refer this post as well

please add a comment if you have any questions or some thing to add to this post