<!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. SQL[连载2]语法及相关实例

    SQL[连载2]语法及相关实例 SQL语法 数据库表 一个数据库通常包含一个或多个表.每个表由一个名字标识(例如:"Websites"),表包含带有数据的记录(行). 在本教程中, ...

  2. leetcode：Count and Say

    The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, 1211, 111221, ...

  3. HeadFirst Jsp 11 (部署WEB应用)

    web 应用的目录结构要求很严, 各个内容只能放在它该放的地方, 所以, 移动一个web应用很让人头疼. 不过还是有办法, WAR文件, 代表web 归档, WAR其实就是一个JAR归档. 建立 WA ...

  4. @jsonignore的作用

    作用是json序列化时将java bean中的一些属性忽略掉,序列化和反序列化都受影响. 如下: package com.hzboy.orm; import java.util.List; impor ...

  5. laravel/laravel和laravel/framework有何区别？

    在安装laravel的时候,我们一般是download github上的laravel/laravel,随后执行composer install,在这个过程中,你会发现composer其中的一项工作是 ...

  6. UVa 11210 (DFS) Chinese Mahjong

    大白书第一章的例题,当时看起来很吃力,现如今A这道题的话怎么写都无所谓了. 思路很简单,就是枚举胡哪张牌,然后枚举一下将牌,剩下如果能找到4个顺子或者刻子就胡了. 由于粗心,34个字符串初始化写错,各 ...

  7. 戏（细）说Executor框架线程池任务执行全过程（下）

    上一篇文章中通过引入的一个例子介绍了在Executor框架下,提交一个任务的过程,这个过程就像我们老大的老大要找个老大来执行一个任务那样简单.并通过剖析ExecutorService的一种经典实现Th ...

  8. 【自动化测试】关于UI自动化的疑问（记录ing）

    1. 数据变动问题导致业务需要增加新的逻辑,这是增加case的健壮性还是浪费时间? 2. 如何做好PO? 不断数据抽离不断优化方法? 3. 如何提高调试代码的效率? /web可以 4. 主管不理解自动 ...

  9. Android手机部分名词浅谈

    1.什么是Radio? Radio是无线通信模块的驱动程序,ROM是系统程序,radio负责网络通信,ROM和Radio可以分开刷,互不影响.如果您的手机刷新了ROM后有通讯方面的问题可以刷新radi ...

  10. 扩容盘、SD卡扩容

    内存卡的前世今生回想当年,大家都还在用着非智能机,由于功能单一,需要存储的数据也就是通讯录和短信.虽然那时也有手机游戏,但大多都是几十KB,并不需要太大的存储空间.但随着手机功能的多样化,尤其是音乐. ...