current position：Home>JQuery Basics

JQuery Basics

2022-04-29 14:31:09【Yusheng 168】

JQuery

Concept ： One JavaScript frame , simplify JS Development ,jQuery It's a fast one 、 concise JavaScript frame , Is the Prototype And then another excellent one JavaScript The code base （ or JavaScript frame ）.jQuery The purpose of the design yes “write Less,Do More”, That is to say, write less code , Do more . It encapsulates JavaScript Common function codes , Provides a simple JavaScript Design patterns , optimal turn HTML The document operation 、 Event handling 、 Animation design and Ajax Interaction .

Quick start

step ：

  1. download JQuery
  2. Import JQuery Of js file L： The import is min.js
  3. Use JQuery

Download version problem ：

 at present jQuery There are three major versions ：
		1.x： compatible ie678, The most widely used , The government only does BUG maintain ,
			 No more features . So in general, for projects , Use 1.x The version will do ,
					  Final version ：1.12.4 (2016 year 5 month 20 Japan )
		2.x： Are not compatible ie678, Few people use , The government only does BUG maintain ,
			 No more features . If you do not consider the compatibility of the lower version of the browser can use 2.x,
					  Final version ：2.2.4 (2016 year 5 month 20 Japan )
		3.x： Are not compatible ie678, Only the latest browsers are supported . Unless otherwise required ,
			 Generally not used 3.x Version of , Many old jQuery The plug-in does not support this version .
			 At present, this version is mainly updated and maintained by the official . The latest version ：3.2.1（2017 year 3 month 20 Japan ）
			
			
 jquery-xxx.js  And  jquery-xxx.min.js difference ：
		1. jquery-xxx.js： Development version . For programmers , Well indented and annotated . It's bigger 
		2. jquery-xxx.min.js： Production version . Used in program , No indent . Smaller size . The program loads faster

Quick start case ：

<!--1. Use the first step ： Import jquery file -->
<script src="js/jquery-3.3.1.min.js"></script>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>

<!--2. Use jquery-->
<!-- Use jQuery Medium id Selector function , Get relevant tags 【 Elements 】 object -->
<script> var div1 = $("#div1"); var html = div1.html();// Pay attention to is ： stay jquery Get the text content of the corresponding attribute in , Use html() function  //  And in the JavaScript Used in innerHTML attribute  alert(html) //  obtain div2 Label object  var div2 = $("#div2"); var html1 = div2.html(); alert(div2.html()); </script>
</body>
</html>
jquery Objects and Javascript Between [ a key ]
jquery  Turn into  Javascript
jq object [ Indexes ]   perhaps   jq object .get( Indexes );

Javascript  Turn into  Jquery
$(js object )



 for (let i = 0; i < divs.length; i++) {
      // modify div The contents of the label body , call innerHTML attribute 
      divs[i].innerHTML = "aaa";
      // Javascript  Turn into  Jquery, because Jquery It is more convenient to modify label properties 
      $(divs[i]).html("eee");
  }
                                 
                                 
                           
  ar $divs = $("div");// By means of a label selector 
  //  Acquired $divs It can also be used as an array 
  // Jquery The way can be sad `html` To modify div The content in the label body , Unlike js Need to traverse 
  $divs.html("bbb");

  /*
       1. JQuery Object in operation , It is more convenient .
       2. JQuery Objects and js Object methods are not universal .
       3.  The two switch to each other 
           * jq -- > js : jq object [ Indexes ]  perhaps  jq object .get( Indexes )
           * js -- > jq : $(js object )
    */
  
  // Jquery  Turn into  Javascript , because $divs Can be used as an array 
  $divs[0].innerHTML = "ccc";
  $divs[1].innerHTML = "ddd";

<head>
    <meta charset="UTF-8">
    <title>Jquery and Javascript Switch between </title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script> //  Mode one ： Use JavaScript The way to get all div Element object  var divs = document.getElementsByTagName("div"); // divs Can be used as an array  for (let i = 0; i < divs.length; i++) {
       // modify div The contents of the label body , call innerHTML attribute  divs[i].innerHTML = "aaa"; // Javascript  Turn into  Jquery, because Jquery It is more convenient to modify label properties  $(divs[i]).html("eee"); } //  Mode two ： adopt Jquery The way to get all div Element object  var $divs = $("div");// By means of a label selector  //  Acquired $divs It can also be used as an array  // Jquery The way can be sad `html` To modify div The content in the label body , Unlike js Need to traverse  $divs.html("bbb"); /* 1. JQuery Object in operation , It is more convenient . 2. JQuery Objects and js Object methods are not universal . 3.  The two switch to each other  * jq -- > js : jq object [ Indexes ]  perhaps  jq object .get( Indexes ) * js -- > jq : $(js object ) */ // Jquery  Turn into  Javascript , because $divs Can be used as an array  $divs[0].innerHTML = "ccc"; $divs[1].innerHTML = "ddd"; </script>
