jquery Basic Tutorial Second Edition learning record

Source: Internet
Author: User
Tags crop image knowledge base jqgrid

This article is for individual jquery based learning, simple records for forgetting.

Online Brochure: http://www.php100.com/manual/jquery/
Chapter One: Introduction to jquery
Basic jquery Knowledge: What jquery can do and why it needs jquery.

Chapter II: Selectors
Factory function $ ()
CSS Selector
Property Selector
Custom Selectors
Dom Traversal method

Chapter III: Events
Jquery.noconflict ([extreme]): Run this function to pass control of the variable $ to the first library that implements it.
Common methods: (including keyboard, mouse events)
Blur ([[[DATA],FN]) Change ([[[DATA],FN])
Click ([[[DATA],FN]) DblClick ([[[DATA],FN])
Error ([[[DATA],FN])
Focus ([[[DATA],FN]) focusin ([Data],fn) Focusout ([DATA],FN]
KeyDown ([[[DATA],FN]) keypress ([[DATA],FN]) KeyUp ([[DATA],FN])
MouseDown ([[[DATA],FN]) MouseEnter ([[DATA],FN]) MouseLeave ([[DATA],FN]) MouseMove ([[DATA],FN]) mouseout ([[DATA],FN]) ) MouseOver ([[DATA],FN]) MouseUp ([[DATA],FN])
Resize ([[DATA],FN]) scroll ([[DATA],FN])
select ([[[DATA],FN]) Submit ([[DATA],FN])
Unload ([[DATA],FN])

Event binding, bubbling ... Reference article: "Http://kb.cnblogs.com/page/94469/jQuery. Bind (),. Live () and. Delegate () Differences _ Knowledge Base _ Blog Park
Event handling:
On (Eve,[sel ],[DATA],FN) off (EVE,[SEL],[FN]) bind (TYPE,[DATA],FN) unbind (TYPE,[DATA|FN]) one (TYPE,[DATA],FN)
Trigger (type,[ Data]) Triggerhandler (type, [data])
Event delegation
Live (TYPE,[DATA],FN) die (Type,[fn])
Delegate (Sel,[type],[data], fn) undelegate ([Sel,[type],fn])
Block default events and stop propagation:
Preventdefault Method: Prevent other things from happening with its default behavior
Stoppropagation method: Prevents the role of the JS event bubbling
through. Trigger () triggers a class of events on each matched element.

Fourth chapter: Effect
Progressively enhance the functionality of a page primarily through. css () and. Animate ()
Basic
Show ([SPEED,[EASING],[FN]]) Hide ([SPEED,[EASING],[FN]]) toggle ([SPEED],[EASING],[FN])
Sliding
Slidedown ([SPE],[EAS],[FN]) slideup ([SPEED,[EASING],[FN]]) slidetoggle ([SPEED],[EASING],[FN])
Fade in and fade
FadeIn ([SPEED],[EAS],[FN]) FadeOut ([SPEED],[EAS],[FN]) FadeTo ([[SPE],OPA,[EAS],[FN]]) fadetoggle ([SPEED,[EAS],[FN ]])
Custom
Animate (PARAM,[SPE],[E],[FN])
Stop ([Cle],[jum]) 1.7* delay (Duration,[queuename])

Fifth chapter: DOM manipulation
To create a new element in HTML, use the $ () factory function
Internal insertion
Append (CONTENT|FN) appendTo (content) prepend (CONTENT|FN) prependto (content)
External insert
After (CONTENT|FN) before (CONTENT|FN) InsertAfter (content) insertbefore (content)
Package
Wrap (HTML|ELE|FN) Unwrap () Wrapall (Html|ele) Wrapinner (HTML|ELE|FN)
Replace
ReplaceWith (CONTENT|FN) replaceall (selector)
Delete
Empty () remove ([expr]) detach ([expr])
Copy
Clone ([Even[,deepeven]])

Sixth chapter: AJAX
The main introduction of four data formats via Ajax: Html,json,javascript,xml
Ajax requests
$.ajax (Url,[settings]) load (Url,[data],[callback]) $.getjson (URL,[DATA],[FN]) $.getscript (Url,[callback])
$.get (Url,[data],[fn],[type]) $.post (Url,[data],[fn],[type])
Ajax State Method
Ajaxcomplete (callback) Ajaxerror (callback) Ajaxsend (callback) Ajaxstart (callback) Ajaxstop (callback) Ajaxsuccess ( Callback


Seventh chapter: Table Operations
The use of jquery is described through a tabular case.
1. Sorting and paging of tables
2. Modify table Appearance: Highlight row, tooltip bar, collapse extension, filter

Eighth chapter: Building Functional forms
1. Verification of the front end of the form (required field, content format validation)
2.ajax Collection function
3. field placeholders for compatibility
4. Handle the arrow keys (use the arrow keys to select)
5. Operation of digital form (shopping cart function, number of modifications, deletion of content)

Nineth Chapter: Sliding and flipping
1. Swipe to show news
2.ajax get news, use of Ajax
3. Image Carousel (click on slide image, Magnifier effect, delay loading animation)

Tenth chapter: Using plugins
Recommended Plugins:
Form class:

    • Autocomplete (when the user fills in the text input, displays a list of possible matches),
    • Validation (based on various standard validation form input fields),
    • Jeditable (some actions of the corresponding user-such as clicking or double-clicking, converting non-form elements into editable input fields, the modified content can be automatically sent back to the server to save),
    • Masked input (provides convenience for entering a specific format, such as date, phone number, zip code, etc.)

Table class:

    • Tablesorter (Convert table elements to tables that can be automatically arranged without refreshing),
    • Jqgrid (Ajax-driven JavaScript control that supports dynamic presentation and manipulation of tabular data on Web pages),
    • Felxigrid (similar to Jqgrid),

Image class:

    • Jcrop (crop image),
    • Magnify (Magnifier effect, creating Magnifier),

dialog box class-functions are similar, popup box, dialog box; general FancyBox more commonly used

    • FancyBox, Thickbox, Blockui, Jqmodal

Chart classes-Similar functions, using canvas to generate charts

    • Flot, Sparklines,

Event class:

    • Hoverintent (similar to hover, but it reacts according to the user's mouse pointer to move in or remove elements, especially for drop-down menu animations),
    • Live query (similar to live)

11th Chapter: The production of plug-ins
Plug-in production, however, this article http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html more detailed

jquery Basic Tutorial Second Edition learning record

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.