jQuery通过控制节点实现仅在前台通过get方法完成参数传递


Posted in Javascript onFebruary 02, 2015

本文实例讲述了jQuery通过控制节点实现仅在前台通过get方法完成参数传递。分享给大家供大家参考。具体分析如下:

这样也是HTML DOM那部分的内容,javascript与jquery等前端脚本语言的核心就是要控制每一个节点,对每一个节点进行增删改查,这样才能够真正地活用javascript与jquery等前端脚本写出一个又一个华丽丽的东西。

javascript控制节点,笔者已经在之前的【JavaScript针对网页节点的增删改查用法实例】有过相关介绍,现在是通过jquery这一javascript进阶的脚本语言,来控制节点,并且在此基础上,使用jquery来在不同网页间传递参数,仅在前台通过get方法完成参数传递,挂到服务器,不需要jsp与asp,写一些request等服务器语言来获取参数。

一、基本目标

在网页中有存在于黑色div-红色div-蓝色p之下的span节点,一旦点击,则分别获取其上面节点的id

jQuery通过控制节点实现仅在前台通过get方法完成参数传递

点击增加按钮可以增加超级链接节点,其中每一个超级链接都带有中文参数你好1,你好2,你好3……,而且滚动条自动随节点的增加而滚动,向jqrec.html传递,这个你好x参数,jqrec.html页面能够获取到这个中文参数

jQuery通过控制节点实现仅在前台通过get方法完成参数传递

jQuery通过控制节点实现仅在前台通过get方法完成参数传递

点击清空按钮可以清空ul下面的所有节点

jQuery通过控制节点实现仅在前台通过get方法完成参数传递

二、制作过程

jqrec.html全代码如下,所使用的函数,涉及到分析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参数完全相同~  

</p>  

<p>  

text上传递的参数是中文来的哦,需要结果译码解码~  

</p>  

<p>  

<a href="./jqsend.html">返回jqsend.html再试一次~</a>  

</p>  

</body>  

</html>  

<script>  

/*此函数配合unescape函数能够对url上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部分,设计一个复杂的图层,里面包含着四重节点,也就是节点树四层-->  

<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">  

我的父节点  

</span>  

</p>  

</div>  

</div>  

<br />  

  

<!--两个按钮-->  

<button id="add">增加</button>  

<button id="clear">清空</button>  

<!--用来存放增加的超链接列表-->  

<ul id="testul"></ul>  

</body>  

</html>  

<script>  

/*$(function(){});相当于$(document).ready(function (){});函数,一载入,就执行的主函数*/  

$(function() {  

     /*计数id*/  

     var id=0;  

     /*add按钮点击事件*/  

     $("#add").click(function (){  

            id=id+1;  

            var li="<li id=\"id" +id.toString()+ "\"><a></a></li>";  

            /*在testul列表中,增加如上所述的li节点*/  

            $("#testul").append(li);  

            /*寻找新增的id为idx(其中x为计数器var id的值)的li节点下的a节点,并且把其中的元素修改为你好x,jquery里面的.html相当于javascript里面的innerHTML*/  

            $("#id"+id.toString()).find("a").html("你好"+id);  

            /*设置此a元素的href属性为,jqrec.html=“你好”+id,由于链接中不可以带中文,所以用两次escape将其编码为utf-8编码,用一次会出现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下面的所有元素清空,计数器清零*/   

            $("#testul").empty();  

            id=0;  

        });  

     /*findmyfather行内文本点击事件*/  

     $("#findmyfather").click(function(){  

         /*this代表被按的findmyfather,取其上一级父节点的id*/  

         thisid=$(this).parents().attr("id");  

         alert("我的父节点是:"+thisid);  

         /*这样可以往前寻找第一个div元素的id*/  

         thisid=$(this).parents("div").attr("id");  

         alert("我的第一个div父节点是:"+thisid);  

         /*这样可以往前寻找第二个div元素的id*/  

         thisid=$(this).parents("div").parents("div").attr("id");  

         alert("我的第二个div父节点是:"+thisid);  

         });          

    });  

</script>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 #Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 #Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 #Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 #Javascript
JavaScript分秒倒计时器实现方法
Feb 02 #Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 #Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 #Javascript
You might like
php短域名转换为实际域名函数
2011/01/17 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
Prototype Date对象 学习
2009/07/12 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
Python之批量创建文件的实例讲解
2018/05/10 Python
python内存动态分配过程详解
2019/07/15 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
django ORM之values和annotate使用详解
2020/05/19 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
python3让print输出不换行的方法
2020/08/24 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
怎样声明一个匿名的内部类
2016/06/01 面试题
好的自荐信包括什么内容
2013/11/07 职场文书
便利店投资创业计划书
2014/02/08 职场文书
倡议书范文格式
2014/05/12 职场文书
经济类毕业生求职信
2014/06/26 职场文书
售票员岗位职责
2015/02/15 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
2016五一手机促销广告语
2016/01/28 职场文书