Home > Developer > JavaScript
JQuery uses control nodes to transmit parameters only through the get method at the front end. jqueryget
This example describes how jQuery uses control nodes to pass parameters only in the foreground using the get method. Share it with you for your reference. The specific analysis is as follows:
This is also the content of html dom. The core of Front-End scripting languages such as javascript and jquery is to control each node and add, delete, modify, and query each node, in this way, javascript, jquery, and other front-end scripts can be used to write beautiful things.
I have already introduced the javascript control node in the previous [Examples of adding, deleting, modifying, and querying and using JavaScript For webpage nodes]. Now I use jquery, an advanced javascript scripting language, in addition, jquery is used to transmit parameters between different webpages. parameters are transmitted only through the get method on the foreground and mounted to the server without jsp and asp, write requests and other server languages to obtain parameters.
I. Basic Objectives
There are span nodes in the webpage that exist under the black div-red div-blue p. Once you click, the IDs of the above nodes are obtained separately.
Click the Add button to add a hyperlink node. Each Hyperlink contains the Chinese parameter Hello 1, hello 2, hello 3 ......, The scrolling entries automatically follow the increase of the node and are passed to jqrec.html. in this example, the jqrec.html page can obtain this Chinese parameter.
Click the Clear button to clear all nodes under ul.
Ii. Production Process
The full jqrec.html code is as follows. The function used involves analyzing the regular expression of the url address. The actual code is only, $ ("# rec"). text (unescape (getUrlParam ("text ")));
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jqrec </title>
<Script src = "js/jquery-1.11.1.js"> </script>
</Head>
<Body>
<P>
Click <strong> <span id = "rec" style = "color: # F00;"> </span> </strong>, this is exactly the same as the text parameter passed by the get method in the browser ~
</P>
<P>
The parameters passed on text are in Chinese, and result decoding is required ~
</P>
<P>
<A href = "./jqsend.html"> return to jqsend.html and try again ~ </A>
</P>
</Body>
</Html>
<Script>
/* This function can be used with the unescape function to decode the UTF-8 elements passed by the get method on the url */
Function getUrlParam (name)
{
Var reg = new RegExp ("(^ | &)" + name + "= ([^ &] *) (& | $ )");
Var r = window. location. search. substr (1). match (reg );
If (r! = Null) return unescape (r [2]); return null;
}
$ (Function (){
$ ("# Rec"). text (unescape (getUrlParam ("text ")));
});
</Script>
The full jqsend.html code is as follows:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jqsend </title>
<Script src = "js/jquery-1.11.1.js"> </script>
</Head>
<! -- Html part: design a complex layer containing four nodes, that is, Layer 4 of the node tree -->
<Body>
<Div id = "fatherdiv2" style = "border: solid; border-color: #000">
<Div id = "fatherdiv" style = "border: solid; border-color: # f00">
<P id = "fatherp" style = "border: solid; border-color: # 00f">
<Span id = "findmyfather">
My parent node
</Span>
</P>
</Div>
</Div>
<Br/>
<! -- Two buttons -->
<Button id = "add"> add </button>
<Button id = "clear"> clear </button>
<! -- Used to store the list of added hyperlinks -->
<Ul id = "testul"> </ul>
</Body>
</Html>
<Script>
/* $ (Function () {}); equivalent to $ (document). ready (function () {}); function, the main function executed upon loading */
$ (Function (){
/* Counting id */
Var id = 0;
/* Add button click event */
$ ("# Add"). click (function (){
Id = id + 1;
Var li = "<li id = \" id "+ id. toString () +" \ "> <a> </li> ";
/* Add the preceding li node to the testul list */
$ ("# Testul"). append (li );
/* Find the newly added id as idx (where x is the node under the lidian of the counter var id's value, and change the element to "xref". The. html in jqueryis equivalent to the innerHTML in javascript */
$ ("# Id" + id. toString (). find ("a" example .html ("hello" + id );
/* Set the href of the element to jqrec.html = "hello" + id. Because Chinese characters cannot be included in the link, the link is encoded as UTF-8 twice using escape, and a bug occurs when it is used once, you cannot obtain the following scape. I don't know why */
$ ("# Id" + id. toString (). find ("a"). attr ("href", "./jqrec.html? Text = "+ escape (" hello "+ id )));
/* Set the scroll bar to scroll with the height of testul. This code will be invalid under ie8 */
$ ("Body"). scrollTop ($ ("# testul"). height ());
});
/* Click the clear button to event */
$ ("# Clear"). click (function (){
/* Clear all elements under testul and clear the counter */
$ ("# Testul"). empty ();
Id = 0;
});
/* Findmyfather text Click Event */
$ ("# Findmyfather"). click (function (){
/* This indicates the findmyfather to be pressed, and the id of the parent node at the upper level */
Thisid = $ (this). parents (). attr ("id ");
Alert ("My parent node is:" + thisid );
/* In this way, you can find the id of the first div element */
Thisid = $ (this). parents ("div"). attr ("id ");
Alert ("My first div parent node is:" + thisid );
/* You can search for the id of the second div element */
Thisid = $ (this). parents ("div"). parents ("div"). attr ("id ");
Alert ("My second div parent node is:" + thisid );
});
});
</Script>
I hope this article will help you with jQuery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
