JQuery learning notes control page implementation code _ jquery-js tutorial

Each piece of jQuery corresponds to a piece of html code, marked as the criterion, css as the shared code, and each piece of code needs to be run independently. The html and css code are at the end of the article, as shown in the following example:
Each () traversal element (k1)

The Code is as follows:

$ (Document). ready (function (){
$ ("# Btn" ).html ("each () traversal element"). click (function (event ){
$ ("P"). each (function (index ){
Certificate (this).html ("this is the" + index + "p ");
});
Event. preventDefault ();
});
});

Get the attribute value (k1) attr (name)

The Code is as follows:

$ (Document). ready (function (){
$ ("# Btn" ).html ("Get attribute value"). click (function (event ){
$ ("P"). each (function (){
Alert ("the value of the title attribute is:" + $ (this). attr ("title "));
});
Event. preventDefault ();
});
});

Set the attribute value (k1) attr (name, value), attr (name, fn)
Eg1

The Code is as follows:

$ (Document). ready (function (){
$ ("P"). each (function (){
Certificate (this).html (this. title );
});
$ ("# Btn" ).html ("set attribute values"). click (function (event ){
$ ("P"). each (function (){
$ (This). attr ("style", "color: Red ");
});
Event. preventDefault ();
});
});

Eg2

The Code is as follows:

$ (Document). ready (function (){
$ ("P"). each (function (){
Certificate (this).html (this. title );
});
$ ("# Btn" ).html ("set attribute values"). click (function (event ){
$ ("P"). each (function (index ){
$ (This). attr ("id", function (){
Return "p-id" + index;
Registry..html ($ (this). attr ("id "));
});
Event. preventDefault ();
});
});

Delete attribute (k1) removeAttr (name)

Set element styles

The Code is as follows:

AddClass (names), removeClass (names), toggleClass (names)
$ (Document). ready (function (){
$ ("P"). each (function (){
Certificate (this).html (this. title). addClass ("myClass1"). mouseover (function (){
$ (This). toggleClass ("myClass2 ");
});
});
});

Directly obtain and set the style (k1) css (name) and css (name, value)

The Code is as follows:

$ (Document). ready (function (){
$ ("P"). each (function (){
Certificate (this).html(this.titleapps.css ({color: "Red", opacity: "0.5"}). mouseover (function (){
Certificate (this).css ("opacity", "1.0 ");
}). Mouseout (function (){
Certificate (this).css ("opacity", "0.5 ");
});
});
});

Determine whether the css type hasClass (name) is (name)


Process page elements
Text () get plain text html () Get include innerHTML attributes

Move and copy elements (k2) append (). appendTo (target) can be copied or moved. A single target can be moved and multiple targets can be copied.

The Code is as follows:

$ (Document). ready (function (){
$ ("P"). append ($ ("a: eq (0 )"));
$ ("P: eq (1)"). append ($ ("a: eq (1 )"));
});

Add nodes: before (), insertBefore (), after (), insertAfter ()
Is to add elements directly before or after the node, not in the form of child elements inserted with copy and move, a single target move, multiple target copy

Delete element (k2)
Eg1: remove ()

The Code is as follows:

$ (Function (){
$ ("P"). remove (": contains (P)"); // equivalent to $ ("p: contains (" P ")"). remove ();
});

Eg2: empty () Note: empty () is different from remove (). empty () deletes all its child elements.

The Code is as follows:

$ (Function (){
$ ("P" ).css ({border: "1px solid # FF0000", height: "20px"}). empty ();
});

Clone elements to solve the replication and movement problems (k3)

The Code is as follows:

$ (Function (){
$ ("# Btn-k3" mongo.html ("clone () clone yourself and clone the event"). click (function (){
// Clone yourself and clone the Click Event (set to true)
$ (This). clone (true). insertAfter (this );
});
});

Process the value of the form element (k4) val ()

The Code is as follows:

$ (Function (){
$ ("Input [type = button]"). click (function (){
Var sValue = $ (this). val ();
$ ("Input [type = text]"). val (sValue );
});
});

Process page events
Bind event listening (k5) bind (eventType, [data], Listener), eventTypeName (fn), one (eventType, Listener)

The Code is as follows:

$ (Function (){
For (var I = 0; I <10; I ++ ){
$ ("P: last"). clone (true). insertAfter ($ ("p: last "));
};
$ ("P"). one ("click", function (){
$ (This). addClass ("myClass1" ).html ("can only be clicked once ");
});
});

Delete event (k5) unbind (), unbind ("click"), unbind ("click", myFunc)

The Code is as follows:

$ (Function (){
$ ("P" ).clone().html ("unbind () delete event"). click (function (){
$ ("P"). unbind ();
}). InsertAfter ($ ("p "));
$ ("P: first"). click (function (){
Alert ("events not deleted ");
});
});

/* Attributes and methods of jQuery event objects
If you press the Alt key of altKey, the value is true; otherwise, the value is false.
CtrlKey: press Ctrl to set this parameter to true; otherwise, press false.
KeyCode for keyup and keydown events, return the value of the key ("A" and "a" have the same value, is 65)
Page. X, page. Y coordinates of the mouse pointer on the client, excluding the toolbar and scroll bar.
Elements in the relatedTarget mouse event that the mouse pointer enters or leaves
The coordinate value of the screenX and screenY mouse pointer relative to the entire computer screen
If the shiftKey is down by the shift key, the value is true; otherwise, the value is false.
Element/Object of the event caused by target
Type event name
In the which keyboard event, it is the Unicode value of the key. In the mouse event, it represents the key value (1 is the left button, 2 is the middle button, and 3 is the right button)
StopPropagation () prevents events from bubbling up
PreventDefault () blocks the default action of an event
*/
Automatic trigger event (k5) trigger (eventType)

The Code is as follows:

$ (Function (){
$ ("P"). click (function (){
Alert ("Click Event ");
});
$ (". MyClass3"). trigger ("click ");
});

Achieve dynamic switching of click events (k6) toggle (fn, fn)

The Code is as follows:

$ (Function (){
$ ("Img"). attr ("title", "toggle () enables dynamic switching of click events"). toggle (function (event ){
Certificate (event.tar get). attr ("src", "Img/Img2.jpg ");
},
Function (event ){
Certificate (event.tar get). attr ("src", "Img/Img1.jpg ");
});
});

Implement inductive mouse (k6)

The Code is as follows:

$ (Function (){
$ ("Img"). hover (function (event ){
Condition (event.target).css ("opacity", "1.0 ");
},
Function (event ){
Condition (event.target).css ("opacity", "0.5 ");
}
);
});

Html code

The Code is as follows:

<% -- K1 -- %>

<% -- K2 -- %>
Link 1 to be added
Link 2 to be added

IPhone

Lumia900

<% -- K3 -- %>

<% -- K4 -- %>




<% -- K5 -- %>

Click me

<% -- K6 -- %>

Css code

The Code is as follows:

. MyClass1 {color: Blue; background: # e58302 ;}
. MyClass2 {color: Red ;}
. MyClass3 {border: 1px solid # FF0000; height: 50px; width: 80px; float: left ;}