20150302+jquery-01

The Write less,do more (less write more to do)--jquery on

Directory

The Write less,do More (write less and do more) --jquery on 1

First, History 3

1 , what is JQuery 3

2 , what is JavaScript code Base 3

3 , why to learn JQuery 3

Ii. Deployment JQuery 3

1 , download the source package (www.jquery.com) 3

2 , source code category 4

3 , using JQuery 4

Third, JQuery Tutorial 5

1 , basic selector 5

2 , hierarchy selector 5

3 , simple selector 6

4 , content selector 7

5 , visibility selector 7

6 , property selector 8

7 , child element selector 8

8 , form selector 9

9 , Form object property Selector 10

Comprehensive case: 10

Four, JQuery Object 11

1 , what is DOM Object 12

2 , what is JQuery Object 12

3 , in-depth discussion JQuery Object 12

4 , JQuery Object Goto DOM Object 13

5 , DOM Object Goto JQuery Object 13

v. Attribute Operations 14

1 , attribute 15

2 , Class Action 15

3 , Html/text/val 16

4 , CSS Action 17

5 , position operation 17

6 , size operation 18

Vi. Event Programming 18

1 , page loading Ready Method 19

2 , basic event 19

3 , explore JQuery In the event bindings in the This Point to 20

4 , event switching , history 1, what is jquery

A free and open source JavaScript code library 2, What is a JavaScript code library

The prototype framework (code base) is the early-forming JavaScript codebase, the object-oriented idea is imperfect and the entire code is loosely structured.

Dojo Framework, the Dojo framework has many features that the framework does not have, such as offline storage, and its core code is relatively streamlined, but its high threshold and incomplete documentation, version instability.

MooTools framework, the entire framework core code is only 8k, the full version is also only more than 100 k, so the code is very streamlined, the object-oriented support is very perfect.

ExtJS framework, through JavaScript can write rich media, its own interface is very beautiful, very flashy, but it is more resource-intensive, and it is charged.

The jquery Framework (2006, the JavaScript expert-American John Terry), is respected by all programmers for its powerful DOM framework, Ajax encapsulation, and other features. 3. Why you should learn jquery

DOM Operations

Event Bindings

Ajax

... two , Deployment JQuery 1. Download The source package (www.jquery.com)

1.2.1 Version

1.3.1 Version

1.4.4 version

1.7.2 version

1.8.3 version (relatively stable, support for frameworks such as jquery UI is better)

2.1.3 Version (not supported IE6/IE7/IE8)

Follow-up learning: jquery UI or Easy UI, mobile phone development (jquery mobile) 2, source category

Jquery-1.8.3.js: (study version), not remove the space and enter, with readability, easy to learn

Jquery-1.8.3.min.js: (development version), remove the extra space and enter, not readable, but the code is compressed, the entire size is only 92kb 3, using JQuery

Copy the core JS file to the project directory

three , jquery tutorial

jquery selector (Nine selectors)

Basic

Level

Simple

Content

Visibility of

Property

Child elements

Form

Form Object Properties 1, basic selector

L #id: match element by id attribute of element

L element: By element name, match element

L SELECTOR1,SELECTOR2: matching multiple selectors simultaneously

L. class: Matches elements through the class attribute of the element

Demo01.html Sample Code

2. Level Selector Selector

L Ancetor descendant: selects all descendant elements under Ancetor (All descendants ...)

L Parent > Child: Select Sub-elements under parent

L prev + Next: Select adjacent next element of prev element

L Prev~siblings: Selects all sibling elements of the Prev element

Demo02.html

3 , Simple Selector

L:first: Select the first element

L:last: Select the last Element

L:even: Even

L:odd: Odd

L:eq (Index): Select an element indexed to index, starting from 0 by default

L:GT (Index): Select an element with index greater than index, starting from 0 by default

L:LT (Index): Select an element with index less than index, starting from 0 by default

L:not (selector): Select an element that is not selector by the selector

Demo03.html

4 , Content Selector Selector

L:contains (text): The element that matches the content of the element that contains the text

L:empty: element that matches element content is empty

L:has (selector): matches an element with a selector selector

L:P arent: elements that match content that are not empty

Demo04.html

5. Visibility Selector Selector

L:hidden: Matches all hidden elements (Display:none and Type=hidden)

L:visible: matches all visible elements

Demo05.html

6. Properties Selector Selector

l [attribute]: Match an element with an attribute

l [Attribute=value]: Match attribute value equal to value element

l [Attribute!=value]: An element that matches a property value that is not equal to value

l [Attribute^=value]: An element that matches the value of a property starting with value

l [Attribute$=value]: An element that matches the value of a property to the end

l [Attribute*=value]: Match attribute value contains element of value

l [Selector1][selector2][selectorn]: Match an element with multiple specified attributes

Demo06.html

7, Sub - element Selector

L:nth-child (index/even/odd) from 1 count: Match meet criteria (index, even, odd) child elements

L:first-child: Select the first child element

L:last-child: Select the last child element

L:only-child: The child element is selected and the child element is a unique child element, the matching

Demo07.html

8. Forms Selector Selector

L:input: Matches all form elements (includes select, textarea)

Interview question: jquery: What is the difference between input and input?

: Input matches all form elements

Input matches the element

L:text: Matches all text boxes

L:P assword: Match all Password boxes

L:radio: Match all Radio

L:checkbox: Match all check boxes

L:submit: Match all submissions that Chick

L:reset: Matches all reset buttons

L:image: Match all image fields

L:button: Matches All button buttons (type= ' button ' or button label)

L:file: Match all file domains

L:hidden: Match all hidden forms

Demo08.html

9. Forms object property Selector

L:enabled: Select all available Forms

L:D isabled: Select all forms that are not available

l:checked: Select all selected form elements (Radio box and check box)

l:selected: Select the selected drop-down marquee (drop-down)

Demo09.html

Integrated Case:

Demo10_zh.html

Form:

Operating effect:

20150302+jquery-01