Document

In the following examples, we'll be looking at selectors and filters; but to illustrate jQuery's selection, I'll be using a function called css(). I'll cover that function and a lot more in later sections. Right now, just focus on the selector and filter at the beginning of the samples.

The essence of jQuery selectors is that they are CSS syntax based. This means that most of you are going to find you can work with jQuery very easily, as far as how you use CSS to target and style specific elements on your page.

Selections are declared in the beginning of the main jQuery function as:

jQuery(function(){

jQuery("selector:filter").jqFunctionName();

You can also select the following elements into the jQuery wrapper based on CSS syntax:

• HTML tag names such as body, p, h1, h2, div, and so on

• The id attribute that is used to select instances and is denoted by a # (hash) in CSS, as in #header or #sidebar

• And the class attribute, which is denoted by a . (dot) in CSS as in .body or .post

Of course, any of the combinations that you're allowed to use in CSS to target an element, you can perform with jQuery. For example:

• Tag (space, or no space) #id or .className, such as div#sidebar li —this will grab all li instances in a div with the ID name of sidebar

• Tag,(comma) .class such as p, .post — the comma ensures this will grab everything that is either a paragraph or marked with the .post class

To clarify, just like in CSS, you can also use syntax to structure the selector:

• A comma means select this element, (and) this element. For example: div, p (selects all div tags and all p tags).

• A space means select this element (which has) this element within it. For example: div p .className (selects all div tags that have paragraph p tags inside them with any other elements assigned to .className class inside the p tag).

• Last, no space would indicate a class applied directly to an element not just held within it: p.className (selects all paragraph p tags with the .className assigned to it. This would not select a div tag that had the same .className class assigned to it).

In addition to standard CSS comma space and attached id and class names, within jQuery you can also use these additional symbols to clarify your selections:

• The greater than sign > will only find child elements of a parent that meets the selection.

For example, .post > p will find paragraph p tags that are directly inside the .post class. p tags inside a different class, within the .post class will not be selected.

Let's compare ".post (space) p" to ".post > p" and take a look at the results.

In our first example, we will examine the code as follows:

jQuery(function(){

jQuery(".post p").css("background", "#f60");

Note that this code produces an output similar to the next screenshot, which shows how all paragraphs are highlighted, even though they are nested another level deep with a class named .entry-content:

Ut enim ad minim veniam

Posted on January 27. 2010 by aflmin

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ineididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor ill reprelienderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum t

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ineididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia de se runt mollit anim id est laborum.

Posted in Uncateoorized J Leave a comment ] Ed II

Posted on January 27. 201Q by admin

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ineididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

However, let's look at this code example:

jQuery(function(){

jQuery(".post > p").css("background", "#f60");

Doior sit amet

And let's also look at the following screenshot. We find that no paragraphs are highlighted, because they are inside another div tag with a class named .entry-content and thus, not a child of the .post.

Ut enim ad minim veniam

Posted on January 27. 2010 by admin

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate veiit esse rillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit an im id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse rillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt moliit anim id est laborum.

Posted an Uncaieoorned i Leave a comment 1 Ed t

Dolor sit amet

Posted on January 27. 2010 by admin

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

The + selector will find all next elements to the matching selector. For example: li + li will select every list li item within a list, except for the first item. Just the items next to that first item as shown:

jQuery("li + li").css("background", "#f60");

The following screenshot illustrates this:

The following screenshot illustrates this:

The ~ selector will find all the siblings of the selector. For example: li ~ li will select every list item within a list again, except for the first item, just the sibling items of that first item. The code example is as follows:

jQuery("li ~ li").css("background", "#f60");

As siblings are often next to a selected item, the + and ~ selectors can often receive similar results. Note how the following screenshot looks similar to the previous one:

Ut enim ad minim veniam

Posted on January 27. 2010 by atimtn

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit aiiim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Posted in Uncateqorfzed | Leave a comment | Edit

Categorie a Ufttatefeo

Categorie a Ufttatefeo

Site Admin

(. rinirni-ntr: HS,1. Wordless,org

Blogging For Business

Blogging For Business

Download this Guide And Discover How Start And Run Your Very Own Successful Business Blog. Always Wanted To Start Your Own Blog?

Get My Free Ebook


Post a comment