JS与RIA

JS与RIA

JQ插件:slide滚动插件

在很多原有的滚动插件上做了整合,重新封装了一下:
具体参数:

JQ-Slide插件参数说明表
参数名 参数值(默认值可以省略)
effect scroolY(默认):垂直滚动
scroolX:水平滚动
scroolTxt:文本垂直滚动
fade:淡出
scroolLoop:水平左右点击滚动
autoPlay true(默认): or false
speed 动画速度时间,默认”normal”,可以使用毫秒或者JQ中的fast,slow,normal
timer 滚动间隔时间,默认”1000,可以使用毫秒或者JQ中的fast,slow,normal
claNav JQ-slide-nav(默认):触点对象数组父级
claCon JQ-slide-content(默认):滚动对象或滚动对象父级
steps 1(默认):滚动几个

演示地址及使用请移步:http://d2.sodao.com/demo/Slide/

Javascript浅拷贝与深拷贝

js中的赋值都为引用传递.就是说,在把一个对像赋值给一个变量时,那么这个变量所指向的仍就是原来对像的地址.引用就是浅拷贝。
深拷贝就是不紧复制对象的基本类,同时也复制原对象中的对象.就是说完全是新对象产生的,新对象所指向的不是原来对像的地址。
Javascript深拷贝有很多封装的方法,大家网上可以搜索一下.看下面这个例子:


var S=KISSY,
	obj={a:"a",b:"b"};
	var newObj=S.clone(obj);//深拷贝
	var newObj1=obj;//浅拷贝,赋值
	obj.b="b2";
	S.log(obj);//{a:"a",b:"b2"}
	S.log(newObj);//{a:"a",b:"b"}
	S.log(newObj1)//{a:"a",b:"b2"}

js中的hasOwnProperty和isPrototypeOf方法

hasOwnProperty:是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。
isPrototypeOf是用来判断要检查其原型链的对象是否存在于指定对象实例中,是则返回true,否则返回false。


function siteAdmin(nickName,siteName){
			this.nickName=nickName;
			this.siteName=siteName;
		}
		siteAdmin.prototype.showAdmin = function() {
			alert(this.nickName+"是"+this.siteName+"的站长!")
		};
		siteAdmin.prototype.showSite = function(siteUrl) {
			this.siteUrl=siteUrl;
			return this.siteName+"的地址是"+this.siteUrl;
		};
		var matou=new siteAdmin("愚人码头","WEB前端开发");
		var matou2=new siteAdmin("愚人码头","WEB前端开发");
		matou.age="30";
//		matou.showAdmin();
//		alert(matou.showSite("http://www.css88.com/"));
		alert(matou.hasOwnProperty("nickName"));//true
		alert(matou.hasOwnProperty("age"));//true
		alert(matou.hasOwnProperty("showAdmin"));//false
		alert(matou.hasOwnProperty("siteUrl"));//false
		alert(siteAdmin.prototype.hasOwnProperty("showAdmin"));//true
		alert(siteAdmin.prototype.hasOwnProperty("siteUrl"));//false
		alert(siteAdmin.prototype.isPrototypeOf(matou))//true
		alert(siteAdmin.prototype.isPrototypeOf(matou2))//true

js数组去重

js数组去重就是把数组中重复的元素去掉:


Array.prototype.delRepeat=function(){
	var newArray=new Array();
	var len=this.length;
	for (var i=0;i<len ;i++){
		for(var j=i+1;j<len;j++){
			if(this[i]===this[j]){
				j=++i;
			}
		}
		newArray.push(this[i]);
	}
	return newArray;
}

但是很明显这里有for循环内嵌了另一个for循环,在大数据量下肯定非常耗时!效率低下!经过查找和高人指点优化了一个新方法: Read More »

使用JSONP跨域

从 1.2 版本开始,jQuery 拥有对 JSONP 回调的本地支持。如果指定了 JSONP 回调,就可以加载位于另一个域的 JSON 数据,回调的语法为:url?callback=?。jQuery 自动将 ? 替换为要调用的生成函数名。

我们使用 ? 作为回调函数名,而非真实的函数名。因为 jQuery 会用生成的函数名替换 ?

这里做了一个简单的flickr照片的跨域处理:


$(function() {
$.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?id=51666465@N04&amp;tagmode=any&amp;format=json&amp;jsoncallback=?', function(data) {
$.each(data.items, function(i, item) {
$(item.description).appendTo("body")
});
});
});

http://api.flickr.com/services/feeds/photos_public.gne?id=51666465@N04&tagmode=any&format=json

是我照片的json数据,加上callback回调函数 Read More »

