涂根华
涂根华

javascript tab组件

今天研究了下javascript tab代码 到网上看了下 然后自己封装了一个tab组件 本来用jquery写tab是非常简单的事件 但是在做淘宝页面时候 淘宝现在不允许用jquery框架 哇靠 一定要用kissy框架 我就便不用 靠 我直接用javascript写 这应该没有错吧！靠 废话少说！还是要引用上次翻译的一段js 那段js有一个方法是 获取类名的封装方法！如下：

 

  
  
  
  
    
   
   
   
   
  1. <script>  
    2. 
   
   
   
   
  2. var GLOBAL = {};  
    3. 
   
   
   
   
  3.     GLOBAL.namespace=function(str){  
    4. 
   
   
   
   
  4.         var arr = str.split("."),o = GLOBAL;  
    5. 
   
   
   
   
  5.         for (i=(arr[0]=="GLOBAL")?1:0;i<arr.length;i++){  
    6. 
   
   
   
   
  6.             o[arr[i]] = o[arr[i]] || {};  
    7. 
   
   
   
   
  7.             o=o[arr[i]];      
    8. 
   
   
   
   
  8.         }      
    9. 
   
   
   
   
  9.     }  
    10. 
   
   
   
   
  10.     GLOBAL.namespace("DOM");  
    11. 
   
   
   
   
  11.     GLOBAL.DOM.getElementsByClassName = function(str,root,tag){  
    12. 
   
   
   
   
  12.         if(root){  
    13. 
   
   
   
   
  13.             root = typeof root =="string" ? document.getElementById(root) : root;  
    14. 
   
   
   
   
  14.         }else{  
    15. 
   
   
   
   
  15.             root = document.body;      
    16. 
   
   
   
   
  16.         }  
    17. 
   
   
   
   
  17.         tag = tag || "*";  
    18. 
   
   
   
   
  18.         var els = document.getElementsByTagName(tag),arr=[];  
    19. 
   
   
   
   
  19.         for(var i=0,n=els.length;i<n;i++){  
    20. 
   
   
   
   
  20.             for(var j=0,k=els[i].className.split(" "),l=k.length;j<l;j++){  
    21. 
   
   
   
   
  21.                 if(k[j]==str){  
    22. 
   
   
   
   
  22.                     arr.push(els[i]);  
    23. 
   
   
   
   
  23.                     break;      
    24. 
   
   
   
   
  24.                 }  
    25. 
   
   
   
   
  25.             }  
    26. 
   
   
   
   
  26.         }  
    27. 
   
   
   
   
  27.         return arr;  
    28. 
   
   
   
   
  28.     }  
    29. 
   
   
   
   
  29. </script> 
    30.

因为原审js是没有这个方法 只有封装下呢！下面是js代码：

 

  
  
  
  
    
   
   
   
   
  1. <script>  
    2. 
   
   
   
   
  2.  
    3. 
   
   
   
   
  3. function tabPlug(TabMenu,TabContent){  
    4. 
   
   
   
   
  4.     var list1 = GLOBAL.DOM.getElementsByClassName(TabMenu),  
    5. 
   
   
   
   
  5.         c1 = GLOBAL.DOM.getElementsByClassName(TabContent);  
    6. 
   
   
   
   
  6.         var hover = "hover"; //当点击时增加一个类  
    7. 
   
   
   
   
  7.         //下面是写个函数来获取索引值的函数,通过它获取当前点击在导航中的索引位置  
    8. 
   
   
   
   
  8.         var indexValue = function(self,obj){  
    9. 
   
   
   
   
  9.             for(var i=0;i<obj.length;i++){  
    10. 
   
   
   
   
  10.                 if(obj[i] == self) return i;      
    11. 
   
   
   
   
  11.             }     
    12. 
   
   
   
   
  12.         }  
    13. 
   
   
   
   
  13.         var index; //定于一个变量 来保存当前的索引  
    14. 
   
   
   
   
  14.         list1[0].className = hover; //给第一个列表项添加一个类名  
    15. 
   
   
   
   
  15.         for(var j=1;j<c1.length;j++){  
    16. 
   
   
   
   
  16.             c1[j].style.display = "none";     
    17. 
   
   
   
   
  17.         }  
    18. 
   
   
   
   
  18.         for(var k=0;k<list1.length;k++){  
    19. 
   
   
   
   
  19.             list1[k].onclick = function(){  
    20. 
   
   
   
   
  20.                 index = indexValue(this,list1);  
    21. 
   
   
   
   
  21.                 for(var m=0;m<list1.length;m++){  
    22. 
   
   
   
   
  22.                     list1[m].className = (m==index) ? hover : "";//高亮显示点击项并移除其他项高亮    
    23. 
   
   
   
   
  23.                 }     
    24. 
   
   
   
   
  24.                 for(var n=0;n<c1.length;n++){  
    25. 
   
   
   
   
  25.                     c1[n].style.display = (n==index) ? "block" : "none";//显示点击对应的选项区,隐藏其他  
    26. 
   
   
   
   
  26.                 }  
    27. 
   
   
   
   
  27.             }     
    28. 
   
   
   
   
  28.         }     
    29. 
   
   
   
   
  29. }         
    30. 
   
   
   
   
  30.  </script>  
    31.

这个js不怎么难理解 我知道你们都ok的 所以也没有什么必要解析！上面也有点注释！

