jQuery uses control nodes to complete parameter transfer only in the foreground through the get method_jquery

The example in this article describes how jQuery uses control nodes to complete parameter transfer only in the foreground through the get method. Share it with everyone for your reference. The specific analysis is as follows:

This is also the content of the HTML DOM. The core of front-end scripting languages ​​​​such as javascript and jquery is to control each node and add, delete, modify and check each node. Only in this way can we truly make full use of front-end scripts such as javascript and jquery. Come up with one gorgeous thing after another.

Javascript control nodes, the author has introduced it in the previous [JavaScript usage examples for adding, deleting, modifying and checking web page nodes], now it is controlled through jquery, an advanced javascript scripting language. node, and on this basis, jquery is used to transfer parameters between different web pages. The parameter transfer is only completed through the get method in the foreground, and it is hooked to the server. There is no need for jsp and asp. Write some request and other server languages ​​​​to obtain the parameters.

1. Basic goals

In the web page, there are span nodes under the black div-red div-blue p. Once clicked, the ids of the nodes above them are obtained respectively

Click the Add button to add hyperlink nodes. Each hyperlink has Chinese parameters Hello 1, Hello 2, Hello 3..., and the scroll bar automatically scrolls with the increase of nodes, toward jqrec. html transmission, this hello x parameter, the jqrec.html page can obtain this Chinese parameter

Click the clear button to clear all nodes under ul

2. Production process

The full code of jqrec.html is as follows. The functions used involve regular expressions for analyzing URL addresses, so there is no need to go into details. The only code that really works is, $("#rec").text(unescape(getUrlParam("text")));

Copy code The code is as follows:

The link you clicked is:, which is passed through the get method on the browser The text parameters are exactly the same ~

The parameters passed on text are in Chinese, and the results need to be decoded~

Return to jqsend.html and try again~

<script> <br> /*This function, together with the unescape function, can decode the utf-8 elements passed by the get method on the url*/ <br> function getUrlParam(name) <br> { <br> var reg = new RegExp("(^|&)" name "=([^&]*)(&|$)"); <br> var r = window.location.search.substr(1).match(reg); <br> if (r!=null) return unescape(r[2]); return null; <br> } <br> $(function() { <br> $("#rec").text(unescape(getUrlParam("text"))); <br> }); <br> </script>

The full code of jqsend.html is as follows. Please see the comments for the specific code:

Copy code The code is as follows:

 
 
 
 
 
 
 
 
 
 
 

 

 

 
 
我的父节点 
 

 

 

Add
Clear

<script> <br> /*$(function(){}); Equivalent to $(document).ready(function (){}); function, the main function that is executed as soon as it is loaded*/ <br> $(function() { <br> /*Counting id*/ <br> var id=0; <br> /*add button click event*/ <br> $("#add").click(function (){ <br>                id=id 1;                                                           var li="<li id="id" id.toString() ""><a></a></li>"; <br> /*In the testul list, add the li node as mentioned above*/ <br>                $("#testul").append(li); <br> /*Find the a node under the newly added li node with ID idx (where x is the value of counter var id), and modify the elements in it to hello x. .html in jquery is equivalent to innerHTML in javascript* / <br>                 $("#id" id.toString()).find("a").html("Hello" id); <br> /*Set the href attribute of this a element to jqrec.html="Hello" id. Since Chinese characters cannot be included in the link, use escape twice to encode it into utf-8 encoding. If you use it once, a bug will appear. Unable to obtain unescape, I don’t know why*/ <br> $("#id" id.toString()).find("a").attr("href","./jqrec.html?text=" escape(escape("Hello" id))); <br>                         /*Set the scroll bar to scroll with the height of testul. This code will be invalid below IE8*/ <br>                 $("body").scrollTop($("#testul").height()); <br>            }); <br> /*clear button click event*/ <br> $("#clear").click(function (){ <br>                       /* Clear all elements under testul and clear the counter to zero*/                                                                          $("#testul").empty(); <br>                 id=0;                                               }); <br> /*findmyfather inline text click event*/ <br> $("#findmyfather").click(function(){ <br>                    /*This represents the pressed findmyfather, take the id of the upper-level parent node*/ <br> Thisid=$(this).parents().attr("id"); <br> alert("My parent node is: " thisid); <br>                /*This way you can look forward to find the id of the first div element*/ <br> Thisid=$(this).parents("div").attr("id"); <br> alert("My first div parent node is: " thisid); <br>                 /*This way you can look forward to find the id of the second div element*/ <br> Thisid=$(this).parents("div").parents("div").attr("id"); <br> alert("My second div parent node is: " thisid); <br>           });                                                      }); <br> </script>


I hope this article will be helpful to everyone’s jQuery programming.