Sharing the basic usage of jquery to operate DOM_jquery

Example display: jquery code:

Copy code The code is as follows: $(document).ready(function(){ alert($("ul li:eq(1)").text()); //Select the second one The value of li alert($("p").attr("title")); //Select the value of p's title attribute //Append element $('ul').append (" Banana ").append(" Sydney "); //Append in front $('ul').prepend(" Prepend "); //Add $('ul') .after(" Add after "); //Add $(" Hello //Add $(" Hello ").insertBefore("p"); //Delete node $("ul :eq(1)").remove(); // Clear value $("ul :eq(2)").empty(); //Copy node $("ul li").click(function(){ $(this).clone(true).appendTo("ul");//true is optional , it means that when copying, the bound event will also be copied at the same time }); //Replace node $("p[title=test]").replaceWith(" "); //$(" What is your favorite fruit? ").replaceAll("P"); //Wrap event $("strong").wrap(" ") //Attribute operation $("P").attr( {"title":"test","name":"pName"}); //Add attribute $("p").removeAttr("title"); //Remove attribute // Style operations /* Add style: $("p").addClass("hight"); Existed style: $("p").removeClass("highr"); Toggle style: $("p").toggleClass("another"); Whether there is a style: $("p").hasCLass("higth"); */ alert( $("p").html()); //Get the value html() is similar to the innerHTML attribute in javascript $("p").html("change"); //Change the value alert($("p").text()); //Get the value text() is similar to the innerTEXT attribute in javascript $("p").text("again change"); //Change the value $("#name").focus(function(){ if($("#name").val()=="Please enter your username"){ $(this) .val(""); } }).blur(function(){ if($("#name").val()==""){ $( this).val("Please enter your username"); } }); $("#password").focus(function(){ $("#tip") .hide(); }).blur(function(){ if($("#password").val()==""){ $("#tip"). show(200); } }); $("#submit").click(function(){ if($("#name").val()== "Please enter your username"||$("#password").val()==""){ $("#name").css("background","yellow"); $("#password").css("background","yellow"); } }); $("#single").val("Select 2"); $("#multiple").val(["Select No. 2", "Select No. 3"]); $(":checkbox").val(["check2","check3"]); $(":radio").val(["radio1"]); alert("careful! "); $("#single :eq(2)").attr("selected",true); $("[value=radio2]:radio").attr("checked", true); //Traverse the node children() method $("#btnShow").click(function(){ for(var i=0;i $("#body").append($("body").children()[i].innerHTML); } }); //next() method, obtain all elements of the sibling immediately after p alert($("ul li").next().text()); //prev() method , Get an element of the sibling immediately before the match alert($("li[title=pineapple]").prev().text()); //siblings() method to get the matching element All sibling elements for(var i=0;i $("#subling").append($("p" ).siblings()[i].innerHTML); } //closest() method to get the closest matching element $(document).bind("click",function(e){ $(e.target).closest("li").css("color","red"); }); //css operations $("p" ).css({"fontSize":"40px","background":"yellow"}); //offset() method, obtains the relative offset of the element in the current window, and returns the objects top and left Two attributes alert("top=" $("P").offset().top ";" "left=" $("P").offset().left); // The position() method obtains the relative offset of the element relative to the nearest grandparent node whose position style is set to relative or absolute //, and returns the two attributes top and left alert("top=" $(" P").position().top ";" "left=" $("P").position().left); //scrollTop() and scrollLest() methods return the top and left ends of the scroll bar distance alert("scrolltop=" $("P").scrollTop() ";" "scrollleft=" $("P").scrollLeft()); }); &lt ;/script> html code: Copy code The code is as follows: test

What is your favorite apple?

Apple Orange pineapple <input type="button" id="show" value="show" /&gt ;

Please enter password </div&gt ;

Select No. 1 Select No. 2 Select 3 No. Select No. 1 Select No. 2 Select 3 No. Select No. 4 Select No. 5 Multiple select 1 Multiple Choose 2 Multiple choice 3 Multiple choice 4 &lt ;input type="radio" name="radio" value="radio1"/> Single choice 1 Single choice 2 Radio 3

Sharing the basic usage of jquery to operate DOM_jquery

Related articles