Programming4us
         
 
 
Programming

jQuery 1.3 : Developing plugins - Adding a selector expression

11/24/2010 9:15:52 AM
Built-in parts of jQuery can be extended as well. Rather than adding new methods, we can customize existing ones. A common desire, for example, is to expand on the selector expressions provided by jQuery to provide more esoteric options.

The easiest type of selector expression to add is a pseudo-class; these are the expressions that start with a colon, such as :checked or :nth-child(). To illustrate the process of creating a selector expression, we'll build a pseudo-class called :css(). This new selector will allow us to locate elements based on the numeric values of their CSS attributes.

When using a selector expression to find elements, jQuery looks for instructions in an internal map called expr. This map contains JavaScript code to execute on an element, causing the element to be contained in the result set if the code evaluates to true. We can add new expressions to this map using the $.extend() function.

jQuery.extend(jQuery.expr[':'], {
'css': function(element, index, matches, set) {
var parts = /([\w-]+)\s*([<>=]+)\s*(\d+)/
.exec(matches[3]);
var value = parseFloat(jQuery(element).css(parts[1]));
switch (parts[2]) {
case '<':
return value < parseInt(parts[3]);
case '<=':
return value <= parseInt(parts[3]);
case '=':
case '==':
return value == parseInt(parts[3]);
case '>=':
return value >= parseInt(parts[3]);
case '>':
return value > parseInt(parts[3]);
}
}
});

This code tells jQuery that css is a valid string that can follow a colon in a selector expression, and that when it is encountered, the given function should be called to determine whether the element should be included in the result set.

The function that is evaluated here is passed four parameters:

  • element: The DOM element under consideration. This is needed for most selectors.

  • index: The index of the DOM element within the result set. This is helpful for selectors like :eq() and :lt().

  • matches: An array containing the result of the regular expression that was used to parse this selector. Typically, matches[3] is the only relevant item in the array; in a selector of the form :a(b), the matches[3] item contains b, the text within the parentheses.

  • set: The entire set of DOM elements matched up to this point. This parameter is rarely needed.

Pseudo-class selectors need to use the information contained in these four arguments to determine whether or not the element belongs in the result set. In this case, and matches are all that we require. element

In our selector function, we first break down the selector into usable parts with a regular expression. We want a selector like :css(width < 200) to return all elements with a width of less than 200. So we need to look at the text within the parentheses to pull out the property name (width), comparison operator (<), and value to compare against (200). The regular expression /([\w-]+)\s*([<>=]+)\s*(\d+)/ performs this search, placing these three portions of the string into the parts array for our use.

Next, we need to fetch the current value of the property. We can use jQuery's .css() method to return the value of the property that has been named in the selector. Since this property is returned as a string, we use parseFloat() to turn it into a number.

Finally, we perform the actual comparison. A switch statement determines which type of comparison is done depending on the content of the selector, and the result of the comparison (true or false) is returned.

We now have a new selector expression we can use anywhere in our jQuery code. A simple HTML document can demonstrate this:

<body>
<div>Deserunt mollit anim id est laborum</div>
<div>Ullamco</div>
<div>Ut enim ad minim veniam laboris</div>
<div>Quis nostrud exercitation consequat nisi</div>
<div>Ut aliquip</div>
<div>Commodo</div>
<div>Lorem ipsum dolor sit amet ex ea</div>
</body>

With our new selector, it becomes trivial to highlight the smaller items in this list:

$(document).ready(function() {
$('div:css(width < 100)').addClass('highlight');
});

Other -----------------
- jQuery 1.3 : Developing plugins - Method parameters
- The LINQ Set Operators
- iPhone 3D Programming : Vertices and Touch Points - Creating a Wireframe Viewer (part 3)
- iPhone 3D Programming : Vertices and Touch Points - Creating a Wireframe Viewer (part 2)
- iPhone 3D Programming : Vertices and Touch Points - Creating a Wireframe Viewer (part 1)
- iPhone 3D Programming : Vertices and Touch Points - Boosting Performance with Vertex Buffer Objects
- iPhone 3D Programming : Vertices and Touch Points - Saving Memory with Vertex Indexing
- iPhone 3D Programming : Vertices and Touch Points - Reading the Touchscreen
- iPhone 3D Programming : HelloCone with Shaders
- Search Engine Basics : Country-Specific Search Engines
- Search Engine Basics : Vertical Search Engines
- Building Android Apps : Animation - Adding the Settings Panel
- Building Android Apps : Animation - Adding the New Entry Panel
- Building Android Apps : Animation - Adding the Date Panel
- Building Android Apps : Animation - Adding the Dates Panel
- Building Android Apps : Animation - Sliding Home
- Programming Windows Azure : Understanding the Value of Queues
- Programming Windows Azure : Table Operations - Deleting Tables, Deleting Entities
- Programming Windows Azure : Table Operations - Updating Entities
- Programming Windows Azure : Table Operations - Understanding Pagination
 
 
Most View
- Windows Server 2008 : Configuring Terminal Services Clients
- SharePoint 2010 : Use the Datasheet View to Add, Edit, or Delete Items and Files
- Setting Up a Full-Text Index (part 4) - Using the Full-Text Indexing Wizard to Build Full-Text Indexes and Catalogs
- SharePoint 2010 : Specify How Folders Will Be Used in a View
- Building Android Apps : Animation - Sliding Home
- Windows Phone 7 : Synching Notes to the Web
- Scripting Windows 7 with WSH : Programming the Windows Management Instrumentation Service
- Windows Server 2008 : Perform an Unscheduled Backup of Critical Volumes of a Domain Controller by Using the Windows Interface
- Working with the SharePoint 2010 Management Shell (part 6)
- SharePoint 2010 : Choose a Column Type (part 1) - Single Line of Text
Top 10
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 3) - Configuring Recipient Filtering
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 2)
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 1)
- Implementing Edge Services for an Exchange Server 2007 Environment : Installing and Configuring the Edge Transport Server Components
- What's New in SharePoint 2013 (part 7) - BCS
- What's New in SharePoint 2013 (part 6) - SEARCH
- What's New in SharePoint 2013 (part 6) - WEB CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 5) - ENTERPRISE CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 4) - WORKFLOWS
- What's New in SharePoint 2013 (part 3) - REMOTE EVENTS