</body>

Selectors

Concept ： Screening elements with similar characteristics （ label ）

1. Basic operation learning

Event binding 

//  stay Jquery The way events are bound in 
        $(function () {
            //  to bt1 Bind click event 
            $("#bt1").click(
                function () {
                    alert(" eject BBB...")
                }
            );// stay click Write the relevant functions in parentheses 
        });

        //  Of Javascript How the client binds events ,
        window.onload = function (){
            document.getElementById("bt1").onclick = function () {
                alert(" eject CCC...");
            }
        }

Entry function ：【 Just wait for the page to load 】

// stay JQuery The way to wait for the page to load 
        //  Entry function 【 Namely dom After the document is loaded   Execute the code in this function , Just wait for the page to load 】
        $(function () {
            $("#bt1").click(function () {
                alert(" eject aaa")
            });
        });

        //  stay Javascript The way to wait for the page to load 
        window.onload = function (){
            alert(" Page loaded file ");
        }

Note that ：$(function(){ Code block }) Can write multiple ,window.onloac=function(){ Code block } It can only be defined once , If defined more than once , The back one will cover the front one

Control style ：

//  Control style 
        //  stay Javascript To modify the style, you can use  style The way   or  className The way 
        window.onload = function () {
            var div2 = document.getElementById("div2");
            div2.className = "div1";
        }

        //  stay Jquery To modify the style, you can use   Get the object tag and call css() function , Pass in the key pair in the function , Keys are attributes , Values are attribute values 
        $(function () {//  Wait for the page to load and execute the code 
            var $div1 = $("#div1");
            $div1.css("backgroundColor","red");//  stay Jquery The function used in is , Modify the style 【 Key value pair mode 】
        });

stay Jquery Call in css() Function can add css The value of the pattern , You can also get the value of the style , It's the form of a key value pair , Passing in a key means getting a value , Passing in key value pairs means adding styles

Basic operation learning cases ：【 The point must be understood 】

<!--1. Use the first step ： Import jquery file -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <style> .div1 {
       background-color: rebeccapurple; } </style>
    <script> // stay JQuery The way to wait for the page to load  //  Entry function 【 Namely dom After the document is loaded   Execute the code in this function , Just wait for the page to load 】 //  Multiple can be defined  $(function () {
       $("#bt1").click(function () {
       alert(" eject aaa") }); }); //  stay Javascript The way to wait for the page to load , It can only be defined once , If defined more than once , The back one will cover the front one  window.onload = function (){
       alert(" Page loaded file "); } //  stay Jquery The way events are bound in  $(function () {
       //  to bt1 Bind click event  $("#bt1").click( function () {
       alert(" eject BBB...") } );// stay click Write the relevant functions in parentheses  }); //  Of Javascript How the client binds events  window.onload = function (){
       document.getElementById("bt1").onclick = function () {
       alert(" eject CCC..."); } } //  Control style  //  stay Javascript To modify the style, you can use  style The way   or  className The way  window.onload = function () {
       var div2 = document.getElementById("div2"); div2.className = "div1"; } //  stay Jquery To modify the style, you can use   Get the object tag and call css() function , Pass in the key pair in the function , Keys are attributes , Values are attribute values  $(function () {
      //  Wait for the page to load and execute the code  var $div1 = $("#div1"); $div1.css("backgroundColor","red");//  stay Jquery The function used in is , Modify the style 【 Key value pair mode 】 }); </script>
</head>

<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<input type="submit" value=" You ordered me " id="bt1" />
</body>
Basic selector 【 a key 】
 Basic selector             
	1.  tag chooser （ Element selector ）               
        grammar ： $("html Tag name ")  Get all elements that match the label name 
    2. id Selectors  
        grammar ： $("#id The attribute value ")  Acquisition and designation id Attribute value matching element 
    3.  Class selectors 
        grammar ： $(".class The attribute value ")  Obtain and designate class Attribute value matching element 
    4.  Union selector ：
        grammar ： $(" Selectors 1, Selectors 2,....")  Get all elements selected by multiple selectors

