"In-depth PHP and jquery development" Reading notes--chapter1

Because after the internship, find the real backstage also to understand the front-end ah, feel JavaScript do not understand, but before using jquery feel good, very convenient, omitted some of the internal functions of the implementation.

Read this "in-depth PHP and jquery development", feel in layman's terms, worthy of recommendation.

Chapter1.jquery Introduction

1.jQuery Nature of working methods

Create a JQuery object instance first, then evaluate the argument expression passed to the instance, and then respond to the value or modify itself accordingly.

2. Selecting DOM elements using CSS Syntax (basic selector)

We know that jquery is simply a new and operational selector for content on a Web page.

• Selecting elements by label type

Directly selects the element of the tag as the selector:

$ ("P")

• Selecting Elements by Class

General format:. class

$ (". Foo")

• Select elements by ID

General format: #id

$ ("#bar")

• Using Combinatorial selection questions

Whenever an element matches any selector in the combo selector, it is selected and appears in the returned result:

$ ("P.foo, #bar")

3. Hierarchy Selector

• Select descendant elements

Ancestor element descendant element

Example: Selecting a SPAN element under body

>>>$ ("Body span")

• Select child elements

Parent element > child element (matches only immediate child elements )

>>>$ ("Body>span")>>>[]

• Select the next sibling (next) Element

Start element ID + next sibling element ID

Note that it is the next sibling element that immediately follows the selection of an element in the DOM!!

>>>$ (". Foo+p");

• Select Sibling element

The sibling element (sibling elements) refers to all elements of the same level that are wrapped by the same element. Selecting a sibling element is very similar to selecting the next element, except that it returns all sibling elements that match after the starting element, rather than just the next.

Start element ID ~ Match Sibling element

>>>$ (". Foo~p");

4. Basic Filter

• Select the first or last element

Simply append after any selector: first or: Last:

>>>$ ("P:first"); >>>$ ("P:last");

• Select an element that does not match a selector

Use: Not () filter.

>>>$ ("P:not (. Foo)");

• Select an element with an odd or even index

: Even and: odd

>>>$ ("p:odd"); >>>$ ("P:even");

• Select elements for a specific index

: eq () filter.

>>>$ ("P:eq (3)");

5. Content Filter

• Match elements that contain specific text

To match elements that contain specific text, use the: Contains () filter. (matches only the text within the label)

>>>$ ("P:contains (another)");

• Match elements that contain specific elements

: The has () filter is used to match elements that contain specific elements.

>>>$ ("P:has (span)");

• Select an empty element

: empty () selects null elements that do not contain any text and do not contain any other elements.

>>>$ (": Empty");

• Select parent Element

In contrast to: empty,:p arent matches only those elements that have child elements, whether it contains other elements, text content, or both.

>>>$ ("P:parent");

6. Visibility Filter

Use: Hidden and: Visible, respectively, to select the elements that are hidden and the elements that can be seen.

>>>$ ("p:visible");  // Visible to // Hidden by

7. Attribute Filter

• Select elements based on the values of attributes and attributes:

[Property Name = property value]

>>>$ ("[Class=foo]");

• Select elements that do not have an attribute or attribute values that do not match

[Property Name = = Property value]

$ ("[Class!=foo]");

8. Sub-element filter

• Elements that match an odd index value/even index value/a specific index value

: Nth-child () provides 4 parameters when matching an element: Even,odd,index and equation.

>>>$ ("P:nth-child (Odd)"); >>>$ ("P:nth-child (even)");

• Select the first or last child element

Use: First-child;last-child

>>>$ ("P span:last-child");

About selectors: The difference between last () and: Last-child ():

These two selectors are the last elements in the matching collection, except that the last one matches all of the final elements in the collection. Instead: Last-child will match all the positions in the collection to the last child element. : Last will always return an element, while: Last-child may return a batch of elements.

9. Form Filter

The currently available form selector (which implicitly selects the type in the input box) is: Button,:checkbox,:file,:image,:input,:p assword,:radio,:submit,:text.

Such as:

>>>$ ("Input:radio");

• Match a FORM element that is available or disabled

>>>$ (": Enabled"); >>>$ (":d isabled");

• Match a selected or unchecked form element

Filters: Checked and: Selected are used to get form elements that checked are true and selected are true respectively.

>>>$ (": Checked"); >>>$ (": Selected");

That's it.

"In-depth PHP and jquery development" Reading notes--chapter1