文档章节

Java Web(7) jQuery 使用问题集

Jagery
 Jagery
发布于 2015/11/23 12:54
字数 1230
阅读 41
收藏 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程序员从笨鸟到菜鸟之(八十六)跟我学jquery(二)大话jquery选择器

本篇博客我将带大家来学习一下jquery的第一个比较重要的知识点,这个知识点对学习jquery的同学来说是必须掌握的,因为他是所有操作的基础,这个知识点就是jquery的对象选择器,我们利用jquer...

长平狐
2012/11/12
162
1
OSC 讨论区关键字统计!(截止至2012-7-29日)

留言数排行前十 ("Java" 10635) ("PHP" 7657) ("MySQL" 6707) ("Android" 5046) ("Linux" 4448) ("Ubuntu" 3468) ("jQuery" 3394) ("Tomcat" 3315) ("Android SDK" 2912) ("Nginx" 2556) 投票......

天国之翼
2012/07/29
497
3
公开课

课程名称:Java EE企业级应用开发 课程大纲: 一、Java面向对象 1. Java面向对象编程 2. 泛型集合框架 3. I/O输入输出 4. 多线程 5. 网络编程 6. 反射Reflection 7. JDBC 二、HTML+CSS 8. H...

柯普瑞杨老师
2017/10/24
0
0
使用java的html解析器jsoup和jQuery实现一个自动重复抓取任意网站页面指定元素的...

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

gbin1
2012/07/20
0
0
最常见的 20 个 jQuery 面试问题及答案

毫无疑问,jQuery给了JavaScript急需的提振,这是一门如此有用,但同时总是常常被低估的语言. 在 jQuery 粉墨登场之前,我们曾经会写出冗长的JavaScript代码,不仅仅为更大型的应用程序,有时...

oschina
2015/03/16
101.7K
50

没有更多内容

加载失败,请刷新页面

加载更多

tomcat线程模型

Connector结构 BIO模式 NIO模式

grace_233
28分钟前
1
0
Javascript

变量定义 以$,_,字母开头 大小写敏感 var 关键字声明变量 声明未赋值undefined 数据类型 字符串,数字,布尔,数组,NULL,undefined 变量均为对象 函数 无默认值 var声明的是局部变量 函数外声明...

关元
29分钟前
1
0
文件系统、服务、防火墙、SELINUX——安全四大金刚

一提到安全,大家都会想到防火墙,和文件系统权限。而实际工作环境中,我们在Linux的安全配置,会涉及到四个级别。我们思考一个场景,你要在百度盘中存放一个文件,这个动作需要考虑下面四个...

Linux就该这么学
30分钟前
1
0
从源码角度理解Java设计模式——门面模式

一、门面模式介绍 门面模式定义:也叫外观模式,定义了一个访问子系统的接口,除了这个接口以外,不允许其他访问子系统的行为发生。 适用场景:子系统很复杂时,增加一个接口供外部访问。 优...

我叫刘半仙
40分钟前
2
0
新鲜出炉,2019最新大厂面试题总汇!

在这个互联网技术快速迭代的时代,每个程序员都知道技术对于职业发展的重要性,那些技术好的程序员不仅薪资高,而且大多数集中在一线互联网企业工作,让人感觉非常高大上的同时,也想去大厂做...

Java架构资源分享
49分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部