原生JavaScript中获取元素索引的函数

相信使用过jQuery的朋友都知道index()方法, 她可以很方便的帮你找到当前元素在元素集合中索引位置. 那么, 原生JavaScript中如何获取呢? 这是我在写结构/表现/行为完全分离的选项卡(jQ版和原生JS版)一文时发现的问题. 今天一个朋友也问到我这个问题, 这个函数的确很实用. 和大家分享一下我的实现方法.
代码:

function index(current, obj){
	for (var i = 0;i < obj.length; i++) {
		if (obj[i] == current) {
			return i;
		}
	}
}

原理:
通过一个for循环遍历找出当前集合中与当前元素相等的元素,那么该元素的下标值即是当前元素在元素集合中的索引值.

Zend Studio中安装Aptana及几个配置说明

为了学习Linux系统,花了两个晚上的时间把电脑彻底清空重新规划了一次, 让Ubuntu与Win7和平共存.装系统是小儿科,但烦的是大大小小一大堆的软件.ghost很重要.
而对我,用的最多的是Zend Studio加Aptana的完美结合.我想,无论对于前端人员还是PHP开发人员,Zend Studio加Aptana绝对堪称经典.可惜中文资料太少,让很多人在安装和使用时绕了不少弯路,在此分享一下,安装过程中几个实用的技巧.
Zend Studio的下载安装就不详叙了,自己Google下.本文以7.1版本为例说明.
1. Aptana插件的安装
Aptana插件的安装有两种方式,一种是通过Aptana官方的插件链接安装,另一种是通过下载插件后加载安装.笔者建议用第一种方法,第二种方法我没安装成功过,总是出错(人品问题?).
具体实施:打开Zend Studio, 选择help菜单下的install new software选项,然后, 点一下Work with 后面文本框后面的那个ADD,会弹出一个窗口,Name,任意输入名称,location中输入: http://download.aptana.org/tools/studio/plugin/install/studio,点OK,然后在work with的下拉列表中就有你刚添加的了,勾选,next,ok,next,accept,finish,yes,重启安装完成.
2. 默认编辑器的配置
Aptana安装完成了,还需要修改首选项preferences把相关格式文件的默认编辑器设置成Aptana.即,菜单Window»Preferences»General»Etitors»Fill Associations, 然后,在右边选择你想要默认用Aptana编辑的文件格式,然后再选择下面的Aptana插件,并Default为默认.
设置默认关联
3. 为Aptana添加jQuery等支持插件
现在,为Aptana安装插件,以达到更加完美的功能.这一步,依你个人情况而定,主要是对于JS的框架支持,笔者长于jQuery,故安装的是jQuery插件.
在My Studio界面中找到View Plugin Manager(前面有个绿色的图标,如果没有重启一下Zend Studio),点击,会在下面出来一个窗口,然后再点击,该窗口右上角的绿色加号.
安装Aptana插件
接下来,你就能看到插件窗口了,然后选择要安装的插件,比如我选择的是JavaScript Libraries下的jQuery Support.安装方法雷同于第一步,略过.

完成上面的3步,已经将Zend Studio与Aptana完美组合了,但为了达到更完美,下面几步绝对实用.

4. 取消Aptana的起始页
此时,你会发现每次打开Zend Studio都会有一个Aptanan的起始页,如何取消? 菜单Window»Preferences»Aptana»Strartup Page»选中Never display after startup
取消起始页
5. 右上角Aptana图标的显示
为了更好的切换Aptana与PHP模式,是不是希望在视察右上角PHP按键旁边有一个Aptana的小按钮,好办.
菜单Window» Open perspective»other»Aptana Web双击或者选中然后OK.上帝说要有光于是就有了光.
6. 自动换行设置
自动换行,很实用的一个小技巧,但同时,也会有一个BUG,即自动换行后行号显示也是不正确的.有两种方法,第一种,直接在打开的文件中,右键,Toggle word wrap选中即可;另一种,是强制所有的文件打开时都自动换行:菜单Window» Editors»Advanced»Enable word wrap ,选中就可以了.
自动换行
7. 预览项目时不生成tmp文件设置
预览html项目时,会自动生成一个tmp文件,并且,每次都会生成,对于我,这是绝不对容忍的,每次预览完都得去清理文档垃圾.还好,有个方法可以避免: 菜单Window»Aptana» Editors&raquoHTML»Preview»Generate temporary files for browser preiews取消勾选.
tmp

上面仅是我自己总结的一些小技巧,实际安装使用过程中可能还有更多问题,请大家千万别忘了支持Google一下,她能告诉你很多很多.
Tips, Aptana也有单独的版本,如果你平时工作学习仅限于前端,可下载单独的Aptana,体积要小很多. 在此,也强烈建议,前端工作者作都尝试一下Aptana,你会喜欢上的.

结构/表现/行为完全分离的选项卡(jQ版和原生JS版)

日常项目中常用到的,用jQuery和原生JS分别写了一个. 两种写法均实现了结构/表现/行为的完全分离.当然,稍作修改,可以在同一个页面中应用于多个选项卡.
关于思路,和常规选项卡思路一样.点击选项菜单,突出显示,并显示对应的选项.本文实例中主要是通过判断点击菜单在菜单列表中的索引位置来显示或隐藏选项区.原生js还有很多种实现方法(蓝色理想中搜索),为了与jQ版思路保持一致,本文实例用的是循环判断. 详见注释.
另有几点说明:
1. 通过本文DEMO演示,可以很明显的看到原生JS的window.onload=function(){…}与jQuery的$(document).ready(function(){…});的区别,这也是我为什么不用样式定义初始状态下隐藏第二三个显示区的原因;
2. 本文只是选项卡一个原型实现,若要用于同一页面多个选项卡,变量已集中到函数头部,可自行封装成函数;
3. 请不要问如何实现更酷很炫的效果,请自已思考添加效果;
4. 不希望大家用这个效果时只是机械的复制粘贴,思考加实践,然后消化成自己的.
查看演示: 点此查看DEMO
核心代码:

