jQuery study notes control page implementation code

jQuery study notes control page implementation code_jquery

WBOY

Release： 2016-05-16 17:55:53

Original

1101 people have browsed it

each() traverses elements (k1)

Copy code The code is as follows:

 
$(document).ready(function () { 
$("#btn").html("each() traverses elements").click(function (event) { 
$( "div").each(function (index) { 
$(this).html("This is the "index "div"); 
}); 
event.preventDefault(); 
}); 
}); 

Get the value of the attribute (k1) attr(name)

Copy code The code is as follows:

 
$(document).ready(function () { 
$("#btn").html("Get attribute value"). click(function (event) { 
$("div").each(function () { 
alert("The value of the title attribute is:" $(this).attr("title")); 
}); 
event.preventDefault(); 
}); 
}); 

Set the value of the attribute (k1) attr(name,value), attr (name,fn)
eg1

Copy code The code is as follows:

 
$(document ).ready(function () { 
$("div").each(function () { 
$(this).html(this.title); 
}); 
$( "#btn").html("Set attribute value").click(function (event) { 
$("div").each(function () { 
$(this).attr("style ", "color:Red"); 
}); 
event.preventDefault(); 
}); 
}); 

eg2

Copy code The code is as follows:

 
$(document).ready(function () { 
$( "div").each(function () { 
$(this).html(this.title); 
}); 
$("#btn").html("Set attribute value" ).click(function (event) { 
$("div").each(function (index) { 
$(this).attr("id", function () { 
return "div -id" index; 
}).html($(this).attr("id")); 
}); 
event.preventDefault(); 
}); 
 }); 

Remove attribute (k1) removeAttr(name)

Set element style

Copy code The code is 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 it directly and set the style (k1) css(name), css(name,value )

Copy code The code is 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"); 
}); 
}); 
}); 

Judge css type hasClass(name) is(name)

Process the elements of the page
text() gets the plain text content html () gets the innerHTML attributes including innerHTML

Move and copy elements (k2) append(), appendTo(target) has two forms: copy and move , single target movement, multiple target copy

Copy code 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()
Yes Add elements directly before or after the node, instead of inserting them as child elements. There are two forms of copying and moving, single target movement, multiple target copy

Delete element (k2)
eg1: remove()

Copy code The code is as follows:

 
$(function () { 
$(" p").remove(":contains(P)");// Equivalent to $("p:contains("P")").remove(); 
}); 

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

Copy code The code is as follows:

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

Clone elements to solve the problem of copying and moving (k3)

Copy code The code is as follows:

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

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

Copy code The code is as follows:

 
$(function () { 
$("input[type=button]").click(function () { 
var sValue = $( this).val(); 
$("input[type=text]").val(sValue); 
}); 
}); 

Processing page Event
Bind event listener (k5) bind(eventType,[data],Listener), eventTypeName(fn), one(eventType,Listener)

Copy code The code is as follows:

 
$(function () { 
for (var i = 0; i $( "div:last").clone(true).insertAfter($("div:last")); 
}; 
$("div").one("click", function () { 
$(this).addClass("myClass1").html("Can only be clicked once"); 
}); 
}); 

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

Copy code The code is 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 jQuery event object
altKey If the Alt key is pressed, it is true, otherwise it is false
ctrlKey If Ctrl is pressed, it will be true, otherwise it will be false
keyCode For keyup and keydown events, return the value of the key ("A" and "a" have the same value, which is 65)
page.X,page .Y The coordinates of the mouse pointer on the client, excluding toolbars and scroll bars, etc.
relatedTarget The element that the mouse pointer enters or leaves in the mouse event
screenX, screenY The coordinate value of the mouse pointer relative to the entire computer screen
shiftKey is true when the shift key is pressed, false otherwise
target the element/object that caused the event
type the name of the event
which is the Unicode value of the key in keyboard events, and represents the value of the key in mouse events (1 is the left button, 2 is the middle button, and 3 is the right button)
stopPropagation() prevents the event from bubbling upwards
preventDefault() prevents the default behavior of the event
*/
automatically triggers the event (k5 ) trigger(eventType)

Copy code The code is as follows:

 
$(function () { 
$("div").click(function () { 
alert("click event"); 
}); 
$(".myClass3").trigger("click") ; 
}); 

Implementing dynamic alternation of click events (k6) toggle(fn,fn)

Copy code The code is as follows:

 
$(function () { 
$("img").attr("title","toggle() to implement click event Dynamic alternation").toggle(function (event) { 
$(event.target).attr("src", "Img/Img2.jpg"); 
}, 
function (event) { 
$(event.target).attr("src", "Img/Img1.jpg"); 
}); 
}); 

Implementing sensor mouse (k6)

Copy code The code is 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 The code is as follows: