首页 > 代码库 > JQuery初窥

JQuery初窥

本周五开始学习JQuery。通过一天的接触下来,感觉使用JQuery确实比之前自己写原生JS代码要方便得多,但是有另外一个问题,函数太多,初学的话不了解很多函数功能,使用不顺畅。然后,感觉JQuery自身提供的show(),fadeIn()函数效果太单一,不晓得还有没有替换的函数。另外,本周作业让用JQuery做图片轮播效果,说一点我遇到的问题,就是现在只能使用fadeIn()和fadeOut()来实现图片切换,但是我看淘宝那个是有个左滑动的效果,JQuery里面好像没有这种效果。如果用之前学的JS来实现的话,当到最后一张图片的时候,将n=0的话,会使图片从最后到开始反向播放一次,不能像淘宝那样直接从最后一张切换到第一张,这个问题困扰好久,不知道有什么解决办法然后就把我在做轮播过程中用到的一周五没有接触过的函数做一个整理。

1.eq()

作用:获取第N个元素;

例:<img src="http://www.mamicode.com/pic1"/><img src="http://www.mamicode.com/pic2"/><img src="http://www.mamicode.com/pic3"/>

$(‘img‘).eq(0);

结果:获得<img src="http://www.mamicode.com/pic1"/>。

2.trigger()

作用:在每一个匹配的元素上触发某类事件;

例:$(‘img‘).trigger(‘click‘,function(){

  alert(1);

});

结果:点击的时候打印1。

3.ready();

作用:当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这个函数和window.onload作用差不多;

例:$(document).ready(function(){

  alert(1);

});

结果:载入页面就打印1。

4.not();

作用:排除与指定表达式匹配的元素

例:$(‘img‘).not(‘#pic1‘);

结果:<img src="http://www.mamicode.com/pic2"/><img src="http://www.mamicode.com/pic3"/>。

目前JQuery就学了一天,比较高深的东西也弄不出来,就先这样吧。JQuery的重要性不言而喻,好好学吧。