[JQuery tutorial] JQueryCSS selector

CSS Selector

The $ function can get the element based on the incoming ID, but for a structurally complex page, a single pass in an ID is difficult to pinpoint the corresponding element, myjsframe reference to the CSS 2.0 selector concept and the CSS selector in the JQuery framework to enable its own CSS selector support 。 Most common CSS selectors are supported.

Because there may be more than one element that conforms to a CSS selector, the return value of the $ function may be more than a DOM element, and generally, its return value is an array of DOM elements that match the selector. However, the classic $ (ID) return value is still a DOM element for preserving and compatible the return value type of the $ function, while the $ (CSS selectors) return value is an array of elements.

The function of CSS selection Fu Gong can be more convenient, quick and accurate to find page elements.

The selectors currently supported by Myjsframe are:

• Wildcard Selector
• Property Selector
• Include selector
• ID Selector
• Class Selector
• Selector grouping

Wildcard characters that are not supported are:

• Child Object Selector
• Pseudo class and Pseudo object selector

If an argument to the $ function is passed with a space (an invalid space at both ends), a comma, or a decimal point are considered a CSS selector, a space is a selector, a comma is a grouping of selectors, and a decimal point is a class selector. In addition, it is considered an element ID, and the return value is a DOM element. If you want to get all the LI elements in the page, $ ("Li") is wrong, because the $ function will think that to get the element with the ID Li, the correct method is $ ("Body Li").

Parameters

Wildcard Selector

Gets all the elements in a range. Wildcard matching to a wide range of elements, the results are relatively large, the efficiency is slightly lower, recommended less.

Property Selector

The element that matches the property of the element with its value. The format of the property selector is: [Property name = property value] or [property name!= property value]. Attribute selectors can be multiple, such as Input[type=text][classname=username].

Include selector

A selector is contained by another selector. such as $ ("div a") represents a element contained in a DIV element.

ID Selector

Matches an element according to the ID attribute, and $ ("id") is exactly equivalent to $ ("#id"). The return types are all DOM elements. $ ("Body div #id") is an unnecessary notation, the return value of which is an array, but the length is 1.

Class Selector

Finds an element based on the class name of the element. $ ("Div.content") represents the element in the lookup page where the class name is content. A class selector is a special case of a property selector, which is equivalent to $ ("div[classname=content]"), but it is not recommended to look up a class name with a property selector because the element's class name can have more than one (separated by a space between the class names).

Selector grouping

multiple selectors can be grouped together as a composite selector, with multiple compound selectors or multiple single selectors that can be multiple sets of selectors (separated by commas). such as: $ ("div.content,a") means that all the class div elements in the page are grouped together with all a elements of the page as a return value array.

return value

A one-dimensional array of DOM elements. If the selector for the $ function is not found in the page to match the criteria, the return value is an empty array (length 0).

Example

<div class= "titlelist" id= "Newstitle" >
<ul class= "List Black" >
<li><a href= "http://localhost/olympic.asp?id=2000" >2000 Sydney Olympic Games </a></li>
<li><a href= "http://localhost/olympic.asp?id=1996" >1996 Atlanta Olympic Games </a></li>
</ul>
<ul class= "List Gray" >
<li><a href= "http://localhost/olympic.asp?id=1992" >1992 Barcelona Olympic Games </a></li>
<li><a href= "http://localhost/olympic.asp?id=1988" >1988 Seoul Olympic Games </a></li>
</ul>
<div class= "Info" >
<input type= "checkbox" value= "read" id= "Hasreadthsrule"/> Read
<input type= "checkbox" id= "suggest" > I have better advice.
<input type= "button" value= "OK"/>
</div>
</div>

Selection Character	Sample Code	Description	return value length (array length)
Wildcard Selector	$ ("#newstitle *")	#all elements below thenewstitle element	14 (ul*2 + li*4 + a*4 + div*1 + input*3)
Property Selector	$ ("#newsTitle Input[type=checkbox][value!=read]")	#newstitle element The label named input, whose type is a checkbox, and whose value is not equal to the element of read	1
Include selector	$ ("ul Li a")	Returns an array of all the A in all of the UL in the page	4
ID Selector	$ ("#newsTitle")	Returns #newsTitle element	1
Class Selector	$ ("Ul.list")	All class names in the page contain the UL element of the list	2
Selector grouping	$ ("A,input[type=checkbox]")	An array of all a and tick boxes in a page	6