Detailed explanation of examples of efficient operation of page elements with jQuery

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");/ /dc6dce4a544fdca2df29d5ac0ea9906b element with id elem

　$("ul li a.menu"); //3499910bf9dac5ae3c52d5ede7383485 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("e388a4556c0f65e1904146cc1a846beeHere is some new content.94b3e26ee717c64999d7867364b1b4a3");/*修改内容*/

• ## text() only obtains the text content of the element, and obtains and modifies the content as follows:

var textContent=$("#elem").text();
$("#elem").text("new content");     //修改内容
$("#elem").append("<p>Here is some new content.</p>")   //添加文本内容

• attr() Returns an element-specific attribute value. When used in a group, returns the value of the first element.

var title=$("#elem").attr("title");    //返回属性值

$("#elem").attr("title","new title");    //修改属性值

• show() //Display element $("div").show();

• hide() // Hide elements, the slow value is about 600 milliseconds

　　 $("#elem").hide("slow",function(){

　　　　　　　//Operation after hiding

　　　});

---

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!