公子清
公子清

HTML系列：多种方式实现选项卡

多种方式实现选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tab选项卡</title>
    <style>
        * {
            margin:0 auto;
            padding:0 auto;
        }
         .tabBox {
             margin: 20px auto;
             width:500px;
         }
         .tabBox ul {
             position:relative;
             top:1px;
             right:40px;
             /* 相对于之前的位置向下移动1px,使边框重合 */
         }
         .tabBox ul li {
            display: inline-block;
            /* 同一行，块标签 */
            margin-right:10px;
            padding:0 10px;
            line-height: 33px;
            border:1px solid #AAA;
            cursor: pointer;
         }
         .tabBox ul li.active {
             color:lightcoral;
             font-weight:bold;
             border-bottom-color:#fff;
             /* 当前li的边框覆盖率div的边框，我们让li的下边框为背景颜色白色，这样看上去就像没边框 */
         }
          .tabBox div {
              display: none;
              line-height: 148px;
              text-align: center;
              border:1px solid #AAA;
          }
          .tabBox div.active {
              display: block;
              /* div .active加空格是后代筛选，先搜索div在div中筛选，div .active不加空格当前div标签的二次筛选，同级筛选 */
          }
    </style>
</head>
<body>
    <!-- div.tabBox#tabBox>(ul>li*3)+(div*3)  [Tab]在括号前按下Tab键多行添加标签    -->
    <!-- 整体大盒子 -->
    <div class="tabBox" id="tabBox">
        <!-- 上面三个tab签 -->
        <ul>
            <li class="active">新闻</li>
            <li>音乐</li>
            <li>电影</li>
        </ul>
          <!-- tab对应切换的内容 -->
        <div class="active">金三胖访华</div>
        <div>需要你陪</div>
        <div>复仇者联盟</div>
    </div>
     <script>
        //   思路： 1.给所有的ul绑定点击事件，当点击任何一个li的时候，都做第二步操作
        //         2.可以先让所有的li && div的class都为空（xxx.className=''）, 再让当前点击的这个li和对应的div有className这个样式类即可
        //获取id为tabBox的所有li和div
        var tabBox = document.getElementById('tabBox');
        var tabList = tabBox.getElementsByTagName('li');
        var divList = tabBox.getElementsByTagName('div');
        //重复操作用循环
    //=>自定义属性方式
        // for (var i = 0; i < tabList.length; i++) {
        //     //=>每一轮循环的时候，给每一个li设置一个自定义属性‘zzzz’,存储的值是各自的索引
        //     //  TAB-List
        //     //   {
        //     //       0:{zzzIndex:0,...},
        //     //       1:{zzzIndex:1,...},
        //     //       2:{zzzIndex:2,...},
        //     //       length:3
        //     //   }
        //     tabList[i]['zfIndex'] = i ;
        //     console.dir(tabList[i]);
        //     tabList[i].onclick = function() {
        //         //this:代表的是当前点击的这个li
        //         changeTab(this.zfIndex); //=>需要索引
        //     }
        // }
      //=>第二种方式将var改为lei
        // for (let i = 0; i < tabList.length; i++) {
        //     tabList[i].onclick = function() {
        //         changeTab(i);
        //     }
        // }
      //=>第三种方式在tabList外层在包一个function
    //   for (var i = 0; i < tabList.length; i++) {
    //       ~function (i) {
    //         tabList[i].onclick = function() {
    //             changeTab(i);
    //         }
    //     } (i);
    //     }
     //=>第四种方式在tabList外层在包一个function
     for (var i = 0; i < tabList.length; i++) { 
            tabList[i].onclick = function(i) {
                return function (){
                    changeTab(i);
                }
        } (i);
        }
    //*不行的代码
        // for (var i = 0; i < tabList.length; i++) {
        //      // tabList[i] 每一轮循环当前要操作的li对象，i是变量索引
        //      tabList[i].onclick = function() {
        //          //=>给当前元素某一个事件绑定一个方法，绑定的时候方法没有执行（属于创建）当在页面中手动触发点击事件的时候绑定的方法就会执行
        //         //  i=0 tabList[0].οnclick=function..
        //         //  i=1 tabList[1].οnclick=function...
        //         //  i=2 tabList[2].οnclick=function...
        //         alert(i);
        //         changeTab(i);//=>需要把当前点击的这个li的索引传递进来
        //         //分析：第一次循环
        //         // i=0 tabList[0].onclick = function (){
        //         //    "changeTab(i);"
        //         // };
        //         // i++ 第二次循环
        //         // i=1 i=0 tabList[1].onclick = function (){
        //         //    "changeTab(i);"
        //         // };
        //         // i++ 第三次循环
        //         // i=2 i=0 tabList[2].onclick = function (){
        //         //    "changeTab(i);"
        //         // };
        //         // i++
        //         // i=3 循环结束
        //      }
            
        // }


        //=>第二中不用循环的方法
        // tabList[0].onclick = function (){
        //     changeTab(0);
        // }
        // tabList[1].onclick = function (){
        //     changeTab(1);
        // }
        // tabList[2].onclick = function (){
        //     changeTab(2);
        // }
        //=>封装一个方法完成页卡切换
        function changeTab(n){
            //=>n:形参变量，当执行这个方法的时候，会把当前点击的这个li的索引传递过来

            //=>1.清空所有选中样式
            for (var i = 0 ; i < tabList.length; i++){
                tabList[i].className = '';
                divList[i].className = '';
            }
            //=>2.当前点击的有选中样式
            tabList[n].className='active';
            divList[n].className='active';
        }
        // 思考：
        //    1.思考n多种实现选项卡的思路
        //    2.隔行变色实现三行变色，并且基于js实现鼠标滑过高亮显示，鼠标离开回归原有样式
      </script>
