Home > Web Front-end > JS Tutorial > Detailed explanation of examples of efficient operation of page elements with jQuery

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

零下一度
Release: 2017-06-26 15:17:15
Original
1725 people have browsed it

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");/ /

element with id 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();
Copy after login
$("#elem").html("<p>Here is some new content.</p>");/*修改内容*/
Copy after login
  • ## 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>")   //添加文本内容
Copy after login
  • 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");    //修改属性值
Copy after login
  • 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");
                }
  );
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template