jquery Basic Learning Notes (1)

--------more than 2.0 versions are smaller in size.

--------CDN Content Distribution Network (contents delivery or content distributionNetwork, often shortened to CDN ) can reduce bandwidth, but need to ensure that the network is properly connected.

jquery function: jquery () or write $ (), using: 1. Selector; 2. Object, such as document;3. Text content, note that this text content must contain at least one HTML tag ... Otherwise jQuery will treat the text content without HTML tags as a selector ...

The size--------for the tag object element, such as how many paragraph elements <p></p> the number of HTML pages, then the $ ("P") at this time. Size () = = $ ("P"). length

Length ------to count the lengths of a string or to count the number of elements in an array, you can only use length at this time and not with size ()

Selector:

1. Support CSS3 Selector

2. Selector filter, for example $ (' Img:even ') Note: The first one is 0,0 is even; $ (' Img:eq (1) ') $ (' Img:lt (3) ')

3. Using element attributes in selectors

For example: $ (' li[data-album!= "single"] > img ')

= contains the specific value, that is, the selected element inside the value of this property can not contain other things

~ = number equals only the value separated by a space

* Number equals no space, as long as the value of the property contains the set character can be

Select form elements:

Select a different type of form element, typically using a colon plus the name of the element, or the name of the element type

$ (': input ')

$ (':p assword ')

$ (': Checked ')

The selector associated with the form has a colon ...: input indicates that an element of all input types is found.

Note that buttons with button tags are also considered elements of type input. If you want to select a button element individually, you can use $ (': Button ')

In addition, we have a selection of selectors based on the state of the form element, such as: Focus selects the INPUT element in the focus state,

:d isabled selected form elements that are disabled: enabled is the form element to enable.

Child element Selector

: Nth-child allows us to specify the number of child elements to select

$ (' ul li:nth-child (1) ')

Note this: Nth-child is starting from 1 ... That is, the index number of the first child element is 1,eq (), which starts at 0.

: Nth-child You can specify the keywords where the child elements are located ... For example, you can use odd or even ... Select sub-elements in odd position ... Or even-numbered sub-elements ...

$ (' ul li:nth-child (Odd) ')

: Nth-child also supports selecting child elements on a number of positions that you define ...

For example, we have to choose the 4th, and the 8th Li element ...

$ (' ul li:nth-child (4n) ')

The selected child element is the number from 1 to 4, the 4th child element ... Then count the 4 numbers back from the 4th child element ...

If you want to do it in reverse, you can put: Nth-child ... Replace with: Nth-last-child ...

$ (' ul li:nth-last-child (4n) ')

Content filtering

: Contains this selector can find the element that contains the specified text content ... For example, we want to choose the LI element with the word Viva ...

$ (' Li:contains (' Viva ') ')

Note the case of the text ... And the text is a string form ... So we need to add a set of quotes around the text, and here we have to pay attention to the type of quotes, and if we use single quotes outside, we need to use double quotes.

Method of filtering

JQuery provides a number of ways to further filter the results of the selection.

$ (' li img '). EQ (1)

This position number, or index number, can also be negative.

We can try-1 ... This will filter out the penultimate result ...

$ (' li img '). EQ (-1)

. First () and. Last ()

. First () and. Last () can be found in the results of the number one, and the final result ...

Take a look. First () ... Both of these methods do not support parameters, so just enter a parenthesis directly after them.

$ (' li img '). First ()

Select a range in the results, you can use the. Slice () method, such as what we want is the 7th image on the page to the 12th image,

$ (' li img '). Slice (6, 12)

. Slice () There are two parameters in this method, the first parameter is the starting value, and the second argument is the ending value.

Use relationship filtering in the document tree

For example:

$ (' #christmas '). Nextall ()

jquery Basic Learning Notes (1)