使用document.domain和iframe实现站内AJAX跨域

站内AJAX跨域可以通过document.domain和iframe实现,比如www.css88.com、js.css88.com、css88.com这3个域名其实是3个不同的域,很多时候www.css88.com和css88.com打开的可能是用一个页面,但是,他们确实是不同的域,比如www.css88.com的页面通过ajax无法直接获取css88.com域下的数据,这是由于js的安全性引起的。

不过我们可以通过document.domain和iframe实现在站内的ajax跨域。

查看demo:http://www.css88.com/demo/iframe-domain/

还有一点要注意,这个方法需要在iframe加载后才能使用!

JS操作iframe里的dom

看到断桥残雪对我上一篇日志的回复我也学习了一下JS操作iframe里的dom;主要参考了断桥残雪的《用JavaScript在IE和Firefox下进行iframe的DOM操作》和支付宝UED的《用JS访问操作iframe里的dom》,非常不错的两篇文章。

一、父级窗口操作iframe里的dom

JS操作iframe里的dom可是使用contentWindow属性,contentWindow属性是指指定的frame或者iframe所在的window对象,在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进行编辑则,必须指定contentWindow属性,contentWindow属性支持所有主流浏览器

相关的还有一个contentDocument属性,这个属性是指指定的frame或者iframe所在的document对象,但是悲剧的是,ie6-ie7并不支持这个属性。

ie6和ie7还可以使用document.frames["iframe Name"]或者document.frames["iframe ID"]来获取相当于contentWindow属性,而firefox和chrome并不支持这些document.frames["iframe Name"]或者document.frames["iframe ID"],但是window.frames["iframe Name"]或window.frames[index](index是索引值)也支持所有主流浏览器

这个可以看实例:http://www.css88.com/demo/iframe-correspond/index-test.html

我们知道document对象是window对象的一个子对象,所以我们可以通过document.getElementById(“iframe ID”).contentWindow.document来获取iframe的document对象,相当于contentDocument属性。

二、iframe里的js操作父级窗口的dom

iframe里的js要操作父级窗口的dom,必须搞懂几个对象:

parent是父窗口(如果窗口是顶级窗口,那么parent==self==top),

top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),

self是当前窗口(等价window),

opener是用open方法打开当前窗口的那个窗口;

这样iframe里的js要操作父级窗口的dom可以通过parent,top这些对象来获取父窗口的window对象,例如:

parent.document.getElementById(“dom ID”);

parent,top还能调用父级窗口的的js方法,比如,getIFrameDOM(iID)是父级窗口的一个方法,那么iframe里可以使用parent.getIFrameDOM(“wIframeA”)来调用父级窗口的getIFrameDOM(iID)方法;

————————————————

查看一下JS操作iframe里的dom的demo:http://www.css88.com/demo/iframe-correspond/

虽然iframe在现在WEB开发中越来越少用到了,但是iframe还有很多值得使用的地方,比如使用iframe解决跨域问题.关于iframe还有很多东西要学习,比如iframe自适应高度,使用iframe解决跨域问题,iframe加载问题,iframe加载性能问题等等,还有很多东西要学习,

js窗口间通信摘要

1.打开一个新窗口:window.open();为了便于父窗口操作子窗口可以为window.open()定义一个变量,例如:

var opW = window.open(‘tests.html’,'popup’,'width=300,height=300′);

这样要关闭子窗口可直接使用:opW.close();

要操作子窗口元素,例如:

opW.document.getElementById(“fartherWindowTxt”).innerHTML = “操作子窗口”;

2.子窗口可以使用window.opener来引用父窗口:window.opener.document.getElementById(“fartherWindowTxt”).innerHTML=”子窗口操作父窗口!”;

3.窗口关闭自身窗口可以使用:window.close();

点击查看demo:http://www.css88.com/demo/window-tongxin/

window.location.href,window.location.replace(),window.location.reload() 三者的区别

  1. window.location.href=“url”:改变url地址;
  2. window.location.replace(“url”):将地址替换成新url,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后 退”来访问已经被替换的URL,这个特点对于做一些过渡页面非常有用!
  3. window.location.reload():强制刷新页面,从服务器重新请求!

demo url:http://www.css88.com/demo/js-location/reload.html

仿微软Office 迷你工具条(简易编辑器)

前几天在网上看到一篇《Why and how to create Microsoft Office Minibar with jQuery and CSS3》,酷似一个简易编辑器。

只要实现了获取文本框(textarea)内的所选字符和光标位置索引值-selection实现这个效果其实还是蛮简单的。

由于原文代码太乱,所以我重写一下这个效果;

demo:http://www.css88.com/demo/edit-box/