Jquery entry [2]-Selector

Jquery is incredibly appealing because its powerful selector expression makes Dom operations elegant and artistic.
Jquery's selector supports ID, tagname, css1-3 expressions, XPath, see: http://docs.jquery.com/Selectors
Demo: <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< Html Xmlns = "Http://www.w3.org/1999/xhtml" >
< Head >
< Title > Selector </ Title >
< Script SRC = "../Scripts/jquery-1.2.3.intellisense.js" Type = "Text/JavaScript" > </ Script >
</ Head >
< Body >
< Input Value = "1"   /> +
< Input Value = "2"   />
< Input Type = "Button" Value = "="   />
< Label > & Nbsp; </ Label >
< Script Type = "Text/JavaScript" >
$ ( " Input [type = 'button '] " ). Click ( Function (){
VaR I =   0 ;
$ ( " Input [type = 'text'] " ). Each ( Function (){
I + = Parseint ($ ( This ). Val ());
});
$ ( ' Label ' ). Text (I );
});
$ ( ' Input: Lt (2) ' )
. Add ( ' Label ' )
. CSS ( ' Border ' , ' None ' )
. CSS ( ' Borderbottom ' , ' Solid 1px Navy ' )
. CSS ({ ' Width ' : ' 30px ' });
</ Script >
</ Body >
</ Html >

The running effect is as follows:

Code Decomposition:
$ ("Input [type = 'button ']") is used to locate the input element whose type attribute is "button" (this is a CSS expression, which is supported only by IE7, therefore, in IE6, jquery is usually used to set the style in place of CSS code ). The click () function adds a click event handler for the button.
In button_click, $ ("input [type = 'text']") finds all input boxes, and the each () function traverses the values of the objects in the retrieved array, add to label.
$ ('Input: Lt (2 )')
. Add ('label ')
The two lines of code mean: The first two (lt indicates that the serial number is smaller than) in all input, plus the label object, are combined into a jquery object.
. CSS ('border', 'None ')
. CSS ('borderbottom ', 'solid 1px navy ')
. CSS ({'width': '30px '});
The above three lines of code set the CSS style for the previous jquery object. If you need to set multiple CSS values at a time, you can use another form, such:
. CSS ({'border': 'none', 'borderbottom ': 'solid 1px navy', 'width': '30px '});
If the CSS () function transmits only one string parameter, It is a sample value. For example, CSS ('color') is used to obtain the color value of the style attribute of the current jquery object. Jquery objects have many such functions. For example, Val ('') is used to set value, Val () is used to get value, and text ('text') is used to set innertext, text () to get innertext, there is also HTML () for innerhtml operations, while click (FN)/click (), change (FN)/change ()...... System functions process functions and trigger events for the event settings.
Because most jquery object methods still return the current jquery, jquery code is usually written in a string, as shown in the preceding
. CSS ('border', 'None ')
. CSS ('borderbottom ', 'solid 1px navy ')
. CSS ({'width': '30px '});
Instead of repeatedly locating objects, This is a chain feature of jquery, which will be added later in the article.

Referrence: http://docs.jquery.com/Selectors