jQuery Selectors


Sponsored Links

73058_New Scooba® 230 Floor Washing Robot + Free Shipping!

 

jQuery Selectors

Here we've got some random code samples to help get to grip with some of the JQuery syntax including jQuery Selectors.

Select TextBoxes

Select the all textboxes, HTML Input controls which are of type 'text'


<input type="text" value="some text" />
...

$("input:text")


Select TextArea, (ASP.NET TextBox with TextMode set to MultiLine)

Select the textareas, the HTML TextArea control. In ASP.NET, the TextBox control in Multiline mode becomes a TextArea.


<textarea rows="2" cols="20">Multiline textbox</textarea>
...

$("textarea")


.is() - Is type of

Checks to see if a jQuery object is a type of 'x'. If you pass a group of objects as your jQuery object it will return true if at least one of the elements if of type 'x'


if ($(this).is('input:text'))
{
     $(this). ......
}

if ($(this).is('textarea'))
{
     $(this). ......
}


.html() - Get / Set the HTML Content

.html() allows us to retrieve the HTML content of an element (first element only if there are more than one), and also allows us to set the HTML content of all the elements in a jQuery object .


<div>Some content in a div</div>

var content = $("div").html();
// content = 'Some content in a div';

$("div").html("new content");
// makes the div appear as : <div>new content</div>


.prev() / .next() - Next and Previous elements

Select the previous or next DOM element to the jquery object(s) this is called upon.


<div id="a">Content 1</div>
<div id="b">Content 2</div>
<div id="c">Content 3</div>

...

$("#b").prev().html("new content");

// selects the previous element before the element with id='b' using .prev
<div id="a">new content</div>
<div id="b">Content 2</div>
<div id="c">Content 3</div>

$("#b").next().html("new content");

// selects the next element after the element with id='b' using .next
<div id="a">Content 1</div>
<div id="b">Content 2</div>
<div id="c">new content</div>