Basic cases ：

//  In order to get the following elements , You need to wait for the page to load 
		$(function () {
			// ID Selectors 
			// <input type="button" value=" change  id  by  one  The background color of the element is   Red " id="b1"/>
			$("#b1").click(function () {
				$("#one").css("backgroundColor","red");
			});

			//  tag chooser 
			// <input type="button" value="  Change the element [ label ] be known as  <div>  The background color of all elements of is   Red " id="b2"/>
			//  Get all div label 
			var $div = $("#b2");
			//　 Bind click event 
			$div.click(
				function () {
					$("div").css("backgroundColor","red");
				}
			);
			
			//  Class selectors 
			// <input type="button" value="  change  class  by  mini  The background color of all elements of is   Red " id="b3"/>
			var $b3 = $("#b3");
			//  Bind click event 
			$b3.click(
				function () {
					var $mini = $(".mini").css("backgroundColor","green");
				}
			);

			// <input type="button" value="  Change everything <span> Elements and  id  by  two  The background color of the element is red " id="b4"/>
			var $b4 = $("#b4");
			//  to b4 Bind click event 
			$b4.click(
				function () {
					//  Union selector 
					$("span,#tow").css("backgroundColor","green");
				}
			);
		})
Hierarchy selector 
 Hierarchy selector 
	1.  Descendant selector 
		  grammar ： $("A B ")  choice A Everything inside the element B Elements 		
	2.  Child selectors 
		  grammar ： $("A > B")  choice A Everything inside the element B Subelement

Level selector case ：

    <script type="text/javascript"> //  In order to get the following label , So you need to wait for the page to load  $(function () {
       // Descendant selector [ Son, grandson ... All choices ] // <input type="button" value="  change  <body>  All in  <div>  The background color of is red " id="b1"/> var $b1 = $("#b1"); $b1.click( function () {
       $("body div").css("backgroundColor","green"); } ); //  Child selectors [ Choose only... Son ] // <input type="button" value="  change  <body>  Intron  <div>  The background color of is   Red " id="b2"/> var $b2 = $("#b2"); $b2.click(function () {
       $("body>div").css("backgroundColor","green"); }); }); </script>
Attribute selector 【 a key 】

The attribute selector indicates that ： Choose the label 【 Elements 】 The tag that contains the attribute in the 

1.  Property name selector  
	 grammar ： $("A[ Property name ]")  Contains the selector for the specified property 【 a key 】
	
2.  Attribute selector 
	 grammar ： $("A[ Property name =' value ']")  Contains a selector with the specified property equal to the specified value 【 a key 】
	
3.  Composite property selector 
	 grammar ： $("A[ Property name =' value '][]...")  A selector containing multiple attribute conditions

Note that ： Composite property selector , Multiple conditions must be met at the same time 

<script type="text/javascript"> // In order to get the following label , So you need to wait for the page to load  $(function () {
       // <input type="button" value="  Contains properties title  Of div The background color of the element is red " id="b1"/> var $b1 = $("#b1"); $b1.click(function () {
       $("div[title]").css("backgroundColor","green"); }); // <input type="button" value="  attribute title The value is equal to test Of div The background color of the element is red " id="b2"/> var $b2 = $("#b2"); $b2.click(function () {
       $("div[title='test']").css("backgroundColor","green"); }); // <input type="button" value="  attribute title Value is not equal to test Of div Elements ( There is no attribute title Will also be selected ) The background color is red " id="b3"/> var $b3 = $("#b3"); $b3.click(function () {
       $("div[title!=test]").css("backgroundColor","green");//`！` stay Jquery Is not equal to  }); // <input type="button" value="  attribute title value   With te Start   Of div The background color of the element is red " id="b4"/> $("#b4").click(function () {
       $("div[title^='te']").css("backgroundColor","green");//`^` stay Jquery What begins with  }); // <input type="button" value="  attribute title value   With est end   Of div The background color of the element is red " id="b5"/> $("#b5").click(function () {
       $("div[title$='est']").css("backgroundColor","green");//`$` stay Jquery What does it end with  }); // <input type="button" value=" attribute title value   contain es Of div The background color of the element is red " id="b6"/> $("#b6").click(function () {
       $("div[title*='es']").css("backgroundColor","green");//`*` stay Jquery Means to include  }); // <input type="button" value=" Select attribute id Of div Elements , Then select the attribute in the result title Value contains “es” Of  div  The background color of the element is red " id="b7"/> $("#b7").click(function () {
       $("div[id][title*='es']").css("backgroundColor","green");// Note that multiple conditions must be met to work  }); }) </script>
