巷陌i
巷陌i

用ES6写选项卡

html和css

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .clearFix {
            *zoom: 1;
        }

        .clearFix::after {
            display: block;
            height: 0;
            content: '.';
            clear: both;
            visibility: hidden;
        }

        .cursor {
            cursor: pointer;
        }

        .block {
            display: block;
        }

        .main {
            width: 80%;
            margin: 100px auto;
            border: 1px solid salmon;
        }

        .boxTop {
            width: 100%;
        }

        .boxTop ul {
            float: left;
        }

        .boxTop li {
            list-style: none;
            position: relative;
            float: left;
            max-width: 150px;
            width: 100px;
            padding: 0 10px;
            text-align: center;
            line-height: 1;
            height: 50px;
            line-height: 50px;
        }

        .boxTop li {
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }

        .boxTop li span:nth-of-type(even) {
            position: absolute;
            right: 0;
            top: 0;
            width: 15px;
            height: 15px;
            color: #fff;
            background-color: #000;
            line-height: 10px;
            font-size: 15px;
            text-align: center;
            border-bottom-left-radius: 100%;
        }

        .boxTop li.liActive {
            border-bottom: 2px solid #fff;
            margin-bottom: -1px;
        }

        .boxTop .tabadd {
            float: right;
            width: 30px;
            height: 30px;
            border: 1px solid;
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            margin: 10px;
        }

        .sec div {
            display: none;
            width: 100%;
            height: 300px;
        }

        .sec {
            border: 1px solid #ccc;
            margin-top: -1px;
        }

        .sec .secActive {
            display: block;
        }
    </style>
</head>

<body>
    <section class="main" id="Tab">
        <div class="boxTop clearFix">
            <ul class="clearFix">
                <li class="liActive"><span class="block">测试1</span><span class="block cursor">&times;</span></li>
                <li><span class="block">测试2</span><span class="block cursor">&times;</span></li>
            </ul>
            <div class="tabadd clearFix cursor">
                <span class="block">+</span>
            </div>
        </div>
        <div class="sec" id="sec">
            <div class="secActive">测试1</div>
            <div>测试2</div>
        </div>
    </section>
    <script src="js/tabToggle.js"></script> 
</body>

</html>

js

面向对象版tab栏切换 添加功能

  1. 点击+可以实现添加新的选项卡和内容
  2. 第一步：创建新的选项卡li 和新的内容标签
  3. 第二步：把创建的两个元素添加到对应的父元素中。
  4. 以前的做法：动态创建元素createElement，但是元素里面的内容较多，需要innerHTML赋值在appendChild
    追加到父元素里面
  5. 现在高级的做法：利用insertAjacentHTML()可以直接把字符串格式添加到父元素中
  6. appendChild不支持追加字符串的子元素，利用insertAjacentHTML支持追加字符串的元素

面向对象版tab栏切换 删除功能

  1. 点击❌可以删除当前的li选项当前的内容展示区域
  2. ❌是没有索引号的，但是他的父级li有，这个索引号正好是我们想要的
  3. 所以核心思路是：点击❌是可以删除这个索引号相对应的li和内容部分

面向对象版tab栏切换 编辑功能

  1. 双击选项卡li或者对应的展示的那内容，就可以实现修改功能
  2. 双击事件是：ondblclick
  3. 如果双击文字，此时需要双击禁止选中文字
  4. window.getSelection?window.getSelection().removeAllRanges():document.selection.empty()
  5. 核心思路：双击文字时，在里面生成一个文本框，当时去焦点或者按下回车然后把文字赋值给元素即可
var that;
class Tab {
    constructor(id) {
        that = this;
        this.main = document.querySelector(id);
        this.lis = this.main.querySelectorAll("li");
        this.ul = this.main.querySelector("ul")
        this.sec = document.getElementById("sec");
        this.div = this.sec.querySelectorAll("div");
        //this.add = this.main.querySelector(".tabadd");
        this.init();
    }
    init() {
        //init 初始化操作让相关的元素绑定事件
        this.add.onclick = this.addTab;
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggleTab;
        }
    }
    //切换功能
    toggleTab() {
        for (var i = 0; i < that.lis.length; i++) {
            that.lis[i].className = "";
            that.div[i].className = ""；
        }
        this.className = "liActive"
        that.div[this.index].className = "secActive"
    }
}
new Tab("#Tab")

