On my latest searches for various ways jQuery interacts with the DOM, and more importantly forms for my recent project I've found that various sites could answer some of my questions but most focused on single form elements and not much more.
jQuery can access elements in quite a few different ways, such as by tag name and css class; I often find myself selecting elements based on ID more than anything. A function many people are probably familiar with is the $() function; aside from just looking completely awesome it is a huge time saver in terms of typing.
What I consider to be the "original" $ function was simply a quick shortcut for typing out document.getElementById(element); of course now it has grown far beyond that and many Javascript libraries use it as an entry point to their objects.
//this is not the jQuery $() - simple syntax is $('element') and from there you can
//manipulate it how you like $('element').value, $('element').innerHTML,
//$('element').style.cssText, etc - this function only accepts IDs
function $() {
var elements = new Array();
for (var x = 0; x < arguments.length; x++) {
var element = arguments[x];
if ('string' == typeof element){ element = document.getElementById(element); }
if (arguments.length == 1){return element};
elements.push(element);
}
return elements;
}
A simple and beautiful ( especially if you don't want to run the jQuery library ) function that will take one or many IDs and pass them back as a single result or an array. But anyways, enough with the jib-jab on with the examples!
Text Box
<input type="text" id="text_1" class="HappyCow" value="" />
<input type="text" id="text_2" class="HappyCow" value="" />
<input type="text" id="text_3" class="MadCow" value="" />
//set a value for the given text box
$('#text_1').val('test');
//set a value for the given text box - traditional method
$('#text_1')[0].value = 'test';
//get a value for the given text box
var test = $('#text_1').val();
//get a value for the given text box - traditional method
var test = $('#text_1')[0].value;
//set a value for every textbox with the HappyCow class
$('.HappyCow').val('Moooo');
Check / Radio
<input type="radio" id="radio_1" name="group_1" class="HappyCow" value="1" />
<input type="radio" id="radio_1" name="group_1" class="HappyCow" value="1" />
<input type="radio" id="radio_1" name="group_1" class="HappyCow" value="1" />
//is the element checked? - result: 1 or 0
var test = $('#radio_1:checked').length;
//is the element checked? - result: true or false
var test = $('#radio_1').is(':checked');
//is the element checked? - result: true of false
var test = $('#radio_1')[0].checked;
//check the element
$('#radio_1').attr('checked','checked');
//what is the value of the checked option in the group?
var test = $('.HappyCow:checked').val()
Selectbox
<select id="select_1">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
//select the option that matches the value provided
$('#select_1 option[value=1]').attr('selected', true);
//get the selectedIndex - note the first element is 1
var test = $('#select_1 option[selected]').val();
//how about something even easier?
var test - $('#select_1').val();
//get the selectedIndex - traditional method, first element is 0
var test = $('#select_1')[0].selectedIndex;
Hope this helps someone out!
