Easy jQuery

Attribute Filters.

[attribute] - select all elements that have specified attribute.
This code will select all divs that have attribute id and set red border around them:

$("div[id]").css("border-color", "red");

Open this example in new window and view source code.

[attribute=value] - select all elements that have attribute with certain value.
This code will select input field with name “myinput” and set their value to “abc”:

$("input[name='myinput']").val("abc");

Open this example in new window and view source code.

[attribute!=value] - select all elements that have not specified attribute or have attribute but with other value.
This code will select all divs whith id != 1 and set red border to them:

$("div[id!='1']").css("border-color","red");

Open this example in new window and view source code.

[attribute^=value] - select all elements that have specified attribute and it starts with certain value.
This code will select all input fileds with name starts with “myinput” and set their value to “abc”:

$("input[name^='myinput']").val("abc");

Open this example in new window and view source code.

[attribute$=value] - select all elements that have specified attribute and it ends with certain value.
This code will select all input fileds with name ends with “input” and set their value to “abc”:

$("input[name$='input']").val("abc");

Open this example in new window and view source code.

[attribute*=value] - select all elements that have specified attribute and it contains certain value.
This code will select all divs with id contains word “number” and set red border around them:

$("div[id*='number']").css("border-color","red");

Open this example in new window and view source code.

[attributeFilter1][attributeFilter2][attributeFilterN] - select all elements that match all of the specified attribute filters.
This code will select all inputs that contains attribute id and which name ends with “input” and set their value to “abc”:

$("input[id][name$='input']").value("abc");

Open this example in new window and view source code.

Child Filters.

:nth-child(index/even/odd/equation) - select all elements that are the nth-child of their parent or that are the parent’s even or odd children. Argument can be integer index (staring with 1) or string - “event”, “odd” or equation.
This code will select all seconds <li> of ul’s and set their color to red:

$("ul li:nth-child(2)").css("color","red");

Open this example in new window and view source code.

:first-child - select all elements that are the first child of their parent.
This code will select all firsts <li> of ul’s and set their color to red:

$("ul li:first-child").css("color","red");

Open this example in new window and view source code.

:last-child - select all elements that are the last child of their parent.
This code will select all last <li> of ul’s and set their color to red:

$("ul li:last-child").css("color","red");

Open this example in new window and view source code.

:only-child - select all elements that are the only child of their parent.
This code will select all <li> of ul’s which have no any siblings and set their color to red:

$("ul li:only-child").css("color","red");

Open this example in new window and view source code.

jQuery it is a JavaScript library, which has been developed in January 2006. There is a slogan on developers website - “jQuery is designed to change the way that you write JavaScript”. These words are completely true. Using this library has a lot of advantages:

• easy and elegant access to the your document’s objects (DOM) and manipulating them using selectors;
• making chains from methods;
• friendly event handling and binding;
• built-in animation features, allowing make your web-page more dynamical without huge volume of code;
• clear interface for working with AJAX;
• well-made documentation with a lot of examples;
• finally – hundreds plug-ins, allowing quickly to solve everyday’s tasks of JavaScript programming.

I think that programming with jQuery is make you work really pleasant. As for me as a developer this library save me a lot of time, allowing concentrate on global tasks but not on details. I have made my blog for telling about this library, about different methods of solving widespread tasks appearing during web programming and about how such a boring task as a creating user interface can enjoy yourself. I’m also planning to review some useful plug-ins too. In the next post I’ll tell you about such a great jQuery tool as “selectors”.