index封装
就是求元素在父级当中的位置:
思路:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="a">
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
</body>
</html>
<script type="text/javascript">
function a(obj) {
var b = obj.parentNode.children;
var i=0;
for(i=0;i<b.length;i++){
if(b[i] == obj){
return i;
}
}
}
window.onload = function () {
var li = document.getElementsByTagName("li")
var i=0;
for(i=0;i<li.length;i++){
li[i].onclick = function () {
alert(a(this));
} }
}
</script>
封装:
//index,求元素在父级当中的位置
function getIndex(obj) {
var aBrother = obj.parentNode.children;
var i=0;
for(i=0;i<aBrother.length;i++){
if(aBrother[i] == obj){
return i;
}
}
}
VQuery.prototype.index = function () {
return getIndex(this.elements[0]);
};
详细可查VQuery的封装。
index封装的更多相关文章
- html/京东项目/京东网页高仿/js/jq/css/java web/
登录部分HTML+CSS: <!DOCTYPE html><html> <head> <meta charset="UTF-8& ...
- 瀑布流 &留言板
实例:瀑布流 留言板(一)瀑布流瀑布流实现原理分析1.ajax文件内容function ajax(method, url, data, success) { var xhr = null; ...
- js仿京东轮播图效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- HTML番外整理
经过一周的个人项目与一周的团体项目,我学到了一些有用的内容,特分享如下: 一.视频 1.对在线视频的添加 在各大网站打开一个视频,在下方的分享找到HTML代码,然后复制HTML代码到自己的代码中. 2 ...
- JS轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- springmvc 例
1.结构 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRscWk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCM ...
- HTML中插入视频
最常用的向HTML中插入视频的方法有两种,一种是古老的<object></object>标签,一种是html5中的<video></video>标签. ...
- Java斗地主案例、异常和自定义异常整理
模拟斗地主洗牌发牌 1.1 案例介绍 按照斗地主的规则,完成洗牌发牌的动作. 具体规则: 1. 组装54张扑克牌 2. 将54张牌顺序打乱 3. 三个玩家参与游戏,三人交替摸牌,每人17张牌,最后三张 ...
- 基于cytoscape.js 、 d3.js实现的关系图谱初级版本
前面的文章已经介绍了cytoscape.js . d3.js的安装及简单demo,现在展示从html页面转移到vue项目下的最初版的demo 效果图: 代码如下: <template> & ...
随机推荐
- The value of 'filter_horizontal[0]' must be a many-to-many field. The value of 'raw_id_fields[0]' must be a foreign key or a many-to-many field.
在使用django admin的时候 我们遇到这个错误 <class 'Salesman.admin.UsrMngUserAdmin'>: (admin.E020) The value o ...
- mysql string types ---- mysql 字符类型详解
一.mysql 中包涵的字符类型: [national] char [(m)] [character set charset_name] [collate collation_name] [natio ...
- UE初写小项目问题之命令行报错:Expected indentation of 4 spaces but found 6
一.问题 刚开始用一个小项目练手,用vue-cli初始化项目,直接安装了所有的东西,如vue-router.ESLint.unit tests等等,当时只懂得vue-router是什么. 问题来了,在 ...
- create table like 和create table select 比较
语法: CREATE [TEMPORARY] TABLE [IF NOT EXISTS] tbl_name [(create_definition,...)] [table_optio ...
- Linux下编译、使用静态库和动态库 自己测过的
每个程序实质上都会链接到一个或者多个的库.比如使用C函数的程序会链接到C运行时库,GUI程序会链接到窗口库等等.无论哪种情况,你都会要决定是链接到静态库(static libary)还是动态库(dyn ...
- spawn-fcgi原理及源代码分析
spawn-fcgi是一个小程序,作用是管理fast-cgi进程,功能和php-fpm类似,简单小巧,原先是属于lighttpd的一部分.后来因为使用比較广泛.所以就迁移出来作为独立项目了.本文介绍的 ...
- Atitit.软件控件and仪表盘(23)--多媒体子系统--视频输出切换控制cvbs av s-video Ypbpr pal ntsc
Atitit.软件控件and仪表盘(23)--多媒体子系统--视频输出切换控制cvbs av s-video Ypbpr pal ntsc 1. CVBS是AV接口 1 2. S-Video S端子 ...
- Atitit.ide代码块折叠插件 eclipse
Atitit.ide代码块折叠插件 eclipse 1. User Defined Regions #region ... #endregion 插件com.cb.eclipse.foldin ...
- 【Android】15.1 后台任务和前台任务
分类:C#.Android.VS2015: 创建日期:2016-02-29 一.简介 Android的活动(Activities)可以有多种状态,具体取决于用户的行为以及对操作系统的要求.虽然Acti ...
- win32之hPrevInstance
看了一篇博客上面说,WinMain函数中的hPrevInstance是上一个示例的句柄,我就想到可不可以使用这个来实现只能运行一个实例呢? int WINAPI WinMain(HINSTANCE h ...