express_yourself
express_yourself

多种方法实现Tab切换—面向过程&面向对象&Jquery方法

TAb切换思路一:
判断是否为当前点击对象，来增加类名和减少类名
要在面向过程的基础上改写成面向对象的方法，需要经过四个步骤：
1、创建构造函数
2、将变量变成对象的属性
3、将函数变成对象的方法
4、实例对象

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab1_三种方法实现</title>
<style> *{margin:0;padding:0; list-style: none;text-align: center;} #tab,#tab2{width: 600px;margin:50px auto 0;} #title{overflow: hidden;} #title span{float: left;width:199px;height: 30px;border-right: 1px solid #EAEAEA;line-height: 30px;font-size: 22px;color:#333333;background: #FCFCFC;cursor:pointer;} #content{height: 200px;overflow: hidden;background:#C8BBF8;} #content li{height:200px;line-height: 200px;font-size: 80px;display: none;} /*默认样式&点击后样式*/ #title .select{color:#FFFFFF;background: #0AA770;} #content .show{display: block;} </style>
</head>
<body>
    <div id="tab">
        <h1 id="title">
            <span class="select">标题一</span>
            <span>标题二</span>
            <span>标题三</span>
        </h1>
        <ul id="content">
            <li class="show">内容一</li>
            <li>内容二</li>
            <li>内容三</li>
        </ul>
    </div>
    <div id="tab2">
        <h1 id="title">
            <span class="select">标题一</span>
            <span>标题二</span>
            <span>标题三</span>
        </h1>
        <ul id="content">
            <li class="show">内容一</li>
            <li>内容二</li>
            <li>内容三</li>
        </ul>
    </div>
<script src="jquery-1.8.3.min.js"></script>
<script> /*面向过程写法：*/ /*var tit=document.getElementById('title'); var con=document.getElementById('content'); var spans=tit.getElementsByTagName('span'); var lis=con.getElementsByTagName('li'); //第一个for循环 给每一个span绑定点击事件 for (var i = 0, len= spans.length; i < len; i++){ spans[i].onclick=function(){ //第二个for循环 遍历找出当前点击是的span for (var j = 0,len= spans.length; j < len; j++) { if (spans[j]==this) { this.className='select'; // spans[j].className='select';//效果同上 lis[j].className='show'; } else {//若没被选中清空设置 spans[j].className=''; lis[j].className=''; } } } }*/ /*面向对象写法：*/ //1、创建构造函数 function Tab(targetID){ //2、把变量变成对象的属性 this.tab=document.getElementById(targetID); this.spans=this.tab.getElementsByTagName('span'); this.lis=this.tab.getElementsByTagName('li'); var _this=this;//此时this指向实例对象 for (var i = 0; i < this.spans.length; i++) { this.spans[i].onclick=function(){ _this.clickTab(this);//此时this指向点击的span } }; } //3、把函数变成对象的方法 Tab.prototype.clickTab=function(target){//target指向点击的span for (var i = 0; i < this.spans.length; i++) { if (this.spans[i]==target) {//此时this指向实例对象 this.spans[i].className='select'; this.lis[i].className='show'; }else{ this.spans[i].className=''; this.lis[i].className=''; } } } //4、实例对象-多处使用 var tab1=new Tab('tab'); var tab2=new Tab('tab2'); /*jQuery写法1：*/ /*$('#title span').click(function(){ var i=$(this).index();//获取当前元素索引值 $(this).addClass('select').siblings().removeClass('select'); $('#content li').eq(i).addClass('show').siblings().removeClass('show'); })*/ /*jQuery写法2：*/ /*$('#title span').click(function(){ var i=$('#title span').index(this); $('#title span').eq(i).addClass('select').siblings().removeClass('select'); $('#content li').eq(i).addClass('show').siblings().removeClass('show'); })*/ </script>
</body>
</html>

