jQuery Selectors

jQuery Selectors

Use our excellent jQuery Selector Tester to experiment with the different selectors.

Selector	Example	Selects
*	$("*")	All elements
#id	$("#lastname")	The element with id=lastname
.class	$(".intro")	All elements with class="intro"
element	$("p")	All p elements
.class.class	$(".intro.demo")	All elements with the classes "intro" and "demo"
:first	$("p:first")	The first p element
:last	$("p:last")	The last p element
:even	$("tr:even")	All even tr elements
:odd	$("tr:odd")	All odd tr elements
:eq(index)	$("ul li:eq(3)")	The fourth element in a list (index starts at 0)
:gt(no)	$("ul li:gt(3)")	List elements with an index greater than 3
:lt(no)	$("ul li:lt(3)")	List elements with an index less than 3
:not(selector)	$("input:not(:empty)")	All input elements that are not empty
:header	$(":header")	All header elements h1, h2 ...
:animated	$(":animated")	All animated elements
:contains(text)	$(":contains('W3Schools')")	All elements which contains the text
:empty	$(":empty")	All elements with no child (elements) nodes
:hidden	$("p:hidden")	All hidden p elements
:visible	$("table:visible")	All visible tables
s1,s2,s3	$("th,td,.intro")	All elements with matching selectors
[attribute]	$("[href]")	All elements with a href attribute
[attribute=value]	$("[href='default.htm']")	All elements with a href attribute value equal to "default.htm"
[attribute!=value]	$("[href!='default.htm']")	All elements with a href attribute value not equal to "default.htm"
[attribute$=value]	$("[href$='.jpg']")	All elements with a href attribute value ending with ".jpg"
:input	$(":input")	All input elements
:text	$(":text")	All input elements with type="text"
:password	$(":password")	All input elements with type="password"
:radio	$(":radio")	All input elements with type="radio"
:checkbox	$(":checkbox")	All input elements with type="checkbox"
:submit	$(":submit")	All input elements with type="submit"
:reset	$(":reset")	All input elements with type="reset"
:button	$(":button")	All input elements with type="button"
:image	$(":image")	All input elements with type="image"
:file	$(":file")	All input elements with type="file"
:enabled	$(":enabled")	All enabled input elements
:disabled	$(":disabled")	All disabled input elements
:selected	$(":selected")	All selected input elements
:checked	$(":checked")	All checked input elements

jQuery and Ajax

jQuery has a rich library of methods (functions) for AJAX development.

jQuery AJAX Example Let AJAX change this text AJAX is not a programming language. It is just a technique for creating better and more interactive web applications.

The example above is taken from our AJAX tutorial, but modified with jQuery syntax. 

---

What is AJAX?

AJAX = Asynchronous JavaScript and XML.

AJAX is a technique for creating fast and dynamic web pages.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

You can learn more about AJAX in our AJAX tutorial.

---

AJAX and jQuery

jQuery provides a rich set of methods for AJAX web development.

With jQuery AJAX, you can request TXT, HTML, XML or JSON data from a remote server using both HTTP Get and HTTP Post.

And you can load remote data directly into selected HTML elements of your web page!

---

Write Less, Do More

The jQuery load() method is a simple (but very powerful) AJAX function. It has the following syntax:

$(selector).load(url,data,callback)

Use the selector to define the HTML element(s) to change, and the url parameter to specify a web address for your data.

Only if you want to send data to the server, you need to use the data parameter. Only if you need to trigger a function after completion, you will use the callback parameter.

---

Low Level AJAX

$.ajax(options) is the syntax of the low level AJAX function.

$.ajax offers more functionality than higher level functions like load, get, and post, but it is also more difficult to use.

The option parameter takes name|value pairs defining url data, passwords, data types, filters, character sets, timeout and error functions.

---

jQuery AJAX Methods From This Page:

Request	Description
$(selector).load(url,data,callback)	Load remote data into selected elements
$.ajax(options)	Load remote data into an XMLHttpRequest object

jQuery and CSS

jQuery css() Method

jQuery has one important method for CSS manipulation: css()

The css() method has three different syntaxes, to perform different tasks.

• css(name) - Return CSS property value
• css(name,value) - Set CSS property and value
• css({properties}) - Set multiple CSS properties and values

---

Return CSS Property

Use css(name) to return the specified CSS property value of the FIRST matched element:

Example $(this).css("background-color");

---

Set CSS Property and Value

Use css(name,value) to set the specified CSS property for ALL matched elements:

Example $("p").css("background-color","yellow");

---

Set Multiple CSS Property/Value Pairs

Use css({properties}) to set one or more CSS property/value pairs for the selected elements:

Example $("p").css({"background-color":"yellow","font-size":"200%"});

---

jQuery height() and width() Methods

jQuery has two important methods for size manipulation.

• height()
• width()

---

Size Manipulation Examples

The height() method sets the height of all matching elements:

Example $("#div1").height("200px");

The width() method sets the width of all matching elements:

Example $("#div2").width("300px");

---

jQuery CSS Methods From this Page:

CSS Properties	Description
$(selector).css(name)	Get the style property value of the first matched element
$(selector).css(name,value)	Set the value of one style property for matched elements
$(selector).css({properties})	Set multiple style properties for matched elements
$(selector).height(value)	Set the height of matched elements
$(selector).width(value)	Set the width of matched elements