你可能感兴趣的:(用ES6写选项卡)

  • Git使用 从入门到入土 收藏吃灰系列 (十三) git stash、git check-pick、git tag、git diff 张时贰 Git&原理&指令学习gitgithub
    文章目录一、前言二、gitstash存储到堆栈三、Gittag标签四、gitcherry-pick挑选合并五、gitdiff本节速览gitstash堆栈gittag标签gitcherry-pick挑选合并gitdiff比较信息差异本节开始都是一些不怎么用的命令,或者一些使用技巧,了解即可一、前言参考安装Git详细安装教程参考视频B站Git最新教程通俗易懂，这个有点长，感觉讲的精华不多参考视频『Gi
  • 说明 unique_ptr 的 reset 方法？ unique-ptrreset
    std::unique_ptr的reset方法用于显式地释放它所管理的资源，并可以选择性地用一个新的资源替换它。以下是reset方法的几种用法和示例：无参数调用reset()当调用reset()时，std::unique_ptr会释放它当前管理的资源，并将指针置为空。示例代码cpp复制includeincludeintmain(){//创建一个unique_ptr，分配内存std::unique_
  • 用Python爬虫获取AliExpress商品信息：item_search API接口实战指南 JelenaAPI小小爬虫 PythonAPIpython爬虫开发语言
    引言在全球化电商的浪潮中，数据的力量不容小觑。对于电商分析师、市场研究者以及在线商家而言，能够快速获取商品信息是至关重要的。AliExpress作为全球知名的跨境电商平台，提供了丰富的商品数据。本文将介绍如何使用Python爬虫结合item_searchAPI接口，按关键字搜索并获取AliExpress上的商品信息。一、为什么选择Python爬虫Python因其简洁的语法和强大的库支持，成为编写爬
  • Python用Bokeh处理大规模数据可视化的最佳实践 一键难忘 Bokehpython开发语言
    用Bokeh处理大规模数据可视化的最佳实践在大规模数据处理和分析中，数据可视化是一个至关重要的环节。Bokeh是一个在Python生态中广泛使用的交互式数据可视化库，它具有强大的可扩展性和灵活性。本文将介绍如何使用Bokeh处理大规模数据可视化，并提供一些最佳实践和代码实例，帮助你高效地展示大数据集中的重要信息。1.为什么选择Bokeh？Bokeh是一个专为浏览器呈现而设计的可视化库，它支持高效渲
  • [AI速读]用持续集成（CI）优化芯片验证环境：Jenkins与EDA工具的实战指南 iccnewer ci/cdjenkins运维
    在芯片验证中，回归测试（RegressionTest）是确保设计稳定性的关键步骤。但随着设计复杂度增加，手动管理海量测试用例、分析日志和覆盖率数据变得异常耗时。本文将介绍如何利用持续集成（CI）工具Jenkins，结合EDA验证环境（如CadencevManager），实现自动化测试与结果分析，大幅提升验证效率。传统验证的痛点在传统流程中，验证工程师通常面临以下挑战：手动操作多：每次代码提交后，需
  • [AI速读]CHISEL vs. SystemVerilog：用RISC-V核心对比两种硬件设计语言 iccnewer risc-v设计语言
    在硬件设计领域，选择合适的语言对开发效率、维护成本和最终性能都至关重要。最近，一项研究对比了两种硬件描述语言——CHISEL（基于Scala的嵌入式语言）和传统的SystemVerilog，它们分别实现了同一款RISC-V核心（SweRV-EL2）。以下是关键发现和结论。为什么选择CHISEL？CHISEL是一种基于Scala的高级硬件构造语言，它结合了面向对象和函数式编程的特性。与传统的Syst
  • python列表操作计算列表长度并输出,Python基础2：列表 想吃草莓干
    一、列表列表是按照特定顺序的排列组合，就像数学中的数列，列表中的元素具有⼀定的排列顺序。在Python中，列表用方括号[]来表示列表，比如：>>>a=['Python','C','Java']1、访问列表中的元素索引开始：0如果我们想要打印上述列表中Python，就需要我们访问列表中第一个元素，在Python中，列表的访问从0开始，索引数为元素的位置减去1，访问的元素位置放在方括号里面，如果我们想
  • 免费铝型材设计软件 boringhex.top diy
    前几天老婆在挑选婴儿床，左挑右选都觉得不太合适，于是我就想自己设计一个，然后找厂家定制。时间充裕的话我认为木制依然是首选，但是木材的水比较深，我对木材的了解不够，已经没有时间试错了。想来想去，我决定用铝型材，之前想做机箱和样板贴片机时就一直惦记玩一玩铝型材，一直没成行，这次正好可以试试。铝型材是指用铝合金材料制成的各种型状的金属材料，具有轻质、耐腐蚀、易加工、可回收利用等特点。以下将详细介绍铝型材
  • Flink Cdc TiDB详解 24k小善 flink大数据java
    1.什么是FlinkTiDBCDC？简单说就是用Flink实时抓取TiDB数据库的数据变化（比如新增、修改、删除），并将这些变化数据以流的形式处理，用于实时分析、同步到其他系统等场景。TiDB本身是分布式数据库，而Flink是流处理引擎，两者的结合适合需要高吞吐、低延迟的大规模数据处理场景[7][8]。2.底层原理TiDB侧：通过TiCDC组件（TiDB的变更数据捕获工具）捕获数据变更，类似MyS
  • java将动态图转换成静态图_如何用最简单的方法把静态图变成动图？ PEI Lobster java将动态图转换成静态图
    在今日头条浏览文章时，我们经常会看到有些作者在文章中插入了一些动态图片，不但美化了页面，而且起到了简明扼要的说明作用，让读者对文章内容加深了理解，也提高了文章的阅读量和点击量。这样的动态效果是如何制作的呢？主要有两个步骤：首先要制作出图片动态效果的视频，一般是MP4格式，第二步用格式工厂等文件格式转换软件，把MP4转换为gif动画格式，然后就可以把它插入到网页中。这其中的难点和重点就在于制作图片的
  • Ret2syscall（超详细） LuoYaFu 服务器算法运维
    什么是系统调用？系统调用（SystemCall）是操作系统提供给应用程序的接口，允许应用程序请求操作系统内核执行某些特权操作。由于操作系统内核运行在更高的特权级别（如x86架构中的内核态），普通应用程序（运行在用户态）无法直接访问硬件资源或执行某些敏感操作（如文件读写、进程管理、网络通信等）。因此，应用程序需要通过系统调用来请求内核完成这些操作。我用自己的话说就是设置对应寄存器的值，达到调用系统函
  • 【蓝桥杯】真题 2386染色时间 （优先队列BFS） 遥感小萌新 蓝桥杯蓝桥杯宽度优先职场和发展
    思路这里每一个格子染色多了时间这一层限制，相当于图的每一边有了权重的限制，那么我们就不能直接用双向队列求最短路。而是使用优先队列。规则是这样的：每一个节点可以多次入队，但是只有第一次出队有效。所以这次我们不会在加入队列时更改标签vis，而是在出队时更改标签。如果在出队时发现vis已经更改，这说明这个元素以前出过队列（不是第一次出队），则直接continuecode我们额外设置两个数组，vis标签数
  • HarmonyOS5开发：手把手教你用 Ark-TS UI 做一个会 “动” 的计数器：从代码到原理全解析 harmonyos-next
    今天咱们用鸿蒙5的Ark-TSUI做一个简单又有趣的计数器应用。点击按钮数字就会增加，而且界面还能自动更新。通过这个案例，你能轻松理解Ark-TSUI的核心玩法。一、最终效果长什么样？打开应用，你会看到一个大按钮，上面写着“点击加1”。每次点击按钮，按钮上方的数字就会变大。比如第一次点击变成“1”，第二次变成“2”，依此类推。整个过程不需要手动刷新页面，数字会自动变化。二、完整代码长这样types
  • 鸿蒙 5 开发工具 Ark-TS UI 到底有多好用？一篇文章讲明白 harmonyos-next
    鸿蒙5系统越来越火，很多开发者都在学怎么用它开发应用。所以今天咱们聊聊鸿蒙5里特别重要的一个工具——Ark-TSUI。这玩意儿到底是干啥的？简单说，它就是用来做应用界面的，而且比传统方法更简单、更高效。下面咱们用大白话讲讲它的厉害之处。一、不用纠结怎么盖房子，只需要画图纸以前写代码做界面，就像盖房子要一块砖一块砖垒——得告诉程序“先建墙，再安门，最后刷漆”。但Ark-TSUI不一样，它用的是“声明
  • Oracle SQL 开发实战：高效技巧与核心特性解析 McRfee sql
    OracleSQL开发实战：高效技巧与核心特性解析OracleSQL开发实战：高效技巧与核心特性解析一、引言：OracleSQL的核心优势二、高效SQL编写技巧1.避免全表扫描的黄金法则2.用WITH子句简化复杂查询3.MERGE语句实现智能更新三、Oracle独有特性深度解析1.分析函数：窗口计算的利器2.CONNECTBY层级查询3.虚拟列（VirtualColumn）4.FLASHBACK闪
  • 使用Annoy进行高效的近似最近邻搜索 eahba 前端javascriptangular.jspython
    在处理大型数据集时，我们经常面临需要快速、准确地查找与给定查询点相近的数据点的问题。Annoy（ApproximateNearestNeighborsOhYeah）就是为解决此类问题而生的一个强大工具。Annoy是一个用C++编写并具有Python绑定的库，专用于在空间中搜索与给定查询点相近的点。它能够创建大型的只读文件数据结构，并映射到内存中，以便于多个进程共享相同的数据。技术背景介绍Annoy
  • 【蓝桥杯】4535勇闯魔堡（多源BFS + 二分） 遥感小萌新 蓝桥杯蓝桥杯宽度优先职场和发展
    思路k有一个范围（0到怪物攻击的最大值），求满足要求的k的最小值。很明显的二分套路。关键是check函数怎么写，我们需要找到一条从第一行到最后一行的路径，每一次可以从上下左右四个方向前进，那么我么可以用BFS来查找是否存在。这里还有一个思维上的关键点，在开始时我们可以随机选一个点出发，如果我们用遍历第一行满足要求的格子，用bfs依次判断，那么这题样例只能过60%。实际上只需把所有满足要求的格子都加
  • openwrt路由器禁止某台设备上网操作失败问题解决 无级程序员 智能路由openwrtrax3000m智能路由
    家有一台移动RAX3000M，改造成了多功能服务器，同时，还能限制小孩上网，但时间长了就发现移除可添加限制上网设备时无法操作。到处搜索也没找到它是怎么限制的，于是用mac地址在/etc目录下搜索，搜索命令：grep-r"62:19"/etc上面的“62:19”是被限制了上网的一个设备mac地址中的一部分。终于发现了是配置在/etc/config/security里面，内容如下：configfire
  • 如何快速理解模糊PID---（二） Invinciblenuonuo STM32算法
    模糊控制规则上文只介绍了误差这一个输入量，我们可以用相同的方法对误差的变化率这一输入量进行模糊化。模糊控制规则主要有两种，Mamdini和T-S型模糊控制器这里只介绍Mamdini型模糊控制器Mamdini型模糊控制器就是一堆“如果x是U1y是U2那么z是W1”的语句组成先上图设误差为E，误差的变化率为EC，而输出量我们也用上文的方法将他划分出六个区域，并规定出它的模糊论域（NB,NM,NS,Z0
  • 位图思想详解：用一个小小的比特征服整个世界 Joseit 优选算法java算法
    位图思想详解：用一个小小的比特征服整个世界一、什么是位图？二、位图的形象理解三、位图的Java实现四、位图的算法原理剖析五、实际应用案例：网站用户活跃度统计五、真实的应用场景：布隆过滤器的基础六、算法题：判断字符是否唯一（easy）一、什么是位图？位图是一种超级节省空间的数据结构，他利用二进制位（0/1）来表示某个元素是否存在或某种状态是否为真。想象一下，用一个小小的比特位就能记录一个信息，这简直
  • 给普通人看的深度学习说明书：用快递系统理解AI如何思考 嵌入式Jerry PythonAI人工智能深度学习
    第一章：理解AI的思维方式（快递版）1.1快递分拣站的故事假设你管理一个快递分拣站：传统方法：手动制定规则（比如根据邮编分拣）机器学习：观察老员工的分拣记录，总结规律深度学习：搭建自动分拣流水线，自主发现隐藏规则1.2神经网络就像智能分拣机传送带（输入层）：接收包裹信息（图片像素/文字等）#就像扫描快递单input_data=[0.2,0.7,0.1]#归一化后的特征数据分拣工人（隐藏层）：每个工
  • 查询数据库中第n行数据 weixin_44231698
    一般情况下分页的时候是需要的关键字。Oracle中则是rownum，MSSQL中是top关键字，MySQL中是limit关键字。查第n条数据，如：（1）select*from(SELECTROWNUMrn,A.*FROMTABLEA)bwhereb.rn=n;(2)selecttop1*fromTABLEAwhereidnotin(selecttopn-1idfromTABLEA);(3)用mys
  • 通俗易懂的讲解MobX luckucu javascripthtml5react.js前端
    什么是MobX？想象一下，你有一个小白板，上面写着你每天要做的事情。你每完成一件事，就在白板上打个勾。这个小白板就像是你的“状态”，而你打勾的动作就是“更新状态”。MobX就是这样一个工具，它帮助你管理和更新你的“小白板”。核心概念MobX有几个核心概念：observable、action、computed和reaction。我们用一个家庭日常生活的例子来解释这些概念。Observable（可观察
  • 3.20 补题（二分模板，反向搜索） ZZZS0516 深度优先算法图论c++
    目录D-填涂颜色（搜索）题目描述思路分析代码实现F-跳石头（二分模板）题目描述思路分析代码实现D-填涂颜色（搜索）链接：P1162填涂颜色-洛谷题目描述由数字000组成的方阵中，有一任意形状的由数字111构成的闭合圈。现要求把闭合圈内的所有空间都填写成222。例如：6×66\times66×6的方阵（n=6n=6n=6），涂色前和涂色后的方阵如下：如果从某个000出发，只向上下左右444个方向移动
  • python中的递归、回调函数以及闭包总结 敲代码敲到头发茂密 Python成长之路python开发语言
    这里写目录标题一、递归例1：利用递归函数计算1到10的和例2：利用递归函数计算10的阶乘二、回调函数特别注意：在函数中的调用函数分为以下情况：1、同步回调2、异步回调三、闭包一、递归作用：在函数内部调用自己若干次例1：利用递归函数计算1到10的和defsum_num(num):ifnum>=1:sum=num+sum_num(num-1)else:sum=0returnsumprint(sum_n
  • Selenium工作原理详解 天才测试猿 selenium测试工具自动化测试软件测试测试用例python职场和发展
    Selenium是一个用于Web应用程序自动化测试工具。Selenium测试直接运行在浏览器中，就像真正的用户在操作一样。支持的浏览器包括IE（7,8,9,10,11），MozillaFirefox，Safari，GoogleChrome，Opera等。主要功能包括：测试与浏览器的兼容性——测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上。测试系统功能——创建回归测试检验软件功能和用
  • 云原生周刊丨CIO 洞察：Kubernetes 解锁 AI 新纪元 KubeSphere 云原生 云原生kubernetes人工智能
    开源项目推荐DRANETDRANET是由谷歌开发的K8s网络驱动程序，利用K8s的动态资源分配（DRA）功能，为高吞吐量和低延迟应用提供高性能网络支持。它旨在优化资源管理，确保K8s集群中的网络资源能够按需高效分配。DRANET采用Apache-2.0开源许可，鼓励社区贡献与扩展，是云原生环境下提升网络性能的创新解决方案。LazyjournalLazyjournal是一个用Go语言编写的终端用户界
  • 一文读懂什么是服务器 小熊猫Q 服务器科普服务器运维
    服务器基础介绍介绍服务器相关基础知识，如服务器分类、组成、机箱内部构造等，个人公众号：SRE杂谈，欢迎关注1、什么是服务器？服务器品牌有惠普、戴尔、浪潮、华为、华三、曙光等，各厂商服务器型号存在差异，惠普DL380G10、戴尔PowerEdgeR750、浪潮NF5280M5、华为2288HV5、曙光R6230HA一般用SN序列号和资产编号来对服务器进行标识，其中SN为唯一标识2、服务器演进2.1、
  • B2143 进制转换 1101.01 算法c++
    题目描述用递归算法将一个十进制整数X（1≤X≤109）转换成任意进制数M（2≤M≤16，M为整数）。输入格式一行两个数，第一个十进制整数X，第二个为进制M。输出格式输出结果。输入输出样例输入#1复制3116输出#1复制1F说明/提示样例解释。将十进制31转化为十六进制数。#includeusingnamespacestd;chars[16]={'0','1','2','3','4','5','6'
  • 不用再当“技术宅“！这个AI神器让我5分钟变身人工智能达人 阳光永恒736 AI工具人工智能deepseek一键包本地部署AI资源
    最近我在朋友圈刷到好多朋友都在玩AI画图、AI写诗，看得我心痒痒。可每次想自己试试，打开教程就被满屏的代码吓退——"Python环境配置"、"CUDA驱动安装"这些词比数学作业还让人头疼。直到我发现了一个叫DeepSeek本地部署一键包的神器，我的AI探索之旅终于变得像搭乐高一样简单！夸克网盘分享一、原来AI离我们这么近上周三放学路上，我看见隔壁班的小美用AI给自己照片生成古风造型，这让我突然意识
  • jvm调优总结（从基本概念 到 深度优化） oloz javajvmjdk虚拟机应用服务器
    JVM参数详解：http://www.cnblogs.com/redcreen/archive/2011/05/04/2037057.html   Java虚拟机中，数据类型可以分为两类：基本类型和引用类型。基本类型的变量保存原始值，即：他代表的值就是数值本身；而引用类型的变量保存引用值。“引用值”代表了某个对象的引用，而不是对象本身，对象本身存放在这个引用值所表示的地址的位置。
  • 【Scala十六】Scala核心十：柯里化函数 bit1129 scala
    本篇文章重点说明什么是函数柯里化，这个语法现象的背后动机是什么，有什么样的应用场景，以及与部分应用函数(Partial Applied Function)之间的联系   1. 什么是柯里化函数 A way to write functions with multiple parameter lists. For instance def f(x: Int)(y: Int) is a
  • HashMap dalan_123 java
    HashMap在java中对很多人来说都是熟的；基于hash表的map接口的非同步实现。允许使用null和null键；同时不能保证元素的顺序；也就是从来都不保证其中的元素的顺序恒久不变。 1、数据结构     在java中，最基本的数据结构无外乎：数组 和 引用（指针），所有的数据结构都可以用这两个来构造，HashMap也不例外，归根到底HashMap就是一个链表散列的数据
  • Java Swing如何实时刷新JTextArea，以显示刚才加append的内容 周凡杨 java更新swingJTextArea
    在代码中执行完textArea.append("message")后，如果你想让这个更新立刻显示在界面上而不是等swing的主线程返回后刷新，我们一般会在该语句后调用textArea.invalidate()和textArea.repaint()。 问题是这个方法并不能有任何效果，textArea的内容没有任何变化，这或许是swing的一个bug，有一个笨拙的办法可以实现
  • servlet或struts的Action处理ajax请求 g21121 servlet
    其实处理ajax的请求非常简单，直接看代码就行了： //如果用的是struts //HttpServletResponse response = ServletActionContext.getResponse(); // 设置输出为文字流 response.setContentType("text/plain"); // 设置字符集 res
  • FineReport的公式编辑框的语法简介 老A不折腾 finereport公式总结
    FINEREPORT用到公式的地方非常多，单元格（以=开头的便被解析为公式），条件显示，数据字典，报表填报属性值定义，图表标题，轴定义，页眉页脚，甚至单元格的其他属性中的鼠标悬浮提示内容都可以写公式。 简单的说下自己感觉的公式要注意的几个地方：   1.if语句语法刚接触感觉比较奇怪，if(条件式子,值1,值2)，if可以嵌套，if(条件式子1，值1，if(条件式子2，值2，值3)
  • linux mysql 数据库乱码的解决办法 墙头上一根草 linuxmysql数据库乱码
    linux 上mysql数据库区分大小写的配置 lower_case_table_names=1 1-不区分大小写 0-区分大小写   修改/etc/my.cnf 具体的修改内容如下:   [client] default-character-set=utf8   [mysqld] datadir=/var/lib/mysql socket=/va
  • 我的spring学习笔记6-ApplicationContext实例化的参数兼容思想 aijuans Spring 3
    ApplicationContext能读取多个Bean定义文件，方法是： ApplicationContext appContext = new ClassPathXmlApplicationContext（ new String[]｛“bean-config1.xml”，“bean-config2.xml”，“bean-config3.xml”，“bean-config4.xml
  • mysql 基准测试之sysbench annan211 基准测试mysql基准测试MySQL测试sysbench
    1 执行如下命令，安装sysbench-0.5： tar xzvf sysbench-0.5.tar.gz  cd sysbench-0.5  chmod +x autogen.sh  ./autogen.sh  ./configure --with-mysql --with-mysql-includes=/usr/local/mysql
  • sql的复杂查询使用案列与技巧 百合不是茶 oraclesql函数数据分页合并查询
      本片博客使用的数据库表是oracle中的scott用户表;          -------------------  自然连接查询           查询 smith 的上司(两种方法) &
  • 深入学习Thread类 bijian1013 javathread多线程java多线程
    一．             线程的名字 下面来看一下Thread类的name属性，它的类型是String。它其实就是线程的名字。在Thread类中，有String getName()和void setName(String)两个方法用来设置和获取这个属性的值。 同时，Thr
  • JSON串转换成Map以及如何转换到对应的数据类型 bijian1013 javafastjsonnet.sf.json
            在实际开发中，难免会碰到JSON串转换成Map的情况，下面来看看这方面的实例。另外，由于fastjson只支持JDK1.5及以上版本，因此在JDK1.4的项目中可以采用net.sf.json来处理。 一.fastjson实例 JsonUtil.java package com.study; impor
  • 【RPC框架HttpInvoker一】HttpInvoker：Spring自带RPC框架 bit1129 spring
    HttpInvoker是Spring原生的RPC调用框架，HttpInvoker同Burlap和Hessian一样，提供了一致的服务Exporter以及客户端的服务代理工厂Bean，这篇文章主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成   在 【RPC框架Hessian二】Hessian 对象序列化和反序列化一文中
  • 【Mahout二】基于Mahout CBayes算法的20newsgroup的脚本分析 bit1129 Mahout
    #!/bin/bash # # Licensed to the Apache Software Foundation (ASF) under one or more # contributor license agreements. See the NOTICE file distributed with # this work for additional information re
  • nginx三种获取用户真实ip的方法 ronin47
    随着nginx的迅速崛起，越来越多公司将apache更换成nginx. 同时也越来越多人使用nginx作为负载均衡, 并且代理前面可能还加上了CDN加速，但是随之也遇到一个问题：nginx如何获取用户的真实IP地址,如果后端是apache,请跳转到<apache获取用户真实IP地址>，如果是后端真实服务器是nginx，那么继续往下看。 实例环境： 用户IP 120.22.11.11
  • java-判断二叉树是不是平衡 bylijinnan java
    参考了 http://zhedahht.blog.163.com/blog/static/25411174201142733927831/ 但是用java来实现有一个问题。 由于Java无法像C那样“传递参数的地址，函数返回时能得到参数的值”，唯有新建一个辅助类：AuxClass import ljn.help.*; public class BalancedBTree {
  • BeanUtils.copyProperties VS PropertyUtils.copyProperties 诸葛不亮 PropertyUtilsBeanUtils
     BeanUtils.copyProperties VS  PropertyUtils.copyProperties  作为两个bean属性copy的工具类，他们被广泛使用，同时也很容易误用，给人造成困然；比如：昨天发现同事在使用BeanUtils.copyProperties copy有integer类型属性的bean时，没有考虑到会将null转换为0，而后面的业
  • [金融与信息安全]最简单的数据结构最安全 comsci 数据结构
          现在最流行的数据库的数据存储文件都具有复杂的文件头格式，用操作系统的记事本软件是无法正常浏览的，这样的情况会有什么问题呢？        从信息安全的角度来看，如果我们数据库系统仅仅把这种格式的数据文件做异地备份，如果相同版本的所有数据库管理系统都同时被攻击，那么
  • vi区段删除 Cwind linuxvi区段删除
    区段删除是编辑和分析一些冗长的配置文件或日志文件时比较常用的操作。简记下vi区段删除要点备忘。   vi概述    引文中并未将末行模式单独列为一种模式。单不单列并不重要，能区分命令模式与末行模式即可。   vi区段删除步骤： 1. 在末行模式下使用:set nu显示行号 非必须，随光标移动vi右下角也会显示行号，能够正确找到并记录删除开始行
  • 清除tomcat缓存的方法总结 dashuaifu tomcat缓存
    用tomcat容器，大家可能会发现这样的问题，修改jsp文件后，但用IE打开 依然是以前的Jsp的页面。 出现这种现象的原因主要是tomcat缓存的原因。 解决办法如下: 在jsp文件头加上 <meta http-equiv="Expires" content="0"> <meta http-equiv="kiben&qu
  • 不要盲目的在项目中使用LESS CSS dcj3sjt126com Webless
    　如果你还不知道LESS CSS是什么东西，可以看一下这篇文章，是我一朋友写给新人看的《CSS——LESS》 　　不可否认，LESS CSS是个强大的工具，它弥补了css没有变量、无法运算等一些“先天缺陷”，但它似乎给我一种错觉，就是为了功能而实现功能。 　　比如它的引用功能 ? .rounded_corners{     
  • [入门]更上一层楼 dcj3sjt126com PHPyii2
    更上一层楼 通篇阅读完整个“入门”部分，你就完成了一个完整 Yii 应用的创建。在此过程中你学到了如何实现一些常用功能，例如通过 HTML 表单从用户那获取数据，从数据库中获取数据并以分页形式显示。你还学到了如何通过 Gii 去自动生成代码。使用 Gii 生成代码把 Web 开发中多数繁杂的过程转化为仅仅填写几个表单就行。 本章将介绍一些有助于更好使用 Yii 的资源：
  • Apache HttpClient使用详解 eksliang httpclienthttp协议
    Http协议的重要性相信不用我多说了，HttpClient相比传统JDK自带的URLConnection，增加了易用性和灵活性（具体区别，日后我们再讨论），它不仅是客户端发送Http请求变得容易，而且也方便了开发人员测试接口（基于Http协议的），即提高了开发的效率，也方便提高代码的健壮性。因此熟练掌握HttpClient是很重要的必修内容，掌握HttpClient后，相信对于Http协议的了解会
  • zxing二维码扫描功能 gundumw100 androidzxing
    经常要用到二维码扫描功能 现给出示例代码 import com.google.zxing.WriterException; import com.zxing.activity.CaptureActivity; import com.zxing.encoding.EncodingHandler; import android.app.Activity; import an
  • 纯HTML+CSS带说明的黄色导航菜单 ini htmlWebhtml5csshovertree
    HoverTree带说明的CSS菜单:纯HTML+CSS结构链接带说明的黄色导航   在线体验效果：http://hovertree.com/texiao/css/1.htm代码如下,保存到HTML文件可以看到效果：   <!DOCTYPE html > <html > <head> <title>HoverTree
  • fastjson初始化对性能的影响 kane_xie fastjson序列化
    之前在项目中序列化是用thrift，性能一般，而且需要用编译器生成新的类，在序列化和反序列化的时候感觉很繁琐，因此想转到json阵营。对比了jackson，gson等框架之后，决定用fastjson，为什么呢，因为看名字感觉很快。。。   网上的说法：   fastjson 是一个性能很好的 Java 语言实现的 JSON 解析器和生成器，来自阿里巴巴的工程师开发。
  • 基于Mybatis封装的增删改查实现通用自动化sql mengqingyu DAO
    1.基于map或javaBean的增删改查可实现不写dao接口和实现类以及xml，有效的提高开发速度。 2.支持自定义注解包括主键生成、列重复验证、列名、表名等 3.支持批量插入、批量更新、批量删除 <bean id="dynamicSqlSessionTemplate" class="com.mqy.mybatis.support.Dynamic
  • js控制input输入框的方法封装(数字，中文，字母，浮点数等) qifeifei javascript js
    在项目开发的时候，经常有一些输入框，控制输入的格式，而不是等输入好了再去检查格式，格式错了就报错，体验不好。 /** 数字，中文，字母,浮点数(+/-/.) 类型输入限制，只要在input标签上加上 jInput="number,chinese,alphabet,floating" 备注：floating属性只能单独用*/     funct
  • java 计时器应用 tangqi609567707 javatimer
    mport java.util.TimerTask;   import java.util.Calendar;   public class MyTask extends TimerTask {        private static final int
  • erlang输出调用栈信息 wudixiaotie erlang
    在erlang otp的开发中，如果调用第三方的应用，会有有些错误会不打印栈信息，因为有可能第三方应用会catch然后输出自己的错误信息，所以对排查bug有很大的阻碍，这样就要求我们自己打印调用的栈信息。用这个函数：erlang:process_display (self (), backtrace).需要注意这个函数只会输出到标准错误输出。 也可以用这个函数：erlang:get_s
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他