jquery Learning Notes Control page implementation code _jquery

each () traversal element (K1)

Copy Code code as follows:

$ (document). Ready (function () {
$ ("#btn"). HTML ("each () traversal element"). Click (Function (event) {
$ ("div"). each (function (index) {
$ (this). HTML ("It is the first" + Index + "div");
});
Event.preventdefault ();
});
});

Gets the value of the property (K1) attr (name)

Copy Code code as follows:

$ (document). Ready (function () {
$ ("#btn"). HTML ("Get property Value"). Click (Function (event) {
$ ("div"). each (function () {
Alert (the value of the title property is: +$ (this). attr ("title"));
});
Event.preventdefault ();
});
});

Sets the value of the property (K1) attr (Name,value), attr (NAME,FN)
Eg1

Copy Code code as follows:

$ (document). Ready (function () {
$ ("div"). each (function () {
$ (this). html (this.title);
});
$ ("#btn"). HTML ("Set property Value"). Click (Function (event) {
$ ("div"). each (function () {
$ (this). attr ("style", "color:red");
});
Event.preventdefault ();
});
});

Eg2

Copy Code code as follows:

$ (document). Ready (function () {
$ ("div"). each (function () {
$ (this). html (this.title);
});
$ ("#btn"). HTML ("Set property Value"). Click (Function (event) {
$ ("div"). each (function (index) {
$ (this). attr ("id", function () {
Return "Div-id" + index;
}. HTML ($ (this). attr ("id"));
});
Event.preventdefault ();
});
});

Delete Property (k1) removeattr (name)

Set element style

Copy Code code as follows:

AddClass (names), removeclass (names), Toggleclass (names)
$ (document). Ready (function () {
$ ("div"). each (function () {
$ (this). html (this.title). addclass ("MyClass1"). MouseOver (function () {
$ (this). Toggleclass ("MyClass2");
});
});
});

Get directly, set style (k1) CSS (name), CSS (Name,value)

Copy Code code as follows:

$ (document). Ready (function () {
$ ("div"). each (function () {
$ (this). html (this.title). CSS ({color: "Red", Opacity: "0.5"}). MouseOver (function () {
$ (this). CSS ("opacity", "1.0");
}). mouseout (function () {
$ (this). CSS ("opacity", "0.5");
});
});
});

To determine the CSS type Hasclass (name) is (name)


Working with elements of a page
Text () get plain text content HTML () Get include innerHTML property

Move and copy elements (K2) append (), appendto (target) has two forms of replication and movement, single target movement, multiple target replication

Copy Code code as follows:

$ (document). Ready (function () {
$ ("P"). Append ($ ("A:eq (0)"));
$ ("P:eq (1)"). Append ($ ("A:eq (1)"));
});

Add node: Before (), InsertBefore (), after (), InsertAfter ()
is to add elements directly before or after a node, not as a child element to insert there are two forms of replication and move, a single target move, multiple target replication

Delete Element (K2)
Eg1:remove ()

Copy Code code as follows:

$ (function () {
$ ("P"). Remove (": Contains (p)");//equal to $ ("P:contains" ("P")). Remove ();
});

Eg2:empty () Note: There is a difference between empty () and remove () where empty () deletes all its child elements

Copy Code code as follows:

$ (function () {
$ ("P"). CSS ({border: "1px solid #FF0000", Height: "20px"}). empty ();
});

Cloning elements, resolving replication and mobility issues (K3)

Copy Code code as follows:

$ (function () {
$ ("#btn-k3"). HTML ("Clone () clones itself and clones events"). Click (function () {
Clone yourself and clone a click event (set to True)
$ (this). Clone (True)-InsertAfter (this);
});
});

Value of the processing form element (K4) Val ()

Copy Code code as follows:

$ (function () {
$ ("Input[type=button]"). Click (function () {
var svalue = $ (this). Val ();
$ ("Input[type=text]"). Val (svalue);
});
});

Handling Page Events
Binding Event Listener (K5) bind (Eventtype,[data],listener), Eventtypename (FN), one (Eventtype,listener)

Copy Code code as follows:

$ (function () {
for (var i = 0; i < i++) {
$ ("Div:last"). Clone (True). InsertAfter ($ ("div:last"));
};
$ ("div"). One ("click", Function () {
$ (this). addclass ("MyClass1"). HTML ("only once");
});
});

Delete event (K5) unbind (), Unbind ("click"), Unbind ("click", MyFunc)

Copy Code code as follows:

$ (function () {
$ ("div"). Clone (). HTML ("unbind () Delete event"). Click (function () {
$ ("div"). Unbind ();
}). InsertAfter ($ ("div"));
$ ("Div:first"). Click (function () {
Alert ("Not deleted event");
});
});

Properties and methods of the/*jquery event object
Altkey Press the ALT key to true, or false
Ctrlkey Ctrl is true, False instead
KeyCode for KeyUp and KeyDown events, returns the value of the key ("a" and "a" for the same value, 65)
Page. X,page. Y mouse pointer coordinates at the client, excluding toolbars and scroll bars, etc.
Relatedtarget elements that the mouse pointer enters or leaves in a mouse event
Screenx,screeny the coordinate values of the mouse pointer relative to the entire computer screen
Shiftkey Press the SHIFT key to true, or false
Target element/object that causes the event
Name of type Event
which the Unicode value for the key in the keyboard event, the value of the key in the mouse event (1 is the left key, 2 is the middle key, 3 is the right key)
Stoppropagation () Prevent events from bubbling up
Preventdefault () to block the default behavior of events
*/
Automatic trigger Event (K5) trigger (EventType)

Copy Code code as follows:

$ (function () {
$ ("div"). Click (function () {
Alert ("click event");
});
$ (". MyClass3"). Trigger ("click");
});

Implement the dynamic alternating (K6) Toggle of click events (FN,FN)

Copy Code code as follows:

$ (function () {
$ ("img"). attr ("title", "Toggle () Implement dynamic alternation of click events"). Toggle (Function (event) {
$ (event.target). attr ("src", "img/img2.jpg");
},
function (event) {
$ (event.target). attr ("src", "img/img1.jpg");
});
});

Realization of the Sensor mouse (K6)

Copy Code code as follows:

$ (function () {
$ ("img"). Hover (function (event) {
$ (event.target). CSS ("opacity", "1.0");
},
function (event) {
$ (event.target). CSS ("opacity", "0.5");
}
);
});

HTML code

Copy Code code as follows:

<%--k1--%>
<form id= "Form1" runat= "Server" >
<div id= "1" title= "IPhone" ></div>
<div id= "2" title= "Lumia900" ></div>
<div id= "3" title= "HTC" ></div>
<button id= "BTN" ></button>
</form>
<%--k2--%>
<a href= "#" > links to be added 1</a>
<a href= "#" > links to be added 2</a>
<p>iPhone</p>
<p>Lumia900</p>
<%--k3--%>
<button id= "Btn-k3" ></button>
<%--k4--%>
<input type= "button" value= "IPhone5"/>
<input type= "button" value= "Lumia900"/>
<input type= "button" value= "HTC"/>
<input type= "Text"/>
<%--k5--%>
<div class= "MYCLASS3" > Click me </div>
<%--k6--%>

CSS Code

Copy Code code as follows:

. myclass1{color:blue background: #e58302;}
. myclass2{color:red;}
. myclass3{border:1px solid #FF0000; height:50px; width:80px; float:left;}