标签JQuery下的文章

Jerry Bendy 发布于 07月13, 2015

使用jQuery/JS操作浏览器Cookie

以下代码演示如何使用jQuery操作浏览器Cookie(说是用jQuery,其实没用到jQuery的任何函数,所以只需要把外层封装的jQuery扩展函数去掉就可以应用在任何JavaScript环境中。

/******************************
 扩展一个jQuery对象
 用于操作Cookie
 ******************************/
jQuery.extend({
    /**
     * 获取指定Cookie的内容
     * @param sName Cookie的名称
     * @returns {string}
     */
    getCookie : function(sName) {
        var aCookie = document.cookie.split("; ");
        for (var i=0; i < aCookie.length; i++){
            var aCrumb = aCookie[i].split("=");
            if (sName == aCrumb[0]) return decodeURIComponent(aCrumb[1]);
        }
        return '';
    },
    /**
     * 设置Cookie
     * @param sName 名称
     * @param sValue 值
     * @param sExpires 有效期(秒)
     */
    setCookie : function(sName, sValue, sExpires) {
        var sCookie = sName + "=" + encodeURIComponent(sValue);
        if (sExpires != null) {
            var exp = new Date();
            exp.setTime(exp.getTime() + sExpires * 1000);
            sCookie += "; expires=" + exp.toGMTString();
        }

        document.cookie = sCookie;
    },
    /**
     * 删除指定Cookie
     * @param sName
     */
    removeCookie : function(sName) {
        document.cookie = sName + "=; expires=Fri, 31 Dec 1999 23:59:59 GMT;";
    }
});

使用方法:

// 设置Cookie, 有效期2小时
$.setCookie('test', 'This is value', 7200);

// 获取Cookie的值
alert($.getCookie('test'));

// 删除刚刚设置的Cookie
$.removeCookie('test');

阅读全文 »

Jerry Bendy 发布于 01月03, 2014

JQuery Lazyload的基本用法

由于最近做的一个小网页需要用到懒加载的效果于是便研究了下JQuery的Lazyload插件。本文不深入讲解,只说下此插件的基本用法(也许只有不到10%的人会用到其它的复杂的方法,我就挑90%的人会用到的说)。

JQuery Lazyload Github地址:https://github.com/tuupola/jquery_lazyload

我就不单独做示例了,在我做的Tab页(http://tab.byi.pw)里面也能看到效果。 (该网站目前已改成 React,不再使用jQuery)

首先需要载入JQuery库和Lazyload插件:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

在需要应用Lazyload效果的“img”标签上作如下修改:

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

其中只有data-original属性是必须的,它取代原来的src属性而指向实际要显示的图片,img的src属性可以省略,也可以指向一个简单的图片或载入动画。

JS部分:

$("img.lazy").lazyload();

可以看出来,插件的使用非常简单。

 

另外,JQuery Lazyload有几个常用的参数。

$("img.lazy").lazyload({
    effect:"fadeIn",  //图片加载时的动画
    placeholder : "img/grey.gif", //图片载入前的默认图片
    load:function(){    //图片载入完成后执行的回调函数
        console.log('image loaded');
     }
});

关于JQuery Lazyload的参数及使用方法网上有很多,不过关于这个load的回调函数却很少有提及(官网也没有提到这个回调函数),在这里重点提一下,这个回调是在一张图片加载完成时执行的,例如在图片加载完成后计算图片的宽高等都是在这里。

$('img').lazyload({
    load:function(){
        console.log($(this).height());
    }
});

阅读全文 »

Jerry Bendy 发布于 12月28, 2013

JQuery在所有图片加载完成后执行 & 图片的垂直居中

这两天没事的时候在做个小Tab页面玩玩,纯粹是做着玩,用来做为自己的主页方便打开各个自己常用的页面。在写HTML/CSS的时候遇到的最大的一个问题就是如何令图片在其父元素内垂直居中,因为父元素的高度固定宽度自适应,而且图片的宽高全部未知,max-width和max-height是90%,在网上找了好多资料,包括Display成table和table-cell都不能完美实现,最后只能尝试着使用JQuery动态来解决了。

思路很简单,就是在网页加载完成后去判断图片的高度和其父容器的高度,用父容器的高度减去图片高度再除以2得到其Top值(需要提前把图片的position设为relative),再用JQ的CSS方法设置Top值即可,部分代码如下:

HTML(使用Bootstrap3.0):

<div class="col-xs-4 col-md-2">
   <p>
      <img class="favicon" src="http://www.google.com/s2/favicons?domain_url=http://www.icewingcc.com" />
          冰翼博客
    </p>
    <div class="thumb-box">
          <a href="http://www.icewingcc.com" class="thumbnail" target="_blank">
             <img src="data/baidu.png" />
        </a>
    </div>
</div>

CSS(重写Bootstrap的部分):

.thumbnail {
    height:120px;
}

.thumbnail>img, .thumbnail a>img {
    display:block;
    max-width:90%;
    max-height:90%;
    position:relative;
}

a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active {
    background-color:rgba(216, 236, 253, 0.71);
}

在写Javascript的时候遇到一个问题:总是有不固定的一两个网站的LOGO的高度返回0,后来仔细查看发现是JQuery代码在网页加载完成后执行,而这个时候有些图片还没有加载完成,所以无法取得这个图片的高度,自然就会返回0。拿着这个问题又是一阵百度Google,也有说用image对象的onload方法什么的,最后发现下面的方法还是挺好用的:

JS:

$(window).on('load',function(){
        $('.thumbnail').each(function(){
            imgheight = $(this).children('img').height();
            divheight = $(this).height();
        $(this).children('img').css('top',(divheight-imgheight)/2);
        });
});

备注(2014-01-03):

上面的JS代码在实际使用的时候出了问题,当图片比较多时就无法正确加载了,于是不得不去寻找新的方法。

因为函数是要在图片加载完成时才能执行的,所以Lazyload很适合。直接在网上下载JQuery Lazyload插件,并修改以下代码。

图片部分:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-original="图片地址" />

这里我使用了一个1象素的GIF图像的代码作为默认图片,实际可以根据自己需要换成别的图片地址甚至动态图片;把原来的图片地址写在“data-original”里面。

JS部分:

$('.thumbnail img').lazyload({
    effect:"fadeIn",
    load:function(){
        imgheight = $(this).height();
        divheight = $(this).parent().height();
        $(this).css('top', (divheight-imgheight)/2);
    }
});

关于Lazyload的简单使用方法网上有很多,我也打算再写一篇,在这里只需要知道effect是动态效果,而图片加载完成时的回调函数写在load里面即可。

阅读全文 »

Jerry Bendy 发布于 10月14, 2013

jQuery+Ajax+PHP实现“喜欢”评级功能代码

本文章来给大家介绍一个jQuery+Ajax+PHP实现“喜欢”评级功能代码,用户点击页面中自己喜欢的图片上的红心按钮时,前端页面向后台发送一个ajax请求,后台PHP程序接收请求后,查询IP库中是否已经有该用户的点击记录,如果没有,则将对应的数值+1,同时将该用户IP信息写入IP库,反之则告诉用户已经“喜欢过了”。

数据库设计

先准备两张表,pic表保存的是图片信息,包括图片对应的名称、路径以及图片“喜欢”总数,pic_ip则记录用户点击喜欢后的IP数据。

CREATE TABLE IF NOT EXISTS `pic` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `pic_name` varchar(60) NOT NULL,
  `pic_url` varchar(60) NOT NULL,
  `love` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

CREATE TABLE IF NOT EXISTS `pic_ip` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `pic_id` int(11) NOT NULL,
  `ip` varchar(40) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8

index.php

在index.php中,我们通过PHP读取pic表中的图片信息并展示出来,结合CSS,提升页面展示效果。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="keywords" content="jquery">
  <meta name="description" content="">
  <title>jQuery+Ajax+PHP实现"喜欢"评级</title>
  <link rel="stylesheet" type="text/css" href="../css/main.css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $("p a").click(function(){
        var love = $(this);
        var id = love.attr("rel");
        love.fadeOut(300);
        $.ajax({
          type:"POST",
          url:"love.php",
          data:"id="+id,
          cache:false,
          success:function(data){
            love.html(data);
            love.fadeIn(300);
          }
        });
        return false;
      });
    });
  </script>
  <style type="text/css">
    .clear{clear:both}
    .list{width:760px; margin:20px auto}
    .list li{float:left; width:360px; height:280px; margin:10px; position:relative}
    .list li p{position:absolute; top:0; left:0; width:360px; height:24px; line-height:24px; background:#000; opacity:.8;filter:alpha(opacity=80);}
    .list li p a{padding-left:30px; height:24px; background:url(images/heart.png) no-repeat 4px -1px;color:#fff; font-weight:bold; font-size:14px}
    .list li p a:hover{background-position:4px -25px;text-decoration:none}
  </style>
</head>
<body>
  <div id="main">
    <ul class="list">
      <?php
      include_once("connect.php");
      $sql = mysql_query("select * from pic");
      while($row=mysql_fetch_array($sql)){
      $pic_id = $row['id'];
      $pic_name = $row['pic_name'];
      $pic_url = $row['pic_url'];
      $love = $row['love'];
      ?>
      <li>
        <img src="images/<?php echo $pic_url;?>" alt="<?php echo $pic_name;?>">
        <p><a href="#" title="我喜欢" class="img_on" rel="<?php echo $pic_id;?>"><?php echo $love;?></a></p>
      </li>
      <?php }?>
    </ul>
  </div>
</body>
</html>

CSS中,我们将定义鼠标滑向和离开红心按钮的动态效果,并定位按钮的位置。

.list{width:760px; margin:20px auto}
.list li{float:left; width:360px; height:280px; margin:10px; position:relative}
.list li p{position:absolute; top:0; left:0; width:360px; height:24px; line-height:24px;  
background:#000; opacity:.8;filter:alpha(opacity=80);}
.list li p a{padding-left:30px; height:24px; background:url(images/heart.png) no-repeat  
4px -1px;color:#fff; font-weight:bold; font-size:14px}
.list li p a:hover{background-position:4px -25px;text-decoration:none}

jQuery代码

当用户点击自己喜欢的图片上的红心按钮时,向后台love.php发送ajax请求,请求响应成功后,更新原有的数值。

$(function(){
    $("p a").click(function(){
        var love = $(this);
        var id = love.attr("rel"); //对应id
        love.fadeOut(300); //渐隐效果
        $.ajax({
            type:"POST",
            url:"love.php",
            data:"id="+id,
            cache:false, //不缓存此页面
            success:function(data){
                love.html(data);
                love.fadeIn(300); //渐显效果
            }
        });
        return false;
    });
});

love.php

后台love.php接收前端的ajax请求,根据提交的图片id值,查找IP表中是否已有该用户ip的点击记录,如果有则告诉用户已“喜欢过了”,反之,则进行一下操作:

1、更新图片表中对应的图片love字段值,将数值加1。

2、将该用户IP信息写入到pic_ip表中,用以防止用户重复点击。

3、获取更新后的love值,即喜欢该图片的用户总数,并将该总数输出给前端页面。

<?php
$host="localhost";
$db_user="root";
$db_pass="";
$db_name="demo";
$timezone="Asia/Shanghai";
$link=mysql_connect($host,$db_user,$db_pass);
mysql_select_db($db_name,$link);
mysql_query("SET names UTF8");
?>

<?php
include_once("connect.php");
$ip = get_client_ip();
$id = $_POST['id'];
if(!isset($id) || empty($id)) exit;
$ip_sql=mysql_query("select ip from pic_ip where pic_id='$id' and ip='$ip'");
$count=mysql_num_rows($ip_sql);
if($count==0){
$sql = "update pic set love=love+1 where id='$id'";
mysql_query( $sql);
$sql_in = "insert into pic_ip (pic_id,ip) values ('$id','$ip')";
mysql_query( $sql_in);
$result = mysql_query("select love from pic where id='$id'");
$row = mysql_fetch_array($result);
$love = $row['love'];
echo $love;
}else{
echo "喜欢过了..";
}
//获取用户真实IP
function get_client_ip() {
if (getenv("HTTP_CLIENT_IP") &amp;&amp; strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown"))
$ip = getenv("HTTP_CLIENT_IP");
else
if (getenv("HTTP_X_FORWARDED_FOR") &amp;&amp; strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown"))
$ip = getenv("HTTP_X_FORWARDED_FOR");
else
if (getenv("REMOTE_ADDR") &amp;&amp; strcasecmp(getenv("REMOTE_ADDR"), "unknown"))
$ip = getenv("REMOTE_ADDR");
else
if (isset ($_SERVER['REMOTE_ADDR']) &amp;&amp; $_SERVER['REMOTE_ADDR'] &amp;&amp; strcasecmp($_SERVER['REMOTE_ADDR'], "unknown"))
$ip = $_SERVER['REMOTE_ADDR'];
else
$ip = "unknown";
return ($ip);
}
?>

代码中get_client_ip()函数是用来获取用户的真实IP

 

来源:PHP100

阅读全文 »