java web使用jquery,Java Web（7） jQuery 使用问题集

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

'>

${index}

'>

${index}

其中listPage是List currentPage是int ，两个都是action里的栈值。

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

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

• '>

  ${index}

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

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

(function($){

$('#pageInation').children('li')

.filter(

function(index){

var str = $('a',this).text().trim();

return str == ${currentPage};

}

).addClass("active") ;

})(jQuery);

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

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

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

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

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

(function(a){

//do somthing

})(a);

4. 举个例子，比如在向页面新添加一个

，并对其进行click事件监听，使它在鼠标点击后隐藏。

$(document).ready(function(){

$("p").click(function(){

$(this).slideToggle();

});

$("button").click(function(){

$("

This is a new paragraph.

").insertAfter("button");

});

});

这是一个段落。

点击任意 p 元素会令其消失。包括本段落。

在本按钮后面插入新的 p 元素

注释：通过使用 live() 方法而不是 bind() 方法，新的 p 元素同样会在点击时消失。

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

$(document).ready(function(){

$("p").click(function(){

$(this).slideToggle();

});

});

这是一个段落。

点击任意 p 元素会令其消失。包括本段落。

注释：通过使用 live() 方法而不是 bind() 方法，新的 p 元素同样会在点击时消失。

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

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

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

$(document).ready(function(){

$("p").on("click",function(){

$(this).slideToggle();

});

$("button").click(function(){

$("

This is a new paragraph.

").insertAfter("button");

});

});

这是一个段落。

点击任意 p 元素会令其消失。包括本段落。

在本按钮后面插入新的 p 元素

注释：通过使用 live() 方法而不是 bind() 方法，新的 p 元素同样会在点击时消失。

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

$(document).ready(function(){

$(document).on("click","p",function(){

$(this).slideToggle();

});

$("button").click(function(){

$("

This is a new paragraph.

").insertAfter("button");

});

});

这是一个段落。

点击任意 p 元素会令其消失。包括本段落。

在本按钮后面插入新的 p 元素

注释：通过使用 live() 方法而不是 bind() 方法，新的 p 元素同样会在点击时消失。

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