13
2016
01

jQuery延迟加载插件(懒加载) - jquery.lazyload.js

淡入效果

不在可视范围内的图片不会加载。滚动时按需加载。图片出现时使用的是jquery的淡入效果。请清空缓存重新测试一下。

可以如下demo页面作比较:没有淡入效果的。

03
2015
12

JS或JQuery将某个时间转换为与当前时间比较的时间描述

很多网站上有留言功能,都需要对留言时间进行处理,处理成“刚刚、5分钟前、1个小时前,几天前,几个月前”这种的时间格式,通过JS方法就可以实现了,方法如下:

/** 

* 返回将日期转换为时间描述 

* @param date 

* @return 

*/

function getDateDiff(dateTimeStamp) {

    var now = new Date().getTime();

30
2015
10

为什么通过JS或JQuery加载出来的HTML,无法用选择器绑定事件?

$(".pick").live("click", function(){

    //JS、JQuery需要实现代码

});

使用live这种方式是JQuery1.9.1以前的的版本,JQuery1.9.1以后的需要使用bind才可以,开始在使用过程中又发现,在用JS或JQuery加载出来的HTML

$('.pick').bind('click',function(event){

30
2015
10

jQuery1.9.1以上$("#ID").attr("checked")无效,这是对checkbox的调整

jQuery1.9.1针对checkbox的调整:

在jquery 1.8.x中的版本,我们对于checkbox的选中与不选中操作如下:

判断是否选中

05
2014
08

jQuery实现元素的上下移动示例代码

jQuery实现元素的上下移动示例代码

<html>    
    <head>
        <title>
        </title>
        <style type="text/css">
            table { background:#949494; width:400px; line-height:20px;} td { border-right:1px
            solid gray; border-bottom:1px solid gray; }
        </style>
        <script src="jquery.js" type="text/javascript">
        </script>

07
2013
12

JQuery上传插件Uploadify使用详解

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载。

30
2013
11

Jquery和CSS使背景图片自动适应大小

对于一些设置北京图片时,常常会不能自动适应屏幕大小,搜索后找到一个方法: 

<!DOCTYPE html>
<html>   
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            Jquery和CSS使背景图片自动适应大小
        </title>
        <style type="text/css">
            .slideContent { width:100%;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/da.jpg',
            sizingMethod='scale'); -moz-background-size:100% 100%; background-size:100%
            100%; }
        </style>
        <script type="text/javascript" src="js/jquery-1.4.4.min.js">
        </script>
        <script type="text/javascript">
            $(function() {
                cover();
                $(window).resize(function() {
                    cover();
                });
            });
            function cover() {
                var h = $(window).height();
                var w = $(window).width();
                $(".slideContent").height(h);
                $(".slideContent").width(w);
            }
        </script>
       
        <body>
            <div class="slideContent">
            </div>
        </body>
</html>

23
2013
11

Jquery中国地图分布统计显示

需要做一个地图分布式的显示效果,需要js文件js/FusionCharts.js和flash文件FusionCharts/FCMap_China2.swf:

Jquery中国地图分布统计显示

23
2013
11

Jquery 仿手机左右拖动滑屏效果

前不久公司有个项目是在触摸屏上做产品展示,大家都觉得Iphone或者Android上的滑屏效果不错,模仿着我今天也参考的做了一个DEMO的,主要的是下载js/jquery.ui.touch.js文件

参考效果:

084151MwY.png

08
2013
11

JQuery 常用元素获取

前言:这是本类别博文JQuery即用即查开篇。
因为查手册太麻烦,而且有时候需要深入命令所在详细页面才能了解此命令的具体作用是什么。
写这几篇文章就是为了,工作遇到问题时,一看这几篇文章就可以查到哪个命令的作用正好符合,然后自己再深入手册进行具体学习用法。
写的都是常用的一些,前提是你对jquery命令有一定了解,且有jquery手册。

第一篇:JQuery元素获取常见用法

22
2013
10

不依赖JQuery的入门Ajax代码

今天看了head first ajax这本书里ajax的实例,讲的很好,这本书觉着很不错,推荐下。

Ajax (Asynchronous Javascript and XML)即异步Javascript和XML,但不定非要使用js和xml才能称为Ajax,简单说,Ajax是设计和构建web页面的一种方法,使之像桌面应用一样具有响应性和交互性,而其中的异步就是指浏览器像服务器发出请求而无需用户等待响应。

27
2013
08

JavaScript 和 jQuery 的 DOM 操作

1 , 创建元素节点

传统的 javascript 方法,创建元素节点

var a =document.createElement("p");

jQuery 中创建节点的方法是:

24
2013
08

jQuery 基础实用方法

jQuery常用方法名:

1.addClass()removeClass()添加与删除指定的类名

2.append(content)添加内容到对象

3.appendTo(stringexpr)添加到被加对象中去

4.attr(stringname)取得第一个匹配元素的属性值

17
2013
08

荐一些常用感觉不错的jQuery插件

       JQuery插件繁多,下面是个人在工作和学习中用到过感觉不错的,特此记录。

04
2013
08

百度风云榜TAB标签切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

27
2013
07

如何用javascript JQuery 判断图片是否存在

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

   <title>如何用javascript JQuery 判断图片是否存在</title>

23
2013
07

jQuery KinSlideshow自定义图片却换效果插件

 

jQuery KinSlideshow自定义图片却换效果插件

$(function() {
    $("#KinSlideshow").KinSlideshow({
        moveStyle: "right",
        titleBar: {
            titleBar_height: 30,
            titleBar_bgColor: "#08355c",
            titleBar_alpha: 0.5
        },
        titleFont: {
            TitleFont_size: 12,
            TitleFont_color: "#FFFFFF",
            TitleFont_weight: "normal"
        },
        btn: {
            btn_bgColor: "#FFFFFF",
            btn_bgHoverColor: "#1072aa",
            btn_fontColor: "#000000",
            btn_fontHoverColor: "#FFFFFF",
            btn_borderColor: "#cccccc",
            btn_borderHoverColor: "#1188c0",
            btn_borderWidth: 1
        }
    });
});

23
2013
07

jQuery FancyBox图片弹出浏览效果插件

jQuery FancyBox图片弹出浏览效果插件

$(function() {
    $("a[rel=example_group]").fancybox({
        'transitionIn': 'none',
        'transitionOut': 'none',
        'titlePosition': 'over',
        'maxWidth': 700,
        'titleFormat': function(title, currentArray, currentIndex, currentOpts) {
            return '<span id="fancybox-title-over">图片文件:' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title: '') + '</span>';
        }
    });
});

11
2013
07

jQuery 1.9 移除了$.browser 的替代方法

jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 如果要全面支持 IE,并混合使用 jQuery 1.9 和 2.0, 官方的解决方案是:

08
2013
07

jQuery 常见操作实现方式

一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备忘。

jQuery 常见操作实现方式