Filter selector 
1.  First element selector  
	 grammar ：  Tag name :first  Get the first element of the selection 
	
2.  Tail element selector  
	  grammar ：  Tag name :last  Get the last element of the selection 
	 
3.  Non element selector 
	  grammar ：  Tag name :not(selector)  Does not include elements of the specified content 
	 
4.  Even selector 
	  grammar ： Tag name :even  even numbers , from  0  Start counting 
	 
5.  Odd number selector 
	  grammar ：  Tag name :odd  Odd number , from  0  Start counting 
	 
6.  Equal to index selector 
	  grammar ：  Tag name :eq(index)  Specify index elements 
	 
7.  Greater than index selector  
	  grammar ：  Tag name :gt(index)  Greater than the specified index element 
	 
8.  Less than index selector  
	  grammar ：  Tag name :lt(index)  Less than the specified index element 
	 
9.  Title selector 
	 grammar ： :header  Get the title （h1~h6） Elements , Fixed writing 【 Note that the title selector is written like this, fixed writing , unchanged 】

Filter selector cases ：

<script type="text/javascript"> //  To get the following label elements , You need to wait for the page to load and execute the code block  $(function () {
       //  change div The elements in , The description is to get all div Element object  // <input type="button" value="  Change the first  div  The background color of the element is   Red " id="b1"/> $("#b1").click(function () {
       $("div:first").css("backgroundColor","green"); }); // <input type="button" value="  Change the last one  div  The background color of the element is   Red " id="b2"/> $("#b2").click(function () {
       $("div:last").css("backgroundColor","green"); }); // <input type="button" value="  change class Not for  one  All of the  div  The background color of the element is   Red " id="b3"/> $("#b3").click(function (){
       $("div:not(.one)").css("backgroundColor","green"); }); // <input type="button" value="  Change the index value to even  div  The background color of the element is   Red " id="b4"/> $("#b4").click(function () {
       $("div:even").css("backgroundColor","green"); }); // <input type="button" value="  Change the index value to an odd number  div  The background color of the element is   Red " id="b5"/> $("#b5").click(function () {
       $("div:odd").css("backgroundColor","green"); }); // <input type="button" value="  Change the index value to be greater than  3  Of  div  The background color of the element is   Red " id="b6"/> $("#b6").click(function () {
       $("div:gt(3)").css("backgroundColor","green"); }); // <input type="button" value="  Change the index value to be equal to  3  Of  div  The background color of the element is   Red " id="b7"/> $("#b7").click(function () {
       $("div:eq(3)").css("backgroundColor","green"); }); // <input type="button" value="  Change the index value to less than  3  Of  div  The background color of the element is   Red " id="b8"/> $("#b8").click(function () {
       $("div:lt(3)").css("backgroundColor","green"); }); // <input type="button" value="  Change the background color of all title elements to   Red " id="b9"/> $("#b9").click(function () {
       $(":header").css("backgroundColor","green"); }); }) </script>

Note that ： The index is from 0 Zero start

Form filter selector 【 a key 】
1.  Available element selectors  
		 grammar ： :enabled  Get available elements 
2.  Element selector not available  
		 grammar ： :disabled  Get unavailable elements 
3.  Select the selector  
		 grammar ： :checked  Get a single choice / Check box selected elements 
4.  Select the selector  
		 grammar ： :selected  Get the element selected in the drop-down box

Case study ：

 <script type="text/javascript"> $(function () {
       // <input type="button" value="  utilize  jQuery  Object's  val()  Method change available in form  <input>  The value of the element " id="b1"/> $("#b1").click(function () {
       $("input[type='text']:enabled").val("aaa"); }); // <input type="button" value="  utilize  jQuery  Object's  val()  Method change form is not available  <input>  The value of the element " id="b2"/> $("#b2").click(function () {
       $("input[type='text']:disabled").val("bbb"); }); // <input type="button" value="  utilize  jQuery  Object's  length  Property gets the number of checkboxes selected " id="b3"/> $("#b3").click(function () {
       var length = $("input[type='checkbox']:checked").length; alert(length) }); // <input type="button" value="  utilize  jQuery  Object's  length  Property gets the number of items selected in the drop-down box " id="b4"/> $("#b4").click(function () {
       //  Note that the check is option label , Namely select The child tag of  var length = $("select[id='job']>option:selected").length; alert(length) }); }) </script>

