jQuery jQuery selectors are the most commonly used, is the core of the jQuery
generally have the following selectors:
- The basic selector
- Number selector
- Level selector
- Attribute selectors
### selector relevant
- Tag name in the majority selectors have to write in the '' inside
- Match all elements, including all elements of the array returned
as:
$('element')[index]
Note [index] If it is not written back in array form all elements of the selected
sort is from zero to
as a first choice in all div tags
$('div)[0] - May return a plurality of elements, may be used
$(this).index();
to return the number of elements of each
first reference I remember J jQuery library, where the most primitive way of writing jQuery
following is a description selector
# Basic selector
ID selector #id
- A matching element according to a given ID
Here is the first choice of an id element:
$('#first)
element selector element
- Select all elements with the specified element name
$('element')
### class selector .class
- The class name given css matching elements, to return an array containing all the elements
Syntax:
$(.class)·
Another usage is .class.class, you can choose two classes keywords
such as:
$(.one.two)·//选择类名同时包含one和two的值的元素
### * wildcard selector
- Matches all elements of
syntax:
$('*)
# Number selector
Example:
`$ (" Selector1, selector2, selector3 ");
- The each selected element matches the combined return after together.
- A plurality of selectors can be specified, and the matching element to a result of the merge (an array), and the selected sequence will be completely follow the original sequence tag
- The selector can be different types
#-Level selector
### descendant selectors ancestor (Ancestor Descendant)
syntax:
$('ancestor descendant');
- In matching a given ancestor of all descendant elements
Example:
$('aside summary');//选择aside标签下所有的summary元素 - Will select all descendants (children and grandchildren contain behalf), operating efficiency is low
### offspring selector
syntax:
$('parent > child');
- Matches all given parent element subelements
Example:
$('aside > details'); //选择aside元素下子代details元素 - More accurate, more efficient
### ( 'Next PREV +'); ` - Immediately after the match all elements prev next element, the element must be the last generation element prev next element
Example:
$('summary + details'); //元素必须是紧接summary元素的details元素才会被选择 - Extending the scope level selector, also known as next selector
- Next to an element selected from the group will no longer selected, even if the back of the same name element
### sibling selector ( '~ PREV SIBLINGS'); ` - Match all siblings of all elements of the element immediately after prev, the previous generation element must be an element prev element siblings, and only the selected generation (layer) of all elements, not to the next (layer) selected
examples:
$('summary ~ details'); //元素必须是紧接summary元素的所有details元素才会被选择
# Attribute selectors
### property name selector [attribute]
syntax:
$('[attribute]')
- The name attribute contains all of the elements chosen
Example:
$('[class]') //选择所有带class属性的元素
### attribute value selector [attribute = value]
Syntax:
$('[attribute=value]') - The name attribute contains the value of all the elements and is elected
example:
$('[class=tool]') //选择所有带class属性并且值为tool的元素
### non-attribute value selector [attribute = value!]
Syntax:
$('[attribute!=value]') - Attribute contains the name and value of an element does not match all the chosen value
Example:
$('[class!=tool]') //选择所有带class属性并且值不为tool的元素
### [^ attribute = value] attribute selector
Syntax:
$('[attribute^=value]') - Attribute contains the value and the value at the beginning of all matching elements elected
example:
$('[class!=tool_]') //选择所有带class属性开头并且值为tool_开头的元素
### [attribute (' [$ attribute = value] ') ` - Attribute contains the value and the end value of all the matching elements chosen
Example:
$('[class$=_vs]') //选择所有带class属性并且值为_vs结尾的元素
### contains the attribute value selector
Syntax:
$('[attribute*=value]') - And the value of the attribute contains the value of the matching element comprising all the elected
example:
$('[class*=vs]') //选择所有带class属性并且值包含vs结尾的元素
### a plurality of attribute selector
syntax:
`$ (" [Selector1] [selector2] [selector3] "); - The properties of the different rules of all the elected
example:
$('[class*=vs][class=tool][class!=tool_]') //选择所有带class的属性中包含vs值的和class属性开头并且值不为tool_开头的元素和所有带class属性并且值为tool的元素
There are filters on the next summary, although the two functions are actually selected
for the first time to write such articles, inadequacies also requested the exhibitions.
Jane book Portal: https://www.jianshu.com/p/3b480a5724c3