1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. dd {
  8.         cursor: pointer;
  9.     }
  10. </style>
  11. <script type="text/javascript">
  12. window.onload = function ()
  13. {
  14.     var odl = document.getElementsByTagName('dl');
  15.     var odiv = document.getElementById('div1');
  16.     var location = '';
  17.     var position = '';
  18.     var salary = '';
  19.  
  20.     for(var i = 0; i < odl.length; i++)
  21.     {
  22.         fn(i);
  23.     }
  24.  
  25.     function fn(n)
  26.     {
  27.         var odd = odl[n].getElementsByTagName('dd');
  28.         for(var i = 0; i < odd.length; i++ )
  29.         {
  30.             odd[i].onclick = function ()
  31.             {
  32.                 switch(n)
  33.                 {
  34.                     case 0:
  35.                     location = this.innerHTML + ' ';
  36.                     break;
  37.                     case 1:
  38.                     position = this.innerHTML + ' ';
  39.                     break;
  40.                     case 2:
  41.                     salary = this.innerHTML + ' ';
  42.                     break;
  43.                 }
  44.                 odiv.innerHTML  = location + position + salary;
  45.             };
  46.         }
  47.     }
  48. }
  49. </script>
  50. </head>
  51.  
  52. <body>
  53.     <dl>
  54.         <dt>地区</dt>
  55.         <dd>东城</dd>
  56.         <dd>西城</dd>
  57.         <dd>朝阳</dd>
  58.         <dd>昌平</dd>
  59.     </dl>
  60.     <dl>
  61.         <dt>职位</dt>
  62.         <dd>美工设计</dd>
  63.         <dd>前端工程师</dd>
  64.         <dd>后台开发</dd>
  65.     </dl>
  66.     <dl>
  67.         <dt>薪资</dt>
  68.         <dd>4000</dd>
  69.         <dd>5000</dd>
  70.         <dd>6000</dd>
  71.     </dl>
  72.     <div id="div1"></div>
  73. </body>
  74. </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. HDU 4747 Mex（线段树）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4747 题意:给出一个数列A.计算所有的mex(i,j)之和.1<=i<=j<=n. ...

  2. java I/O总结

    IO是非常重要的一块,但通常又被人们所忽视,这里希望能有个很清晰的介绍.自己学习的同时希望能够给别人带来一些帮助,对文章中用到其他作者(已经给出了链接)的图片在这里表示感谢! IO的分类 java I ...

  3. JS 样式操作学习总结。

    在我们编写网页的时候,样式表示我们常常需要相伴的内容,谁然很招人烦.恕我前端菜鸟对这东西很是无力啊.下面是我在代码浪潮中的虚席到的一些东西. 1.样式表内容修改方式. 2.当前元素样式内容获取. 3. ...

  4. 谷歌的ajax.googleapis.com被墙导致访问很多国外网站很慢的解决方法

    比如访问StackOverflow, 更比如flexerasoftware.com(导致Visual Studio的打包程序InstallShield Limited Edition不能注册和下载) ...

  5. HDU 1404 (博弈) Digital Deletions

    首先如果第一个数字是0的话,那么先手必胜. 对于一个已知的先手必败状态,凡是能转移到先手必败的状态一定是必胜状态. 比如1是必败状态,那么2~9可以转移到1,所以是必胜状态. 10,10*,10**, ...

  6. codevs 1228 苹果树

    dfs序+线段树 #include<iostream> #include<cstdio> #include<cstring> #include<algorit ...

  7. 用KNN算法分类CIFAR-10图片数据

    KNN分类CIFAR-10,并且做Cross Validation,CIDAR-10数据库数据如下: knn.py : 主要的试验流程 from cs231n.data_utils import lo ...

  8. swun 1766 我的悲剧不可能那么好数

    解题思路: 一向提交特别慎重的我,这题竟然PE了5发左右,放了几天,再回来写,直接1A, 相当的自豪,而且是最优解题者.这题千万要注意,化繁为简,文章只包括大小   写字母和数字,还有空行. #inc ...

  9. Activity传递对象的方法

    //Serializeable传递对象的方法 public void SerializeMethod(){ Person mPerson = new Person(); mPerson.setName ...

  10. Heritrix源码分析(十二) Heritrix的控制中心(大脑)CrawlController(一)(转）

    本博客属原创文章,欢迎转载!转载请务必注明出处:http://guoyunsky.iteye.com/blog/650694 本博客已迁移到本人独立博客: http://www.yun5u.com/ ...