<!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. MTK android flash配置

    关于6573集成MCP nandflash的方法,driver_allinone 和Memory Customer Document pdf的说明里面漏了很多细节.在此补上. 1.首先确认flash型 ...

  2. 安装hadoop

    生成yum源 cd /var/ftp/pub/cdh/5 createrepo --update . 从节点 yum clean all 配置yum库 /etc/yum.repos.d # cat / ...

  3. sdut2164Binomial Coeffcients（组合数求模）

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2164 贴一篇写组合数求mod比较好的帖子 这里 ...

  4. win8 iis安装及网站发布

    win8 iis安装及网站发布 系统:win8 环境:vs2012 一:安装IIS 比较win7的安装来说,多选了几个钩钩,不然会报错,偶就遇到这样的错误. 控制面板->程序和功能->启动 ...

  5. 【笨嘴拙舌WINDOWS】GDI(1)

    GDI:Graphics Device Interface 图形设备接口. 操作系统从命令行界面到图形界面的过度是施乐公司实验室对计算机普及作出的不可估量的贡献,苹果公司乔布斯与微软公司比尔盖茨对其的 ...

  6. java读取Properties文件

    方法一.通过java.util.Properties读取 Properties p=new Properties(); //p需要InputStream对象进行读取文件,而获取InputStream有 ...

  7. LA 3602 DNA Consensus String

    最近审题老是一错再错,Orz 题目中说求一个Hamming值总和最小的字符串,而不是从所给字符中找一个最小的 这样的话,我们逐列处理,所求字符串当前位置的字符应该是该列中出现次数最多其次ASCII值最 ...

  8. 51nod1201 整数划分

    01背包显然超时.然后就是一道神dp了.dp[i][j]表示j个数组成i的方案数.O(nsqrt(n)) #include<cstdio> #include<cstring> ...

  9. HDU 1051 Wooden Sticks【LIS】

    题意:给出n个木头的重量wi,长度li,如果满足w[i+1]>=w[i]且l[i+1]>=l[i],则不用耗费另外的加工时间,问至少需要多长时间加工完这些木头. 第一次做这一题目也没有做出 ...

  10. web服务器的相关资料 ngix

    OpenResty:官方网站  http://openresty.org/cn/index.html 利用nginx+lua+memcache实现灰度发布 http://www.cnblogs.com ...