JQuery foundation of dark horse notes

Difference and transformation between JQuery object and JS object

        * jq -- > js : jq object[Indexes] perhaps jq object.get(Indexes)
        * js -- > jq : $(js object)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuer Object and js Object conversion</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>



<script>
  //1. Get all html element objects named div through js
    var divs = document.getElementsByTagName("div");
    alert(divs.length);//You can use it as an array
    //For all divs in divs, change the label body content to "aaa"
  for (var i = 0; i < divs.length; i++) {
      //divs[i].innerHTML = "aaa";
      $(divs[i]).html("ccc");
  }

    //2. Get all html element objects named div through jq
    var $divs = $("div");

  alert($divs.length);//It can also be used as an array

  //Use jq method to change the label body content of all divs in divs to "bbb"
    //$divs.html("bbb");
   // $divs.innerHTML = "bbb";

  $divs[0].innerHTML = "ddd";
  $divs.get(1).innerHTML = "eee";


    /*
        1. JQuery Object is more convenient to operate.
        2. JQuery Object and js object methods are not common
        3. The two are converted to each other
            * jq -- > js : jq Object [index] or jq object. Get (index)
            * js -- > jq : $(js Object)
     */

</script>

</body>
</html>

Selector: filter elements (labels) with similar characteristics

  1. Basic selector
    1. Label selector (element selector)
    *Syntax: $("html tag name") gets all elements matching the tag name
    2. id selector
    *Syntax: $("#id attribute value") gets the element matching the specified ID attribute value
    3. Class selector
    *Syntax: $(". Class attribute value") gets the element that matches the specified class attribute value
    4. Union selector:
    *Syntax: $("selector 1, selector 2...") gets all elements selected by multiple selectors
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Basic selector</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="../js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			
			
	 </style>
	<script type="text/javascript">
		$(function () {
            // < input type = "button" value = "change the background color of the element with id one to red" id = "B1" / >
			$("#b1").click(function () {
				$("#one").css("backgroundColor","pink");
            });

            // < input type = "button" value = "change the background color of all elements named < div > to red" id = "B2" / >
            $("#b2").click(function () {
                $("div").css("backgroundColor","pink");
            });

            // < input type = "button" value = "change the background color of all elements with class mini to red" id = "B3" / >
            $("#b3").click(function () {
                $(".mini").css("backgroundColor","pink");
            });
            // < input type = "button" value = "change the background color of all < span > elements and elements with ID two to red" id = "B4" / >
            $("#b4").click(function () {
                $("span,#two").css("backgroundColor","pink");
            });
        });

	</script>
   
	</head>
	 
	<body>
				
		 <input type="button" value="preservation"  class="mini" name="ok"  class="mini" />
		 <input type="button" value="change id by one The background color of the element is red"  id="b1"/>
		 <input type="button" value=" Change the element name to <div> The background color of all elements is red"  id="b2"/>
		 <input type="button" value=" change class by mini The background color of all elements is red"  id="b3"/>
		 <input type="button" value=" Change all<span>Element and id by two The background color of the element is red"  id="b4"/>
		
 
		 <h1>There is a miracle called persistence</h1>
		 <h2>Confidence comes from effort</h2>
		 
	   <div id="one">
	    	 id by one       
		 </div>
		
		 <div id="two" class="mini" >
	    	   id by two   class yes mini 
		       <div  class="mini" >class yes mini</div>
		 </div>
		
		 <div class="one" >
		 	    class yes one 
		       <div  class="mini" >class yes mini</div>
			   <div  class="mini" >class yes mini</div>
		 </div>
		 <div class="one" >
		 	  class yes one 
		       <div  class="mini01" >class yes mini01</div>
			   <div  class="mini" >class yes mini</div>
		</div>
		

		<span class="spanone">class by spanone of span element</span>
		<span class="mini">class by mini of span element</span>
		

		<input type="text" value="zhang" id="username" name="username">
	
	</body>
	
	
	
