月亮在偷看吖
月亮在偷看吖

js:for循环里绑定onclick事件:报错Uncaught TypeError: Cannot set properties of undefined (setting ‘className‘)

我想要实现如下效果：点击上面的栏目，切换下面栏目的内容
js:for循环里绑定onclick事件:报错Uncaught TypeError: Cannot set properties of undefined (setting ‘className‘)_第1张图片

编写代码如下（主要看js部分）

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .tab{
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: #aaa;
        }
        .current{
            background-color: yellow;
        }
        .content{
            display: none;
        }
    style>
head>
<body>
    <div class = "tab">
        <div class = "tab_list">
            <li>栏目1li>
            <li>栏目2li>
            <li>栏目3li>
        div>
        <div class = "tab_con" style="display: block;">栏目1的内容div>
        <div class = "tab_con">栏目2的内容div>
        <div class = "tab_con">栏目3的内容div>
    div>

    <script>
        var tab_list = document.querySelector(".tab_list").querySelectorAll("li");
        var tab_con = document.querySelectorAll(".tab_con");
        
        for(var i = 0;i<tab_list.length;i++){
            tab_list[i].onclick = function(){
                // 上面的栏目切换
                for(var j = 0;j<tab_list.length;j++){
                    tab_list[j].className = "tab";
                }
                tab_list[i].className = "tab red";

                // 下面文字的效果
                for(var j = 0;j<tab_con.length;j++){
                    tab_con[j].style.display = "none";
                }
                tab_con[i].style.display = "block";

            }
        }



    script>
body>
html>

结果发现报错：Uncaught TypeError: Cannot set properties of undefined (setting 'className') at HTMLDivElement.tab..onclick

百度了一番，再自己测试，发现下面的代码：

<script>
        var tab_list = document.querySelector(".tab_list").querySelectorAll("li");
        var tab_con = document.querySelectorAll(".tab_con");
        
        for(var i = 0;i<tab_list.length;i++){
            tab_list[i].onclick = function(){
                console.log("栏目" + i + "被点击了");
            }
        }



    script>

打印中，i为3，而不是以为中的0、1、2。

查阅资料后知道：

在for循环中，为每个tab_list绑定onclick事件监听，但是在函数执行时，i已经循环结束，所以打印输出的是3。

即，我们在for循环中的事件监听函数，需要避免使用到循环变量i

那么，如果涉及到tab_list[i]，我们可以使用this；如果涉及到tab_con[i]，也就是利用到i得到别的元素，那么我们可以给tab_list增加一个属性index，然后在onclick函数中，得到这个属性，即得到我们想要的i

代码如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .tab{
            width: 400px;
            margin: 100px auto;
        }
        .tab .tab_list li{
            display: inline-block;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #aaa;
        }
        .tab .tab_list .current{
            background-color: yellow;
        }
        .content{
            display: none;
        }
    style>
head>
<body>
    <div class = "tab">
        <div class = "tab_list">
            <li>栏目1li>
            <li>栏目2li>
            <li>栏目3li>
        div>
        <div class = "tab_con" style="display: block;">栏目1的内容div>
        <div class = "tab_con">栏目2的内容div>
        <div class = "tab_con">栏目3的内容div>
    div>

    <script>
        var tab_list = document.querySelector(".tab_list").querySelectorAll("li");
        var tab_con = document.querySelectorAll(".tab_con");
        
        for(var i = 0;i<tab_list.length;i++){
            tab_list[i].setAttribute("index",i);
            tab_list[i].onclick = function(){
                var index = this.getAttribute("index");
                console.log("栏目" + index + "被点击了");
                // 上面的栏目切换
                for(var j = 0;j<tab_list.length;j++){
                    tab_list[j].className = "";
                }
                tab_list[index].className = "current";
                console.log(this.className);
                // 下面文字的效果
                for(var j = 0;j<tab_con.length;j++){
                    tab_con[j].style.display = "none";
                }
                tab_con[index].style.display = "block";

            }
        }
    script>
