Jquery ’ 目录归档

IE8以下浏览器设置Title的问题

在项目中使用jQuery1.7.2作为基础框架,获取title对象和值都没有问题,但是如果需要重新设置title的值的时候在IE低版本浏览器(6、7、8)上就会出现错误,报错的代码块是:

append: function() {
		return this.domManip(arguments, true, function( elem ) {
			if ( this.nodeType === 1 ) {
				this.appendChild( elem );
			}
		});
	}

在IE低版本浏览器上,title不支持appendChild方法,就会抛出“意外的调用了方法或属性访问。”的错误,那么我们应该怎么解决这个问题呢?因为title在Html中属于比较特殊的元素,所以可以通过document.title来获取和设置,而且兼容性很好,所以我们可以这样做:

function setTitle(v){
            try{
                document.title = v;
            }catch (e){
                $('title').text(v);
            }
        }

JS+CSS浮动框架加载连接自适应宽高

很久以前发布在CSDN上的一个简单案例,今天看来非常粗糙,所以下载下来完善了一下,欢迎吐槽!

<!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 content="text/html; charset=gb2312" http-equiv="Content-Type" />
    <meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible" />
    <title>TinTao - 飒易互联</title>
    <style type="text/css">
    *,html{
        padding: 0;
        margin: 0;
    }
    html{
        overflow: hidden;
    }
    </style>
</head>

<body>
    <div class="fbd">
        <iframe id="ibox" src="http://www.saecn.com" frameborder="0" width="100%" height="506"></iframe>
    </div>
</body>
<script src='http://code.jquery.com/jquery-1.10.0.min.js' type="text/javascript" language="javascript"></script>
<script type="text/javascript">
    setFrameH();
    window.onresize = function() {
        setFrameH();
    };
    function setFrameH(){
        var $ibox = $("#ibox");
        var height = $(window).height();
        if (height < 0)
            height = 1;
        $ibox.height(height);
    }
</script>
</html>

在线案例请移动这里:JS+CSS浮动框架加载连接自适应宽高

基于jQuery的五子棋等多子棋游戏插件

今天早上一来呢就将多子棋插件版本更新到V0.1.1,主要原因是昨晚回家完了一下,发现这个游戏在某种特定的情况下会失去判断输赢的情况,接下来就列一下这个插件的详细信息:

/******************************************
* 多子棋插件
*
* @作者 :听涛设计
* @版权 :Copyright (c) 2013 听涛TinTao.
* @网址 :http://www.saecn.com
* @更新 : 2013-05-08
* @版本 :Version 0.1.1
*
******************************************/

主要功能:

1.可以实现多子棋游戏效果;

2.可以自由设定多少棋子连成串可以赢;

3.可以设置游戏画布的宽高;

游戏源码已经更新到GitHub:https://github.com/jactorew/wzGame

DEMO可以移步:jQuery五子棋游戏

欢迎大家多多指正多提意见。

游戏缺点:

UI素材来自互联网,没有独立的CSS样式文件,对于修改皮肤比较困难。

教你在Seajs中如何使用Jquery和Jquery的插件

最近了解到seajs的模块化js开发不错,拿来一看,呵呵,傻眼了。seajs做原生javascript开发还不错,就是像我这样的jquery控木有办法了。在细心翻阅了seajs官方文档后发现,原来seajs提供有配置jquery的方法,于是乎博主就开始照着文档开始配置,结果是文件下载下来了,但是全部报错,咋个回事呢???代码如下:

seajs.config({
plugins: ['shim'],

alias: {
'jquery': {
src: './lib/jquery.1.8.2.min.js',
exports:'jQuery'
},

'jquery.ui.core': {
src: './lib/jquery.ui/jquery.ui.core.min.js',
deps: ['jquery']
}
}
});

看起来不应该是这里的问题,完全按照官方文档写的啊! 纠结了半天查阅了无数资料后,终于发现另一种在seajs中使用jquery和jquery插件的方法:

var $ = require('jquery');
require('./lib/jquery.ui/jquery.ui.core.min')($);

这个方法必须将所有的jquery和插件重新封装一次

define(function(require,exports,moudles){
return function(jQuery){
(function(){/*code*/})(jQuery);
}

})

这下就完美解决了,不过这种方法加载的jquery和插件只能在这个文件内部使用,相当于局部变量,页面和其他无依赖的js不能使用,好处是插件与框架间无干扰。

Jquery中对新增对象live绑定时间hover的另类处理

Jquery中对新增对象live绑定时间hover的另类处理:

在项目中发现对新增对象使用hover方法时,live的绑定方式貌似不大对,结果测试页的确说明绑定的hover时间无效,翻阅jquery API发现live只能绑定这类事件:

在jQuery 1.4.1 中,.live() 能接受多个,用空间分隔事件,在提供类似.bind()的功能 。例如,我们可以“live ” 同时绑定mouseovermouseout事件,像这样:

$('.hoverme').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
// do something on mouseover
} else {
// do something on mouseout
}
});

随后又发现:

$(".hoverme").live({ 
  mouseenter: function() { //todo }, 
  mouseleave: function() { //todo }
});

这个比较能够接近hover实现的效果,至于实际应该怎么用看实际应用情况而定。

return top