所有代码如下：

 

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 
   
   
   
   
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
   
   
   
   
  3. <head> 
    4. 
   
   
   
   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5. 
   
   
   
   
  5. <title>无标题文档</title> 
    6. 
   
   
   
   
  6. <style> 
    7. 
   
   
   
   
  7. .tabnav{width:500px;height:25px;margin-left:100px; overflow:hidden;}  
    8. 
   
   
   
   
  8. .tabnav li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer}  
    9. 
   
   
   
   
  9. .tabnav li.hover{background:#047}  
    10. 
   
   
   
   
  10. .tabbox{width:500px;border:2px solid #047; overflow:hidden;}  
    11. 
   
   
   
   
  11. .tabbox div{margin:10px;line-height:20px}  
    12. 
   
   
   
   
  12. .tabbox .hide{ display:none;}  
    13. 
   
   
   
   
  13.  
    14. 
   
   
   
   
  14. .tabnav2{width:500px;height:25px;margin-left:100px; overflow:hidden;}  
    15. 
   
   
   
   
  15. .tabnav2 li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer}  
    16. 
   
   
   
   
  16. .tabnav2 li.hover{background:#047}  
    17. 
   
   
   
   
  17. .tabbox2{width:500px;border:2px solid #047; overflow:hidden;}  
    18. 
   
   
   
   
  18. .tabbox2 div{margin:10px;line-height:20px}  
    19. 
   
   
   
   
  19. .tabbox2 .hide{ display:none;}  
    20. 
   
   
   
   
  20. </style> 
    21. 
   
   
   
   
  21. <script> 
    22. 
   
   
   
   
  22. var GLOBAL = {};  
    23. 
   
   
   
   
  23.     GLOBAL.namespace=function(str){  
    24. 
   
   
   
   
  24.         var arr = str.split("."),o = GLOBAL;  
    25. 
   
   
   
   
  25.         for (i=(arr[0]=="GLOBAL")?1:0;i<arr.length;i++){  
    26. 
   
   
   
   
  26.             o[arr[i]] = o[arr[i]] || {};  
    27. 
   
   
   
   
  27.             oo=o[arr[i]];      
    28. 
   
   
   
   
  28.         }      
    29. 
   
   
   
   
  29.     }  
    30. 
   
   
   
   
  30.     GLOBAL.namespace("DOM");  
    31. 
   
   
   
   
  31.     GLOBAL.DOM.getElementsByClassName = function(str,root,tag){  
    32. 
   
   
   
   
  32.         if(root){  
    33. 
   
   
   
   
  33.             root = typeof root =="string" ? document.getElementById(root) : root;  
    34. 
   
   
   
   
  34.         }else{  
    35. 
   
   
   
   
  35.             root = document.body;      
    36. 
   
   
   
   
  36.         }  
    37. 
   
   
   
   
  37.         tagtag = tag || "*";  
    38. 
   
   
   
   
  38.         var els = document.getElementsByTagName(tag),arr=[];  
    39. 
   
   
   
   
  39.         for(var i=0,n=els.length;i<n;i++){  
    40. 
   
   
   
   
  40.             for(var j=0,k=els[i].className.split(" "),l=k.length;j<l;j++){  
    41. 
   
   
   
   
  41.                 if(k[j]==str){  
    42. 
   
   
   
   
  42.                     arr.push(els[i]);  
    43. 
   
   
   
   
  43.                     break;      
    44. 
   
   
   
   
  44.                 }  
    45. 
   
   
   
   
  45.             }  
    46. 
   
   
   
   
  46.         }  
    47. 
   
   
   
   
  47.         return arr;  
    48. 
   
   
   
   
  48.     }  
    49. 
   
   
   
   
  49. </script> 
    50. 
   
   
   
   
  50. </head> 
    51. 
   
   
   
   
  51.  
    52. 
   
   
   
   
  52. <body> 
    53. 
   
   
   
   
  53.  
    54. 
   
   
   
   
  54. <ul class="tabnav"> 
    55. 
   
   
   
   
  55.     <li class="list1">jQuery技术</li> 
    56. 
   
   
   
   
  56.     <li class="list1">CSS技术</li> 
    57. 
   
   
   
   
  57.     <li class="list1">xhtml技术</li> 
    58. 
   
   
   
   
  58. </ul> 
    59. 
   
   
   
   
  59. <div class="tabbox"> 
    60. 
   
   
   
   
  60.     <div class="c1"><img src="http://img.ffffound.com/static-data/assets/6/644432cc1eac546463ff2a9ebefc2e81cc861961_m.jpg" /></div> 
    61. 
   
   
   
   
  61.     <div class="c1 hide"><img src="http://img.ffffound.com/static-data/assets/6/8bd0ae01d96d6caad52ac97044e526edb6bf52f7_m.jpg" /></div> 
    62. 
   
   
   
   
  62.     <div class="c1 hide"><img src="http://img.ffffound.com/static-data/assets/6/34aff353e8a0c93b1826170035fb8ed6d9de9933_m.png"  /></div> 
    63. 
   
   
   
   
  63. </div> 
    64. 
   
   
   
   
  64. <br /><br /> 
    65. 
   
   
   
   
  65.   <ul class="tabnav"> 
    66. 
   
   
   
   
  66.     <li class="list2">jQuery技术</li> 
    67. 
   
   
   
   
  67.     <li class="list2">CSS技术</li> 
    68. 
   
   
   
   
  68.     <li class="list2">xhtml技术</li> 
    69. 
   
   
   
   
  69. </ul> 
    70. 
   
   
   
   
  70. <div class="tabbox"> 
    71. 
   
   
   
   
  71.     <div class="c2"><img src="http://img.ffffound.com/static-data/assets/6/644432cc1eac546463ff2a9ebefc2e81cc861961_m.jpg" /></div> 
    72. 
   
   
   
   
  72.     <div class="c2 hide"><img src="http://img.ffffound.com/static-data/assets/6/8bd0ae01d96d6caad52ac97044e526edb6bf52f7_m.jpg" /></div> 
    73. 
   
   
   
   
  73.     <div class="c2 hide"><img src="http://img.ffffound.com/static-data/assets/6/34aff353e8a0c93b1826170035fb8ed6d9de9933_m.png"  /></div> 
    74. 
   
   
   
   
  74. </div>    
    75. 
   
   
   
   
  75.  <script> 
    76. 
   
   
   
   
  76.  
    77. 
   
   
   
   
  77. function tabPlug(TabMenu,TabContent){  
    78. 
   
   
   
   
  78.     var list1 = GLOBAL.DOM.getElementsByClassName(TabMenu),  
    79. 
   
   
   
   
  79.         c1 = GLOBAL.DOM.getElementsByClassName(TabContent);  
    80. 
   
   
   
   
  80.         var hover = "hover"; //当点击时增加一个类  
    81. 
   
   
   
   
  81.         //下面是写个函数来获取索引值的函数,通过它获取当前点击在导航中的索引位置  
    82. 
   
   
   
   
  82.         var indexValue = function(self,obj){  
    83. 
   
   
   
   
  83.             for(var i=0;i<obj.length;i++){  
    84. 
   
   
   
   
  84.                 if(obj[i] == self) return i;      
    85. 
   
   
   
   
  85.             }     
    86. 
   
   
   
   
  86.         }  
    87. 
   
   
   
   
  87.         var index; //定于一个变量 来保存当前的索引  
    88. 
   
   
   
   
  88.         list1[0].className = hover; //给第一个列表项添加一个类名  
    89. 
   
   
   
   
  89.         for(var j=1;j<c1.length;j++){  
    90. 
   
   
   
   
  90.             c1[j].style.display = "none";     
    91. 
   
   
   
   
  91.         }  
    92. 
   
   
   
   
  92.         for(var k=0;k<list1.length;k++){  
    93. 
   
   
   
   
  93.             list1[k].onclick = function(){  
    94. 
   
   
   
   
  94.                 index = indexValue(this,list1);  
    95. 
   
   
   
   
  95.                 for(var m=0;m<list1.length;m++){  
    96. 
   
   
   
   
  96.                     list1[m].className = (m==index) ? hover : "";//高亮显示点击项并移除其他项高亮    
    97. 
   
   
   
   
  97.                 }     
    98. 
   
   
   
   
  98.                 for(var n=0;n<c1.length;n++){  
    99. 
   
   
   
   
  99.                     c1[n].style.display = (n==index) ? "block" : "none";//显示点击对应的选项区,隐藏其他  
    100. 
   
   
   
   
  100.                 }  
    101. 
   
   
   
   
  101.             }     
    102. 
   
   
   
   
  102.         }     
    103. 
   
   
   
   
  103. }         
    104. 
   
   
   
   
  104.  </script>    
    105. 
   
   
   
   
  105.  <script> 
    106. 
   
   
   
   
  106.  tabPlug("list1","c1");  
    107. 
   
   
   
   
  107.   tabPlug("list2","c2");  
    108. 
   
   
   
   
  108.  </script>   
    109. 
   
   
   
   
  109.    
    110. 
   
   
   
   
  110.  
    111. 
   
   
   
   
  111. </body> 
    112. 
   
   
   
   
  112. </html> 
    113.

下面也有压缩包下载 可以看看源码！

你可能感兴趣的:(JavaScript,JavaScript,职场,休闲,tab组件)

  • elementui中tabel组件的scope.$index的使用 小智玩前端 elementuivue.js前端
    tabel组件的自定义列模板中可以使用scope.row获取当前行的数据，而scope.$index获取的是当前行的数据在数组中的索引（tabel表格绑定的数据是一个数组，数组中每一个对象就相当于一行的数据）使用如下：编辑
  • 9种JavaScript数组去重的高阶方法 2501_90226133 javascriptjava算法
    给定一个数组[1,2,2,4,null,null,‘3’,‘abc’,3,5,4,1,2,2,4,null,null,‘3’,‘abc’,3,5,4]去除重复项。letarr=[1,2,2,4,null,null,‘3’,‘abc’,3,5,4,1,2,2,4,null,null,‘3’,‘abc’,3,5,4]1、利用对象的key唯一众所周知，对象的key不可重复，否则后者将覆盖前者。利用该特性
  • Ark-TS 语言：鸿蒙生态的高效开发利器，让我们用大白话说一说 harmonyos-next
    Ark-TS（华为专门为鸿蒙系统——就是华为自己的手机、平板、智能设备操作系统——设计的编程语言，基于TypeScript，一种比普通JavaScript更严格、能减少错误的语言）是鸿蒙应用开发的主力工具。它就像给开发者配备了一套趁手的工具包，让写代码又快又稳。简单来说，Ark-TS有几个厉害的地方：静态类型检查（写代码时必须给变量指定类型，比如数字、文字，这样电脑能在运行前就发现类型错误，避免程
  • 单例模式实现 后端
    一、是什么单例模式（SingletonPattern）：创建型模式，提供了一种创建对象的最佳方式，这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建在应用程序运行期间，单例模式只会在全局作用域下创建一次实例对象，让所有需要调用的地方都共享这一单例对象，如下图所示：二、实现在javascript中，实现一个单例模式可以用一个变量来标志当前的类已经创建过对象，如果下次获取当
  • 【Kivy App】Bubble气泡使用方法、常用属性和BubbleButton按钮实例 Botiway 移动APPKivypython
    在Kivy中，Bubble是一个用于显示浮动气泡的UI组件，通常用于显示上下文菜单、提示信息或其他浮动内容。Bubble可以包含多个子组件，例如BubbleButton（气泡按钮）。以下是Bubble的使用方法、常用属性以及BubbleButton的实例。1.基本使用方法首先，确保你已经安装了Kivy库。如果没有安装，可以使用以下命令进行安装：pipinstallkivy然后，你可以在Kivy应用
  • YashanDB备份 数据库
    本文内容来自YashanDB官网，原文内容请见https://doc.yashandb.com/yashandb/23.3/zh/%E6%95%B0%E6%8D%AE%...操作说明使用本方式执行备份时，要求数据库运行于OPEN状态且归档模式开启。备份命令仅SYS超级用户或拥有SYSDBA、SYSBACKUP权限的用户才可执行，备份语法详细说明请参考开发手册BACKUPDATABASE。若数据库在
  • 如何在 Vue 项目中实现动态组件加载，有什么应用场景？ 前端大白话 大白话前端八股vue.jsjavascript前端
    大白话如何在Vue项目中实现动态组件加载，有什么应用场景？什么是动态组件加载在Vue项目里，动态组件加载就是能够在程序运行时动态地决定要渲染哪个组件。打个比方，就像你去餐馆点菜，不同的时间你可能想吃不同的菜，动态组件加载就好比你可以随时更换菜单上的菜品，而不需要重新做一份新菜单。实现动态组件加载的步骤1.创建不同的组件首先，你得有几个不同的组件，就像餐馆里有不同的菜品一样。下面是三个简单的组件示例
  • JavaScript HTML DOM 节点列表 宇哥资料 JavaScriptjavascripthtml开发语言
    NodeList对象是一个从文档中获取的节点列表(集合)。NodeList对象类似HTMLCollection对象。一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是NodeList对象，而不是HTMLCollection对象。所有浏览器的childNodes属性返回的是NodeList对象。大部分浏览器的querySelectorAll()返回NodeLis
  • js知识点-拓展运算符和剩余运算符 lmryBC49 javascript开发语言ecmascript
    概述在现代JavaScript开发中，ES6引入的拓展运算符（SpreadOperator）和剩余运算符（RestOperator）让代码更加简洁和灵活。无论是数组、对象的拆分与合并，还是函数参数的处理，这两个运算符都是非常实用的工具。拓展运算符1.什么是拓展运算符？拓展运算符（SpreadOperator）由三个连续的点...表示，用于将一个可迭代对象（例如数组、字符串等）展开成多个元素。拓展运
  • 基于kylin-v10安装docker 神奇侠2024 rediskylin大数据docker
    1、下载地址Indexoflinux/static/stable/x86_64/2、下载docker-24.0.5.tgz.tar版本3、上传服务器解压tarxvfdocker-24.0.5.tgz.tar4、解压的docker拷贝或移动到/usr/bin/目录下cpdocker/*/usr/bin/5、编写docker.service文件加入Linux服务当中并开启守护进程vi/etc/syst
  • LoadRunner 11 性能测试全面教程 金融先生-Frank
    本文还有配套的精品资源，点击获取简介：LoadRunner11（LR11）是HP开发的一款企业级性能测试工具，支持多应用程序类型的负载测试，用于性能评估、瓶颈识别和系统优化。教程详细介绍LR11的组件功能、脚本开发、场景设置、测试执行、结果分析、性能指标监测、故障诊断以及自动化测试等，提供从初级到高级的完整学习路径。1.LoadRunner11(LR11)功能概述LoadRunner11(LR11
  • Vue.js 性能优化：虚拟 DOM 与虚拟滚动 vvilkim vuevue.js前端javascript
    在现代前端开发中，性能优化是一个永恒的话题。Vue.js作为一款流行的前端框架，提供了许多强大的工具和技术来提升应用的性能。其中，虚拟DOM和虚拟滚动是两个非常重要的概念。本文将深入探讨它们的原理、优势以及如何在Vue.js中使用它们来优化性能。什么是虚拟DOM？虚拟DOM（VirtualDOM）是Vue.js用于提升性能的核心技术之一。它是一个轻量级的JavaScript对象树，用于表示真实DO
  • 用python执行js代码：PyExecJS库详解 数据知道 2025年爬虫和逆向教程pythonjavascript爬虫数据采集nodejs
    更多内容请见：爬虫和逆向教程-专栏介绍和目录文章目录1.介绍和安装1.1PyExecJS介绍1.2安装JavaScript运行时1.3安装PyExecJS2.PyExecJS的基本使用2.1执行简单的JavaScript代码2.2使用外部JavaScript文件2.3先编译、后调用2.4传递参数和获取返回值3.PyExecJS的高级功能3.1指定JavaScript运行时3.2处理异步JavaSc
  • 【赵渝强老师】达梦数据库的归档模式 赵渝强老师 达梦（DM）数据库数据库oracle
    达梦数据库的备份与恢复都需要使用到重做日志文件。在默认的情况下，达梦数据库采用的非归档模式。通过执行下面的语句可以查看当前数据库实例的日志模式。SQL>selectarch_modefromv$database;#输出的信息如下：行号ARCH_MODE-------------------1N#提示：这里输出的N表示的是非归档模式。由于在非归档模式下，重做日志文件会发生覆盖的情况，从而造成数据的丢
  • 全网最详细！vue中使用flv.js 播放直播监控视频流 抄一下你代码 在vue中使用flv.js播放监控摄像头/直播vue.js
    老规矩，先安装flv.js插件npminstallflv.js在组件中的使用**注意事项放后面我怕你们不看呐！！！！1.必须在dom加载完成后再执行直播视频流的填充方法！2.在一个网页中最多同时容纳6个监控视频播放！第七个绝对加载不出来！3.在离开这个页面的时候必须销毁播放容器，不然会占用TCP个数，导致其他页面的监控也播放不了**importflvjsfrom"flv.js";//页面代码//1
  • 5-1 使用ECharts将MySQL数据库中的数据可视化 上课的牛马 实训大数据
    方法一：使用PythonFlask框架搭建API对于技术小白来说，使用ECharts将MySQL数据库中的数据可视化需要分步骤完成。以下是详细的实现流程：一、技术架构‌后端服务‌：使用PythonFlask框架搭建API（简单易学，适合新手）数据库连接‌：通过Python的pymysql库连接MySQL前端可视化‌：HTML+JavaScript+ECharts数据流向‌：MySQL数据库→Pyt
  • mysql修改表中所有字段不许为空_如何用SQL语句修改一个表的字段，让它不能为空... Asama浅间
    展开全部ALTERTABLE表ALTERCOLUMN[字段名]字段类型NOTNULLSQL语句1、基32313133353236313431303231363533e78988e69d8331333365643661本介绍：sql语句是对数据库进行操作的一种语言。结构化查询语言(StructuredQueryLanguage)简称SQL，结构化查询语言是一种数据库查询和程序设计语言，用于存取数据以
  • 高级前端面试题-React 圣诞小子 javascript面试
    react概念类组件和函数组件,什么时候用类组件获取组件实例类组件如何实现逻辑复用？高阶组件、renderprops选择hooks的优点状态逻辑复用；状态逻辑集中，易于理解；类组件不利于优化，比如不能很好的压缩为什么要用hooks,解决了什么问题同上react的context的使用场景共享对一个组件树全局的信息，不需要一层层传参受控组件和非受控组件非受控组件：数据只保存在内部state中；受控组件
  • 前端面试：[React] Recoil 里面 selector 支持哪些参数？ returnShitBoy 前端面试react.js
    在Recoil中，selector用于派生状态并可以通过传递不同的参数来实现更强大的功能。创建selector时，可以传入以下参数：1.key类型:string描述:是selector的唯一标识符。每个selector和atom都必须有一个唯一的key，否则会抛出错误。这个key用于在Recoil状态树中进行识别。示例：javascriptconstmySelector=selector({key
  • 使用Three.js渲染器创建炫酷3D场景
    引言在当今数字化的时代，3D图形技术正以其独特的魅力在各个领域掀起波澜。从影视制作到游戏开发，从虚拟现实到网页交互，3D场景以其强烈的视觉冲击力和沉浸式的体验，成为了吸引用户、传达信息的重要手段。而Three.js，作为一款功能强大且广受欢迎的JavaScript3D库，为我们提供了便捷、高效的途径来创建令人炫目的3D场景。本文将深入探讨使用Three.js渲染器创建炫酷3D场景的方方面面，带领读
  • 对数据库的总结 java
    一、数据库基础1.数据库是一个用于存储和操作数据的文件系统2.关系型数据库：是基于二维表存储的，每个表格由列和行组成，列代表属性，行代表约束，数据的组织和查询更加方便和高效。3.库表操作结构：MySQL和Oracle，通用工具Navicat4.SQL语句的库表操作：createtable：创建表altertable：修改表droptable：删除表truncatetable：删除表中的所有数据，但
  • 用Babel操作AST实现JavaScript代码的自动化生成与转换
    目录目录环境搭建代码：修改AST的逻辑重命名函数名重命名变量并修改变量值函数调用替换控制流扁平化还原删除未使用的变量对象属性简化条件表达式优化表达式还原环境搭建安装环境npminstall@babel/parser@babel/traverse@babel/generator@babel/typesast转换的代码框架constfs=require('fs');constvm=require('n
  • 为下面的程序添加数据保存功能，以便下次打开时，显示原有数据 2301_79698214 前端javascripthtml
    为下面的程序添加数据保存功能，以便下次打开时，显示原有数据。tr{height:60px;}td,th{width:150px;text-align:center;border:1pxsolidred;}functionaddNode(){vartab=document.getElementById("tab");vartr=document.createElement("tr");vartd=d
  • lua 面向对象(继承、封装、多态) yxlalm lualua面向对象继承封装多态
    封装Object={}Object.id=1functionObject:new()localobj={}self.__index=selfsetmetatable(obj,self)returnobjendlocalmyObj=Object:new()myObj.id=3print(myObj)print(Object)print(myObj.id)继承obj.base=self保存基类方法fu
  • Lua的面向对象，封装，继承，多态 顽石2019
    概述我们总所周知对象是由属性和方法组成的，要用lua要描述一个对象，也必然要有这两个特性，属性和方法。lua的基本结构是table，所以Lua的类，其实都是table，因为它可以存储普通的变量又可以存储方法，我们利用table就可以描述一个对象的属性和方法。对象其实lua要模拟一个对象，关键就在于__index设置元表索引这块，它主要起到索引失败后该怎么办，如果它指向一张表，那么__index索引
  • 基于AOP注解+Redisson实现Cache-Aside缓存模式实战 @淡 定 缓存
    (2)缓存更新注解一、场景需求在高并发系统中，缓存是提升性能的关键组件。而Cache-Aside模式作为最常用的缓存策略之一，要求开发者手动管理缓存与数据库的交互。本文将结合自定义注解与Redisson客户端，实现声明式的缓存管理方案。二、方案亮点零侵入性：通过注解实现缓存逻辑完整防护：解决缓存穿透/击穿/雪崩问题⚡双删策略：保障数据库与缓存一致性️逻辑删除：支持数据恢复与审计需求三、核心实现1.
  • 【lua】面向对象 岚花落_ lua
    建议提前学习https://www.runoob.com/lua/lua-metatables.html面向对象特征1）封装：指能够把一个实体的信息、功能、响应都装入一个单独的对象中的特性。2）继承：继承的方法允许在不改动原程序的基础上对其进行扩充，这样使得原功能得以保存，而新功能也得以扩展。这有利于减少重复编码，提高软件的开发效率。3）多态：同一操作作用于不同的对象，可以有不同的解释，产生不同的
  • C++ STL常用库的使用方法（一） 小崔的技术博客 算法c++算法开发语言
    文章目录（0）C++STL介绍（0）C++STL组件(一)Vector容器1）创建vector2）尾部元素扩张3）访问Vector元素4)元素的删除5)元素的排序6)向量的大小(二)String基本字符系列容器1）创建String对象2)给String赋值(三)set集合容器1）创建set集合对象2)元素的插入与中序遍历3)元素的反向遍历4)元素的删除5)元素的检索(四)map映射容器1）map创
  • Lua重点：面向对象 （封装、继承、多态） 码穿地球 Lua程序设计lua
    Lua重点：面向对象1，封装--面向对象类基于table来实现--面向对象的封装Object={}Object.id=1functionObject:Test()--冒号自动调用这个函数的对象（Object）作为第一个参数传入的方法print("id是"..self.id)--相当于将Test作为Object的成员方法endfunctionObject:new()localobj={}--建立一个
  • vpc网络的原理 会探索的小学生 网络
    一、VPC的基本概念和功能VPC是一个专有的云上私有网络，允许用户在公共云上配置和管理一个逻辑隔离的网络区域。用户可以自定义IP地址范围、创建子网、配置路由表和网络网关。VPC提供了类似于传统数据中心的安全和可配置的私有网络空间，同时又具备云计算的弹性和可扩展性‌二、VPC的关键组件和技术细节vSwitch‌：交换机，组成专有网络的基础网络设备，用于连接不同的云资源。‌vRouter‌：路由器，作
  • PHP，安卓，UI，java，linux视频教程合集 cocos2d-x小菜 javaUIlinuxPHPandroid
    ╔-----------------------------------╗┆                           
  • zookeeper admin 笔记 braveCS zookeeper
      Required Software 1) JDK>=1.6 2)推荐使用ensemble的ZooKeeper(至少3台)，并run on separate machines 3)在Yahoo!，zk配置在特定的RHEL boxes里，2个cpu，2G内存，80G硬盘   数据和日志目录 1)数据目录里的文件是zk节点的持久化备份，包括快照和事务日
  • Spring配置多个连接池 easterfly spring
    项目中需要同时连接多个数据库的时候，如何才能在需要用到哪个数据库就连接哪个数据库呢？ Spring中有关于dataSource的配置：     <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"   &nb
  • Mysql 171815164 mysql
    例如，你想myuser使用mypassword从任何主机连接到mysql服务器的话。 GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%'IDENTIFIED BY 'mypassword' WI TH GRANT OPTION; 如果你想允许用户myuser从ip为192.168.1.6的主机连接到mysql服务器，并使用mypassword作
  • CommonDAO（公共/基础DAO） g21121 DAO
            好久没有更新博客了，最近一段时间工作比较忙，所以请见谅，无论你是爱看呢还是爱看呢还是爱看呢，总之或许对你有些帮助。         DAO(Data Access Object)是一个数据访问（顾名思义就是与数据库打交道）接口，DAO一般在业
  • 直言有讳 永夜-极光 感悟随笔
      1.转载地址:http://blog.csdn.net/jasonblog/article/details/10813313   精华: “直言有讳”是阿里巴巴提倡的一种观念，而我在此之前并没有很深刻的认识。为什么呢？就好比是读书时候做阅读理解，我喜欢我自己的解读，并不喜欢老师给的意思。在这里也是。我自己坚持的原则是互相尊重，我觉得阿里巴巴很多价值观其实是基本的做人
  • 安装CentOS 7 和Win 7后，Win7 引导丢失 随便小屋 centos
    一般安装双系统的顺序是先装Win7，然后在安装CentOS，这样CentOS可以引导WIN 7启动。但安装CentOS7后，却找不到Win7 的引导，稍微修改一点东西即可。 一、首先具有root 的权限。      即进入Terminal后输入命令su，然后输入密码即可 二、利用vim编辑器打开/boot/grub2/grub.cfg文件进行修改 v
  • Oracle备份与恢复案例 aijuans oracle
    Oracle备份与恢复案例 一. 理解什么是数据库恢复当我们使用一个数据库时，总希望数据库的内容是可靠的、正确的，但由于计算机系统的故障（硬件故障、软件故障、网络故障、进程故障和系统故障）影响数据库系统的操作，影响数据库中数据的正确性，甚至破坏数据库，使数据库中全部或部分数据丢失。因此当发生上述故障后，希望能重构这个完整的数据库，该处理称为数据库恢复。恢复过程大致可以分为复原(Restore)与
  • JavaEE开源快速开发平台G4Studio v5.0发布 無為子
      我非常高兴地宣布,今天我们最新的JavaEE开源快速开发平台G4Studio_V5.0版本已经正式发布。   访问G4Studio网站 http://www.g4it.org   2013-04-06 发布G4Studio_V5.0版本 功能新增 (1). 新增了调用Oracle存储过程返回游标，并将游标映射为Java List集合对象的标
  • Oracle显示根据高考分数模拟录取 百合不是茶 PL/SQL编程oracle例子模拟高考录取学习交流
    题目要求: 1,创建student表和result表 2,pl/sql对学生的成绩数据进行处理 3,处理的逻辑是根据每门专业课的最低分线和总分的最低分数线自动的将录取和落选     1,创建student表,和result表 学生信息表; create table student( student_id number primary key,--学生id
  • 优秀的领导与差劲的领导 bijian1013 领导管理团队
    责任 优秀的领导：优秀的领导总是对他所负责的项目担负起责任。如果项目不幸失败了，那么他知道该受责备的人是他自己，并且敢于承认错误。 差劲的领导：差劲的领导觉得这不是他的问题，因此他会想方设法证明是他的团队不行，或是将责任归咎于团队中他不喜欢的那几个成员身上。 努力工作 优秀的领导：团队领导应该是团队成员的榜样。至少，他应该与团队中的其他成员一样努力工作。这仅仅因为他
  • js函数在浏览器下的兼容 Bill_chen jquery浏览器IEDWRext
      做前端开发的工程师，少不了要用FF进行测试，纯js函数在不同浏览器下，名称也可能不同。对于IE6和FF，取得下一结点的函数就不尽相同：   IE6：node.nextSibling,对于FF是不能识别的；   FF：node.nextElementSibling,对于IE是不能识别的； 兼容解决方式：var Div = node.nextSibl
  • 【JVM四】老年代垃圾回收：吞吐量垃圾收集器(Throughput GC) bit1129 垃圾回收
    吞吐量与用户线程暂停时间   衡量垃圾回收算法优劣的指标有两个： 吞吐量越高，则算法越好 暂停时间越短，则算法越好 首先说明吞吐量和暂停时间的含义。   垃圾回收时，JVM会启动几个特定的GC线程来完成垃圾回收的任务，这些GC线程与应用的用户线程产生竞争关系，共同竞争处理器资源以及CPU的执行时间。GC线程不会对用户带来的任何价值，因此，好的GC应该占
  • J2EE监听器和过滤器基础 白糖_ J2EE
    Servlet程序由Servlet，Filter和Listener组成，其中监听器用来监听Servlet容器上下文。 监听器通常分三类：基于Servlet上下文的ServletContex监听，基于会话的HttpSession监听和基于请求的ServletRequest监听。   ServletContex监听器 ServletContex又叫application
  • 博弈AngularJS讲义(16) - 提供者 boyitech jsAngularJSapiAngularProvider
      Angular框架提供了强大的依赖注入机制，这一切都是有注入器(injector)完成. 注入器会自动实例化服务组件和符合Angular API规则的特殊对象，例如控制器，指令，过滤器动画等。   那注入器怎么知道如何去创建这些特殊的对象呢？ Angular提供了5种方式让注入器创建对象，其中最基础的方式就是提供者(provider), 其余四种方式(Value, Fac
  • java-写一函数f(a,b)，它带有两个字符串参数并返回一串字符，该字符串只包含在两个串中都有的并按照在a中的顺序。 bylijinnan java
    public class CommonSubSequence { /** * 题目：写一函数f(a,b)，它带有两个字符串参数并返回一串字符，该字符串只包含在两个串中都有的并按照在a中的顺序。 * 写一个版本算法复杂度O(N^2)和一个O(N) 。 * * O(N^2)：对于a中的每个字符，遍历b中的每个字符，如果相同，则拷贝到新字符串中。 * O(
  • sqlserver 2000 无法验证产品密钥 Chen.H sqlwindowsSQL ServerMicrosoft
    在 Service Pack 4 (SP 4), 是运行 Microsoft Windows Server 2003、 Microsoft Windows Storage Server 2003 或 Microsoft Windows 2000 服务器上您尝试安装 Microsoft SQL Server 2000 通过卷许可协议 (VLA) 媒体。 这样做, 收到以下错误信息CD KEY的 SQ
  • [新概念武器]气象战争 comsci
           气象战争的发动者必须是拥有发射深空航天器能力的国家或者组织....        原因如下:        地球上的气候变化和大气层中的云层涡旋场有密切的关系,而维持一个在大气层某个层次
  • oracle 中 rollup、cube、grouping 使用详解 daizj oraclegroupingrollupcube
    oracle 中 rollup、cube、grouping 使用详解 -- 使用oracle 样例表演示 转自namesliu -- 使用oracle 的样列库，演示 rollup, cube, grouping 的用法与使用场景    --- ROLLUP ， 为了理解分组的成员数量，我增加了 分组的计数  COUNT(SAL)   
  • 技术资料汇总分享 Dead_knight 技术资料汇总 分享
    本人汇总的技术资料，分享出来，希望对大家有用。 http://pan.baidu.com/s/1jGr56uE 资料主要包含： Workflow->工作流相关理论、框架(OSWorkflow、JBPM、Activiti、fireflow...) Security->java安全相关资料(SSL、SSO、SpringSecurity、Shiro、JAAS...) Ser
  • 初一下学期难记忆单词背诵第一课 dcj3sjt126com englishword
    could 能够 minute 分钟 Tuesday 星期二 February 二月 eighteenth 第十八 listen 听 careful 小心的，仔细的 short 短的 heavy 重的 empty 空的 certainly 当然 carry 携带；搬运 tape 磁带 basket 蓝子 bottle 瓶 juice 汁，果汁 head 头；头部
  • 截取视图的图片, 然后分享出去 dcj3sjt126com OSObjective-C
    OS 7 has a new method that allows you to draw a view hierarchy into the current graphics context. This can be used to get an UIImage very fast. I implemented a category method on UIView to get the vi
  • MySql重置密码 fanxiaolong MySql重置密码
    方法一:  在my.ini的[mysqld]字段加入： skip-grant-tables 重启mysql服务，这时的mysql不需要密码即可登录数据库  然后进入mysql mysql>use mysql;  mysql>更新 user set password=password('新密码') WHERE User='root'; mysq
  • Ehcache（03）——Ehcache中储存缓存的方式 234390216 ehcacheMemoryStoreDiskStore存储驱除策略
    Ehcache中储存缓存的方式   目录 1     堆内存（MemoryStore） 1.1     指定可用内存 1.2     驱除策略 1.3     元素过期 2   &nbs
  • spring mvc中的@propertysource jackyrong spring mvc
      在spring mvc中，在配置文件中的东西，可以在java代码中通过注解进行读取了： @PropertySource  在spring 3.1中开始引入 比如有配置文件 config.properties mongodb.url=1.2.3.4 mongodb.db=hello 则代码中   @PropertySource(&
  • 重学单例模式 lanqiu17 单例Singleton模式
    最近在重新学习设计模式，感觉对模式理解更加深刻。觉得有必要记下来。 第一个学的就是单例模式，单例模式估计是最好理解的模式了。它的作用就是防止外部创建实例，保证只有一个实例。 单例模式的常用实现方式有两种，就人们熟知的饱汉式与饥汉式，具体就不多说了。这里说下其他的实现方式 静态内部类方式: package test.pattern.singleton.statics; publ
  • .NET开源核心运行时，且行且珍惜 netcome java.net开源
    背景 2014年11月12日，ASP.NET之父、微软云计算与企业级产品工程部执行副总裁Scott Guthrie，在Connect全球开发者在线会议上宣布，微软将开源全部.NET核心运行时，并将.NET 扩展为可在 Linux 和 Mac OS 平台上运行。.NET核心运行时将基于MIT开源许可协议发布，其中将包括执行.NET代码所需的一切项目——CLR、JIT编译器、垃圾收集器（GC）和核心
  • 使用oscahe缓存技术减少与数据库的频繁交互 Everyday都不同 Web高并发oscahe缓存
    此前一直不知道缓存的具体实现，只知道是把数据存储在内存中，以便下次直接从内存中读取。对于缓存的使用也没有概念，觉得缓存技术是一个比较”神秘陌生“的领域。但最近要用到缓存技术，发现还是很有必要一探究竟的。   缓存技术使用背景：一般来说，对于web项目，如果我们要什么数据直接jdbc查库好了，但是在遇到高并发的情形下，不可能每一次都是去查数据库，因为这样在高并发的情形下显得不太合理——
  • Spring+Mybatis 手动控制事务 toknowme mybatis
    @Override    public boolean testDelete(String jobCode) throws Exception {       boolean flag = false;  &nbs
  • 菜鸟级的android程序员面试时候需要掌握的知识点 xp9802 android
    熟悉Android开发架构和API调用 掌握APP适应不同型号手机屏幕开发技巧 熟悉Android下的数据存储  熟练Android Debug Bridge Tool 熟练Eclipse/ADT及相关工具  熟悉Android框架原理及Activity生命周期 熟练进行Android UI布局 熟练使用SQLite数据库； 熟悉Android下网络通信机制，S
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他