body>
html>

你可能感兴趣的:(web,javascript,css,html)

  • html画流程图_怎么画流程图才美观？仅需4步手把手教会你 小猫倩倩 html画流程图
    流程图涵盖三百六十行，每个人都或多活动会接触到，尽管可能感觉不到，但的确息息相关尤其是在职场上，做工作汇报、PPT演讲、进度汇报等，可是有很多小伙伴还从没接触过流程图，要不一头朦胧雾水，不知从何下手，嘿嘿，那就让我这个流程图超一流大师来手把手教你吧！(自封的)一、挑件趁手的兵器1*磨刀不误砍柴工，工欲善其事必先利其器，首先咱们要挑选一把"锋利的镰刀"！小编一直在用的是网站-迅捷画图，这次就拿它开刀
  • HTML5+CSS3 weixin_34250709
    2019独角兽企业重金招聘Python工程师标准>>>第一课HTML5结构HTML5是新一代的HTMLDTD声明改变新的结构标签注意的地方ie8不兼容常用的一些新的结构标签删除的HTML标签纯表现的元素：basefontbigcenterfontsstrikettu对可用性产生负面影响的元素：frameframesetnoframes产生混淆的元素：acronymappletisindexdir重
  • android自动化测试 python3.0+appium+uiautomatorviewer+unittest+csv+HTMLTestRunner 登录测试框架 luoyangcoding app自动化测试app登录自动化脚本
    #coding:utf-8importcsv#导入csv库，可以读取csv文件fromappiumimportwebdriverimportunittest#单元测试fromtimeimportsleep#等待时间importtime#时间方法importos#文件、目录方法importsys#引用系统函数fromHTMLTestRunnerimportHTMLTestRunner#定义路径变量，
  • Vue _总结 北执南念 工作中开发总结Vuevue.js前端javascript
    文章目录一Vue介绍1什么是Vue.js2MVVM二第一个例子1引入vue2html中用法3创建vue实例对象三Vue基本语法1v-text2v-bind3v-on4v-model5v-if6v-for7计算属性8组件化全局注册本地注册9生命周期10员工程序使用vue.js重构list.htmladd.htmlupdate.html四使用vue-cli搭建Vue项目1node.js的安装设置npm
  • CSS—属性继承与预处理器：2分钟掌握预处理器 海晨忆 Web知识点css前端属性继承预处理器scss
    个人博客：haichenyi.com。感谢关注1.目录1–目录2–属性继承3–预处理器2.属性继承  像Android里面继承extends，类继承，子类可以使用父类的public和protected的属性和方法。子类可以直接用。  在CSS里面也是类似的。CSS里面是布局里面的东西继承。举个栗子：CSS—属性继承.parent{/*父div设置字体和颜色*/font-size:22px;colo
  • SpringBoot使用注解扫描注册Java Web三大组件 呆萌很 springbootspringboot
    使用注解扫描和注册JavaWeb三大组件（Servlet、Filter、Listener）非常方便。1.Servlet注册Servlet是JavaWeb开发的基础组件，用于处理客户端（通常是浏览器）发送的HTTP请求并生成响应。Controller是基于Servlet的封装。可以通过@WebServlet注解来注册Servlet，并使用@ServletComponentScan注解来扫描这些Ser
  • Git与GitHub：理解两者差异及其关系 抱抱宝 gitgithub
    目录Git与GitHub：理解两者差异及其关系Git：分布式版本控制系统概述主要特点GitHub：基于Web的托管服务概述主要特点Git和GitHub如何互补关系现代开发工作流结论Git与GitHub：理解两者差异及其关系Git：分布式版本控制系统概述什么是Git？Git是一个设计用来高效处理从小到大项目的分布式版本控制系统（DVCS）。它由林纳斯·托瓦兹于2005年为Linux内核的开发而创建。
  • 第三章：组件开发实战 - 第二节 - Tailwind CSS 表单元素样式处理
    在前端开发中，表单元素的样式处理一直是一个重要且复杂的话题。不同浏览器对表单元素有着不同的默认样式，而且某些表单元素的样式难以直接通过CSS进行修改。本节将介绍如何使用TailwindCSS优雅地处理各种表单元素的样式，确保在不同浏览器中呈现一致的外观。基础表单样式设置输入框样式在TailwindCSS中，我们可以使用多个工具类组合来创建美观的输入框样式：这个组合包含以下样式特性：w-full:宽
  • JavaScript+Selenium自动化测试 爱学测试的李木子 软件测试javascriptselenium开发语言
    Seleniumisabrowserautomationlibrary.Mostoftenusedfortestingweb-applications,Seleniummaybeusedforanytaskthatrequiresautomatinginteractionwiththebrowser.Selenium是一个浏览器自动化测试库，大多时候我们用它来测试web应用，Selenium可以胜
  • H5之webcoekt播放JPEG图片流 视频处理html5
    一、简介既然webcoekt是基于tcp连接的，理论上讲所有的浏览器是可以私有协议处理二进制的，如果我们需要播放视频，我们可以将视频数据在后端解码后直接将图片推送到webcoekt前端，然后前端通过websocket接收图片然后将图片显示到img或canvas中即可，当然这个是我自己设想的，也是应该可以做的到了，做到如下需要以下技术支持：后端直接ffmpeg转码为jpeg图片流后端定制播放协议包括
  • 最简单圆形进度条实现CSS+javascript，两端带圆弧 真是6的不行 cssjavascript前端
    两端是弧形的圆形进度条。Document/*定义css变量*/:root{--progress:0%;--endRotate:0deg;--contentSize:100px/*这位置改变整体进度条大小*/}/*外圈*/.progress{position:relative;width:var(--contentSize);height:var(--contentSize);/*进度条的颜色处理*
  • html流程图 软件技术NINI 趣味源码流程图
    要创建一个HTML流程图，你可以使用HTML、CSS，不过，对于简单的流程图，你也可以直接使用HTML和CSS来手动布局。下面是一个使用纯HTML和CSS创建简单流程图的示例：效果图html开始步骤一步骤二分叉节点步骤三步骤四步骤5步骤6步骤7分叉节点css/*椭圆*/.ellipse{width:100px;height:50px;background-color:#6495ED;border-
  • 第三章：组件开发实战 - 第三节 - Tailwind CSS 动画和过渡效果
    在现代Web应用中，合理使用动画和过渡效果可以大大提升用户体验。TailwindCSS提供了丰富的动画和过渡工具类，让我们能够轻松实现各种交互效果。本节将详细介绍如何在项目中运用这些特性。过渡效果基础基础过渡属性TailwindCSS提供了几个核心的过渡工具类：悬浮上移效果核心类说明：transition-{property}:指定要添加过渡效果的属性transition-all:所有属性tran
  • main函数的argc与arg 某风吾起 work
    原文地址：https://www.cnblogs.com/dongry/p/10729892.htmlＣ语言中main函数的参数有两个,这两个参数写为argc和argv.因此,main函数的函数头可写为:main(argc,argv);Ｃ语言还规定argc(第一个形参)必须是整型变量,argv(第二个形参)必须是指向字符串的指针数组。加上形参说明后，main函数的函数头应写为：intmain(in
  • Web 应用中 HttpSession 的工作原理 triticale 前端java开发语言
    首次访问：当浏览器A和浏览器B首次访问Web服务器时，服务器通过request.getSession()方法为每个浏览器创建一个HttpSession对象，并生成对应的jsessionid。该jsessionid通过Cookie响应给浏览器，用于标识会话。第二次访问：后续浏览器再次发起请求时，会携带jsessionid。服务器根据该jsessionid在HttpSession列表（Map）中找到对
  • CSS flex-shrink 属性 shengyin714959 笔记csscss3前端
    实例A,B,C设置flex-shrink:1，D,E设置为flex-shrink:2：菜鸟教程(runoob.com)#content{display:flex;width:500px;}#contentdiv{flex-basis:120px;border:3pxsolidrgba(0,0,0,.2);}.box{flex-shrink:1;}.box1{flex-shrink:2;}div总宽
  • TR-069协议学习--Soap报文、事件、RPC方法 白驹过隙^^ 学习rpc网络协议网络
    目录一、SOAP报文二、事件三、RPC方法四、错误码一、SOAP报文SOAP（SimpleObjectAccessProtocol，简单对象访问协议）是一种基于XML的协议，用于在网络上交换结构化信息。SOAP报文是SOAP协议中用于传输数据的XML文档，它定义了消息的格式和传输规则，并被广泛用于Web服务之间的通信。·SOAP报文的特点基于XML：SOAP报文是一个XML文档，使用XML格式来编
  • css使用flex-shrink调整flex布局超出宽度 crayon-shin-chan surprise#csscss
    1.简介flex-shrink属性指定了flex元素的收缩规则。flex-shrink仅在flex布局的子元素中起作用flex元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的依据是flex-shrink的值。相反的，flex-grow定义了子元素的扩展比例，在默认宽度之和小于容器宽度时发生扩展。2.使用.container{overflow-x:scroll;overflow-y:hidd
  • 从Java视角理解JavaScript中的axios与Promise的协作机制 蒸只小鱼 javajavascript开发语言
    从Java视角理解JavaScript中的axios与Promise的协作机制下面的内容仅仅从平时使用axiso和promise的层面上出发，和实际的运行机理出入很大，纯纯自圆其说，大家看个乐呵就行axios是异步发送请求的，简单来说，其会单独开一个线程去执行发送请求的代码，那么在这个单独开辟出的线程中，发送请求后必然能够阻塞等待到结果（结果好坏均有可能）。另外，似乎这个线程的内部的执行逻辑还有p
  • Web3 DApp 测试指南 m0_51192916 web3DApp
    Web3DApp测试个人总结Web3DApp（去中心化应用）前端开发与传统Web2应用存在显著不同。由于DApp依赖智能合约、区块链RPC交互、钱包签名等技术，其测试方式也有别于传统前端测试。本指南系统介绍Web3DApp前端的测试方法，包括功能测试、兼容性测试、安全测试、性能测试，让你快速上手Web3DApp测试。1.Web3DApp基础知识1.1什么是Web3DApp？Web3DApp（Dec
  • 令人窒息的性能困局接手公司老旧后台系统时，我震惊地发现：首页加载竟需要12.3秒！ Lighthouse报告显示： console.log 战略储备局局长 面试前端http
    PerformanceScore:38FirstContentfulPaint:4.1sTotalBlockingTime:2.8s更糟糕的是WebPageTest的瀑布图：34个请求串行加载，TCP连接反复重建，TLS握手消耗了超过1.9秒...破局关键：HTTP/3三板斧第一斧：QUIC协议斩断队头阻塞不同于HTTP/2的TCP流阻塞，QUIC协议基于UDP实现：单个包丢失不再阻塞其他流，实测
  • DOM容器 zczlsy11 React源码原理javascript开发语言ecmascript
    DOM容器（DOMContainer）是React应用中用于挂载和渲染组件树的实际DOM元素。它是React虚拟DOM和浏览器实际DOM之间的桥梁。React会将组件树渲染到DOM容器中，从而在页面上显示出来。DOM容器的定义在React中，DOM容器通常是一个普通的HTML元素（例如div、span等），它作为React应用的根节点。React会将整个组件树渲染到这个容器中。例如：在这个例子中，
  • React-Route的使用 zczlsy11 reactreact.jsjavascript前端
    申明式声明路由}/>}/>}/>}/>}>}/>}/>}/>}/>}/>}/>BrowserRouterBrowserRouter是ReactRouter提供的一个组件，利用HTML5的历史API来保持用户界面（UI）与URL的同步。下面详细解释这一机制是如何实现的。实现原理1.HTML5HistoryAPIBrowserRouter主要依赖于HTML5的history对象，该对象提供了以下几个重
  • 观察者（IntersectionObserver API）的基本使用（入门篇） Hope° 笔记js前端javascript
    用法可以参考https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver介绍一般情况下监听可视区域或者几个元素的相对可视区域状态都不是很容易，传统方式也特别消耗性能，此时就可以使用到IntersectionObserver。操作操作为监听一个列表的首尾是否进入视窗。定义一个newIntersectionObserver（
  • 排序算法动画网站 齊 天 大 聖 排序算法算法
    排序算法动画网站（1）https://visualgo.net/zh（2）http://tools.jb51.net/aideddesign/paixu_ys（3）https://www.toptal.com/developers/sorting-algorithms（4）https://www.webhek.com/post/comparison-sort/（<-简单明了）
  • 第二章：基础概念精讲 - 第五节 - Tailwind CSS Flex 和 Grid 布局实战
    Flex布局基础1.Flex容器设置Item1Item2Item3行布局列布局允许换行禁止换行2.主轴对齐左对齐居中对齐右对齐两端对齐环绕对齐均匀对齐3.交叉轴对齐顶部对齐居中对齐底部对齐拉伸对齐基线对齐Flex实战案例1.导航栏布局首页产品服务关于登录2.卡片网格布局卡片标题卡片描述内容Grid布局基础1.Grid容器设置Item1Item2Item32.网格列配置跨越4列跨越8列Grid实战案
  • 第三章：组件开发实战 - 第一节 - Tailwind CSS 常用UI组件构建
    基础按钮组件1.按钮样式变体基础按钮轮廓按钮小按钮大按钮禁用按钮2.图标按钮添加表单组件1.输入框用户名2.下拉选择框选项1选项2选项3选项1选项2卡片组件1.基础卡片卡片标题卡片描述内容2.功能卡片促销产品名称产品描述¥99.00加入购物车导航组件1.顶部导航栏首页产品关于2.侧边导航控制面板仪表盘提示和对话框1.消息提示操作成功！出现错误！2.模态对话框确认操作确定要执行此操作吗？取消确定最佳
  • 掌握 PageForge 扩展：从基础应用到深度开发 静态网站
    在现代网页设计中，交互元素是提升用户体验的关键。开关（Switch）作为一种直观的交互控件，广泛应用于设置项、特性切换和状态控制等场景。本教程将详细介绍如何在PageForge中使用开关组件，帮助您打造更具交互性的文档和网站。!!!note这里我们使用开关组件来讲解。!!!1.开关组件简介PageForge的开关组件基于TailwindCSS构建，提供了美观且可高度自定义的UI控件。与传统的复选框
  • H5播放webrtc视频 视频处理html5
    一、简介WebRTC概念WebRTC是由Google主导的，由一组标准、协议和JavaScriptAPI组成，用于实现浏览器之间（端到端之间）的音频、视频及数据共享。WebRTC不需要安装任何插件，通过简单的JavaScriptAPI就可以使得实时通信变成一种标准功能。为什么使用webrtc现在各大浏览器以及终已经逐渐加大对WebRTC技术的支持。下图是webrtc官网给出的现在已经提供支持了的浏
  • H5播放Rtmp之vue-video-player播放播放 视频播放器html5
    一、简介我们看到了HLS播放视频实时性非常差，好的在6-7s，差点的就要10-12s了，也就是人走了，估计视频上还能看到，这对观感效果造成了很大的影响！但是好处就是它是基于http协议文件下载的，所以不需要任何插件，到处播放，处处兼容，所以rtmp和hls在web端的特点如下：HLS(1)使用http协议，兼容所有浏览器。(2)延时非常大，不太适合实时视频源，适合文件点播或历史录像直播。RTMP(
  • [星球大战]阿纳金的背叛 comsci
          本来杰迪圣殿的长老是不同意让阿纳金接受训练的.........     但是由于政治原因,长老会妥协了...这给邪恶的力量带来了机会     所以......现代的地球联邦接受了这个教训...绝对不让某些年轻人进入学院    
  • 看懂它，你就可以任性的玩耍了！ aijuans JavaScript
              javascript作为前端开发的标配技能，如果不掌握好它的三大特点：1.原型 2.作用域 3. 闭包 ,又怎么可以说你学好了这门语言呢？如果标配的技能都没有撑握好，怎么可以任性的玩耍呢？怎么验证自己学好了以上三个基本点呢，我找到一段不错的代码，稍加改动，如果能够读懂它，那么你就可以任性了。 function jClass(b
  • Java常用工具包 Jodd Kai_Ge javajodd
    Jodd 是一个开源的 Java 工具集， 包含一些实用的工具类和小型框架。简单，却很强大！ 写道 Jodd = Tools + IoC + MVC + DB + AOP + TX + JSON + HTML < 1.5 Mb Jodd 被分成众多模块，按需选择，其中 工具类模块有： jodd-core    &nb
  • SpringMvc下载 120153216 springMVC
    @RequestMapping(value = WebUrlConstant.DOWNLOAD) public void download(HttpServletRequest request,HttpServletResponse response,String fileName) { OutputStream os = null; InputStream is = null;
  • Python 标准异常总结 2002wmj python
    Python标准异常总结 AssertionError 断言语句（assert）失败 AttributeError 尝试访问未知的对象属性 EOFError 用户输入文件末尾标志EOF（Ctrl+d） FloatingPointError 浮点计算错误 GeneratorExit generator.close()方法被调用的时候 ImportError 导入模块失
  • SQL函数返回临时表结构的数据用于查询 357029540 SQL Server
    这两天在做一个查询的SQL，这个SQL的一个条件是通过游标实现另外两张表查询出一个多条数据，这些数据都是INT类型，然后用IN条件进行查询，并且查询这两张表需要通过外部传入参数才能查询出所需数据，于是想到了用SQL函数返回值，并且也这样做了，由于是返回多条数据，所以把查询出来的INT类型值都拼接为了字符串，这时就遇到问题了，在查询SQL中因为条件是INT值，SQL函数的CAST和CONVERST都
  • java 时间格式化 | 比较大小| 时区 个人笔记 7454103 javaeclipsetomcatcMyEclipse
    个人总结！ 不当之处多多包含！ 引用 1.0 如何设置 tomcat 的时区：          位置：(catalina.bat---JAVA_OPTS  下面加上)          set JAVA_OPT
  • 时间获取Clander的用法 adminjun Clander时间
    /**    * 得到几天前的时间    * @param d    * @param day    * @return    */   public static Date getDateBefore(Date d,int day){    Calend
  • JVM初探与设置 aijuans java
    JVM是Java Virtual Machine（Java虚拟机）的缩写，JVM是一种用于计算设备的规范，它是一个虚构出来的计算机，是通过在实际的计算机上仿真模拟各种计算机功能来实现的。Java虚拟机包括一套字节码指令集、一组寄存器、一个栈、一个垃圾回收堆和一个存储方法域。 JVM屏蔽了与具体操作系统平台相关的信息，使Java程序只需生成在Java虚拟机上运行的目标代码（字节码）,就可以在多种平台
  • SQL中ON和WHERE的区别 avords
    SQL中ON和WHERE的区别   数据库在通过连接两张或多张表来返回记录时，都会生成一张中间的临时表，然后再将这张临时表返回给用户。   www.2cto.com   在使用left jion时，on和where条件的区别如下：  1、 on条件是在生成临时表时使用的条件，它不管on中的条件是否为真，都会返回左边表中的记录。 
  • 说说自信 houxinyou 工作生活
    自信的来源分为两种,一种是源于实力,一种源于头脑.实力是一个综合的评定,有自身的能力,能利用的资源等.比如我想去月亮上,要身体素质过硬,还要有飞船等等一系列的东西.这些都属于实力的一部分.而头脑不同,只要你头脑够简单就可以了!同样要上月亮上,你想,我一跳,1米,我多跳几下,跳个几年,应该就到了!什么?你说我会往下掉?你笨呀你!找个东西踩一下不就行了吗?     无论工作还
  • WEBLOGIC事务超时设置 bijian1013 weblogicjta事务超时
            系统中统计数据，由于调用统计过程，执行时间超过了weblogic设置的时间，提示如下错误： 统计数据出错! 原因：The transaction is no longer active - status: 'Rolling Back. [Reason=weblogic.transaction.internal
  • 两年已过去，再看该如何快速融入新团队 bingyingao java互联网融入架构新团队
    偶得的空闲，翻到了两年前的帖子 该如何快速融入一个新团队，有所感触，就记下来，为下一个两年后的今天做参考。     时隔两年半之后的今天，再来看当初的这个博客，别有一番滋味。而我已经于今年三月份离开了当初所在的团队，加入另外的一个项目组，2011年的这篇博客之后的时光，我很好的融入了那个团队，而直到现在和同事们关系都特别好。大家在短短一年半的时间离一起经历了一
  • 【Spark七十七】Spark分析Nginx和Apache的access.log bit1129 apache
    Spark分析Nginx和Apache的access.log，第一个问题是要对Nginx和Apache的access.log文件进行按行解析，按行解析就的方法是正则表达式：   Nginx的access.log解析正则表达式   val PATTERN = """([^ ]*) ([^ ]*) ([^ ]*) (\\[.*\\]) (\&q
  • Erlang patch bookjovi erlang
    Totally five patchs committed to erlang otp, just small patchs. IMO, erlang really is a interesting programming language, I really like its concurrency feature. but the functional programming style
  • log4j日志路径中加入日期 bro_feng javalog4j
    要用log4j使用记录日志，日志路径有每日的日期，文件大小5M新增文件。 实现方式 log4j: <appender name="serviceLog" class="org.apache.log4j.RollingFileAppender"> <param name="Encoding" v
  • 读《研磨设计模式》-代码笔记-桥接模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * 个人觉得关于桥接模式的例子，蜡笔和毛笔这个例子是最贴切的：http://www.cnblogs.com/zhenyulu/articles/67016.html * 笔和颜色是可分离的，蜡笔把两者耦合在一起了：一支蜡笔只有一种
  • windows7下SVN和Eclipse插件安装 chenyu19891124 eclipse插件
    今天花了一天时间弄SVN和Eclipse插件的安装，今天弄好了。svn插件和Eclipse整合有两种方式，一种是直接下载插件包，二种是通过Eclipse在线更新。由于之前Eclipse版本和svn插件版本有差别，始终是没装上。最后在网上找到了适合的版本。所用的环境系统：windows7JDK：1.7svn插件包版本：1.8.16Eclipse：3.7.2工具下载地址：Eclipse下在地址：htt
  • [转帖]工作流引擎设计思路 comsci 设计模式工作应用服务器workflow企业应用
    作为国内的同行，我非常希望在流程设计方面和大家交流，刚发现篇好文(那么好的文章，现在才发现，可惜)，关于流程设计的一些原理，个人觉得本文站得高，看得远，比俺的文章有深度，转载如下 ================================================================================= 自开博以来不断有朋友来探讨工作流引擎该如何
  • Linux 查看内存，CPU及硬盘大小的方法 daizj linuxcpu内存硬盘大小
    一、查看CPU信息的命令 [root@R4 ~]# cat /proc/cpuinfo |grep "model name" && cat /proc/cpuinfo |grep "physical id" model name : Intel(R) Xeon(R) CPU X5450 @ 3.00GHz model name :
  • linux 踢出在线用户 dongwei_6688 linux
    两个步骤： 1.用w命令找到要踢出的用户，比如下面：   [root@localhost ~]# w 18:16:55 up 39 days, 8:27, 3 users, load average: 0.03, 0.03, 0.00 USER TTY FROM LOGIN@ IDLE JCPU PCPU WHAT
  • 放手吧,就像不曾拥有过一样 dcj3sjt126com
    内容提要： 静悠悠编著的《放手吧就像不曾拥有过一样》集结“全球华语世界最舒缓心灵”的精华故事，触碰生命最深层次的感动，献给全世界亿万读者。《放手吧就像不曾拥有过一样》的作者衷心地祝愿每一位读者都给自己一个重新出发的理由，将那些令你痛苦的、扛起的、背负的，一并都放下吧！把憔悴的面容换做一种清淡的微笑，把沉重的步伐调节成春天五线谱上的音符，让自己踏着轻快的节奏，在人生的海面上悠然漂荡，享受宁静与
  • php二进制安全的含义 dcj3sjt126com PHP
    PHP里，有string的概念。 string里，每个字符的大小为byte（与PHP相比，Java的每个字符为Character，是UTF8字符，C语言的每个字符可以在编译时选择）。 byte里，有ASCII代码的字符，例如ABC，123，abc，也有一些特殊字符，例如回车，退格之类的。 特殊字符很多是不能显示的。或者说，他们的显示方式没有标准，例如编码65到哪儿都是字母A，编码97到哪儿都是字符
  • Linux下禁用T440s，X240的一体化触摸板(touchpad) gashero linuxThinkPad触摸板
    自打1月买了Thinkpad T440s就一直很火大，其中最让人恼火的莫过于触摸板。   Thinkpad的经典就包括用了小红点(TrackPoint)。但是小红点只能定位，还是需要鼠标的左右键的。但是自打T440s等开始启用了一体化触摸板，不再有实体的按键了。问题是要是好用也行。   实际使用中，触摸板一堆问题，比如定位有抖动，以及按键时会有飘逸。这就导致了单击经常就
  • graph_dfs hcx2013 Graph
    package edu.xidian.graph; class MyStack { private final int SIZE = 20; private int[] st; private int top; public MyStack() { st = new int[SIZE]; top = -1; } public void push(i
  • Spring4.1新特性——Spring核心部分及其他 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • 配置HiveServer2的安全策略之自定义用户名密码验证 liyonghui160com
        具体从网上看   http://doc.mapr.com/display/MapR/Using+HiveServer2#UsingHiveServer2-ConfiguringCustomAuthentication   LDAP Authentication using OpenLDAP Setting
  • 一位30多的程序员生涯经验总结 pda158 编程工作生活咨询
    1.客户在接触到产品之后，才会真正明白自己的需求。 　　这是我在我的第一份工作上面学来的。只有当我们给客户展示产品的时候，他们才会意识到哪些是必须的。给出一个功能性原型设计远远比一张长长的文字表格要好。 2.只要有充足的时间，所有安全防御系统都将失败。 　　安全防御现如今是全世界都在关注的大课题、大挑战。我们必须时时刻刻积极完善它，因为黑客只要有一次成功，就可以彻底打败你。   3.
  • 分布式web服务架构的演变 自由的奴隶 linuxWeb应用服务器互联网
    最开始，由于某些想法，于是在互联网上搭建了一个网站，这个时候甚至有可能主机都是租借的，但由于这篇文章我们只关注架构的演变历程，因此就假设这个时候已经是托管了一台主机，并且有一定的带宽了，这个时候由于网站具备了一定的特色，吸引了部分人访问，逐渐你发现系统的压力越来越高，响应速度越来越慢，而这个时候比较明显的是数据库和应用互相影响，应用出问题了，数据库也很容易出现问题，而数据库出问题的时候，应用也容易
  • 初探Druid连接池之二——慢SQL日志记录 xingsan_zhang 日志连接池druid慢SQL
    由于工作原因，这里先不说连接数据库部分的配置，后面会补上，直接进入慢SQL日志记录。   1.applicationContext.xml中增加如下配置： <bean abstract="true" id="mysql_database" class="com.alibaba.druid.pool.DruidDataSourc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他