Easy jQuery

Content Filters.

:contains(text) - select all elements which contain given text.
This code will underline all divs which contain name John:

$("div:contains('John')").css("text-decoration", "underline");

Open this example in new window and view source code.

:empty - select all elements which has no any elements, nodes or texts.
This code will fill all empty cells of table whith text “This was empty!”:

$("td:empty").text("This was empty!");

Open this example in new window and view source code.

:has(selector) - select all elements which has at least one element specified by selector.
This code will add class .test to all divs which contains at least one tag <p>>:

$("div:has").addClass("test");

Open this example in new window and view source code.

:parent - select all elements that are parents (has at least one child element).
This code will select all cells which has child elements and change opacity of its background color:

$("td:parent").fadeTo(1500, 0.3);

Open this example in new window and view source code.

Visibility Filters.

:hidden - select all hidden elements or input fields.
This code will show all hidden divs and count hidden form elements:

$("div:hidden").show(3000);
$("span").text("Found " + $("input:hidden").length + " hidden inputs.");

Open this example in new window and view source code.

:visible - select all visible elements.
This code will set background color to yellow to all divs that are visible (than, we will show hidden divs to ensure that they are not changes color to yellow):

$("div:visible").css("background-color","yellow");
$("div:hidden").show(3000);

Open this example in new window and view source code.

Basic filters.

:first - select first element.
This code will set font to italic on first row of the table:

$("tr:first").css("font-style","italic");

Open this example in new window and view source code.

:last - select last element
This code will select the last row of table and set background color to yellow and font to bold:

$("tr:last").css({
  backgroundColor: "yellow",
  fontWeight: "bolder"
});

Open this example in new window and view source code.

:not(selector) - select all elements which has not filtered by selector.
This code select all spans on the page that have not class “myclass” and set their background color to red:

$(":not(.myclass) + span").css("background-color","red");

Open this example in new window and view source code.

:even - select all even elements, zero-indexed.
This code select all even table rows and set their background color to red:

$("tr:even").css("background-color","red");

Open this example in new window and view source code.

:odd - select all odd elements, zero-indexed.
This code select all odd table rows and set their background color to red:

$("tr:odd").css("background-color","red");

Open this example in new window and view source code.

:eq(index) - select single element by index, zero-indexed.
This code select second cell in a table and set their background color to red:

$("td:eq(2)").css("background-color","red");

Open this example in new window and view source code.

:gt(index) - select elements with index, greater than given one, zero-indexed.
This code select all cells in a table with index greater than 3 and set their background color to red:

$("gt:eq(3)").css("background-color","red");

Open this example in new window and view source code.

:lt(index) - select elements with index, below than given one, zero-indexed.
This code select all cells in a table with index less than 3 and set their background color to red:

$("gt:lt(3)").css("background-color","red");

Open this example in new window and view source code.

:header - select all header on the page (h1, h2, …).
This code select all headers and set their font color to blue:

$(":header").css("color","blue");

Open this example in new window and view source code.

:animated - select all currently animated elements on page.
This code select change color of any div, beeng animated:

$("#run").click(function(){
      $("div:animated").toggleClass("colored");
});
function animateIt() {
      $("#mover").slideToggle("slow", animateIt);
}
animateIt();

Open this example in new window and view source code.

1. When you add some handler for the event - it does no replace previous handler . So both handlers will run.

In this example, if you click on element with id “example” - you will see both alerts:

$('#example').click(function(){ alert('one'); } );
$('#example').click(function(){ alert('two'); } );

2. Basing on previous fact we can do next conclusion - you can use function

$(document).ready();

as many times as you want in your page.

3. You can create your own events in jQuery. This method allow make your code more simple and readable.

$('button').click(function(){ jQuery.event.trigger('buttonClicked'); });
$('div').bind('buttonClicked',function(){ $(this).hide(); });
$('span').bind('buttonClicked',function(){ $(this).show(); });

4. Annimation effects in iQuery is asynchronous so question “how to excecute one function exactly after another” can appears very often. But all animation core-functions of jQuery receive callback function as a last argument.

$('element-1').fadeOut(3000,function() {
                        $('element-2').fadeIn(1500,function() {
                            alert('done second effect');
                        });
});

5. You can add any attribute to any html-element:

<span myownattr="somevalue" />

and match them using jQuery selectors:

var elements_by_attr = $('[@myownattr]');
var elements_by_attr_with_value = $('[@myownattr="somevalue"]');
var spans_by_attr = $('span[@myownattr]');

Selectors - is a key to understanding jQuery. Generally, it’s combination of CSS 1-3, XPath and custom code. Selectors allow you easy and quick identify any set of webpage elements for manipulating. Selecting the part of document is performed by using function jQuery(). This is the most important function of library. Depending of passed arguments it can do many things. It this post I will use syntax jQuery (element) which wrap jQuery functionality around a single or multiple set of document elements. This function also has alias $(), which make scripts more readable.
So, let’s talk about type of selectors.

Basic selectors.

#id - select single element with the given id.
This code will set red 3-pixels border to div with id=”mydiv”:

$("#mydiv").css("border","3px red");

Open this example in new window and view source code.

element - select all elements on page with given name.
This code select all div’s on webpage and set red border around them:

$("div").css("border","3px solid red");

Open this example in new window and view source code.

.classname - select all elements with given class.
This code make all elements with class “myheadertext” look in bold:

$(".myheadertext").css("font-weight","bold");

Open this example in new window and view source code.

* - select all elements on page.
This code will set red border to all elements on page (including html and body!):

$("*").css("border","3px solid red");

Open this example in new window and view source code.

selector1, selector2, selector3, … - select set of selectors.
This code will select 3 divs on page and set padding from top to 10px for them:

$("#div1, #div2, #div3").css("padding-top", "10px");

Open this example in new window and view source code.

Hierarchy selectors.

ancestor descendant - select all descendant elements specified by “descendant” of elements specified by “ancestor”.

This code select inputs of given form and set blue dotted border about them:

$("form input").css("border", "2px dotted blue");

Open this example in new window and view source code.

parent > child - select all child elements specified by “child” of elements specified by “parent”. Notice that this selector match only direct child elements (first level).
This code select all childs of element with id=”main” and set double red border around them:

$("#main > *").css("border", "3px double red");

Open this example in new window and view source code.

prev + next - select all next elements specified by “next” that are next to elements specified by “prev”.
Select all input fileds that are next to label and set their value to “Labeled!” of blue color:

$("label + input").css("color", "blue").val("Labeled!");

Open this example in new window and view source code.

prev ~ siblings - select all elements that are siblings after the “prev” element.
Select all divs on the same level after div with id=”prev” and set them blue border:

$("#prev ~ div").css("border", "3px groove blue");

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”.