TAb切换思路二:
获取当前点击对象的索引，直接给其增加类名

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab2_三种方法实现</title>
<style> *{margin:0;padding:0; list-style: none;text-align: center;} #tab,#tab2{width: 600px;margin:50px auto 0;} #title{overflow: hidden;} #title span{float: left;width:199px;height: 30px;border-right: 1px solid #EAEAEA;line-height: 30px;font-size: 22px;color:#333333;background: #FCFCFC;cursor:pointer;} #content{height: 200px;overflow: hidden;background:#C8BBF8;} #content li{height:200px;line-height: 200px;font-size: 80px;display: none;} /*默认样式&点击后样式*/ #title .select{color:#FFFFFF;background: #0AA770;} #content .show{display: block;} </style>
</head>
<body>
    <div id="tab">
        <h1 id="title">
        <span class="select">标题一</span>
        <span>标题二</span>
        <span>标题三</span>
        </h1>
        <ul id="content">
            <li class="show">内容一</li>
            <li>内容二</li>
            <li>内容三</li>
        </ul>
    </div>
    <div id="tab2">
        <h1 id="title">
        <span class="select">标题一</span>
        <span>标题二</span>
        <span>标题三</span>
        </h1>
        <ul id="content">
            <li class="show">内容一</li>
            <li>内容二</li>
            <li>内容三</li>
        </ul>
    </div>
<script> /*一、面向过程写法：*/ /*var tit=document.getElementById('title'); var con=document.getElementById('content'); var spans=tit.getElementsByTagName('span'); var lis=con.getElementsByTagName('li'); //第一个for循环 给每一个span绑定点击事件 for (var i = 0, len= spans.length; i < len; i++){ spans[i].index=i;//不同处：获取当前点击事件的索引值为后面设置绑定对象使用 spans[i].onclick=function(){ //第二个for循环 遍历找出当前点击是的span //清空所有的绑定对象 for (var j = 0,len = spans.length; j < len;j++) { spans[j].className=''; lis[j].className=''; } //单独对点击事件绑定对象，索引值来自之前获取的 this.className='select'; lis[this.index].className='show'; } }*/ /*面向对象写法：*/ //1、创建构造函数 function Tab(targetID){ // 2、把变量变成对象的属性 this.tab=document.getElementById(targetID); this.spans=this.tab.getElementsByTagName('span'); this.lis=this.tab.getElementsByTagName('li'); this.prevIndex=0;//上次显示元素下标&第一次点击时需要清除样式的下标 var _this=this;//此时this指向实例对象 for (var i = 0; i < this.spans.length; i++) { this.spans[i].index=i; this.spans[i].onclick=function(){ _this.clickTab(this);//此时this指向点击的span _this.prevIndex=this.index;//实现点击操作后，保存点击对象的下标 } } } // 3、把函数变成对象的方法 Tab.prototype.clickTab=function(target){//target指向点击的span //this.prevIndex-上次显示元素下标 this.spans[this.prevIndex].className=''; this.lis[this.prevIndex].className=''; this.spans[target.index].className='select'; this.lis[target.index].className='show'; } //4、实例对象 var tab=new Tab('tab'); var tab2=new Tab('tab2'); </script>
</body>
</html>

