JDev

Code, javascript, jqueryMay 1, 2008 5:12 pm

Some Jquery Selector Examples

$(’div.panel’)
    All divs with class=“panel”
 $(’p#intro’)
    The paragraph with id=“intro”
 $(’div#content a:visible’)
    All visible links inside the div with id=“content”
 $(’input[@name=email]’)
    All input fields with name=“email”
$(’input[id*=plan]’)
    All input fields whose id contains string ‘plan’
 $("table.striped > tr:odd")
     Odd rows in a table with a striped class
 $(’a[@href^="http://"]’)
    All external links (links that start with http://)
 $(’p[a]’)
    All paragraphs that contain one or more links     
    
 $("p:even");
    All even <p> elements.
 $("tr:nth-child(1)");
  The first row of each table.
 $("body > div");
   Direct <div> children of <body>.
 $("a[href$=pdf]");
    Links to PDF files.
 $("body > div:has(a)")
   Direct <div> children of <body>-containing links.

 $("td:empty)")
    Empty table cells 

 
$(’#plugins td.name’).filter(’:contains(ImageManager)’)
    In the <div id=plugins>, find <td class=name> which contains the text ImageManager
 

More on Jquery. 

 

Comments (0)
Code, javascript, prototype, jqueryFebruary 26, 2008 3:47 pm

Create Striped Lists in Prototype and Jquery

We are going to show how to create lists with alternate colors in Prototype and Jquery.

Let’s say you have an HTML list with with the ‘result‘ id, and you want it to have alternating colors. 

First, create a css class that displays a list item in a different color:

li.alternate { color:green;} 

In Prototype, you use the following syntax:

document.observe(’dom:loaded’ , function(){
    $$(’#result li:nth-child(2n)’ ).invoke(’addClassName’ , ‘alternate’ );
});

Jquery uses the following syntax:

$(document).ready(function(){       
    $("#result li:nth-child(even)").addClass("alternate");           
});

Comments (0)