</html>




  1. Level selector
    1. Descendant selector
    *Syntax: $("A, B") selects all B elements inside A element
    2. Sub selector
    *Syntax: $("A > b") selects all B child elements inside the A element
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Hierarchy selector</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="../js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
	 </style>
    <script type="text/javascript">
		$(function () {
            // < input type = "button" value = "change the background color of all < div > in < body > to red" id = "B1" / >
			$("#b1").click(function () {
				$("body div").css("backgroundColor","pink");
            });
            // < input type = "button" value = "change the background color of < div > in < body > to red" id = "B2" / >
            $("#b2").click(function () {
                $("body > div").css("backgroundColor","pink");
            });

        });

	</script>
   
	</head>
	 
	<body>
				
		 <input type="button" value="preservation"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" change <body> All inside <div> The background color of is red"  id="b1"/>
		 <input type="button" value=" change <body> Inner son <div> The background color of is red"  id="b2"/>
		
 
		 <h1>There is a miracle called persistence</h1>
		 <h2>Confidence comes from effort</h2>
		 
	     <div id="one">
	    	 id by one  
		     
		 </div>
		
		 <div id="two" class="mini" >
	    	   id by two   class yes mini 
		       <div  class="mini" >class yes mini</div>
		</div>
		
		 <div class="one" >
		 	    class yes one 
		       <div  class="mini" >class yes mini</div>
			   <div  class="mini" >class yes mini</div>
		 </div>
		 <div class="one">
		 	  class yes one 
		       <div  class="mini01" >class yes mini01</div>
			   <div  class="mini" >class yes mini</div>
		</div>
		
		
		<span class="spanone">    span
		</span>
		
	</body>
	
	