你可能感兴趣的:(JavaScript,jquery,面向对象,对象,实例)

  • c++ 的iostream 和 c++的stdio的区别和联系 黄卷青灯77 c++算法开发语言iostreamstdio
    在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 高级编程--XML+socket练习题 masa010 java开发语言
    1.北京华北2114.8万人上海华东2,500万人广州华南1292.68万人成都华西1417万人（1）使用dom4j将信息存入xml中（2）读取信息，并打印控制台（3）添加一个city节点与子节点（4）使用socketTCP协议编写服务端与客户端，客户端输入城市ID，服务器响应相应城市信息（5）使用socketTCP协议编写服务端与客户端，客户端要求用户输入city对象，服务端接收并使用dom4j
  • 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
  • 关于提高复杂业务逻辑代码可读性的思考 编程经验分享 开发经验java数据库开发语言
    目录前言需求场景常规写法拆分方法领域对象总结前言实际工作中大部分时间都是在写业务逻辑，一般都是三层架构，表示层（Controller）接收客户端请求，并对入参做检验，业务逻辑层（Service）负责处理业务逻辑，一般开发都是在这一层中写具体的业务逻辑。数据访问层（Dao）是直接和数据库交互的，用于查数据给业务逻辑层，或者是将业务逻辑层处理后的数据写入数据库。简单的增删改查接口不用多说，基本上写好一
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 数组去重 好奇的猫猫猫
    整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • Python快速入门 —— 第三节：类与对象 孤华暗香 Python快速入门python开发语言
    第三节：类与对象目标：了解面向对象编程的基础概念，并学会如何定义类和创建对象。内容：类与对象：定义类：class关键字。类的构造函数：__init__()。类的属性和方法。对象的创建与使用。示例：classStudent:def__init__(self,name,age,major):self.name&#
  • 2022-11-17 无奇君
    又去了一次社康，这次是急性支气管炎……太难了。半夜就猛咳，天天咳醒，还好他戴海绵耳塞睡吵不到他，要不然对他来说也是种煎熬。一累也会猛咳，希望这次是最后一次吃药，吃完就好。又想把头发剪短了，顺便染个色。可是刚刚去看人家还没开门，不是休息日老板好佛系。理发店是个夫妻店，一年多前刚搬来的时候老板还没对象呢，当时聊天老板就说希望能找个对象一起两个人守着店都比上班强。不久后再去他已经有对象了，而且在店里帮忙
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • Python中深拷贝与浅拷贝的区别 yuxiaoyu.
    转自：http://blog.csdn.net/u014745194/article/details/70271868定义：在Python中对象的赋值其实就是对象的引用。当创建一个对象，把它赋值给另一个变量的时候，python并没有拷贝这个对象，只是拷贝了这个对象的引用而已。浅拷贝：拷贝了最外围的对象本身，内部的元素都只是拷贝了一个引用而已。也就是，把对象复制一遍，但是该对象中引用的其他对象我不复
  • 和自己结婚，是一种怎样的体验 只如初见_2020
    一个17岁谈恋爱，19岁结婚，然后离了三次婚的女人，站在台上说：“现在我结婚了，和那个一直以来，真正想在一起的人结婚了，那个人就是我自己。”她说，在我9岁前，我已经在二十几个寄养家庭中待过。我从童年到成年，就只有一个目标，不要被落下。而我实现这一目标的方式就是，我要结婚。我第一次的结婚对象，是我17岁时遇到的人。我们两年之后结了婚，当时我19岁。他是个非常好的人，来自于非常棒的家庭，他是工商管理硕
  • k均值聚类算法考试例题_k均值算法(k均值聚类算法计算题) 寻找你83497 k均值聚类算法考试例题
    ?算法：第一步：选K个初始聚类中心，z1(1),z2(1)，…，zK(1)，其中括号内的序号为寻找聚类中心的迭代运算的次序号。聚类中心的向量值可任意设定，例如可选开始的K个.k均值聚类：---------一种硬聚类算法，隶属度只有两个取值0或1，提出的基本根据是“类内误差平方和最小化”准则；模糊的c均值聚类算法：--------一种模糊聚类算法，是.K均值聚类算法是先随机选取K个对象作为初始的聚类
  • ES聚合分析原理与代码实例讲解 光剑书架上的书 大厂Offer收割机面试题简历程序员读书硅基计算碳基计算认知计算生物计算深度学习神经网络大数据AIGCAGILLMJavaPython架构设计Agent程序员实现财富自由
    ES聚合分析原理与代码实例讲解1.背景介绍1.1问题的由来在大规模数据分析场景中，特别是在使用Elasticsearch（ES）进行数据存储和检索时，聚合分析成为了一个至关重要的功能。聚合分析允许用户对数据集进行细分和分组，以便深入探索数据的结构和模式。这在诸如实时监控、日志分析、业务洞察等领域具有广泛的应用。1.2研究现状目前，ES聚合分析已经成为现代大数据平台的核心组件之一。它支持多种类型的聚
  • 在一起的日子 少些期待
    在一起已经三年多了，我是一个97年的摩羯座女生，他是一个89年的同样的摩羯座男生，刚开始是他追的我，我开始对他也挺有好感的，他从他朋友哪里，要到我的电话号，给我发信息，我没理他。然后我们的故事就这样开始了·····我不记得到底是什么，让我对他特别喜欢，想一心一意跟着他过日子，说白了我也就是个他的小跟班，又或者是个小跟屁虫，或者是个保姆，反正就是他在那里，我就得陪他到哪里，谈了半年多对象的时候，他因
  • 一文掌握python面向对象魔术方法（二） 程序员neil pythonpython开发语言
    接上篇：一文掌握python面向对象魔术方法（一）-CSDN博客目录六、迭代和序列化：1、__iter__(self):定义迭代器，使得类可以被for循环迭代。2、__getitem__(self,key):定义索引操作，如obj[key]。3、__setitem__(self,key,value):定义赋值操作，如obj[key]=value。4、__delitem__(self,key):定义
  • 二婚到底是领证好还是不领证好？ 孟妃青
    伟人讲过，不以结婚为目的的谈恋爱，都是耍流氓！离婚了，再找对象，感情到了一定程度，领证结婚是水到渠成的事，再说我中华泱泱大国，有礼仪之邦的称谓，领证更是体现了尊重男女双方的行为。如果认为二婚就没必要领证了，只能说明，男女之间都暗藏心思，心不往一处走，日子过不好的。即便他们感情再深，都不是合法夫妻，只是名不正言不顺的同居关系。假如不要二人共同的孩子还好，就怕有了孩子，没领证，到时给孩子上户口都成问题
  • python中的深拷贝与浅拷贝 anshejd70787 python
    深拷贝和浅拷贝浅拷贝的时候，修改原来的对象，浅拷贝的对象不会发生改变。1、对象的赋值对象的赋值实际上是对象之间的引用：当创建一个对象，然后将这个对象赋值给另外一个变量的时候，python并没有拷贝这个对象，而只是拷贝了这个对象的引用。当对对象做赋值或者是参数传递或者作为返回值的时候，总是传递原始对象的引用，而不是一个副本。如下所示：>>>aList=["kel","abc",123]>>>bLis
  • 用Python实现读取统计单词个数 程序媛了了 python游戏java
    完整实例代码：fromcollectionsimportCounterdefpythonit():danci={}withopen("pythonit.txt","r",encoding="utf-8")asf:foriinf:words=i.strip().split()forwordinwords:ifwordnotindanci:danci[word]=1else:danci[word]+=
  • python多线程程序设计 之一 IT_Beijing_BIT #Python程序设计语言python
    python多线程程序设计之一全局解释器锁线程APIsthreading.active_count()threading.current_thread()threading.excepthook(args,/)threading.get_native_id()threading.main_thread()threading.stack_size([size])线程对象成员函数构造器start/ru
  • 系统架构设计师 需求分析篇二 AmHardy 软件架构设计师系统架构需求分析面向对象分析分析模型UML和SysML
    面向对象分析方法1.用例模型构建用例模型一般需要经历4个阶段：识别参与者：识别与系统交互的所有事物。合并需求获得用例：将需求分配给予其相关的参与者。细化用例描述：详细描述每个用例的功能。调整用例模型：优化用例之间的关系和结构，前三个阶段是必需的。2.用例图的三元素参与者：使用系统的用户或其他外部系统和设备。用例：系统所提供的服务。通信关联：参与者和用例之间的关系，或用例与用例之间的关系。3.识别参
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • C++ lambda闭包消除类成员变量 barbyQAQ c++c++java算法
    原文链接：https://blog.csdn.net/qq_51470638/article/details/142151502一、背景在面向对象编程时，常常要添加类成员变量。然而类成员一旦多了之后，也会带来干扰。拿到一个类，一看成员变量好几十个，就问你怕不怕？二、解决思路可以借助函数式编程思想，来消除一些不必要的类成员变量。三、实例举个例子：classClassA{public:...intfu
  • 遥感影像的切片处理 sand&wich 计算机视觉python图像处理
    在遥感影像分析中，经常需要将大尺寸的影像切分成小片段，以便于进行详细的分析和处理。这种方法特别适用于机器学习和图像处理任务，如对象检测、图像分类等。以下是如何使用Python和OpenCV库来实现这一过程，同时确保每个影像片段保留正确的地理信息。准备环境首先，确保安装了必要的Python库，包括numpy、opencv-python和xml.etree.ElementTree。这些库将用于图像处理
  • 阅读笔记：阅读方法中的逻辑和转念 施吉涛
    聊聊一些阅读的方法论吧，别人家的读书方法刚开始想写，然后就不知道写什么了，因为作者写的非常的“精致”我有一种乡巴佬进城的感觉，看到精美的摆盘，精致的食材不知道该如何下口也就是《阅读的方法》，我们姑且来试一下强劲的大脑篇，第一节：逻辑通俗的来讲，也就是表达的排列和顺序，再进一步就是因果关系和关联实际上书已经看了大概一遍，但直到打算写一下笔记的时候，才发现作者讲的推理更多的是阅读的对象中呈现出的逻辑也
  • 【2022 CCF 非专业级别软件能力认证第一轮（CSP-J1）入门级 C++语言试题及解析】 汉子萌萌哒 CCFnoi算法数据结构c++
    一、单项选择题(共15题，每题2分，共计30分；每题有且仅有一个正确选项)1.以下哪种功能没有涉及C++语言的面向对象特性支持：()。A.C++中调用printf函数B.C++中调用用户定义的类成员函数C.C++中构造一个class或structD.C++中构造来源于同一基类的多个派生类题目解析【解析】正确答案:AC++基础知识，面向对象和类有关，类又涉及父类、子类、继承、派生等关系，printf
  • iOS内存管理简单理解 烧烤有点辣
    什么是引用计数引用计数（ReferenceCount）是一个简单而有效的管理对象生命周期的方式。当我们创建一个新对象的时候，它的引用计数为1，当有一个新的指针指向这个对象时，我们将其引用计数加1，当某个指针不再指向这个对象是，我们将其引用计数减1，当对象的引用计数变为0时，说明这个对象不再被任何指针指向了，这个时候我们就可以将对象销毁，回收内存。由于引用计数简单有效，除了Objective-C和S
  • jsonp 常用util方法 hw1287789687 jsonpjsonp常用方法jsonp callback
    jsonp 常用java方法 (1)以jsonp的形式返回:函数名(json字符串) /*** * 用于jsonp调用 * @param map : 用于构造json数据 * @param callback : 回调的javascript方法名 * @param filters : <code>SimpleBeanPropertyFilter theFilt
  • 多线程场景 alafqq 多线程
    0 能不能简单描述一下你在java web开发中需要用到多线程编程的场景？0 对多线程有些了解，但是不太清楚具体的应用场景，能简单说一下你遇到的多线程编程的场景吗？ Java多线程 2012年11月23日 15:41 Young9007 Young9007 4 0 0 4 Comment添加评论关注(2) 3个答案 按时间排序 按投票排序 0 0 最典型的如： 1、
  • Maven学习——修改Maven的本地仓库路径 Kai_Ge maven
          安装Maven后我们会在用户目录下发现.m2 文件夹。默认情况下，该文件夹下放置了Maven本地仓库.m2/repository。所有的Maven构件(artifact)都被存储到该仓库中，以方便重用。但是windows用户的操作系统都安装在C盘，把Maven仓库放到C盘是很危险的，为此我们需要修改Maven的本地仓库路径。    
  • placeholder的浏览器兼容 120153216 placeholder
    【前言】 自从html5引入placeholder后，问题就来了， 不支持html5的浏览器也先有这样的效果， 各种兼容，之前考虑，今天测试人员逮住不放， 想了个解决办法，看样子还行，记录一下。   【原理】 不使用placeholder，而是模拟placeholder的效果， 大概就是用focus和focusout效果。   【代码】 <scrip
  • debian_用iso文件创建本地apt源 2002wmj Debian
    1.将N个debian-506-amd64-DVD-N.iso存放于本地或其他媒介内，本例是放在本机/iso/目录下 2.创建N个挂载点目录 如下： debian:~#mkdir –r /media/dvd1 debian:~#mkdir –r /media/dvd2 debian:~#mkdir –r /media/dvd3 …. debian:~#mkdir –r /media
  • SQLSERVER耗时最长的SQL 357029540 SQL Server
    对于DBA来说，经常要知道存储过程的某些信息： 1.   执行了多少次 2.   执行的执行计划如何 3.   执行的平均读写如何 4.   执行平均需要多少时间 列名          &
  • com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil 7454103 eclipse
    今天eclipse突然报了com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil 错误，并且工程文件打不开了，在网上找了一下资料，然后按照方法操作了一遍，好了，解决方法如下： 错误提示信息： An error has occurred.See error log for more details. Reason: com/genuitec/
  • 用正则删除文本中的html标签 adminjun javahtml正则表达式去掉html标签
    使用文本编辑器录入文章存入数据中的文本是HTML标签格式，由于业务需要对HTML标签进行去除只保留纯净的文本内容，于是乎Java实现自动过滤。 如下： public static String Html2Text(String inputString) { String htmlStr = inputString; // 含html标签的字符串 String textSt
  • 嵌入式系统设计中常用总线和接口 aijuans linux 基础
                   嵌入式系统设计中常用总线和接口         任何一个微处理器都要与一定数量的部件和外围设备连接，但如果将各部件和每一种外围设备都分别用一组线路与CPU直接连接，那么连线
  • Java函数调用方式——按值传递 ayaoxinchao java按值传递对象基础数据类型
    Java使用按值传递的函数调用方式，这往往使我感到迷惑。因为在基础数据类型和对象的传递上，我就会纠结于到底是按值传递，还是按引用传递。其实经过学习，Java在任何地方，都一直发挥着按值传递的本色。   首先，让我们看一看基础数据类型是如何按值传递的。   public static void main(String[] args) { int a = 2;
  • ios音量线性下降 bewithme ios音量
    直接上代码吧   //second 几秒内下降为0 - (void)reduceVolume:(int)second { KGVoicePlayer *player = [KGVoicePlayer defaultPlayer]; if (!_flag) { _tempVolume = player.volume;
  • 与其怨它不如爱它 bijian1013 选择理想职业规划
            抱怨工作是年轻人的常态，但爱工作才是积极的心态，与其怨它不如爱它。         一般来说，在公司干了一两年后，不少年轻人容易产生怨言，除了具体的埋怨公司“扭门”，埋怨上司无能以外，也有许多人是因为根本不爱自已的那份工作，工作完全成了谋生的手段，跟自已的性格、专业、爱好都相差甚远。  
  • 一边时间不够用一边浪费时间 bingyingao 工作时间浪费
    一方面感觉时间严重不够用，另一方面又在不停的浪费时间。 每一个周末，晚上熬夜看电影到凌晨一点，早上起不来一直睡到10点钟，10点钟起床，吃饭后玩手机到下午一点。 精神还是很差，下午像一直野鬼在城市里晃荡。 为何不尝试晚上10点钟就睡，早上7点就起，时间完全是一样的，把看电影的时间换到早上，精神好，气色好，一天好状态。 控制让自己周末早睡早起，你就成功了一半。 有多少个工作
  • 【Scala八】Scala核心二：隐式转换 bit1129 scala
    Implicits work like this: if you call a method on a Scala object, and the Scala compiler does not see a definition for that method in the class definition for that object, the compiler will try to con
  • sudoku slover in Haskell (2) bookjovi haskellsudoku
    继续精简haskell版的sudoku程序，稍微改了一下，这次用了8行，同时性能也提高了很多，对每个空格的所有解不是通过尝试算出来的，而是直接得出。   board = [0,3,4,1,7,0,5,0,0, 0,6,0,0,0,8,3,0,1, 7,0,0,3,0,0,0,0,6, 5,0,0,6,4,0,8,0,7,
  • Java-Collections Framework学习与总结-HashSet和LinkedHashSet BrokenDreams linkedhashset
            本篇总结一下两个常用的集合类HashSet和LinkedHashSet。         它们都实现了相同接口java.util.Set。Set表示一种元素无序且不可重复的集合；之前总结过的java.util.List表示一种元素可重复且有序
  • 读《研磨设计模式》-代码笔记-备忘录模式-Memento bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; /* * 备忘录模式的功能是，在不破坏封装性的前提下，捕获一个对象的内部状态，并在对象之外保存这个状态，为以后的状态恢复作“备忘”
  • 《RAW格式照片处理专业技法》笔记 cherishLC PS
    注意，这不是教程！仅记录楼主之前不太了解的 一、色彩（空间）管理 作者建议采用ProRGB（色域最广），但camera raw中设为ProRGB，而PS中则在ProRGB的基础上，将gamma值设为了1.8（更符合人眼） 注意：bridge、camera raw怎么设置显示、输出的颜色都是正确的（会读取文件内的颜色配置文件），但用PS输出jpg文件时，必须先用Edit->conv
  • 使用 Git 下载 Spring 源码 编译 for Eclipse crabdave eclipse
    使用 Git 下载 Spring 源码 编译 for Eclipse   1、安装gradle，下载 http://www.gradle.org/downloads 配置环境变量GRADLE_HOME，配置PATH  %GRADLE_HOME%/bin，cmd，gradle -v   2、spring4 用jdk8 下载 https://jdk8.java.
  • mysql连接拒绝问题 daizj mysql登录权限
    mysql中在其它机器连接mysql服务器时报错问题汇总 一、[running][email protected]:~$mysql -uroot -h 192.168.9.108 -p   //带-p参数，在下一步进行密码输入 Enter password:    //无字符串输入 ERROR 1045 (28000): Access
  • Google Chrome 为何打压 H.264 dsjt applehtml5chromeGoogle
    Google 今天在 Chromium 官方博客宣布由于 H.264 编解码器并非开放标准，Chrome 将在几个月后正式停止对 H.264 视频解码的支持，全面采用开放的 WebM 和 Theora 格式。 Google 在博客上表示，自从 WebM 视频编解码器推出以后，在性能、厂商支持以及独立性方面已经取得了很大的进步，为了与 Chromium 现有支持的編解码器保持一致，Chrome
  • yii 获取控制器名 和方法名 dcj3sjt126com yiiframework
    1. 获取控制器名 在控制器中获取控制器名:  $name = $this->getId(); 在视图中获取控制器名:    $name = Yii::app()->controller->id;    2. 获取动作名  在控制器beforeAction()回调函数中获取动作名:  $name =
  • Android知识总结（二） come_for_dream android
    明天要考试了，速速总结如下   1、Activity的启动模式        standard：每次调用Activity的时候都创建一个（可以有多个相同的实例，也允许多个相同Activity叠加。）        singleTop：可以有多个实例，但是不允许多个相同Activity叠加。即，如果Ac
  • 高洛峰收徒第二期：寻找未来的“技术大牛” ——折腾一年，奖励20万元 gcq511120594 工作项目管理
    高洛峰，兄弟连IT教育合伙人、猿代码创始人、PHP培训第一人、《细说PHP》作者、软件开发工程师、《IT峰播》主创人、PHP讲师的鼻祖！ 首期现在的进程刚刚过半，徒弟们真的很棒，人品都没的说，团结互助，学习刻苦，工作认真积极，灵活上进。我几乎会把他们全部留下来，现在已有一多半安排了实际的工作，并取得了很好的成绩。等他们出徒之日，凭他们的能力一定能够拿到高薪，而且我还承诺过一个徒弟，当他拿到大学毕
  • linux expect heipark expect
    1. 创建、编辑文件go.sh   #!/usr/bin/expect spawn sudo su admin expect "*password*" { send "13456\r\n" } interact    2. 设置权限   chmod u+x go.sh  3.
  • Spring4.1新特性——静态资源处理增强 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
  • idea ubuntuxia 乱码 liyonghui160com
      1.首先需要在windows字体目录下或者其它地方找到simsun.ttf 这个 字体文件。 2.在ubuntu 下可以执行下面操作安装该字体： sudo mkdir /usr/share/fonts/truetype/simsun sudo cp simsun.ttf /usr/share/fonts/truetype/simsun fc-cache -f -v
  • 改良程序的11技巧 pda158 技巧
    有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程序你只写一次，但以后会无数次的阅读。当你第二天回头来看你的代码 时，你就要开始阅读它了。当你把代码拿给其他人看时，他必须阅读你的代码。因此，在编写时多花一点时间，你会在阅读它时节省大量的时间。   让我们看一些基本的编程技巧：   尽量保持方法简短 永远永远不要把同一个变量用于多个不同的
  • 300个涵盖IT各方面的免费资源（下）——工作与学习篇 shoothao 创业免费资源学习课程远程工作
    工作与生产效率:   A. 背景声音 Noisli:背景噪音与颜色生成器。 Noizio:环境声均衡器。 Defonic:世界上任何的声响都可混合成美丽的旋律。 Designers.mx:设计者为设计者所准备的播放列表。 Coffitivity:这里的声音就像咖啡馆里放的一样。 B. 避免注意力分散 Self Co
  • 深入浅出RPC uule rpc
    深入浅出RPC-浅出篇 深入浅出RPC-深入篇   RPC Remote Procedure Call Protocol 远程过程调用协议   它是一种通过网络从远程计算机程序上请求服务，而不需要了解底层网络技术的协议。RPC协议假定某些传输协议的存在，如TCP或UDP，为通信程序之间携带信息数据。在OSI网络通信模型中，RPC跨越了传输层和应用层。RPC使得开发
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他