jQuery通過控制節(jié)點實現(xiàn)僅在前臺通過get方法完成參數(shù)傳遞
更新時間：2015年02月02日 14:51:53 作者：yongh701
這篇文章主要介紹了jQuery通過控制節(jié)點實現(xiàn)僅在前臺通過get方法完成參數(shù)傳遞的功能,實例分析了jQuery操作節(jié)點的技巧與控制前臺get方法傳遞參數(shù)的用法,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery通過控制節(jié)點實現(xiàn)僅在前臺通過get方法完成參數(shù)傳遞。分享給大家供大家參考。具體分析如下：
這樣也是HTML DOM那部分的內(nèi)容，javascript與jquery等前端腳本語言的核心就是要控制每一個節(jié)點，對每一個節(jié)點進行增刪改查，這樣才能夠真正地活用javascript與jquery等前端腳本寫出一個又一個華麗麗的東西。
javascript控制節(jié)點，筆者已經(jīng)在之前的【JavaScript針對網(wǎng)頁節(jié)點的增刪改查用法實例】有過相關介紹，現(xiàn)在是通過jquery這一javascript進階的腳本語言，來控制節(jié)點，并且在此基礎上，使用jquery來在不同網(wǎng)頁間傳遞參數(shù)，僅在前臺通過get方法完成參數(shù)傳遞，掛到服務器，不需要jsp與asp，寫一些request等服務器語言來獲取參數(shù)。
一、基本目標
在網(wǎng)頁中有存在于黑色div-紅色div-藍色p之下的span節(jié)點，一旦點擊，則分別獲取其上面節(jié)點的id
點擊增加按鈕可以增加超級鏈接節(jié)點，其中每一個超級鏈接都帶有中文參數(shù)你好1，你好2，你好3……，而且滾動條自動隨節(jié)點的增加而滾動，向jqrec.html傳遞，這個你好x參數(shù)，jqrec.html頁面能夠獲取到這個中文參數(shù)
點擊清空按鈕可以清空ul下面的所有節(jié)點
二、制作過程
jqrec.html全代碼如下，所使用的函數(shù)，涉及到分析url地址的正則表達式，不用細究。真正作用的代碼則只有，$("#rec").text(unescape(getUrlParam("text")));
復制代碼 代碼如下:
<!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>
你點擊的鏈接是：<strong><span id="rec" style="color:#F00;"></span></strong>，這與瀏覽器上的get方法傳過來的text參數(shù)完全相同~
</p>
<p>
text上傳遞的參數(shù)是中文來的哦，需要結果譯碼解碼~
</p>
<p>
<a href="./jqsend.html">返回jqsend.html再試一次~</a>
</p>
</body>
</html>
<script>
/*此函數(shù)配合unescape函數(shù)能夠?qū)rl上get方法傳遞過來的utf-8元素進行解碼*/
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>
<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>
你點擊的鏈接是：<strong><span id="rec" style="color:#F00;"></span></strong>，這與瀏覽器上的get方法傳過來的text參數(shù)完全相同~
</p>
<p>
text上傳遞的參數(shù)是中文來的哦，需要結果譯碼解碼~
</p>
<p>
<a href="./jqsend.html">返回jqsend.html再試一次~</a>
</p>
</body>
</html>
<script>
/*此函數(shù)配合unescape函數(shù)能夠?qū)rl上get方法傳遞過來的utf-8元素進行解碼*/
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全代碼如下，具體代碼請看注釋：
復制代碼 代碼如下:
<!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部分，設計一個復雜的圖層，里面包含著四重節(jié)點，也就是節(jié)點樹四層-->
<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">
我的父節(jié)點
</span>
</p>
</div>
</div>
<br />
<!--兩個按鈕-->
<button id="add">增加</button>
<button id="clear">清空</button>
<!--用來存放增加的超鏈接列表-->
<ul id="testul"></ul>
</body>
</html>
<script>
/*$(function(){});相當于$(document).ready(function (){});函數(shù)，一載入，就執(zhí)行的主函數(shù)*/
$(function() {
/*計數(shù)id*/
var id=0;
/*add按鈕點擊事件*/
$("#add").click(function (){
id=id+1;
var li="<li id=\"id" +id.toString()+ "\"><a></a></li>";
/*在testul列表中，增加如上所述的li節(jié)點*/
$("#testul").append(li);
/*尋找新增的id為idx（其中x為計數(shù)器var id的值）的li節(jié)點下的a節(jié)點，并且把其中的元素修改為你好x，jquery里面的.html相當于javascript里面的innerHTML*/
$("#id"+id.toString()).find("a").html("你好"+id);
/*設置此a元素的href屬性為，jqrec.html=“你好”+id，由于鏈接中不可以帶中文，所以用兩次escape將其編碼為utf-8編碼，用一次會出現(xiàn)bug，后面的unescape獲取不了，不知道為什么*/
$("#id"+id.toString()).find("a").attr("href","./jqrec.html?text="+escape(escape("你好"+id)));
/*設置滾動條隨著testul的所在高度滾動，這段代碼在ie8以下會失效*/
$("body").scrollTop($("#testul").height());
});
/*clear按鈕點擊事件*/
$("#clear").click(function (){
/*把testul下面的所有元素清空，計數(shù)器清零*/
$("#testul").empty();
id=0;
});
/*findmyfather行內(nèi)文本點擊事件*/
$("#findmyfather").click(function(){
/*this代表被按的findmyfather，取其上一級父節(jié)點的id*/
thisid=$(this).parents().attr("id");
alert("我的父節(jié)點是："+thisid);
/*這樣可以往前尋找第一個div元素的id*/
thisid=$(this).parents("div").attr("id");
alert("我的第一個div父節(jié)點是："+thisid);
/*這樣可以往前尋找第二個div元素的id*/
thisid=$(this).parents("div").parents("div").attr("id");
alert("我的第二個div父節(jié)點是："+thisid);
});
});
</script>
<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部分，設計一個復雜的圖層，里面包含著四重節(jié)點，也就是節(jié)點樹四層-->
<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">
我的父節(jié)點
</span>
</p>
</div>
</div>
<br />
<!--兩個按鈕-->
<button id="add">增加</button>
<button id="clear">清空</button>
<!--用來存放增加的超鏈接列表-->
<ul id="testul"></ul>
</body>
</html>
<script>
/*$(function(){});相當于$(document).ready(function (){});函數(shù)，一載入，就執(zhí)行的主函數(shù)*/
$(function() {
/*計數(shù)id*/
var id=0;
/*add按鈕點擊事件*/
$("#add").click(function (){
id=id+1;
var li="<li id=\"id" +id.toString()+ "\"><a></a></li>";
/*在testul列表中，增加如上所述的li節(jié)點*/
$("#testul").append(li);
/*尋找新增的id為idx（其中x為計數(shù)器var id的值）的li節(jié)點下的a節(jié)點，并且把其中的元素修改為你好x，jquery里面的.html相當于javascript里面的innerHTML*/
$("#id"+id.toString()).find("a").html("你好"+id);
/*設置此a元素的href屬性為，jqrec.html=“你好”+id，由于鏈接中不可以帶中文，所以用兩次escape將其編碼為utf-8編碼，用一次會出現(xiàn)bug，后面的unescape獲取不了，不知道為什么*/
$("#id"+id.toString()).find("a").attr("href","./jqrec.html?text="+escape(escape("你好"+id)));
/*設置滾動條隨著testul的所在高度滾動，這段代碼在ie8以下會失效*/
$("body").scrollTop($("#testul").height());
});
/*clear按鈕點擊事件*/
$("#clear").click(function (){
/*把testul下面的所有元素清空，計數(shù)器清零*/
$("#testul").empty();
id=0;
});
/*findmyfather行內(nèi)文本點擊事件*/
$("#findmyfather").click(function(){
/*this代表被按的findmyfather，取其上一級父節(jié)點的id*/
thisid=$(this).parents().attr("id");
alert("我的父節(jié)點是："+thisid);
/*這樣可以往前尋找第一個div元素的id*/
thisid=$(this).parents("div").attr("id");
alert("我的第一個div父節(jié)點是："+thisid);
/*這樣可以往前尋找第二個div元素的id*/
thisid=$(this).parents("div").parents("div").attr("id");
alert("我的第二個div父節(jié)點是："+thisid);
});
});
</script>
希望本文所述對大家的jQuery程序設計有所幫助。
您可能感興趣的文章:
- jQuery中通過ajax的get()函數(shù)讀取頁面的方法
- jQuery中ajax - get() 方法實例詳解
- Jquery中ajax提交表單幾種方法(get、post兩種方法)
- jQuery使用$.get()方法從服務器文件載入數(shù)據(jù)實例
- jQuery中Ajax的get、post等方法詳解
- JQuery.get提交頁面不跳轉的解決方法
- jQuery中get()方法用法實例
- jQuery中ajax的get()方法用法實例
- jQuery中get和post方法傳值測試及注意事項
- jquery中get,post和ajax方法的使用小結
- 快速解決jquery之get緩存問題的最簡單方法介紹
- jQuery中get方法用法分析
相關文章
HTML Form 表單里的各種組件，例如文本輸入框，textarea，按鈕等，都可以通過CSS或其它技術進行美化，讓它們看起來很漂亮了，唯獨下拉列表選項框(select box),不管你怎么做，它擺在那里總顯得格格不入。2011-08-08
本文主要介紹了jQuery實現(xiàn)拖動剪裁圖片作為頭像的具體實例方法，具有很好的參考價值，下面跟著小編一起來看下吧2016-12-12
這篇文章主要介紹了jquery拖動層效果插件用法,結合實例形式分析了jquery-ui-1.7.2.custom.min.js插件的具體使用技巧,并附帶完整demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
很多朋友對jquery select的操作很有興趣，但網(wǎng)上的東西太多，所以腳本之家特別將Jquery Select操作方法整理下，方便大家查找。2010-05-05
本文通過代碼給大家介紹了jquery實現(xiàn)鍵盤回車搜索功能，前臺代碼和搜索按鈕實現(xiàn)代碼都給大家貼出了，需要的朋友參考下吧2017-07-07
一張表格告訴你windows.onload()與$(document).ready()的區(qū)別
這篇文章主要介紹了windows.onload()與$(document).ready()的區(qū)別2014-05-05
jquery+json實現(xiàn)動態(tài)商品內(nèi)容展示的方法
這篇文章主要介紹了jquery+json實現(xiàn)動態(tài)商品內(nèi)容展示的方法,涉及jQuery操作及解析json格式數(shù)據(jù)的相關技巧,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了jquery.post用法之type設置問題,需要的朋友可以參考下2014-02-02
解析jQuery的三種bind/One/Live事件綁定使用方法
本篇文章主要是對jQuery的三種bind/One/Live事件綁定使用方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
jQuery插件slicebox實現(xiàn)3D動畫圖片輪播切換特效
Slicebox是一款效果非常華麗的jquery和css3 3d幻燈片插件。Slicebox幻燈片插件能夠?qū)D片切片，然后做3d旋轉。Slicebox幻燈片插件共有4種效果，視覺沖擊感非常強。2015-04-04