<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

dd {

        cursor: pointer;

    }

</style>

<script type="text/javascript">

window.onload = function ()

{

    var odl = document.getElementsByTagName('dl');

    var odiv = document.getElementById('div1');

    var location = '';

    var position = '';

    var salary = '';

    for(var i = 0; i < odl.length; i++)

    {

        fn(i);

    }

    function fn(n)

    {

        var odd = odl[n].getElementsByTagName('dd');

        for(var i = 0; i < odd.length; i++ )

        {

            odd[i].onclick = function ()

            {

                switch(n)

                {

                    case 0:

                    location = this.innerHTML + ' ';

                    break;

                    case 1:

                    position = this.innerHTML + ' ';

                    break;

                    case 2:

                    salary = this.innerHTML + ' ';

                    break;

                }

                odiv.innerHTML  = location + position + salary;

            };

        }

    }

}

</script>

</head>

<body>

    <dl>

        <dt>地区</dt>

        <dd>东城</dd>

        <dd>西城</dd>

        <dd>朝阳</dd>

        <dd>昌平</dd>

    </dl>

    <dl>

        <dt>职位</dt>

        <dd>美工设计</dd>

        <dd>前端工程师</dd>

        <dd>后台开发</dd>

    </dl>

    <dl>

        <dt>薪资</dt>

        <dd>4000</dd>

        <dd>5000</dd>

        <dd>6000</dd>

    </dl>

    <div id="div1"></div>

</body>

</html>

dom 筛选器的更多相关文章

  1. jQuery筛选器及对DOM修改（学习笔记）

    1.jQuery筛选器 注意:请先在管理Nuget程序包中查找jQuery包,并安装.也可以在jQuery官网下载. 实现: <!DOCTYPE html> <html xmlns= ...

  2. CSS筛选器简单实例1

    1.通配符 <!--筛选器---通配符实例--> <!--支持IE7+ --> <style type="text/css"> *.all { ...

  3. jQuery中的选择器及筛选器

    1.jQuery的介绍 1.jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是--WRITE LESS,DO MORE! 2.它是轻量级的js库,这是其它的js库所不 ...

  4. jquery 选择器、筛选器、事件绑定与事件委派

    一.jQuery简介 1.可用的jQuery服务器网站:https://www.bootcdn.cn/ jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocume ...

  5. jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)

    一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...

  6. jQuery: 选择器，筛选器

    jQuery 简介 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javas ...

  7. jQuery 初识 筛选器 属性选择器

    ---------------------------大事使我们惊讶,小事使我们沮丧,久而久之,我们对这二者都会习以为常. 一 jQuery是什么? ［1］   jQuery由美国人John Resi ...

  8. 第三章 JQuery: HelloWorld--常见方法--css--选择器--筛选器--属性--效果--事件--数组操作--字符串操作--对象转换

    1.jQuery简介 为了简化JavaScript 的开发, 一些JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的页面, 并且兼 ...

  9. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

随机推荐

  1. BZOJ 1502 月下柠檬树（simpson积分）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1502 题意:给出如下一棵分层的树,给出每层的高度和每个面的半径.光线是平行的,与地面夹角 ...

  2. 树&二叉树&二叉搜索树

    树&二叉树 树是由节点和边构成,储存元素的集合.节点分根节点.父节点和子节点的概念. 二叉树binary tree,则加了"二叉"(binary),意思是在树中作区分.每个 ...

  3. CodeSmith listview属性

    private void button1_Click(object sender, EventArgs e)//将数据库中读出来的信息直接显示在listview里 { //连接数据库 SqlConne ...

  4. UVa 12100 (模拟) Printer Queue

    用一个队列模拟,还有一个数组cnt记录9个优先级的任务的数量,每次找到当前最大优先级的任务然后出队,并及时更新cnt数组. #include <iostream> #include < ...

  5. 使用Java API创建（create），查看（describe），列举（list），删除（delete）Kafka主题（Topic）

    使用Kafka的同学都知道,我们每次创建Kafka主题(Topic)的时候可以指定分区数和副本数等信息,如果将这些属性配置到server.properties文件中,以后调用Java API生成的主题 ...

  6. php实现一致性哈希算法

    <?php//原理概念请看我的上一篇随笔(http://www.cnblogs.com/tujia/p/5416614.html)或直接百度 /** * 接口:hash(哈希插口).distri ...

  7. Android 框架简介--Java环境(转)

    ==========================上=========================== 这里简单的介绍了Android的java环境基础,在后面一节中会结合具体的实例来理解这一节 ...

  8. cocoStudio UI编辑器 学习总结

    一.控件 控件基类 UIWidget:所有UI控件的基类 addChild:添加UIWidget类型的节点 addRenderer:添加CCNode类型的节点 所有UIWidget,都可以设置成触摸s ...

  9. hihoCoder hiho一下 第四十八周 题目1 : 拓扑排序·二

    题意: 给定一个拓扑图,其中部分结点含有1个病毒,每个结点只要收到病毒就会立即往出边所能到达的点传播,病毒数可叠加,求所有结点的病毒数总和. 思路: 根据拓扑的特点,每个入度为0的点肯定不会再被传播病 ...

  10. 用 Xcode 开发 Cydia Substrate 插件（一）

    关于这方面的中文资料太少了,以至于可能很多对插件开发感兴趣的孩子们都不知从何下手,于是呢我就写了这篇文章,希望对你能有所帮助.如果你觉得文章内容有什么错误呢也请提出来. 准备开发环境 1. 从 App ...