Detailed explanation of examples of efficient operation of page elements with jQuery-JS Tutorial-php.cn

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

零下一度

Release： 2017-06-26 15:17:15

Original

1755 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

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!