jQuery Selectors


InterServer Web Hosting and VPS
Sony Playstation PS4 Pro Custom Build NVMe SSD Drive - Enclosure case and Crucial NVMe SSD
PS4 Pro Custom External SSD NVMe Drive

How I built a PS4 Pro Custom External SSD NVMe Drive...

NUC8i7BEH with memory
Intel NUC8I7BEH Review and Custom Build

This is my review of the Intel NUC8i7BEH and a summary of my build...

Card image cap
Asus M5A88-M EVO Review

This is my review of the Asus M5A88-M EVO motherboard...

Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit
Corsair Vengeance Blue Review

This is my review of the Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit memory...

Robotic Arm with USB PC Interface Review
Robotic Arm with USB PC Interface Review

This is my review of the Robotic Arm with USB PC Interface...

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>


Sponsored Links
SolarSystem - AngularJS Demo
SolarSystem - Angular JS Demo

Check out my first Angular JS demo hosted in Azure, it helped win my first Angular contract. Put the sound on.