DOM operation

Content manipulation 

 Method 
html(): obtain / Set the label body content of the element 
 for example ：`<a><font> Content </font></a>  -->  What you get is ：`<font> Content </font>`【 Note that the content of the next level is obtained. There are labels and labels 】

text(): obtain / Set the label body plain text content of the element 
 for example ：`<a><font> Content </font></a>  -->  What you get is ：` Content `【 Note that you can only get the text in the label body , No matter how many are put together , The final result is the text content 】
//  modify mydiv The label body content of ： Note that it will `<p><a href="#"> Title Tag </a></p>` All replacement 

val(): obtain / Set the element's `value` Property value 
 for example ： <input id="myinput" type="text" name="username" value=" Zhang San " /> 
 What you get is ：" Zhang San ", You can also modify value The value in 

//  modify mydiv Text content ： Note that it will ：`<p><a href="#"> Title Tag </a></p>` Replace all and html() The function is the same

Case study ：

<script> // To get the following tag , Wait for the page to load , To execute the code block  $(function () {
       //  obtain myinput  Of value value  var val = $("#myinput").val(); alert(val); //  modify myinput  Of value The value is   The sea,  $("#myinput").val(" The sea, "); //  obtain mydiv The label body content of  var html = $("#mydiv").html();// Acquisition is div What's in the tag ：<p><a href="#"> Title Tag </a></p> and text() The function is the same  alert(html); //  modify mydiv The label body content of ： Note that it will `<p><a href="#"> Title Tag </a></p>` All replacement  $("#mydiv").html("<h2> The sea, </h2>");// You can add labels  $("#mydiv").html(" The sea, "); //  obtain mydiv Text content  var text = $("#mydiv").text();// Get plain text content  alert(text); //  modify mydiv Text content ： Note that it will ：`<p><a href="#"> Title Tag </a></p>` Replace all and html() The function is the same  $("#mydiv").text(" zhanjiang "); }); </script>
Attribute operation 
1. General properties operation ：
	1.attr(): obtain / Set up / Attributes of new elements [ Key value pair form , The incoming key means to get , The passed in key value pair indicates that it is new ]
	2.removeAttr(): Delete attribute 
	3.prop(): obtain / Set up / Attributes of new elements [ Key value pair form , The incoming key means to get , The passed in key value pair indicates that it is new ]
	4.removeProp(): Delete attribute 
	
	
attr and prop difference ？
1. If you operate on the intrinsic properties of an element , It is recommended to use prop【 Is a system defined attribute 】
2. If the operation is the element custom attribute , It is recommended to use attr

Inherent properties are defined by the system , for example ：<input type="text" username="user" /> Medium type Attributes are system defined , and username Attributes are custom attributes

Note that ： The above acquisition and deletion only need to pass in the key name , The setting value is in the form of a key value pair that needs to be passed in , Because the above method is a key value pair 

