<!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. 手持机连不上信道设置为13的AP

    这个是正常的, 因为每个国家的CHANNEL 都不一样, 中国和美国都只支持 CHANNEL 1- 11  欧洲会到 12, 13 channal , 日本会到CHANNEL 14 . "O ...

  2. BZOJ 1494 生成树计数（生成树计数-矩阵）

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1494 题意: 思路: int SIZE; struct matrix { i64 a[N] ...

  3. Codeforces Round #206 div1 C

    CF的专业题解 : The problem was to find greatest d, such that ai ≥ d,  ai mod d ≤ k holds for each i. Let ...

  4. Shadow mapping

    http://www.cnblogs.com/cxrs/archive/2009/10/17/1585038.html 1.什么是Shadow Maping?      Shadow Mapping是 ...

  5. Python3 学习第六弹： 迭代器与生成器

    1> 迭代器 迭代的意思类似递归一般,不断地对一个对象做重复的操作.来看个例子: class Fibs: def __init__(self): self.last = self.now = 1 ...

  6. hdu3333(线段树)

    区间更新,单点查询. hdu3333 #include <iostream> #include <stdio.h> #include <string.h> #inc ...

  7. 使用ajaxfileupload插件提示Uncaught TypeError:has no method 'handleError'

    最近使用ajaxfileupload插件上传文件时,后台正常运行时,可以正常使用:当后台出现异常时,上传后没有任何反应,也无任何返回信息,使用chrome查看时,发现ajaxfileupload插件报 ...

  8. poj 1159 (DP LCS)

    滚动数组 + LCS // File Name: 1159.cpp // Author: Missa_Chen // Created Time: 2013年07月08日 星期一 10时07分13秒 # ...

  9. HDU 5033 (单调栈维护凸包) Building

    题意: 一个人在x轴上,他的左右两侧都有高楼,给出楼的横坐标Xi和高度Hi还有人的位置pos,求人所能看到的天空的最大角度. 分析: 将建筑物和人的位置从左到右排序,对于每个位置利用栈求一次人左边建筑 ...

  10. UVA 11383 Golden Tiger Claw（最佳二分图完美匹配）

    题意:在一个N*N的方格中,各有一个整数w(i,j),现在要求给每行构造row(i),给每列构造col(j),使得任意w(i,j)<=row(i)+col(j),输出row(i)与col(j)之 ...