Tag Archives: jQuery

十一 30

jquery.lazyload.js 已封装

Posted on by

jquery.lazyload.js封装下载

Lazy Load是一个用js编写的jQuery插件，用来实现图片的延迟加载。只有在浏览器可视区域的图片才会被加载，没有滚动到的区域img标签上会有一个占位图片，而真实图片不会被载入。当页面比较长，图片比较多的时候，延迟加载图片可以加快页面加载速度，在某些情况下降低服务器负担。

使用方法

1、lazyload.js依赖jquery或者zepto.js。

2、将图片的真实路径放在img的data-original属性上。给img标签增加一个自定义的类名如：lazyload，方便js调用。 Continue reading →

十一 30

jquery.form.js 已封装

Posted on by

jquery.form.js封装下载

插件优点

  1. 简简单单几句代码，我们就可以实现表单的提交，并且可灵活通过ajaxSubmit()函数基于任何事件的触发实现表单异步提交。
  2. 支持文件上传功能，并在新浏览器中支持进度条更新。
  3. 与jQuery库完美结合，支持jQuery.ajax()函数触发的各种事件，支持jQuery.ajax()中所传递的参数。

使用方法

插件提供ajaxSubmit和ajaxForm两种表单提交方式，注意：不要对同一个表单同时使用两种方式。 Continue reading →

十一 30

jquery.cookie.js

Posted on by

jquery.cookie.js下载

jquery.cookie() 方法:一个轻量级的cookie 插件，可以读取、写入、删除 cookie。

使用方法

1.新添加一个会话 cookie：

  1. $.cookie(‘the_cookie’, ‘the_value’);

注：当没有指明 cookie有效时间时，所创建的cookie有效期默认到用户关闭浏览器为止，所以被称为“会话cookie（session cookie）”。 Continue reading →

八 29

常用jQuery方法分类汇总（待续）

Posted on by

jQuery减少了代码的书写量，为前端开发节省了很多时间。有关于JavaScript常用函数请看这里 JavaScript常用函数收集

一、jQuery添加移除CSS类的方法

1 . addClass() – 添加CSS类

$(“#target”).addClass(“newClass”);

//#target 指的是需要添加样式的元素的ID

//newClass 指的是CSS类的名称

2 . removeClass() – 移除CSS类

$(“#target”).removeClass(“oldClass”);

//#target 指的是需要移除CSS类的元素的ID

//oldClass 指的是CSS类的名称

3 . toggleClass() – 添加或者移除CSS类：如果CSS类已经存在，它将被移除；相反，如果CSS类不存在，它将被加上。

$(“#target”).toggleClass(“newClass”);

//如果ID为“target”的元素已经定义了CSS样式，它将被移除；

//反之，CSS类”newClass“将被赋给该ID。

jQuery还提供用来判断某个元素是否已经被赋予某个CSS类的方法，如下：

1 . hasClass()方法是用来检查被选择的元素是否包含指定的class名，其语法：

$(selector).hasClass(“className”);//其中class是必须的值，规定需要在指定元素中查找的类名。

hasClass()也可以同时写多个class但他们之前用空格隔开，如下：

$(selector).hasClass(“className1 className2″);

2 . is()方法也是用来检查被选择的元素是否包含指定的class名，其用法为：

$(selector).is(“.className”);

同样is()也可以有多个类名的写法，如下：

$(selector).is(“.className,.className”);

hasClass()方法与is()方法有同各功能，但hasClass()方法的用时较短，所以说hasClass()方法在性能上是优于is()方法的。
Continue reading →

六 10

jQuery DOM 元素方法index()方法获取值为-1，得不到正确的值

Posted on by

$(selector).index()获得第一个匹配元素相对于其同胞元素的 index 位置

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(".newsTab dd:first-child").addClass("hover");
 
$(".newsList dd:first-child").show();
 
(function(){
 
var _left = $(".newsTab dd.hover").position().left;
 
//alert(_left)
 
$(".newsTab span").css({left: _left});
 
$(".newsTab dd").each(function(index, el) {
 
$(this).click(function(event) {
 
if (!$(this).hasClass('hover')) {
 
$(this).addClass('hover').siblings().removeClass('hover')
 
var _left2 = $(this).position().left;
 
$(".newsTab span").stop(true).animate({left: _left2}, 500);
 
$(".newsList dd").hide();
 
$(".newsList dd").eq($(".newsTab dd.hover").index()).show();
 
};
 
});
 
});
 
}())

不懂装懂，帮朋友修改一个JS效果（点击后不显示同胞元素），JQ方法功能也是现查的手册，测试index()返回值是-1，这一定是不正确了。

结果就是一阵的百度搜索，在开源中国的一篇文章中得到了启发：

$(".newsList dd").eq($(".newsTab dd.hover").index()).show();
修改为
$(".newsList dd").eq($(".newsTab dd").index($(".hover"))).show();

解释：

$(“.newsTab dd”)表示找到newsTab类下的所有的dd，返回一个dd的数组的对象；

后面的.index($(“.hover”))表示返回数组对象中的class为hover的对象的坐标。