</html>




  1. attribute selectors
    1. Attribute name selector
    *Syntax: $("A [attribute name]") contains A selector for the specified attribute
    2. Attribute selector
    *Syntax: $("A [property name = 'value']) contains A selector where the specified property is equal to the specified value
    3. Composite attribute selector
    *Syntax: $("A [attribute name = 'value'] []...") selector containing multiple attribute conditions
	 <script type="text/javascript">
		$(function () {
			// < input type = "button" value = "the background color of div element with attribute title is red" id = "B1" / >
			$("#b1").click(function () {
				$("div[title]").css("backgroundColor","pink");
            });
			// < input type = "button" value = "div element with attribute title value equal to test has a red background color" id = "B2" / >
            $("#b2").click(function () {
                $("div[title='test']").css("backgroundColor","pink");
            });
			// < input type = "button" value = "div elements whose attribute Title Value is not equal to test (those without attribute title will also be selected) have a red background color" id = "B3" / >
            $("#b3").click(function () {
                $("div[title!='test']").css("backgroundColor","pink");
            });
			// < input type = "button" value = "the background color of div element whose attribute title Value starts with te is red" id = "B4" / >
            $("#b4").click(function () {
                $("div[title^='te']").css("backgroundColor","pink");
            });
			// < input type = "button" value = "the background color of div element whose attribute title Value ends with est is red" id = "B5" / >
            $("#b5").click(function () {
                $("div[title$='est']").css("backgroundColor","pink");
            });
			// < input type = "button" value = "div element with es in attribute title Value has red background color" id = "B6" / >
            $("#b6").click(function () {
                $("div[title*='es']").css("backgroundColor","pink");
            });
			// < input type = "button" value = "select the div element with attribute ID, and then select the div element with attribute title Value" es "in the result. The background color is red" id = "B7" / >
            $("#b7").click(function () {
                $("div[id][title*='es']").css("backgroundColor","pink");
            });

        });
		
		
	</script>
   
	 

	 





  1. Filter selector
    1. First element selector
    *Syntax:: first gets the first element of the selected elements
    2. Tail element selector
    *Syntax:: last gets the last element of the selected elements
    3. Non element selector
    *Syntax:: not(selector) does not include elements of the specified content
    4. Even selector
    *Syntax:: even, counting from 0
    5. Odd selector
    *Syntax:: odd, counting from 0
    6. Equal to index selector
    *Syntax:: eq(index) specifies the index element
    7. Greater than index selector
    *Syntax:: gt(index) is greater than the specified index element
    8. Less than index selector
    *Syntax:: lt(index) is less than the specified index element
    9. Title selector
    *Syntax: header gets the title (h1~h6) element, fixed writing method
	 <script type="text/javascript">
		$(function () {
			// < input type = "button" value = "the background color of div element with attribute title is red" id = "B1" / >
			$("#b1").click(function () {
				$("div[title]").css("backgroundColor","pink");
            });
			// < input type = "button" value = "div element with attribute title value equal to test has a red background color" id = "B2" / >
            $("#b2").click(function () {
                $("div[title='test']").css("backgroundColor","pink");
            });
			// < input type = "button" value = "div elements whose attribute Title Value is not equal to test (those without attribute title will also be selected) have a red background color" id = "B3" / >
            $("#b3").click(function () {
                $("div[title!='test']").css("backgroundColor","pink");
            });
			// < input type = "button" value = "the background color of div element whose attribute title Value starts with te is red" id = "B4" / >
            $("#b4").click(function () {
                $("div[title^='te']").css("backgroundColor","pink");
            });
			// < input type = "button" value = "the background color of div element whose attribute title Value ends with est is red" id = "B5" / >
            $("#b5").click(function () {
                $("div[title$='est']").css("backgroundColor","pink");
            });
			// < input type = "button" value = "div element with es in attribute title Value has red background color" id = "B6" / >
            $("#b6").click(function () {
                $("div[title*='es']").css("backgroundColor","pink");
            });
			// < input type = "button" value = "select the div element with attribute ID, and then select the div element with attribute title Value" es "in the result. The background color is red" id = "B7" / >
            $("#b7").click(function () {
                $("div[id][title*='es']").css("backgroundColor","pink");
            });

        });
		
		
	</script>
   
  1. Form filter selector
    1. Available element selectors
    *Syntax:: enabled get available elements
    2. Unavailable element selector
    *Syntax:: disabled get unavailable elements
    3. Select the selector
    *Syntax:: checked get elements selected by radio / check box
    4. Select the selector
    *Syntax:: selected gets the element selected in the drop-down box
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Form property filter selector</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="../js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			#job{
				margin: 20px;
			}
			#edu{
				margin-top:-70px;
			}
			
	 </style>
    <script type="text/javascript">
	
		$(function () {
			// < input type = "button" value = "use the val() method of jQuery object to change the value of available < input > elements in the form" id = "B1" / >
			$("#b1").click(function () {
				$("input[type='text']:enabled").val("aaa");
            });
			// < input type = "button" value = "use the val() method of jQuery object to change the value of unavailable < input > elements in the form" id = "B2" / >
            $("#b2").click(function () {
                $("input[type='text']:disabled").val("aaa");
            });
			// < input type = "button" value = "use the length attribute of jQuery object to get the number of check boxes selected" id = "B3" / >
            $("#b3").click(function () {
                alert($("input[type='checkbox']:checked").length);
            });
			// < input type = "button" value = "use the length attribute of jQuery object to obtain the number of selected drop-down boxes" id = "B4" / >
            $("#b4").click(function () {
                alert($("#job > option:selected").length);
            });

        });
	
	
	</script>
	</head>
	 
	<body>
				
		 <input type="button" value="preservation"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" utilize jQuery Object val() Method changes available in the form <input> The value of the element"  id="b1"/>
		 <input type="button" value=" utilize jQuery Object val() Method change is not available within the form <input> The value of the element"  id="b2"/>
		 <input type="button" value=" utilize jQuery Object length Property to get the number of check boxes selected"  id="b3"/>
		 <input type="button" value=" utilize jQuery Object length Property to get the number of items selected in the drop-down box"  id="b4"/>
 
 		<br><br>
 		
         <input type="text" value="Unavailable value 1" disabled="disabled"> 
		 <input type="text" value="Available value 1" >
		 <input type="text" value="Unavailable value 2" disabled="disabled">
		 <input type="text" value="Available value 2" >
		 
		 <br><br>
		 <input type="checkbox" name="items" value="cosmetology" >cosmetology
		 <input type="checkbox" name="items" value="IT" >IT
		 <input type="checkbox" name="items" value="finance" >finance
		 <input type="checkbox" name="items" value="Administration" >Administration
		 
		 <br><br>
		 
		  <input type="radio" name="sex" value="male" >male
		  <input type="radio" name="sex" value="female" >female
		  
         <br><br>
		 
		  <select name="job" id="job" multiple="multiple" size=4>
          	<option>programmer</option>
			<option>Intermediate programmer</option>
			<option>Senior programmer</option>
			<option>System Analyst</option>
          </select>
		    
          <select name="edu" id="edu">
          	<option>undergraduate</option>
			<option>doctor</option>
			<option>master</option>
			<option>junior college</option>
          </select>
	   
	  		
	  	<br/>
	  		
		 <div id="two" class="mini" >
	    	   id by two   class yes mini  div
		       <div  class="mini" >class yes mini</div>
		</div>
		
		 <div class="one" >
		 	    class yes one 
		       <div  class="mini" >class yes mini</div>
			   <div  class="mini" >class yes mini</div>
		 </div>
		 <div class="one" >
		 	  class yes one 
		       <div  class="mini01" >class yes mini01</div>
			   <div  class="mini" >class yes mini</div>
		</div>
		
	</body>
	
	
   
