jQuery FAQ Slider
FAQ Slider using jQuery
- How do I select an item using class or ID?
- This code selects an element with an ID of "myDivId". Since IDs are unique, this expression always selects either zero or one elements depending upon whether or not an element with the specified ID exists.
$( "#myDivId" );
This code selects an element with a class of "myCssClass". Since any number of elements can have the same class, this expression will select any number of elements.$( ".myCssClass" );
A jQuery object containing the selected element can be assigned to a JavaScript variable like normal:var myDivElement = $( "#myDivId" );
Usually, elements in a jQuery object are acted on by other jQuery functions:var myValue = $( "#myDivId" ).val();
$( "#myDivId").val( "hello world");
- How do I select elements when I already have a DOM element?
- If you have a variable containing a DOM element, and want to select elements related to that DOM element, simply wrap it in a jQuery object.
var myDomElement = document.getElementById("foo");
$( myDomElement ).find("a");
Many people try to concatenate a DOM element or jQuery object with a CSS selector, like so:$( myDomElement +".bar");
Unfortunately, you cannot concatenate strings to objects.
- How do I test whether an element exists?
- Use the .length property of the jQuery collection returned by your selector:
if ( $("#myDiv").length ) {
$("#myDiv").show();
}
- How do I determine the state of a toggled element?
- You can determine whether an element is collapsed or not by using the :visible and :hidden selectors.
var isVisible = $("#myDiv").is(":visible" );
var isHidden = $("#myDiv").is(":hidden");
If you're simply acting on an element based on its visibility, just include :visible or :hidden in the selector expression. For example:$("#myDiv:visible").animate({
left:"+=200px"
}, "slow" );
- How do I check/uncheck a checkbox input or radio button?
- You can check or uncheck a checkbox element or a radio button using the .prop() method:
$("#x").prop("checked", true );
$("#x").prop("checked", false );
- How do I pull a native DOM element from a jQuery object?
- A jQuery object is an array-like wrapper around one or more DOM elements. To get a reference to the actual DOM elements (instead of the jQuery object), you have two options. The first (and fastest) method is to use array notation:
$("#foo")[ 0 ];
The second method is to use the .get() function:$("#foo").get( 0 );