HTML Learning Note (jQuery) No.6

The jquery library can be added to a Web page with a simple line of markup it is a JavaScript library that encapsulates browser compatibility issues

The features that the library contains
HTML element selection
HTML element manipulation
CSS Actions
HTML event functions
JavaScript effects and animations
HTML DOM Traversal and modification
Ajax-> changes the content of the page without refreshing the page, and responds directly to the page with the event requested by the server, improving the user experience
Utilties Tools


Web page Add jquery
1) Download the jquery library from jquery.com
2) loading jquery from a CDN, such as loading jquery from Google

Version,
v.1.11.1:1.x Support ie6+
v.2.1.1:. x Support ie9+

jquery syntax
Base syntax: $ (selector). Action ()
Dollar sign definition jquery
Selector (selector) "Query" and "query" HTML elements
jquery action () performs an operation on an element
For example: $ (this). Hide ()-hides the current element

In the Web development process due to JS different library files have mutual dependencies, so in the development process should take into account the introduction of each library order, if the order is wrong can not display the page or error.

jquery selector, commonly used selectors have ID, class, direct element selection, three commonly used methods, which use the same way as the CSS selector, such as ID with #,class. This way to introduce and modify the style, the difference is that jquery needs to use $ to operate.

jquery Events
Common event methods, binding events, unbound events, event targets, bubbling of events, and custom events.

Event Example
OnClick Click event
Dbclick Double-click event
MouseEnter Mouse-pointing event
MouseLeave Mouse Move Event


The bind () and Unbind () methods are related functions for binding and unbinding events, and the benefit of binding events is that you can react to an event in multiple ways, and also trigger the use of on () and off () for binding and unbinding. This must be done in the jQuery1.7 version before you can use $ ("Id/class"). On ("event name", custom function name);

Use of custom events

$ (document). Ready (function () {    $ ("#click"). Click (function () {        //Create your own event       var e = jquery.event ("MyEvent") ;        Triggers its own event to a pointer to the element marked by the ID        $ ("#click"). Trigger (e);    });    Binds the event to    $ ("#click"). Bind ("MyEvent", function (evnent) {        Console.log (event);    })});

jquery Effects: Hide/show, fade, swipe, animate, stop animation, callback,chaining

Hide/Show: Hide/show
Fade: Fadein/fadeout->fadetoggle
Transparency Effect Transform: fadeTo (time to perform the event, fade to the percentile 0~1);
Slide Effect: Slidedown (time ms level), Slideup (Time ms), Slidetoggle ();

Get the contents of HTML:
Text ()
HTML ()
Val () Gets the Value property
attr ("Name of the corresponding property, such as ID")


To set HTML properties through jquery
Modify the content $ ("id"). Text ("What you want to fix");
The use of HTML can also be modified, the advantage is that you can add new tag elements
A method callback is done through a function:
As

$ ("BTN"). Click (function () {$ ("element ID"). Text (function (o,n) {return "Xinde" +n+ "Jiude" +O;})})

Insert Content
Append (insert after specified element, no line break)
Prepend (insert after specified element, no line break)
Before (inserted before the specified element, with line wrapping)
After (inserted after the specified element, with a newline)
You can also add attributes such as labels when you add them.

The usual way to delete is remove and empty, except that remove removes the entire frame label, and empty simply clears the contents of the label

jquery's CSS operations go directly through the. CSS ("Property name such as width", "parameter changes such as 100px"), or you can modify multiple parameters at once by using a prescribed format such as:

. css ({width: "100px", Height: "20px", BackgroundColor: "Red"});

modification types can also be combined using the AddClass method and CSS files, such as a style class in a CSS file, through the addclass ("style") in JS;


jquery traversal, filtering

Traverse-up traversal, down traversal, and sibling traversal

Traversing down children the child element of the specified element (traversing only one level down), find (the specified ID or element or class) can specify a specific element to traverse
Walking up the parent can only traverse the first level, parents all of the parent containers are changed, Parentuntil can specify the content to be changed to a specific container in the format: parent ("Specify ID, etc.")
Traversal between siblings sibings sibling elements all modified, next,nextall,nextuntil,prev,prevall,preuntil the rest of the same as up and down traversal

Filter->filter ("Specify element") specifies the element to modify, first () in the sibling element, last is the final, and the EQ (number 0~n in the specified sibling) represents the second, not ("specified element") of the sibling element, not the specified element's change.


jquery Ajax More operations can browse jquery's API portal jquery Official document

$ (document). Ready (function () {    $ (' #btn '). On ("click", Function () {        $ ("#result"). Text ("Request data, please later ....");        $.get ("server.php", {name:$ ("#namevalue"). Val ()},function (data) {            $ ("#result"). Text (data);        }). Error (function () {            $ ("#result"). Text ("Communication Problem");});    

$ (document). Ready (function () {    $ ("body"). Text ("Wait ...");    $ ("body"). Load ("box.htm", function (a,status,complete) {        console.log (status);        if (Status = = "Error") {            $ ("body"). Text ("Fragment loading Failed");}    );    $.getscript ("Hello.js"). Complete (function () {       SayHello ();    });});

HTML Learning Note (jQuery) No.6