//jQ版本
$(function(){
    var _tab = $('ul.tabnav>li');//获取选项卡导航
    var _box = $('.tabbox>div');//获取内容切换区
    var _hover = 'hover';//当前点击显示的样式
    var _index;//索引值
    _tab.click(function(){
        _index = _tab.index(this);//获取当前点击的索引值
        $(this).addClass(_hover).siblings().removeClass(_hover);//当前点击高亮显示
        _box.eq(_index).show().siblings().hide();//通过索引值让对应的选项内容区显示
    }).eq(0).click();//为第一个导航添加当前状态样式
});
//原生JS版本
window.onload = function(){
    var tabnav = document.getElementById('tabnav');
    var list = tabnav.getElementsByTagName('li');
    var tabbox = document.getElementById('tabbox');
    var divs = tabbox.getElementsByTagName('div');
    var hover = 'hover';//当前点击显示的样式
    var indexValue = function(self, obj){//获取索引值的函数,通过它获取当前点击在导航中的索引位置
        for (var i = 0; i < obj.length; i++) {
            if (obj[i] == self)
                return i;
        }
    };
    var index;
    list[0].className = hover;//第一个默认高亮,建议在页面中直接定义
    for (var k = 1; k < divs.length; k++) {//我为了省事,用一个for循环定义默认显示第一个切换区块,其他隐藏.这个最好用CSS定义,能避免页面加载时它全部显示出来.
        divs[k].style.display = 'none';
    }
    for (var l = 0; l < list.length; l++) {//点击事件
        list[l].onclick = function(){
            index = indexValue(this, list);//利用前面定义的indexValue函数取当前点击在选项导航中的索引值,
            for (var m = 0; m < list.length; m++) {
                list[m].className = (m == index) ? hover : '';//高亮显示点击项并移除其他项高亮
            }
            for (var n = 0; n < divs.length; n++) {
                divs[n].style.display = (n == index) ? 'block' : 'none';//显示点击对应的选项区,隐藏其他
            }
        }
    }
}

基于jQuery的上下无缝滚动应用(单行或多行)

基于jQuery的上下无缝滚动应用,可应用于多行或者单行.详解请参考注释.
查看演示: 点此查看DEMO
核心jQuery代码:

$(function(){
	var _wrap=$('ul.line');//定义滚动区域
	var _interval=2000;//定义滚动间隙时间
	var _moving;//需要清除的动画
	_wrap.hover(function(){
		clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
	},function(){
		_moving=setInterval(function(){
			var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的
			var _h=_field.height();//取得每次滚动高度(多行滚动情况下,此变量不可置于开始处,否则会有间隔时长延时)
			_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
				_field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
			})
		},_interval)//滚动间隔时间取决于_interval
	}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
});

简易的点击展开/关闭效果(原生JS版和JQ版)

可扩展的简易点击展开/关闭效果,分别用原生JavaScript和jQuery实现.使用方法及相关解释,请参见源码.
另,授人以鱼,不如授人以渔.我写的只是一个原型,提供一个思路一种方法.注释中我也注明了,如果你想要酷炫的效果,你可以根据自己的实际需求扩展.
查看演示: 点此查看DEMO
原生JS版本:

window.onload = function(){
    var divs = document.getElementsByTagName('div');//找到所有div元素
    for (var i = 0; i < divs.length; i++) {
        if (divs[i].className != 'jsdemo')
            continue;//如果元素class值不是jsdemo,继续查找
        //divs[i].style.display='none';   //如果你想默认是隐藏状态,可取消此行注释
        var title = divs[i].previousSibling;//通过上一个元素定位到标题元素
        if (title.nodeType != 1) { //为了确保找到的是元素节点
            title = title.previousSibling;
        }
        title.next = divs[i]; //设置标题的next属性并指向div[i]
        title.onclick = function(){//点击事件
            var curStyle = this.next.style.display;//取div[i]的默认display值,现在知道title.next的用意了吧
            var newStyle;//定义新的display值
            var ico = title.getElementsByTagName('span')[0];//包含展开关闭按钮的节点
            if (curStyle == 'none') {//取反实现点击的展开关闭
                newStyle = 'block';//当默认值是隐藏时,切换成可见
                ico.innerHTML = '-';//切换展开关闭按钮
            }
            else {
                newStyle = 'none';//当默认值是可见时,切换成隐藏
                ico.innerHTML = '+';//切换展开关闭按钮
            };
            title.next.style.display = newStyle;//为点击后的div[i]赋值
        }
    }
}

JQ版本:

$(function(){
    var $title = $('div.jqdemo');//找到要显示/隐藏的元素
    //$title.hide();   //如果你想默认是隐藏状态,可取消此行注释,下面两个切换函数换位
    $title.prev().toggle(function(){//为显示/隐藏元素的前一个元素(取出标题元素)设置点击切换事件
        $title.hide().prev().find('span').text('+');//第一次点击时,隐藏div元素,并找到标题元素中的span,切换按钮
    }, function(){
        $title.show().prev().find('span').text('-');//第二次点击时,显示div元素,并找到标题元素中的span,切换按钮
    });
    //JQ的代码是不是简洁漂亮的多.哈哈.几句代码就搞定了.通过修改show()/hide()还可以得到很炫酷的效果
});

渔夫科技