jQuery can efficiently manipulate page elements.
About DOM and CSS page element selection:
$("span"); //All span elements
$( "#elem"); //Element with id elem
$(".classname"); //Element with classname
$("div#elem");/ /
$("ul li a.menu"); // tag with class "menu"
$("p> ;span"); //The direct child element span
of p $("input[type=password]"); //The input element of the specified type
$("p:first "); //The first paragraph of the page
$("p:even"); //All even-numbered paragraphs
$(":header") ; //Title elements (h1 to h6)
$(":button"); //All button elements
$(":radio");
$ (":checkbox");
$(":checked"); //Selected state selection box or segment selection box
html() Get the element or The HTML content of a set of elements, similar to JavaScript's innerHTML, will get the entire HTML (including text).
var htmlContent=$("#elem").html();
$("#elem").html("<p>Here is some new content.</p>");/*修改内容*/
var textContent=$("#elem").text(); $("#elem").text("new content"); //修改内容 $("#elem").append("<p>Here is some new content.</p>") //添加文本内容
var title=$("#elem").attr("title"); //返回属性值 $("#elem").attr("title","new title"); //修改属性值
Element animation
1. Fade in and out, such as: $("#elem").fadeOut("slow",funtion(){ } ); $("#elem").fadeIn(500,function(){ //Operation after fade-in }) ; $("#elem").fadeTo(3000,0.5,function(){ //The operation after fading in or out, 0.5 means opacity , indicating that the final opacity fades in or out to 0.5 }); 2. Sliding, similar to fading in and out slideDown(); slideUp(); slideToggle(); 3. Animation animate() can be applied to many CSS styles. For example, change the height and width of the element and then fade it out and hide it.$("#elem").animate( { width:400px; height:400px; },1500,function(){ $(this).fadeOut("slow"); } );
Command chain
The length of the jQuery command chain There are no restrictions. You can perform many operations on the same group of elements continuously:
$("#elem").text("Hello from jQuery"). fadeOut().fadeIn();
The above is the detailed content of Detailed explanation of examples of efficient operation of page elements with jQuery. For more information, please follow other related articles on the PHP Chinese website!