</body>
</html>

运行效果如下：
HTML系列：多种方式实现选项卡_第1张图片

你可能感兴趣的:(HTML系列,CSS系列)

  • Docker 安装 sentinel TsengOnce Dockerdockersentinel容器
    Docker安装系列1、拉取[root@Tseng~]#dockerpullbladex/sentinel-dashboardUsingdefaulttag:latestlatest:Pullingfrombladex/sentinel-dashboard4abcf2066143:Pullcomplete1ec1e81da383:Pullcomplete56bccb36a894:Pullcompl
  • 深入理解Java集合框架：构建高效、灵活的数据管理方案 星河浪人 java开发语言
    深入理解Java集合框架：构建高效、灵活的数据管理方案引言Java集合框架（JavaCollectionsFramework,JCF）是Java语言提供的一套用于表示和操作集合的统一架构。它包含了一系列的接口和类，用于存储和操作对象集合，如列表（List）、集合（Set）、映射（Map）和队列（Queue）等。集合框架的设计初衷是为了提供一套灵活、可重用且类型安全的集合数据结构，帮助开发者以统一和
  • Sass (Scss) 与 Less 的区别与选择 智能编织者 sassscssless
    Sass与Less的区别与选择1.语法差异2.特性与支持3.兼容性4.选择建议在前端开发中，CSS预处理器如Sass（SyntacticallyAwesomeStylesheets）和Less被广泛使用，它们通过引入变量、嵌套规则、混合、函数等特性，使CSS的开发过程更加高效和灵活。Sass和Less作为两大主流CSS预处理器，各自具有独特的优点和特性。本文将详细探讨Sass（特别是其语法扩展Sc
  • 《算法笔记》8.1小节——搜索专题-＞深度优先搜索（DFS）问题 C: 【递归入门】组合+判断素数 圣保罗的大教堂 《算法笔记》算法
    题目描述已知n个整数b1,b2,…,bn以及一个整数k（k＜n）。从n个整数中任选k个整数相加，可分别得到一系列的和。例如当n=4，k＝3，4个整数分别为3，7，12，19时，可得全部的组合与它们的和为：3＋7＋12=223＋7＋19＝297＋12＋19＝383＋12＋19＝34。现在，要求你计算出和为素数共有多少种。例如上例，只有一种的和为素数：3＋7＋19＝29。输入第一行两个整数：n,k（1
  • 微信小程序点餐系统的设计与实现（开题报告+源码+论文）_在线点餐外卖系统设计与实现文献 2301_82243979 程序员微信小程序小程序
    二.技术环境jdk版本：1.8及以上ide工具：Eclipse或者IDEA，微信小程序开发工具数据库:mysql5.7（必须5.7）编程语言:Javajava框架：ssmmaven:3.6.1详细技术：HTML+CSS+JAVA+SSM+MYSQL+VUE+MAVEN+微信开发工具三.功能设计本基于微信小程序的外卖点餐系统的设计与实现有管理员，外卖员，餐厅，用户共四个角色。管理员功能有个人中心，外
  • Caddy2使用阿里云DNS申请https证书，利用阿里云DNS境内外不同解析给Gone文档做一个同域名的国内镜像站点 dapeng-大鹏 大鹏运维记录caddyhttpsdockerdocker-compose
    我从头到尾实现了一个Golang的依赖注入框架，并且集成了gin、xorm、redis、cron、消息中间件等功能；自己觉得还挺好用的，并且打算长期维护！github地址：https://github.com/gone-io/gone文档原地址：https://goner.fun/zh/guide/auto-gen-priest.html请帮忙在github上点个⭐️吧，这对我很重要；万分感谢！！
  • [论文解读] 多机器人系统动态任务分配综述 「已注销」 算法
    https://www.emerald.com/insight/content/doi/10.1108/IR-04-2020-0073/full/html多机器人/多智能体动态环境任务分配决策动态任务调度策略该文章主要是想对目前stateoftheart多机器人动态任务调度策略做一个全面的评价，注意定语挺多的，里面的方法也较多为近几年的智能调度那些算法。衡量方法主要考虑到了应用场景、限制、目标方程
  • 【笔记】Helm-1 介绍 许科大 Helm云原生kubernetesk8s
    欢迎欢迎使用Helm文档。Helm是Kubernetes的包管理器，您也可以在CNCFHelm项目过程报告阅读详细的背景信息。HelmHelmProjectJourneyReport|CNCF文档构成Helm有大量的文档。高级组织概述会让您知道在哪里查找特定内容。1、教程如果您是新手，从这里开始，手把手带您通过一系列的步骤创建您的第一个Helmchart。Helm|Docs2、主题引导以相当高的水
  • Python API接口 君王的羔羊 PythonAIpython
    人工智能机器人EverydayWechat老李API图灵机器人：http://www.turingapi.com/（需求实名制认证，并每天免费数量只有100条）青云客智能聊天机器人：http://api.qingyunke.com/（无须申请，无数量限制，但有点智障，分手神器。分手神器，慎用）智能闲聊（腾讯）：https://ai.qq.com/product/nlpchat.shtml(申请使用
  • SpringBoot设置过滤器（Filter）或拦截器（Interceptor）的执行顺序：@Order注解、setOrder()方法 pan_junbiao SpringSpringBoot我の原创springbootjava后端
    JavaWeb过滤器、拦截器、监听器，系列文章：（1）过滤器（Filter）的使用：《Servlet过滤器（Filter）的使用：Filter接口、@WebFilter注释》《SpringMVC使用过滤器（Filter）解决中文乱码》《SpringBoot过滤器（Filter）的使用：Filter接口、FilterRegistrationBean类配置、@WebFilter注释》《SpringBo
  • SpringBoot使用AspectJ实现AOP记录接口：请求日志、响应日志、异常日志 pan_junbiao SpringSpringBoot我の原创springboot后端java
    Spring面向切面编程（AOP），系列文章：《Spring面向切面编程（AOP）的简单实例》《Spring使用AspectJ的注解式实现AOP面向切面编程》《SpringBoot使用AspectJ实现AOP记录接口：请求日志、响应日志、异常日志》《SpringBoot使用AspectJ的@Around注解实现AOP全局记录接口：请求日志、响应日志、异常日志》1、AspectJ框架的简介Aspec
  • 自动化测试：灵活书写XPATH定位路径 ZJ_star_1220 pythonhtmlcss前端python
    进行UI自动化测试过程中XPATH定位是使用最多的定位方法，但是有时候直接复制出来的XPATH路径会比较长，所以就需要掌握一些更高级的方法，通过询问AI，最终得到了以下方法，感觉很有用，所以记录下来一、基础定位语法绝对路径与相对路径绝对路径：以/开头，从根节点逐层定位（如/html/body/div/input），路径长且易受页面结构调整影响相对路径：以//开头，直接定位目标元素（如//input
  • 两会聚焦科技金融创新，赛逸展2025成重要实践平台 赛逸展张胜 科技金融
    在今年两会的热烈讨论中，科技金融创新成为核心议题之一，引发各界高度关注。国家对于科技金融的重视达到新高度，一系列旨在推动科技创新与金融深度融合的政策呼之欲出，力求为硬科技企业的成长注入强劲动力。会议期间，中国人民银行行长潘功胜透露，人民银行正携手证监会、科技部等部门，全力筹备在债券市场推出“科技板”。这一举措旨在通过创新金融工具，为科技型企业开辟更为便捷的融资渠道。通过完善发行交易制度，创新风险分
  • HTML星球大冒险之路线图 我自纵横2023 HTML教程html前端
    第一章：欢迎来到HTML星球！1.1宇宙的基石：HTML是什么？比喻：HTML是网页世界的「乐高积木」，用标签搭建一切可见内容目标：理解HTML的作用，掌握第一个声明1.2认识HTML文档的「骨骼结构」趣味比喻：HTML文档像汉堡包是包装盒（根标签）是配料表（元信息）是汉堡本体（可见内容）示例：打印「Hello,HTML星球！」第二章：标签大狂欢：从基础到变形2.1文本标签的魔法咒语✨幽默教学：：
  • Python漂浮爱心代码 Want595 趣味编程python开发语言
    目录系列文章前言小海龟漂浮爱心完整代码尾声系列文章序号直达链接表白系列1Python无法拒绝的表白界面（完整代码）_python玫瑰花雨编程-CSDN博客2Python满屏飘字表白代码（完整代码）_抖音同款满屏飘字表白代码(python版)-CSDN博客3Python无限弹窗满屏表白代码（完整代码）_python弹窗满屏幕-CSDN博客4Python李峋同款跳动的爱心（完整代码）_python绘制
  • React 和 Vue _使用区别 开心小老虎 react知识点+组件vue3知识点+组件前端知识点vue.jsreact.js前端
    目录一、框架介绍1.Vue2.React二、框架结构1.创建应用2.框架结构三、使用区别1.单页面组成2.样式3.显示响应式数据4.响应式html标签属性5.控制元素显隐6.条件渲染7.渲染列表react和vue是目前前端比较流行的两大框架，前端程序员应该将两种框架都掌握，本文总结一些基本知识点的使用区别。一、框架介绍1.VueVue是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。
  • html5使用本地sqlite数据库 小祁爱编程 sqlitehtml5bigdata
    html5使用本地sqlite数据库本地数据库概述在HTML5中，大大丰富了客户端本地可以存储的内容，添加了很多功能将原本必须要保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序性能，减轻了服务器的负担，使用Web时代重新回到了“客户端为重、服务器端为轻”的时代。HTML5中内置了两种本地数据库，一种是SQLite,一种是indexedDBSQLite数据库使用操作本地数据库的
  • HTML网页中添加视频的代码 冬瓜生鲜 JavaWeb
           //非原创（当时忘记保存大佬连接了，不知道是谁的了，所以没有转载链接，见谅）只需要把名字改改就行如果要实现自动播放：改下这个：controlsautoplaymuted;       
  • apt/yum/dnf/dkg命令详细：软件安装 黑子哥呢？ 运维linux运维
    apt命令apt（AdvancedPackageTool）是Debian及其衍生版（如Ubuntu）中广泛使用的软件包管理工具。它提供了一系列简洁且易于记忆的命令，用于查找、安装、升级、删除和管理软件包。下面将对apt命令进行详细解析。1.apt命令的基本用法apt命令的基本语法如下：apt[options][command][package...]options：可选参数，用于指定命令的行为，如
  • LLM推理和优化（1）：基本概念介绍 AndrewHZ AI算法工程师面试指北算法LLM语言模型推理优化KVCacheDeepSeek注意力机制
    一、LLM推理的核心过程：自回归生成LLM（如DeepSeek、ChatGPT、LLaMA系列等）的推理本质是自回归生成：从初始输入（如[CLS]或用户prompt）开始，逐token预测下一个词，直到生成结束符（如[EOS]）。其核心分为两个阶段：1.Initialization阶段（初始化）目标：准备第一个token的生成条件。关键步骤：输入编码：将初始prompt转换为token序列（如[C
  • 工程化与框架系列（32）--前端测试实践指南 一进制ᅟᅠ        ‌‍‎‏  前端工程化与框架前端
    前端测试实践指南引言前端测试是保证应用质量的重要环节。本文将深入探讨前端测试的各个方面，包括单元测试、集成测试、端到端测试等，并提供实用的测试工具和最佳实践。测试概述前端测试主要包括以下类型：单元测试：测试独立组件和函数集成测试：测试多个组件的交互端到端测试：模拟用户行为的完整测试性能测试：测试应用性能指标快照测试：UI组件的视觉回归测试测试工具实现测试运行器//测试运行器类classTestRu
  • 【Rust指南】快速入门 开发环境 hello world_rust开发是啥 2401_89213119 rust开发语言后端
    文章目录前言一、Rust语言的背景和特点1、为什么要用Rust？2、与其他编程语言相比较3、Rust特别擅长的领域4、Rust的用户和案例5、Rust的优缺点二、Rust的安装与开发工具1、安装Rust2、开发工具三、编写helloworld1、从零到一打印helloworld2、代码与运行过程分析前言本篇博客是Rust语言系列的开篇之作，以后有关Ru
  • 第五章：HTML5 大升级：解锁未来技能 我自纵横2023 HTML教程html5前端html
    第五章：HTML5大升级：解锁未来技能5.1语义化标签的「身份认证」一、语义化概念理解在HTML的旧时代，我们就像一群建筑工人，只能用一些通用的和标签来搭建网页，就好比用千篇一律的砖块盖房子，虽然能把房子盖起来，但很难从外观上看出房子的各个部分是做什么用的。而HTML5引入的语义化标签，就像是给每一块砖块都赋予了特殊的形状和用途，让网页的结构变得一目了然，就像给每个房间都贴上了清晰的标签，告诉搜索
  • 鸿蒙开发0基础【stateStyles：多态样式】ui组件 蒸糕笑QAQ harmonyos5.0uiharmonyos华为鸿蒙系统鸿蒙
    @Styles仅仅应用于静态页面的样式复用，stateStyles可以依据组件的内部状态的不同，快速设置不同样式。这就是我们本章要介绍的内容stateStyles（又称为：多态样式）。概述stateStyles是属性方法，可以根据UI内部状态来设置样式，类似于css伪类，但语法不同。ArkUI提供以下五种状态：focused：获焦态。normal：正常态。pressed：按压态。disabled：
  • WAI-ARIA 前端岳大宝 前端核心知识总结前端html
    以下是关于WAI-ARIA（WebAccessibilityInitiative-AccessibleRichInternetApplications）的核心知识梳理。一、WAI-ARIA的基本概念定义与作用WAI-ARIA是一套由W3C制定的技术规范，旨在通过语义补充使动态Web应用（如单页应用、复杂UI组件）对辅助技术（如屏幕阅读器）更可访问。核心目标：为无法通过原生HTML语义化标签表达的U
  • ROS机器人边缘计算：EdgeComputing与ROS AI天才研究院 计算AI大模型应用入门实战与进阶大数据人工智能语言模型AILLMJavaPython架构设计AgentRPA计算AI大模型应用
    1.背景介绍1.1机器人操作系统（ROS）机器人操作系统（RobotOperatingSystem，简称ROS）是一个用于机器人软件开发的灵活框架。它提供了一系列工具、库和约定，使得创建复杂且健壮的机器人应用变得更加容易。ROS的核心是一个消息传递系统，它允许不同的软件模块（称为节点）之间进行通信。这种模块化设计使得开发人员可以更容易地重用和共享代码，从而加速了机器人软件的开发过程。1.2边缘计算
  • 2024 年java 和Python 开发工具系列激活码（ 持续更新） hhhaadei javaide
    7EX1SHUD24-eyJsaWNlbnNlSWQiOiI3RVgxU0hVRDI0IiwibGljZW5zZWVOYW1lIjoibWFvIHplZG9uZyIsImxpY2Vuc2VlVHlwZSI6IlBFUlNPTkFMIiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdGlvbiI6IiIsI
  • 工程化与框架系列（31）--前端依赖管理实践 一进制ᅟᅠ        ‌‍‎‏  前端工程化与框架前端
    前端依赖管理实践引言前端依赖管理是现代Web开发中的重要环节。本文将深入探讨前端依赖管理的最佳实践，包括包管理工具、版本控制、依赖分析和优化等方面，帮助开发者更好地管理项目依赖。依赖管理概述前端依赖管理主要包括以下方面：包管理工具：npm、yarn、pnpm等版本控制：语义化版本、锁文件等依赖分析：依赖树、循环依赖等依赖优化：体积优化、重复依赖等安全管理：漏洞检测、更新维护等依赖管理工具实现依赖分
  • Flutter桌面开发（三、widget布局与表单） 左钦杨 flutterjavascriptandroid
    一、流式布局横铺或者竖着铺Row或者Column这俩都是有Children的就是可以有多个子元素例子：Row(Children:[Container(),Container(),Container(),]）Container类似于html中的DIV可以设置背景border和宽度高度Container(decoration:BoxDecoration(image:DecorationImage(im
  • 简单了解WIndow和Linux的路径含义 alive903 Linuxlinuxwindows
    目录1>路径概念2>绝对路径2.1>window绝对路径2.2>Linux绝对路径3>相对路径3.1>window相对路径3.2>Linux相对路径很高兴你能看到这篇文章，同时我的语雀文档也更新了许多嵌入式系列的学习笔记希望能帮到你：https://www.yuque.com/alive-m4b9n1>路径概念路径是用来描述一个文件或目录在文件系统中的位置的方式。路径可以是文件系统中的唯一标识符，
  • linux系统服务器下jsp传参数乱码 3213213333332132 javajsplinuxwindowsxml
    在一次解决乱码问题中， 发现jsp在windows下用js原生的方法进行编码没有问题，但是到了linux下就有问题， escape,encodeURI,encodeURIComponent等都解决不了问题 但是我想了下既然原生的方法不行，我用el标签的方式对中文参数进行加密解密总该可以吧。于是用了java的java.net.URLDecoder,结果还是乱码，最后在绝望之际，用了下面的方法解决了
  • Spring 注解区别以及应用 BlueSkator spring
    1. @Autowired @Autowired是根据类型进行自动装配的。如果当Spring上下文中存在不止一个UserDao类型的bean，或者不存在UserDao类型的bean，会抛出 BeanCreationException异常，这时可以通过在该属性上再加一个@Qualifier注解来声明唯一的id解决问题。   2. @Qualifier 当spring中存在至少一个匹
  • printf和sprintf的应用 dcj3sjt126com PHPsprintfprintf
    <?php printf('b: %b <br>c: %c <br>d: %d <bf>f: %f', 80,80, 80, 80); echo '<br />'; printf('%0.2f <br>%+d <br>%0.2f <br>', 8, 8, 1235.456); printf('th
  • config.getInitParameter 171815164 parameter
    web.xml <servlet> <servlet-name>servlet1</servlet-name> <jsp-file>/index.jsp</jsp-file> <init-param> <param-name>str</param-name>
  • Ant标签详解--基础操作 g21121 ant
            Ant的一些核心概念：         build.xml：构建文件是以XML 文件来描述的，默认构建文件名为build.xml。        project：每个构建文
  • [简单]代码片段_数据合并 53873039oycg 代码
            合并规则:删除家长phone为空的记录,若一个家长对应多个孩子,保留一条家长记录,家长id修改为phone,对应关系也要修改。         代码如下:        
  • java 通信技术 云端月影 Java 远程通信技术
    在分布式服务框架中，一个最基础的问题就是远程服务是怎么通讯的，在Java领域中有很多可实现远程通讯的技术，例如：RMI、MINA、ESB、Burlap、Hessian、SOAP、EJB和JMS等，这些名词之间到底是些什么关系呢，它们背后到底是基于什么原理实现的呢，了解这些是实现分布式服务框架的基础知识，而如果在性能上有高的要求的话，那深入了解这些技术背后的机制就是必须的了，在这篇blog中我们将来
  • string与StringBuilder 性能差距到底有多大 aijuans
              之前也看过一些对string与StringBuilder的性能分析，总感觉这个应该对整体性能不会产生多大的影响，所以就一直没有关注这块！         由于学程序初期最先接触的string拼接，所以就一直没改变过自己的习惯！        
  • 今天碰到 java.util.ConcurrentModificationException 异常 antonyup_2006 java多线程工作IBM
    今天改bug，其中有个实现是要对map进行循环，然后有删除操作，代码如下： Iterator<ListItem> iter = ItemMap.keySet.iterator(); while(iter.hasNext()){ ListItem it = iter.next(); //...一些逻辑操作 ItemMap.remove(it); } 结果运行报Con
  • PL/SQL的类型和JDBC操作数据库 百合不是茶 PL/SQL表标量类型游标PL/SQL记录
    PL/SQL的标量类型:    字符,数字,时间,布尔,%type五中类型的 --标量：数据库中预定义类型的变量 --定义一个变长字符串 v_ename varchar2(10); --定义一个小数,范围 -9999.99~9999.99 v_sal number(6,2); --定义一个小数并给一个初始值为5.4 :=是pl/sql的赋值号
  • Mockito：一个强大的用于 Java 开发的模拟测试框架实例 bijian1013 mockito单元测试
    Mockito框架：         Mockito是一个基于MIT协议的开源java测试框架。         Mockito区别于其他模拟框架的地方主要是允许开发者在没有建立“预期”时验证被测系统的行为。对于mock对象的一个评价是测试系统的测
  • 精通Oracle10编程SQL(10)处理例外 bijian1013 oracle数据库plsql
    /* *处理例外 */ --例外简介 --处理例外-传递例外 declare v_ename emp.ename%TYPE; begin SELECT ename INTO v_ename FROM emp where empno=&no; dbms_output.put_line('雇员名：'||v_ename); exceptio
  • 【Java】Java执行远程机器上Linux命令 bit1129 linux命令
    Java使用ethz通过ssh2执行远程机器Linux上命令，   封装定义Linux机器的环境信息   package com.tom; import java.io.File; public class Env { private String hostaddr; //Linux机器的IP地址 private Integer po
  • java通信之Socket通信基础 白糖_ javasocket网络协议
    正处于网络环境下的两个程序，它们之间通过一个交互的连接来实现数据通信。每一个连接的通信端叫做一个Socket。一个完整的Socket通信程序应该包含以下几个步骤： ①创建Socket； ②打开连接到Socket的输入输出流； ④按照一定的协议对Socket进行读写操作； ④关闭Socket。   Socket通信分两部分：服务器端和客户端。服务器端必须优先启动，然后等待soc
  • angular.bind boyitech AngularJSangular.bindAngularJS APIbind
    angular.bind 描述：         上下文，函数以及参数动态绑定，返回值为绑定之后的函数. 其中args是可选的动态参数，self在fn中使用this调用。 使用方法：          angular.bind(se
  • java-13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。 bylijinnan java
    import java.util.ArrayList; import java.util.List; public class KickOutBadGuys { /** * 题目：13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。 * Maybe you can find out
  • Redis.conf配置文件及相关项说明（自查备用） Kai_Ge redis
       Redis.conf配置文件及相关项说明 # Redis configuration file example # Note on units: when memory size is needed, it is possible to specifiy # it in the usual form of 1k 5GB 4M and so forth: #
  • [强人工智能]实现大规模拓扑分析是实现强人工智能的前奏 comsci 人工智能
         真不好意思,各位朋友...博客再次更新...      节点数量太少,网络的分析和处理能力肯定不足,在面对机器人控制的需求方面,显得力不从心....      但是,节点数太多,对拓扑数据处理的要求又很高,设计目标也很高,实现起来难度颇大...
  • 记录一些常用的函数 dai_lm java
    public static String convertInputStreamToString(InputStream is) { StringBuilder result = new StringBuilder(); if (is != null) try { InputStreamReader inputReader = new InputStreamRead
  • Hadoop中小规模集群的并行计算缺陷 datamachine mapreducehadoop并行计算
    注：写这篇文章的初衷是因为Hadoop炒得有点太热，很多用户现有数据规模并不适用于Hadoop，但迫于扩容压力和去IOE（Hadoop的廉价扩展的确非常有吸引力）而尝试。尝试永远是件正确的事儿，但有时候不用太突进，可以调优或调需求，发挥现有系统的最大效用为上策。 -----------------------------------------------------------------
  • 小学4年级英语单词背诵第二课 dcj3sjt126com englishword
    egg  蛋 twenty 二十 any 任何 well 健康的，好   twelve 十二 farm 农场 every 每一个 back 向后，回   fast 快速的 whose 谁的 much 许多 flower 花   watch 手表 very 非常，很 sport 运动 Chinese 中国的  
  • 自己实践了github的webhooks, linux上面的权限需要注意 dcj3sjt126com githubwebhook
    环境, 阿里云服务器   1. 本地创建项目, push到github服务器上面   2. 生成www用户的密钥 sudo -u www ssh-keygen -t rsa -C "[email protected]"     3. 将密钥添加到github帐号的SSH_KEYS里面   3. 用www用户执行克隆, 源使
  • Java冒泡排序 蕃薯耀 冒泡排序Java冒泡排序Java排序
    冒泡排序 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月23日 10:40:14 星期二 http://fanshuyao.iteye.com/
  • Excle读取数据转换为实体List【基于apache-poi】 hanqunfeng apache
    1.依赖apache-poi   2.支持xls和xlsx   3.支持按属性名称绑定数据值   4.支持从指定行、列开始读取   5.支持同时读取多个sheet   6.具体使用方式参见org.cpframework.utils.excelreader.CP_ExcelReaderUtilTest.java 比如： Str
  • 3个处于草稿阶段的Javascript API介绍 jackyrong JavaScript
    原文： http://www.sitepoint.com/3-new-javascript-apis-may-want-follow/?utm_source=html5weekly&utm_medium=email   本文中，介绍3个仍然处于草稿阶段，但应该值得关注的Javascript API. 1) Web Alarm API   &
  • 6个创建Web应用程序的高效PHP框架 lampcy Web框架PHP
    以下是创建Web应用程序的PHP框架，有coder bay网站整理推荐： 1. CakePHP CakePHP是一个PHP快速开发框架，它提供了一个用于开发、维护和部署应用程序的可扩展体系。CakePHP使用了众所周知的设计模式，如MVC和ORM，降低了开发成本，并减少了开发人员写代码的工作量。 2. CodeIgniter CodeIgniter是一个非常小且功能强大的PHP框架，适合需
  • 评"救市后中国股市新乱象泛起"谣言 nannan408
    首先来看百度百家一位易姓作者的新闻： 三个多星期来股市持续暴跌，跌得投资者及上市公司都处于极度的恐慌和焦虑中，都要寻找自保及规避风险的方式。面对股市之危机，政府突然进入市场救市，希望以此来重建市场信心，以此来扭转股市持续暴跌的预期。而政府进入市场后，由于市场运作方式发生了巨大变化，投资者及上市公司为了自保及为了应对这种变化，中国股市新的乱象也自然产生。 首先，中国股市这两天
  • 页面全屏遮罩的实现 方式 Rainbow702 htmlcss遮罩mask
    之前做了一个页面，在点击了某个按钮之后，要求页面出现一个全屏遮罩，一开始使用了position:absolute来实现的。当时因为画面大小是固定的，不可以resize的，所以，没有发现问题。 最近用了同样的做法做了一个遮罩，但是画面是可以进行resize的，所以就发现了一个问题，当画面被reisze到浏览器出现了滚动条的时候，就发现，用absolute 的做法是有问题的。后来改成fixed定位就
  • 关于angularjs的点滴 tntxia AngularJS
      angular是一个新兴的JS框架，和以往的框架不同的事，Angularjs更注重于js的建模，管理，同时也提供大量的组件帮助用户组建商业化程序，是一种值得研究的JS框架。   Angularjs使我们可以使用MVC的模式来写JS。Angularjs现在由谷歌来维护。   这里我们来简单的探讨一下它的应用。   首先使用Angularjs我
  • Nutz--->>反复新建ioc容器的后果 xiaoxiao1992428 DAOmvcIOCnutz
    问题： public class DaoZ {     public static Dao dao() { // 每当需要使用dao的时候就取一次     Ioc ioc = new NutIoc(new JsonLoader("dao.js"));     return ioc.get(
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他