</html>




DOM operation

1. Content operation
		1. html(): obtain/Sets the label body content of the element   <a><font>content</font></a>  --> <font>content</font>
		2. text(): obtain/Sets the plain text content of the label body of the element   <a><font>content</font></a> --> content
		3. val():  obtain/Sets the of the element value Attribute value
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="../js/jquery-3.3.1.min.js"></script>
		<script>

			$(function () {
                // Get the value of myinput
				//var value = $("#myinput").val();
				//alert(value);
                $("#Myinput ". Val (" Li Si ");
                // Get the label body content of mydiv
				//var html = $("#mydiv").html();
				//alert(html);
       	  $("#mydiv").html("<p>aaaa</p>");
                // Get mydiv text content
                //var text = $("#mydiv").text();
              //  alert(text);
             $("#mydiv").text("bbb");

            });

		</script>
		
	</head>
	<body>
		<input id="myinput" type="text" name="username" value="Zhang San" /><br />
		<div id="mydiv"><p><a href="#"> title label < / a > < / P > < / div >
	</body>
</html>

  1. Attribute operation
    1. General attribute operation
    1. attr(): get / set the attribute of the element
    2. removeAttr(): deletes an attribute
    3. prop(): get / set the attribute of the element
    4. removeProp(): delete attribute

  2. Operation on class attribute
    1. addClass(): add class attribute value
    2. removeClass(): deletes the class attribute value
    3. toggleClass(): toggles the class attribute
    * toggleClass("one"):
    *Judge if class = "one" exists on the element object, delete the attribute value "one". If class = "one" does not exist on the element object, add
    4. css():

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>get attribute</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="../js/jquery-3.3.1.min.js"></script>
	

    
	<script type="text/javascript">
		$(function () {
            //Gets the name attribute value of the Beijing node
			var name = $("#bj").attr("name");
			//alert(name);
            //Set the value of the name attribute of the Beijing node to dabeijing
            $("#bj").attr("name","dabeijing");
            //The description attribute value of the new Beijing node is didu
            $("#bj").attr("discription","didu");
            //Delete the name attribute of the Beijing node and verify whether the name attribute exists
            $("#bj").removeAttr("name");
            //Get the selected status of the hobby
			var checked = $("#hobby").prop("checked");
			alert(checked);

            //var checked = $("#hobby").attr("checked"); // Unable to get, pop up undefined

        });

		



	$(function () {
            //< input type = "button" value = "add style with attribute (change the style with id=one)" id = "B1" / >
			$("#b1").click(function () {
				$("#one").prop("class","second");
            });
            //<input type="button" value=" addClass"  id="b2"/>
            $("#b2").click(function () {
                $("#one").addClass("second");
            });
            //<input type="button" value="removeClass"  id="b3"/>
            $("#b3").click(function () {
                $("#one").removeClass("second");
            });
            //< input type = "button" value = "switch style" id = "B4" / >
            $("#b4").click(function () {
                $("#one").toggleClass("second");
            });
            //< input type = "button" value = "get background color with id one through css()" id = "B5" / >
            $("#b5").click(function () {
                var backgroundColor = $("#one").css("backgroundColor");
                alert(backgroundColor);

            });
            //< input type = "button" value = "set ID to one and background color to green through css()" id = "B6" / >
            $("#b6").click(function () {
                 $("#one").css("backgroundColor","green");

            });

        });

		 
	</script>
	
	
	
	
   
</html>




	3. CRUD operation:
		1. append():The parent element appends the child element to the end
			* Object 1.append(Object 2): Add object 2 inside the object 1 element and at the end
		2. prepend():The parent element appends the child element to the beginning
			* Object 1.prepend(Object 2):Add object 2 inside the element of object 1 and at the beginning
		3. appendTo():
			* Object 1.appendTo(Object 2):Add object 1 inside object 2 and at the end
		4. prependTo(): 
			* Object 1.prependTo(Object 2):Add object 1 inside object 2 and at the beginning


		5. after():Add element to back of element
			* Object 1.after(Object 2):  Add object 2 to the back of object 1. Object 1 and object 2 are siblings
		6. before():Add element to front of element
			* Object 1.before(Object 2):  Add object 2 to the front edge of object 1. Object 1 and object 2 are siblings
		7. insertAfter()
			* Object 1.insertAfter(Object 2): Add object 2 to the back of object 1. Object 1 and object 2 are siblings
		8. insertBefore()
			* Object 1.insertBefore(Object 2):  Add object 2 to the front edge of object 1. Object 1 and object 2 are siblings

		9. remove():Removing Elements 
			* object.remove():Delete object
		10. empty():Empty all descendant elements of the element.
			* object.empty():Clears all descendant elements of an object, but retains the current object and its attribute nodes
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Internal insert script</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="../js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <script type="text/javascript">

		 $(function () {
             // < input type = "button" value = "place counter-terrorism behind the city" id = "B1" / >

			 $("#b1").click(function () {
				 //append
				 //$("#city").append($("#fk"));
				 //appendTo
                 $("#fk").appendTo($("#city"));
             });
             // < input type = "button" value = "put counter-terrorism at the front of the city" id = "B2" / >
             $("#b2").click(function () {
                 //prepend
                 //$("#city").prepend($("#fk"));
                 //prependTo
                 $("#fk").prependTo($("#city"));
             });
             // < input type = "button" value = "insert counter-terrorism behind Tianjin" id = "B3" / >
             $("#b3").click(function () {
                 //after
				 //$("#tj").after($("#fk"));
                 //insertAfter
                 $("#fk").insertAfter($("#tj"));

             });
             // < input type = "button" value = "insert counter-terrorism in front of Tianjin" id = "B4" / >
             $("#b4").click(function () {
                 //before
                 //$("#tj").before($("#fk"));
                 //insertBefore
                 $("#fk").insertBefore($("#tj"));

             });
         });


		
	</script>
	 
	 
	</head>
	 
	<body>

		<input type="button" value="Place counter terrorism in city Behind"  id="b1"/>
		<input type="button" value="Place counter terrorism in city Front of"  id="b2"/>
		<input type="button" value="Insert counter-terrorism into the back of Tianjin"  id="b3"/>
		<input type="button" value="Insert counter-terrorism in front of Tianjin"  id="b4"/>
		 <ul id="city">
		 	 <li id="bj" name="beijing">Beijing</li>
			 <li id="tj" name="tianjin">Tianjin</li>
			 <li id="cq" name="chongqing">Chongqing</li>
		 </ul>
		 
		 
		  <ul id="love">
		 	 <li id="fk" name="fankong">counter-terrorism</li>
			 <li id="xj" name="xingji">interstellar</li>
		 </ul>
		
		<div id="foo1">Hello1</div> 
       
	</body>
	
	
   
</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Delete node</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="../js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
    <script type="text/javascript">
	$(function () {
        // < input type = "button" value = "delete < Li id ='bj 'name ='Beijing' > Beijing < / Li >" id = "B1" / >
		$("#b1").click(function () {
			$("#bj").remove();
        });
        // < input type = "button" value = "delete all li nodes in the city, and empty all descendant nodes (excluding attribute nodes)" id = "B2" / >
        $("#b2").click(function () {
            $("#city").empty();
        });
    });

	
	   
	   
	
	</script>
	</head>
	 
	<body>
	<input type="button" value="delete<li id='bj' name='beijing'>Beijing</li>"  id="b1"/>
	<input type="button" value="Delete all child nodes and empty all descendant nodes in the element(Contains no attribute nodes)"  id="b2"/>

		 <ul id="city">
		 	 <li id="bj" name="beijing">Beijing</li>
			 <li id="tj" name="tianjin">Tianjin</li>
			 <li id="cq" name="chongqing">Chongqing</li>
		 </ul>
		 <p class="hello">Hello</p> how are <p>you?</p> 
	</body>
	
	
   
</html>




Tags: Java Back-end

Posted on Mon, 22 Nov 2021 08:00:39 -0500 by velanzia