文档章节

Java Web(7) jQuery 使用问题集

Jagery
 Jagery
发布于 2015/11/23 12:54
字数 1230
阅读 41
收藏 0
点赞 0
评论 0

1. 项目中,进行分页查看的时候,打算使用struts标签iterator来遍历输出数据,并在遍历中比较其当前页来为当前页的链接添加class="active"样式来着色显示。

<s:iterator value="listPage" var="index" >
    <s:if text="index != currentPage">
    <li>
	<a href='<s:url action="admin-depart"><s:param name="currentPage" value="index"/></s:url>'>
	${index} 
    	</a>
    </li>
    </s:if>
    <s:elseif>
    <li class="currentPage">
	<a href='<s:url action="admin-depart"><s:param name="currentPage" value="index"/></s:url>'>
	${index} 
    	</a>
    </li>
    </s:elseif>
</s:iterator>

其中listPage是List<Integer> currentPage是int ,两个都是action里的栈值。

但是结果都是不相等的情况,没办法,只能在使用js来控制了

2. 首先把jsp的代码改了一下

<ul id="pageInation">
<s:iterator value="listPage" var="index" >   
    <li>
	<a href='<s:url action="admin-depart"><s:param name="currentPage" value="index"/></s:url>'>
	${index} 
    	</a>
    </li>    
</s:iterator>
</ul>

3. 现在问题来了,我该怎么在ul里遍历li并获取到a的文本来与currentPage来比较,然后为其添加class呢。

    在jQuery有一个children,还有一个filter。代码如下

<script type="text/javascript">		
(function($){
    $('#pageInation').children('li')
    .filter(
    function(index){
	var str = $('a',this).text().trim();
	return str == ${currentPage};
    }			
    ).addClass("active") ;
})(jQuery);
</script>

    首先通过id选择器来获取到ul节点,然后再使用children来选择到ul下的子节点li。

    关键的地方来了,使用filter来过滤掉不符合的li。

    在filter中,可以直接使用选择器来,也可以传入function参数,我就是把一个function函数传入进去 ,只要filter返回的是true,接下来的addClass就会执行。

    而${currentPage}是struts2 的OGNL表达式,获取currentPage。

    这一堆代码是放在一个立即执行的js匿名函数中,其结构如下   

(function(a){
    //do somthing
})(a);

    

