Blog 存档

【jQuery插件】回到顶部

时间：2010年09月28日作者：愚人码头查看次数:8,125 views评论次数：2

最近写了个回到顶部的插件，调用方法的
$(“.go-top”).goToTop({});
$(window).bind(‘scroll resize’,function(){
$(“.go-top”).goToTop({});
});
当然可以传一些参数及参数的默认值：
pageWidth:950,//页面宽度
pageWidthJg:10,//按钮和页面的间隔距离
pageHeightJg:50,//按钮和页面底部的间隔距离
startline:20,//出现回到顶部按钮的滚动条scrollTop距离
duration:200,//回到顶部的速度时间
showBtntime:100,//显示\隐藏回到顶部按钮的速度时间
targetObg:”body”//目标位置

演示地址：http://www.css88.com/demo/goToTop/

标签：,分类：jQuery, JS

【jquery插件】搜索文本高亮

时间：2010年09月23日作者：愚人码头查看次数:7,709 views评论次数：3

在页面上搜索某个关键字，使关键词高亮；

高亮样式自己可以重新定义：

例如：span.highlight { color:#F00; font-weight:700}

使用高亮：

$(‘#fancy-text’).highLight();//清除高亮
$(‘#fancy-text’).highLight(“mode”);//显示高亮

查看demo：http://www.css88.com/demo/highlight/

标签：,,分类：jQuery, JS

jquery中使用event.target的几点

时间：2010年09月18日作者：愚人码头查看次数:10,181 views评论次数：6

1.this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

2.this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对象：$(this)和$(event.target);

比如：event.target和$(event.target)的使用：


< !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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("li").live("click",function(event){
$("#temp").html("clicked: " + event.target.nodeName);
$(event.target).css("color","#FF3300");
})
});
</script>
</head>

<body>
<div id="temp"></div>
<ul class="JQ-content-box" style="padding:20px; background:#FFFFFF">
<li>第一行
<ul>
<li>这是公告标题1</li>
<li>这是公告标题2</li>
<li>这是公告标题3</li>
<li>这是公告标题4</li>
</ul>
</li>
</ul>
</body>
</html>

上面的例子如果改成使用this：


< !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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("li").live("click",function(event){
$("#temp").html("clicked: " + event.target.nodeName);
$(this).css("color","#FF3300");
event.stopPropagation();
})
});
</script>
</head>

<body>
<div id="temp"></div>
<ul class="JQ-content-box" style="padding:20px; background:#FFFFFF">
<li>第一行
<ul>
<li>这是公告标题1</li>
<li>这是公告标题2</li>
<li>这是公告标题3</li>
<li>这是公告标题4</li>
</ul>
</li>
</ul>
</body>
</html>

注意这里的event.stopPropagation();这个是阻止事件冒泡的！

标签：,分类：jQuery, JS

人人网诚聘前端工程师(javascript)

时间：2010年09月17日作者：愚人码头查看次数:3,674 views评论次数：3

前端工程师(javascript方向)
工作地点： 北京
招聘人数： 2人
性别/年龄：不限
学历：一般要求本科，但是可以忽视
待遇：8k+
工作职责：
写js，研究js，如果觉得不够，可以研究最前沿的产品和最新的技术
职位要求：
熟悉DOM对象的Javascript编程，有使用js框架经验，具备良好的框架开发思想，能够编写微型库；
掌握XHTML、CSS，对W3C有较深理解，对webkit浏览器有一定了解。
工作内容：
人人无线产品及其周边产品的开发
联系邮箱：shilang.sun@opi-corp.com
分类：前端招聘

jquery中的数组过滤筛选-$.grep()

时间：2010年09月16日作者：愚人码头查看次数:5,166 views评论次数：2

jquery中有个grep()方法用于数组元素过滤筛选，悲剧的是，平时我们用的api文档中找不到这个说明。查看官方说明

grep()的使用方法：
grep(array,callback,invert)

  • array：待过滤数组;
  • callback：处理数组中的每个元素，并过滤元素，该函数中包含两个参数，第一个是当前数组元素的值，一个是当前数组元素的下标，即元素索引值。此函数应返回一个布尔值。另外，此函数可设置为一个字符串，当设置为字符串时，将视为“lambda-form”（缩写形式？），其中 a 代表数组元素，i 代表元素索引值。如“a > 0”代表“function(a){ return a > 0; }”
  • invert：布尔型可选项，默认值false，值为true或false， 如果 “invert” 为 false 或为设置，则函数返回数组中由过滤函数返回 true 的元素，当”invert” 为 true，则返回过滤函数中返回 false 的元素集。

解释完grep()的用法，现在来举个小例子：
var arr=$.grep([0,1,2,3,4,5,6],function(n,i){
return n>2
});
上面的例子返回[3,4,5,6]，但是我们给invert的值为true，例如
var arr=$.grep([0,1,2,3,4,5,6],function(n,i){
return n>2
},ture);
所以现在返回的是[0,1,2]，也就是被callback函数过滤掉的元素。

标签：分类：jQuery, JS

JQ插件：slide滚动插件

时间：2010年09月01日作者：愚人码头查看次数:11,623 views评论次数：20

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

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/

标签：,,分类：jQuery, JS

【IE6的疯狂系列】IE6下position:absolute相邻元素margin-top失效的bug

时间：2010年08月24日作者：愚人码头查看次数:5,739 views评论次数：9

昨天发现了一个ie6的bug，绝对定义(position:absolute)的相邻元素margin-top竟然会失效；

看demo把（请用ie6围观）：http://www.css88.com/demo/absolute-bug/absolute-bug.html

这里有几个条件：

  1. 相邻元素是有width属性的，如果去掉width属性，margin-top又会生效，点击查看：http://www.css88.com/demo/absolute-bug/absolute-bug-1.html
  2. 增加相邻元素浮动，margin-top也会又会生效；点击查看：http://www.css88.com/demo/absolute-bug/absolute-bug-2.html

如果没有复杂的背景什么的可以使用padding-top替换margin-top；

还可应在相邻元素间插入一个空标签的方法：


<div style="position: absolute; width: 500px; top: 0; left: 0; height: 30px; background-color: #666;">此处显示新 Div 标签的内容</div>
<!--[if IE 6]>
<div></div>
< ![endif]-->
<div style="margin-top: 35px; width: 100px; float: left; background-color: #3fc;">此处eeeeeeeee显示新 Div 标签的内容</div>

点击查看：http://www.css88.com/demo/absolute-bug/absolute-bug-4.html

————————————————
另赠送一个IE6下与float元素相邻的position:absolute元素消失BUG
围观地址：http://blog.dengsa.com/?p=342 http://www.webchina110.cn/?p=105

分类：html+css

Javascript浅拷贝与深拷贝

时间：2010年08月08日作者：愚人码头查看次数:5,495 views评论次数：4

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

js中的hasOwnProperty和isPrototypeOf方法

时间：2010年08月05日作者：愚人码头查看次数:5,249 views评论次数：0

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

分类：JS

js数组去重

时间：2010年08月03日作者：愚人码头查看次数:10,625 views评论次数：18

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循环，在大数据量下肯定非常耗时！效率低下！经过查找和高人指点优化了一个新方法： 继续阅读：js数组去重»

标签：,分类：JS
Page 12 of 70« First891011121314151617Last »