jQuery实现ajax无刷新分页页码控件(2)

1.大家都可以看到我在ajax中用beChangeElement这个变量来表示我选中的选择器时,是把该选择器的标签以字符串的形式存储在变量中,在需要调用的时候才使用$()转换为选择器。为什么我不能在前面就直接把选择器赋给变量呢。因为jQuery不允许你选择不存在的选择器。这么说,可能就要有疑问了,什么样的情况下我要选择的选择器会不存在?(第一种情况:你把选择器的名字写错了,所以jquery找不到(我相信大多数人是不会犯这个错误的)。第二种情况:在我们使用ajax进行数据交互的时候,有很多页面上的标签和数据是我们通过ajax传递显示在页面上的,这些标签数据在页面初始化阶段是不存在的,但是我们写的js方法,非触发事件(除点击事件,鼠标悬浮等需要交互的时间)都会在页面初始化的装载阶段被解释执行,所以就会存在变量获取到不存在的选择器使得值为空阻断后续对这个选择器进行js操作),如果你在使用的时候发现js对某个选择器的操作失效了,就可以考虑一下这样的情况

2.ajax生成出来的页面内容不能跟之前页面初始化时生成的内容一样被页面原有的js控制。因为这涉及到一个异步和同步的问题,在页面渲染的时候会将对应的js绑定到相应的html标签上,等待事件触发,但是因为ajax出来的页面内容出现在页面原有的js之后,所以js无法未卜先知的去绑定它。所以我们需要根据事件冒泡机制,将需要对ajax生成出来的页面内容进行操作的js委托给该内容的父标签进行处理(我们一般选用标签作为这样的父标签,但是要注意的是,不要一次性委托太多的js在标签上,不然使得页面变得很庞大,页面的处理速度会变慢),委托事件可以表示如下:

1.$("body").on('click', ".cumulative-eva a",function(){});//click:表示要委托的事件类型(这里表示要委托的事件是点击事件),".cumulative-eva a":触发事件的选择器名字(这里表示触发点击事件的选择器是$(.cumulative-eva a)),function里面写触发事件后js对该事件的处理代码。

2.$(".cumulative-eva a").live("click",function(){});

3.在js中我写了这么一条js语句来选中上一页,语句如下:

$(this).next().find("ul li").eq(index-1).addClass("on");//选中上一页

有的人就会想在这里为什么不用children(),用children()是否也可以?那么,在解释这个问题之前我们先来看看children()和find()的区别。

区别如下:

关于遍历:children()是对当前选中的选择器标签进行编号,对于该选择器标签的子类标签无论多少个都当成一个整体,不对其进行区分。而find()则是对当前选中的选择器标签下面的子孙类标签进行编号,通过编号可以找到相对应的某一个子孙类标签。

从以上的描述我们很显然知道children()并不适用于我们这样一个应用场景,因为我们需要选中$(this)下的某一个li,这个用children()是做不到的。那么什么样的情况下可以使用children()呢,看下面这段js:

var pageNum = parseInt($(this).children("li.on").html());//获取当前页

在这个应用场景下因为页码控件的特殊性,被加上“on”这个class的li标签同一时间页面上只可能有一个,所以用children()去遍历$(this)找他的子类被加上“on”这个class的li标签,只可能返回一个结果,而不是一个数组,所以在这样的场景下可以使用children()标签。

以上为我写页码控件的全部内容,至此mark一下。最后放上该页码控件的css代码,让大家参考参考,至于控件所用的图片,我直接上传到css代码后面,你们需要的时候保存下来使用就行。(作为一个懒人,可供下载的源码包啥的我就不弄了,太麻烦,如果有兴趣的朋友,以后有时间的时候我再弄一份出来吧~)

页码控件css样式:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwzdzs.html