g(css, [callback])

The heart of the Gimme Library is its CSS selector engine, which allows you to quickly retrieve DOM elements on your HTML page by passing CSS selector string to the g(..) function.

The result of any g(..) invocation, is a Gimme Object (see http://www.codeplex.com/gimme/Wiki/View.aspx?title=Complete%20API%20Reference).

Examples of simple retrieval using Gimme:

// retrieve all <div> elements on the page
var allDivs = g('div');

// retrieve the element whose id = "jonah"
var jonah = g('#jonah');

// retrieve all <span> elements that are descendants of #jonah
var spans = g('#jonah span');

// retrieve all <p> elements with the class "yummy"
var yummy = g('p.yummy');

// retrieve all <span> elements are adjacent siblings of <p> elements
var adjSpans = g('p + span');

// retrieve all direct-child <h1> elments of #jonah that have the classes "foo" and "bar"
var fooBarH1 = g('#jonah > h1.foo.bar');


Operating on a Gimme Object

// add a click event handler (bubbling) to all <div> elements with that class "yippie"
g('div.yippie').addEvent('click', myHandler);

// add the classes "cocoa" and "pebbles" to the <body> element
g(document.body).addClass('cocoa pebbles');

// swap the class "cocoa" with "fruity" on the <body> element
g(document.body).swapClass('cocoa', 'fruity');

// set the value of all <input type = "text"> elements to "Who changed my value?"
g('input[type=text]').setValue('Who changed my value?');

// set the .innerHTML of all <p> elements to "I am a lovely paragraph," 
// remove the class "ugly" (if it's currently applied)
// add the class "lovely," and
// wire up a mouseover event
g('p').setHTML('I am a lovely paragraph').removeClass('ugly').addClass('lovely').addEvent('mouseover', mOver);



Working with callbacks:

// Executes the showHTML() function once for every <a> element descendant under #nav
// The 'this' keyword inside of the showHTML() functions refers to the Gimme object wrapping
// the current <a> element.
g('#nav a', showHTML);
function showHTML()
{
     alert(this.getHTML());
}

// Find all <div> elements and for each one, set the height to the value of hidden <input>
// whose id is #size
var val = g('input[type=hidden]#size').getValue();
g('div', resize);
function resize()
{
   this.setStyle('height', resize + 'px');
}

// Another way of accomplishing the same thing as the above code,
// but without utilizing the callback so slightly less efficient.
g('div').setStyle('height', g('input[type=hidden]#size').getValue() + 'px');
 

Last edited Nov 13, 2007 at 8:06 PM by sstchur, version 7

Comments

sstchur Nov 13, 2007 at 8:06 PM 
I've updated the examples where you pointed out mistakes. Thanks.

sstchur Nov 13, 2007 at 7:55 PM 
Yes, in fact, in the latest beta version, I am considering removing the callback altogether, as it does not appear that people tend towards this approach. Granted, it is technically more efficient, but people seem to prefer chaining commands together on a gimme object, rather than passing in a function callback ref.

Your thoughts?

rbirkby Oct 18, 2007 at 10:35 AM 
Is the callback passed the same parameters and 'this' object as .iterate() ?

rbirkby Oct 18, 2007 at 9:24 AM 
// set the .innerHTML of all <p> elements to "I am a lovely paragraph,"
// remove the class "ugly" (if it's currently applied)
// add the class "lovely," and
// wire up a mouseover event
g('p').removeClass('ugly').addClass('lovely').addEvent('mouseover', mOver);

The example doesn't set the innerHTML

rbirkby Oct 18, 2007 at 9:17 AM 
// retrieve all <div> elements on the page
var allDivs = g(div);

I think you intended the div to be in quotes.