<!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. mac 10.8 编译提示找不到GCC

    本机已安装xcode,但是在编译prce时提示找不到GCC,要不安装gcc.pkg ,简单起见,启动xcode->menu->preferences->Dowloads 把里面的co ...

  2. UVa 1611 (排序 模拟) Crane

    假设数字1~i-1已经全部归位,则第i到第n个数为无序区间. 如果i在无序区间的前半段,那么直接将i换到第i个位置上. 否则先将i换到无序区间的前半段,再将i归位.这样每个数最多操作两次即可归位. # ...

  3. UVa 11825 (状压DP) Hackers' Crackdown

    这是我做状压DP的第一道题,状压里面都是用位运算来完成的,只要耐下心来弄明白每次位运算的含义,还是容易理解的. 题意: 有编号为0~n-1的n台服务器,每台都运行着n中服务,每台服务器还和若干台其他服 ...

  4. bzoj2428: [HAOI2006]均分数据

    模拟退火.挺好理解的.然后res打成了ans一直WA一直WA...!!!一定要注意嗷嗷嗷一定要注意嗷嗷嗷一定要注意嗷嗷嗷. 然后我就一直卡一直卡...发现最少1800次的时候就可以出解了.然后我就去调 ...

  5. codeforces 450 B Jzzhu and Sequences

    题意:给出f1=x,f2=y,f(i)=f(i-1)+f(i+1),求f(n)模上10e9+7 因为 可以求出通项公式:f(i)=f(i-1)-f(i-2) 然后 f1=x; f2=y; f3=y-x ...

  6. [转] POJ数学问题

    转自:http://blog.sina.com.cn/s/blog_6635898a0100magq.html 1.burnside定理,polya计数法 这个大家可以看brudildi的<组合 ...

  7. MapView的用法

    一.MapView 1.显示用户的位置点(用蓝色圆点标记) mapView.showsUserLocation = YES; 2.代理方法 1> 当定位到用户的位置就会调用 - (void)ma ...

  8. delete archivelog all 无法彻底删除归档日志？

    最近在因归档日志暴增,使用delete archivelog all貌似无法清除所有的归档日志,到底是什么原因呢? 1.演示环境 SQL> select * from v$version whe ...

  9. Android堆栈分析

    在开发中,与界面跳转联系比较紧密的概念是Task(任务)和Back Stack(回退栈).activity的启动模式会影响Task和Back Stack的状态, 进而影响用户体验.除了启动模式之外,I ...

  10. bsp tree

    http://www.cnblogs.com/dreams/archive/2007/03/25/687267.html http://blog.csdn.net/iduosi/article/det ...