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.