This example describes jquery through the control node implementation only in the foreground through the Get method to complete the parameter pass. Share to everyone for your reference. The specific analysis is as follows:
This is also the content of the HTML DOM section, the core of JavaScript and jquery front-end scripting language is to control each node, to each node for the incremental check, That's how you can actually write one or another gorgeous thing with a front-end script like JavaScript and jquery.
JavaScript control node, the author has been in the previous "JavaScript for Web node additions and deletions to check usage instances" has been introduced, now through jquery this JavaScript advanced scripting language to control nodes, and on this basis, Use jquery to pass parameters between different pages, only in the foreground through the Get method to complete the parameter pass, hook to the server, do not need JSP and ASP, write some request, such as server language to obtain parameters.
I. BASIC OBJECTIVES
In a Web page there is a span node that exists under the black div-red div-blue p, and once clicked, gets the ID of the node above
Click the Add button to increase the hyperlink node, each of these hyperlinks has Chinese parameters. Hello 1, hello 2, hello 3 ... and the scroll bar automatically scrolls along with the increase of nodes, pass to jqrec.html, this hello x parameter, jqrec.html page can get this Chinese parameter
Click the empty button to clear all the nodes under UL
Second, the production process
Jqrec.html full code as follows, the function used, involving the analysis of the URL address of the regular expression, do not examine. The real Code of action is only, $ ("#rec"). Text (Unescape (Geturlparam ("text"));
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jqrec</title>
<script src= "Js/jquery-1.11.1.js" ></script>
<body>
<p>
The link you clicked is: <strong><span id= "rec" style= "color: #F00;" ></span></strong>, which is exactly the same as the text parameter passed over the Get method on the browser.
</p>
<p>
The parameters passed on text are in Chinese. Oh, need the result decoding decoding ~
</p>
<p>
<a href= "./jqsend.html" > Return jqsend.html try again ~</a>
</p>
</body>
<script>
/* This function is combined with the Unescape function to decode the UTF-8 elements that are passed over 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>
Jqsend.html full code is as follows, the specific code see note:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jqsend</title>
<script src= "Js/jquery-1.11.1.js" ></script>
<!--HTML section, design a complex layer, the bread contains four heavy nodes, that is, node tree four layer-->
<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" > Empty </button>
<!--to store an added list of hyperlinks-->
<ul id= "Testul" ></ul>
</body>
<script>
/*$ (function () {}), equivalent to $ (document). Ready (function () {}); functions, one loaded, the main function executed.
$ (function () {
/* Count id*/
var id=0;
/*add button click event *
$ ("#add"). Click (function () {
id=id+1;
var li= "<li id=\" id +id.tostring () + "><a></a></li>";
/* In the Testul list, add the Li node as described above.
$ ("#testul"). Append (LI);
/* Look for a node under the Li node with the new ID idx (where x is the value of the counter var ID) and modify the elements in the Hello X,jquery. HTML is equivalent to the innerhtml*/in JavaScript
$ ("#id" +id.tostring ()). Find ("a"). html ("Hello" +id);
/* Set the HREF attribute of this a element, jqrec.html= "Hello" +id, because the link can not be with Chinese, so use two escape to encode it as utf-8 encoding, with a bug, the back of the unescape can not get, do not know why * *
$ ("#id" +id.tostring ()). Find ("a"). attr ("href", "./jqrec.html?text=" +escape (Escape ("Hello" +id));
/* Set the scroll bar to scroll with the height of the Testul, this code will fail under IE8 * *
$ ("Body"). ScrollTop ($ ("#testul"). Height ());
});
/*clear button click event *
$ ("#clear"). Click (function () {
* * To clear all elements below the Testul, the counter clear 0 * *
$ ("#testul"). empty ();
Id=0;
});
/*findmyfather in-line text Click event * *
$ ("#findmyfather"). Click (function () {
The/*this represents the findmyfather that is pressed, and the id*/of the parent node above it
thisid=$ (This). Parents (). attr ("id");
Alert ("My Parent node is:" +thisid);
* * So you can look forward to the first DIV element id*/
thisid=$ (This). Parents ("div"). attr ("id");
Alert ("My first div parent node is:" +thisid);
* * So you can look forward to the second DIV element id*/
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 your jquery programming.