4. 举个例子,比如在向页面新添加一个<p>,并对其进行click事件监听,使它在鼠标点击后隐藏。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>点击任意 p 元素会令其消失。包括本段落。</p>
<button>在本按钮后面插入新的 p 元素</button>
<p><b>注释:</b>通过使用 live() 方法而不是 bind() 方法,新的 p 元素同样会在点击时消失。</p>
</body>
</html>

    但是在运行后,却发现是没有反应的。我想,这是因为click方法监听的只是原有页面载的节点点击事件,比如把上面改成这样

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
    $(this).slideToggle();
  });  
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>点击任意 p 元素会令其消失。包括本段落。</p>
<p><b>注释:</b>通过使用 live() 方法而不是 bind() 方法,新的 p 元素同样会在点击时消失。</p>
</body>
</html>

    可以看到,事件监听是有反应的。那问题来了,我们如何对未来新添加的DOM节点进行事件监听呢

    答案是 在jquery-1.7——1.9之间使用live,之后的就要使用on来对其未来新节点监听,因为在jquery-1.9 之后就把live 移除掉了,再次使用会报错无法运行js代码的。

    但是,改成这样子后,发现还是出现了点问题,新节点点击监听还是没有反应   

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").on("click",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>点击任意 p 元素会令其消失。包括本段落。</p>
<button>在本按钮后面插入新的 p 元素</button>
<p><b>注释:</b>通过使用 live() 方法而不是 bind() 方法,新的 p 元素同样会在点击时消失。</p>
</body>
</html>

    思考无果,无奈度娘,找到了网友fhq198604 的百度知道答案jquery on()绑定的点击事件在js动态新添加的元素上无效,请问为什么

    答案中,解释是因为,我们在对新添加的节点监听事件的时候,其选择器应该是要选择document,即应该使用$(document)来对其节点选择,修改如下   

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    <!-- 修改的地方 -->
  $(document).on("click","p",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>点击任意 p 元素会令其消失。包括本段落。</p>
<button>在本按钮后面插入新的 p 元素</button>
<p><b>注释:</b>通过使用 live() 方法而不是 bind() 方法,新的 p 元素同样会在点击时消失。</p>
</body>
</html>

5. 在这里贴上官方解释jQuery on()


© 著作权归作者所有

共有 人打赏支持
Jagery
粉丝 3
博文 23
码字总数 11583
作品 0
玉林
程序员
使用java的html解析器jsoup和jQuery实现一个自动重复抓取任意网站页面指定元素的...

日期:2012-7-20 来源:GBin1.com 在线演示 本地下载 如果你曾经开发过内容聚合类网站的话,使用程序动态整合来自不同页面或者网站内容的功能肯定对于你来说非常熟悉。通常使用java的话,我们...

gbin1
2012/07/20
0
0
JQuery 和 Extjs 比较

JQuery 和 Extjs 比较 一、JQuery 和 Extjs 比较 JQuery-EasyUI是仿照Ext做的。 Ext框架是一个整体,面向对象的编程思想,每个控件之间可以相互通讯。JQuery的控件全都是分散的,没有整体性可...

Amamatthew
2014/09/11
0
0
Android WebView 与JS的数据交互

关于WebView 我们知道目前android市场上的一些应用采用的开发方式大致分为三种:Native App、Web App、Hybrid App。本文主要是Hybrid App中实现的主要技术native组件与js的数据交互的理解以及...

习惯_搬砖
2015/05/06
0
0
Java 代码生成器 - InfinityJEEEU

无垠式 Java 代码生成器 JEEEU 版 项目介绍 这是最轻量级的代码生成器,生成物大概占用7.5M数据大小。 采用Servlet,JSP, JSON, Easy UI等简单技术实现,是标准的Model2的MVC设计模式的架构。...

火箭船
05/28
0
0
简单灵活的 Java CMS - EasyCms

简介 Java EasyCms 使用最简单性能最高的框架,将cms系统简单到极致,灵活的栏目扩展,快速的构建普通网站 生成的静态演示站(测试): www.j4cms.com 用到的框架工具 java,servlet,guice...

姜小北
2017/08/02
0
0
jquery的ajax和getJson跨域获取json数据

很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了。近日在进行开发时,因为要和第三方公司的一个项目进行数据的共享,因...

度外网络
2012/09/26
0
1
jquery教程靠边站,一分钱不花让你免费学会jquery

jquery,一个很优秀很好用的javascript框架,"write less,do more”的思想给开发人员带来前所未有的冲击,好比java的思想"write once , run anywhere”,无疑,他们都是很受欢迎,也是很成功的....

tojsp_com
2010/08/18
0
2
PHP-Codeigniter框架浅尝

下载CodeIgniter.chm 里面有些基本的概念,后续也是必备的手册。 平台:windows7(64bit)。 依赖:(java/tomcat/php/...) 1. http://download.oracle.com/otn-pub/java/jdk/7u15-b03/jdk-...

彼得
2014/01/13
0
1
【用jersey构建REST服务】系列文章

1.用Jersey构建RESTful服务1--HelloWorldhttp://www.waylau.com/jersey-restful-helloworld/2.用Jersey构建RESTful服务2--JAVA对象转成XML输出http://www.waylau.com/jersey-restful-java-x......

waylau
2014/08/23
0
1
mofum/mofumui-R0508

一款基于JQuery,Requare框架的建立起来的具有面向对象特性的便于灵活组织各个组件的UI框架。用极少的代码和语言去组织网页内容。它是一个以JS渲染界面为主的界面库,也就是使用它你可以尽量...

mofum
05/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

流利阅读笔记28-20180717待学习

“我不干了!” 英国脱欧大臣递交辞呈 雪梨 2018-07-17 1.今日导读 7 月 6 日,英国政府高官齐聚英国首相的官方乡间别墅——契克斯庄园,讨论起草了一份关于英国政府脱欧立场的白皮书。可是没...

aibinxiao
23分钟前
2
0
OSChina 周二乱弹 —— 理解超算排名这个事,竟然超出了很多人的智商

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @-冰冰棒- :分享Ed Sheeran/Beyoncé的单曲《Perfect Duet (with Beyoncé)》 《Perfect Duet (with Beyoncé)》- Ed Sheeran/Beyoncé 手机...

小小编辑
34分钟前
23
3
Android 获取各大音乐平台的真实下载地址

废话 电脑使用谷歌浏览器或者QQ浏览器的时候。。。。。。。说不清楚,还是看图吧 大概意思就是,只要网页上需要播放,只要能播放并且开始播放,这个过程就肯定会请求到相关的音乐资源,然后就...

她叫我小渝
今天
0
0
shell中的函数、shell中的数组、告警系统需求分析

shell中的函数 格式: 格式: function f_name() { command } 函数必须要放在最前面 示例1(用来打印参数) 示例2(用于定义加法) 示例3(用于显示IP) shell中的数组 shell中的数组1 定义数...

Zhouliang6
今天
2
0
用 Scikit-Learn 和 Pandas 学习线性回归

      对于想深入了解线性回归的童鞋,这里给出一个完整的例子,详细学完这个例子,对用scikit-learn来运行线性回归,评估模型不会有什么问题了。 1. 获取数据,定义问题     没有...

wangxuwei
今天
1
0
MAC安装MAVEN

一:下载maven压缩包(Zip或tar可选),解压压缩包 二:打开终端输入:vim ~/.bash_profile(如果找不到该文件新建一个:touch ./bash_profile) 三:输入i 四:输入maven环境变量配置 MAVEN_HO...

WALK_MAN
今天
0
0
33.iptables备份与恢复 firewalld的9个zone以及操作 service的操作

10.19 iptables规则备份和恢复 10.20 firewalld的9个zone 10.21 firewalld关于zone的操作 10.22 firewalld关于service的操作 10.19 iptables规则备份和恢复: ~1. 保存和备份iptables规则 ~2...

王鑫linux
今天
2
0
大数据教程(2.11):keeperalived+nginx高可用集群搭建教程

上一章节博主为大家介绍了目前大型互联网项目的系统架构体系,相信大家应该注意到其中很重要的一块知识nginx技术,在本节博主将为大家分享nginx的相关技术以及配置过程。 一、nginx相关概念 ...

em_aaron
今天
1
0
Apache Directory Studio连接Weblogic内置LDAP

OBIEE默认使用Weblogic内置LDAP管理用户及组。 要整理已存在的用户及组,此前办法是导出安全数据,文本编辑器打开认证文件,使用正则表达式获取用户及组的信息。 后来想到直接用Apache Dire...

wffger
今天
2
0
HFS

FS,它是一种上传文件的软件。 专为个人用户所设计的 HTTP 档案系统 - Http File Server,如果您觉得架设 FTP Server 太麻烦,那么这个软件可以提供您更方便的档案传输系统,下载后无须安装,...

garkey
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部