<script type="text/javascript"> $(function () {
       // Get the name Property value  var $bj = $("#bj"); //  because li There is no name Properties, so custom properties  var attr = $bj.attr("name");// Get the value and pass in the key name  alert(attr); // Set up the name The value of the property is dabeijing var $bj1 = $("#bj"); $bj1.attr("name","dabeijing"); // New Beijing node discription attribute   The property value is didu var attr1 = $("#bj").attr("discription","didu"); alert(attr1) // Delete the name Attribute and test name Whether the attribute exists  var $bj2 = $("#bj"); $bj2.removeAttr("name"); // get hobby The selected state of  //  because checkbox The attribute is input Properties in , So it's an inherent property  var $hobby = $("#hobby"); var prop = $hobby.prop("type"); alert(prop); }) </script>

2. Yes class Attribute operation 
	1.addClass():  add to class Property value 
	2.removeClass():  Delete class Property value 
	3.toggleClass():  Switch class attribute 
		toggleClass("one"):  Judge if there is an element object `class="one", Then the property value `one` Delete the , If it doesn't exist on the element object class="one", Then add 
		

	4.css():  Key value pair form 
		 When a key is passed in , Get the value of the property `css("background");` Indicates the value of the background color 
		 When keys and values are passed in , Indicates the setting value `css("background","green");` Indicates the value of setting the background color

Case study ：

 <script type="text/javascript"> $(function () {
       //<input type="button" value=" Add style with attributes ( change id=one The style of )" id="b1"/> $("#b1").click(function () {
       //  The way to add style , because class yes div Intrinsic properties , So use prop The way  $("#one").prop("class","second"); }); //<input type="button" value=" addClass" id="b2"/> $("#b2").click(function () {
       //  The use of addClass The way  $("#two").addClass("second"); }); //<input type="button" value="removeClass" id="b3"/> $("#b3").click(function () {
       $(".one").removeClass("one"); }); //<input type="button" value="  Switching styles " id="b4"/> $("#b4").click(function () {
       $(".one").toggleClass("second");// Add if not , Delete if there is one  }); //<input type="button" value="  adopt css() get id by one The background color " id="b5"/> $("#b5").click(function () {
       var css = $("#one").css("background"); alert(css); }); //<input type="button" value="  adopt css() Set up id by one The background color is green " id="b6"/> $("#b6").click(function () {
       $("#one").css("background","green"); }); }); </script>
CRUD operation

Parent child hierarchy ：

1.append(): The parent element appends the child element to the open end 
	 Such as ： object 1.append( object 2): Put the object 2 Add to object 1 Element interior , And at the end 

2.prepend(): The parent element appends the child element to the beginning 
	 Such as ： object 1.prepend( object 2): Put the object 2 Add to object 1 Element interior , And at the beginning 
	
3. appendTo():
		 Such as ： object 1.appendTo( object 2): Put the object 1 Add to object 2 Inside , And at the end 

4. prependTo()：
		 Such as ： object 1.prependTo( object 2): Put the object 1 Add to object 2 Inside , And at the beginning

Case study ：

// <input type="button" value=" Put counter-terrorism on city Behind " id="b1"/>
	 $("#b1").click(function () {
	 $("#city").append($("#fk"));
});

 // <input type="button" value=" Put counter-terrorism on city Foremost " id="b2"/>
$("#b2").click(function () {
	$("#city").prepend($("#fk"));
});

Brotherly hierarchy ：

1.after(): Add elements to the back of the element 
	 Such as ： object 1.after( object 2)： Put the object 2 Add to object 1 Behind , object 1 And the object 2 It's brotherhood 
	
2.before(): Add an element to the front of the element 
	 Such as ： object 1.before( object 2)： Put the object 2 Add to object 1 In front of , object 1 And the object 2 It's brotherhood 
	

7. insertAfter()
	 Such as ： object 1.insertAfter( object 2)： Put the object 2 Add to object 1 Back . object 1 And the object 2 It's brotherhood 
	
8. insertBefore()
	 Such as ： object 1.insertBefore( object 2)：  Put the object 2 Add to object 1 in front . object 1 And the object 2 It's brotherhood

Case study ：

<script type="text/javascript"> // <input type="button" value=" Insert counter-terrorism behind Tianjin " id="b3"/> $("#b3").click(function () {
       $("#tj").after($("#fk")); }); // <input type="button" value=" Insert anti-terrorism in front of Tianjin " id="b4"/> $("#tj").before($("#fk")); }); </script>
	

<script type="text/javascript"> $(function () {
       // <input type="button" value=" Put counter-terrorism on city Behind " id="b1"/> $("#b1").click(function () {
       $("#city").append($("#fk")); }); // <input type="button" value=" Put counter-terrorism on city Foremost " id="b2"/> $("#b2").click(function () {
       $("#city").prepend($("#fk")); }); // <input type="button" value=" Insert counter-terrorism behind Tianjin " id="b3"/> $("#b3").click(function () {
       $("#tj").after($("#fk")); }); // <input type="button" value=" Insert anti-terrorism in front of Tianjin " id="b4"/> $("#tj").before($("#fk")); }); </script>

Delete and empty 

1.remove(): Remove elements 
	 object .remove()： Delete the object 【 Who calls to delete who 】
	
2.empty(): Empty all descendants of the element 
	 object .empty()： Empty all descendants of the object , But keep the current object and its attribute nodes

remove() Represents who calls and deletes who 

<script type="text/javascript"> $(function () {
       // <input type="button" value=" Delete <li id='bj' name='beijing'> Beijing </li>" id="b1"/> $("#b1").click(function () {
       $("#bj").remove();// Indicates who calls to delete who  }); // <input type="button" value=" Delete city be-all li node   Clear all descendant nodes in the element ( Contains no attribute nodes )" id="b2"/> $("#b2").click(function () {
       $("#city").empty();// Indicates that all child tags are deleted , But your own tags and attributes and values are saved  }); }) </script>

copyright notice
author[Yusheng 168],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291258262937.html

The sidebar is recommended

guess what you like

Random recommended