js基础第3天
2015-11-19 00:24
489 查看
仿淘宝搜索框案例(有价值)
判断用户输入事件
正常浏览器:oninput(判断用户输入)
ie678浏览器兼容:onpropertychange(因为兼容性问题, ie浏览器678是需要使用这个来判断用户输入)
在鼠标点击和鼠标经过时,实行一样的行为。btn.onclick = btn.onmouseover =function(){}
this指的是当前在做操作的对象,事件的调用者。
想要达到搜索框内有文字,在点击的时候也不消失,只有在输入的时候才会消失。如果删除所有内容里面的文字又会出现,这样的效果该如何做呢?
首先input是搜索框,同时要加一个label,当做文字承载
那么加for=”txt”是什么意思呢?因为如果不加的话,光标在输入框中点击可能会选中文字,但是实际上文字是不被选中的,点击输入框会直接光标闪烁。那么加for意思是如果点击label 的话直接跳到上面的id=”txt”上,那么就不会被选中了。
效果
数组
var num=10;一般一个变量里面只能储存一个值。
数组就是一个大变量,它里面可以存储很多值。
var num=10; 这是用来声明变量。
var arr=[1,2,3,4,5]; 这是用来声明数组。
var arr=new Array(2,3,4); 这也是一种声明数组的方式。
var textArr=[“刘备”,”诸葛亮”,”赵云”,关羽”];
使用方法: 数组名[索引值];
索引号是从0开始排的。
数组长度:数组名.length;
遍历数组
从0遍历到4,总共遍历了5个值。
隔行变色
关键点:是否能被2整除,lis.length% 2 =0。因为需要从上到下全部判断到底哪行可以被整除,所以需要遍历数组,那么也就是for。如果能够整除就是什么颜色,否则就是什么颜色,所以需要使用if、else语句。
方法1
方法2
i+=2的意思是i=i+2
如果鼠标移到哪个位置时哪个位置变色该怎么实现呢?
(这里有个问题,对于隔行变色不带移动鼠标变色效果时,是可以使用上面的代码的,调用类名来添加样式。但是到了下面要加鼠标移动变色效果时,就不可以使用调用类名了,要直接赋予颜色样式。否则如果让鼠标在有颜色的li上移开,那么就会变为无色,因为className为空值。所以在上面if调用类名的方式就不合适了,直接赋值,下面就不会清空)
京东new图标JS遍历做法
带代表的是页面中id为iconsprite这个里面的所有的i。
字符相连
数值相加,字符相连
字符和数值,相加会相连,减乘除都会当数字看。
意思是获取所有button的0索引号,也就是第一个。
强制转换,把字符类型的转换为数值相加
全选和反选(有价值)
方法1(缺点代码太多)
方法2
三元运算符(三目运算符)
一元:a++ b++ +a –a
二元:a+b
三元:表达式?结果1:结果2;等价于if else
如果表达式结果为真,则返回结果1,结果2永远不返回
如果表达式结果为假,则返回结果2。
if(3>5){alert(“11”)} else{alert(22)}
3>5?alert(11):alert(22);
排他思想(重点)
首先干掉连带自己的所有人,其次再剩下我自己。
变量和属性
变量:是独立存在的,自由自在的
属性和方法:属于某个对象的属性和方法
得到当前序号(重点)
设置自定义属性
index为自定义属性,通过这种设置可以获得当前序号。
输出alrent(this.index);
tab栏切换(面试重点)
tab栏切换的话,那么首先要默认隐藏下面所有的盒子,要在样式里设置。但是第一个默认是显示的,所以需要加行内式
这个里面的核心是用到排他思想,清掉所有人,只剩下自己人。步骤是首先将上面鼠标选择的特效做出来,选择哪个,只有选择的有样式,其他的都没有样式。下面的设置是当选择当前的按钮时,下面所有的都隐藏,然后最后再留下当前索引号的那个盒子。
改进版
这里要注意一个问题,就是权重问题,js写对了但是效果没出来,可能是css样式里权重太低无法显示的问题
因为show的权重不如上面的高,所以上面是隐藏显示的,下面的显示就会出不来,那么我们只需要加一下权重就可以了。
最后的代码:
问题:
什么时候使用var 来调用id,什么时候用$(id)来调用id?是不是都一样?都适合哪种场合?
一个代码中用几次for
判断用户输入事件
正常浏览器:oninput(判断用户输入)
ie678浏览器兼容:onpropertychange(因为兼容性问题, ie浏览器678是需要使用这个来判断用户输入)
在鼠标点击和鼠标经过时,实行一样的行为。btn.onclick = btn.onmouseover =function(){}
this指的是当前在做操作的对象,事件的调用者。
想要达到搜索框内有文字,在点击的时候也不消失,只有在输入的时候才会消失。如果删除所有内容里面的文字又会出现,这样的效果该如何做呢?
首先input是搜索框,同时要加一个label,当做文字承载
<input type="text" id="txt"/> <label for="txt" id="message">必败的国际大牌</label>
那么加for=”txt”是什么意思呢?因为如果不加的话,光标在输入框中点击可能会选中文字,但是实际上文字是不被选中的,点击输入框会直接光标闪烁。那么加for意思是如果点击label 的话直接跳到上面的id=”txt”上,那么就不会被选中了。
<style> .search { width:300px; height: 30px; margin: 100px auto; position: relative; } .search input { width:200px; height:25px; } .search label { font-size: 12px; color:#ccc; position: absolute; top:8px; left:20px; cursor: text; } </style> <script> window.onload =function() { function $(id){return document.getElementById(id);} $("txt").oninput = $("txt").onpropertychange = function(){ if(this.value=="") { $("message").style.display="block"; } else { $("message").style.display="none"; } } } </script> </head> <body> <div class="search"> <input type="text" id="txt"/> <label for="txt" id="message">必败的国际大牌</label> </div> </body>
效果
数组
var num=10;一般一个变量里面只能储存一个值。
数组就是一个大变量,它里面可以存储很多值。
var num=10; 这是用来声明变量。
var arr=[1,2,3,4,5]; 这是用来声明数组。
var arr=new Array(2,3,4); 这也是一种声明数组的方式。
var textArr=[“刘备”,”诸葛亮”,”赵云”,关羽”];
使用方法: 数组名[索引值];
索引号是从0开始排的。
数组长度:数组名.length;
遍历数组
for(var i=0;i<txt.length;i++){} 这个需要每个赋值都运行一遍。
for(var i= 0,len=txt.length;i<len;i++){} 这个比较好,因为赋值后只运行一次,效率高。
从0遍历到4,总共遍历了5个值。
隔行变色
关键点:是否能被2整除,lis.length% 2 =0。因为需要从上到下全部判断到底哪行可以被整除,所以需要遍历数组,那么也就是for。如果能够整除就是什么颜色,否则就是什么颜色,所以需要使用if、else语句。
方法1
<script> window.onload =function(){ var lis=document.getElementsByTagName("li"); for(var i=0;i<lis.length;i++) { if(i%2 == 0) { lis[i].className="current"; } else { lis[i].className=""; } } } </script>
方法2
<script> window.onload =function(){ var lis=document.getElementsByTagName("li"); for(var i=0;i<lis.length;i+=2) { lis[i].style.backgroundColor="#ddd"; } } </script>
i+=2的意思是i=i+2
如果鼠标移到哪个位置时哪个位置变色该怎么实现呢?
(这里有个问题,对于隔行变色不带移动鼠标变色效果时,是可以使用上面的代码的,调用类名来添加样式。但是到了下面要加鼠标移动变色效果时,就不可以使用调用类名了,要直接赋予颜色样式。否则如果让鼠标在有颜色的li上移开,那么就会变为无色,因为className为空值。所以在上面if调用类名的方式就不合适了,直接赋值,下面就不会清空)
<style> .box { width: 300px; } li { line-height: 30px; list-style-type: none; } li span { margin:5px; } .current{ background-color: #ccc!important; } </style> <script> window.onload =function(){ var lis=document.getElementsByTagName("li"); for(var i=0;i<lis.length;i++) { if(i%2 == 0) { lis[i].style.backgroundColor="#ddd"; } lis[i].onmouseover=function() { this.className="current"; } lis[i].onmouseout=function(){ this.className=""; } } } </script> </head> <body> <div class="box"> <ul> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> </ul> </div> </body>
京东new图标JS遍历做法
var iis=document.getElementById("iconsprite").getElementsByTagName("i");
带代表的是页面中id为iconsprite这个里面的所有的i。
<script> var iis=document.getElementById("iconsprite").getElementsByTagName("i"); for(var i= 0,i<iis.length;i++) { /*iis[i].style.backgroundPosition="0 0";*/ iis[i].style.backgroundPosition="0 "+(-25*i)+"px"; /*因为精灵图是靠左且向下是负值,它们之间的关系是索引*-25*/ } </script>
字符相连
数值相加,字符相连
字符和数值,相加会相连,减乘除都会当数字看。
var btn=document.getElementsByTagName("button")[0];
意思是获取所有button的0索引号,也就是第一个。
强制转换,把字符类型的转换为数值相加
var txt = document.getElementById("txt"); var btn = document.getElementsByTagName("button")[0]; btn.onclick = function(){ //alert(typeof txt.value); var num = Number(txt.value); alert(num + num);
全选和反选(有价值)
方法1(缺点代码太多)
<script> window.onload =function() { var btns=document.getElementsByTagName("button"); var inputs=document.getElementById("bottom").getElementsByTagName("input"); btns[0].onclick=function() { for (var i = 0; i < inputs.length; i++) { inputs[i].checked = true; } } btns[1].onclick=function() { for (var i = 0; i < inputs.length; i++) { inputs[i].checked = false; } } btns[2].onclick=function(){ for (var i = 0; i < inputs.length; i++) { if(inputs[i].checked == false) { inputs[i].checked = true; } else { inputs[i].checked = false; } } } } </script>
方法2
三元运算符(三目运算符)
一元:a++ b++ +a –a
二元:a+b
三元:表达式?结果1:结果2;等价于if else
如果表达式结果为真,则返回结果1,结果2永远不返回
如果表达式结果为假,则返回结果2。
if(3>5){alert(“11”)} else{alert(22)}
3>5?alert(11):alert(22);
<script> window.onload =function() { var btns=document.getElementsByTagName("button"); var inputs=document.getElementById("bottom").getElementsByTagName("input"); function all(flag) { for (var i = 0; i < inputs.length; i++) { inputs[i].checked = flag; } } btns[0].onclick=function(){ all(true); } btns[1].onclick=function(){ all(false); } btns[2].onclick=function() { for (var i = 0; i < inputs.length; i++) { inputs[i].checked = true ? inputs[i].checked == false : inputs[i].checked == true; } } } </script> </head> <body> <div id="top"> <button>全选</button> <button>取消</button> <button>反选</button> </div> <div id="bottom"> <ul> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> </ul> </div> </body>
排他思想(重点)
首先干掉连带自己的所有人,其次再剩下我自己。
<style> .damao { background-color: pink; } </style> <script> window.onload = function(){ /*var btns =document.getElementsByTagName("button");*/ var btns = document.getElementsByTagName("button"); for(var i = 0; i<btns.length;i++) { btns[i].onclick = function() { for(var j=0;j<btns.length;j++) { btns[j].className=""; } this.className = "damao"; } } } </script> </head> <body> <button>思想原理</button> <button>思想原理</button> <button>思想原理</button> <button>思想原理</button> <button>思想原理</button> <button>思想原理</button> </body>
变量和属性
变量:是独立存在的,自由自在的
属性和方法:属于某个对象的属性和方法
得到当前序号(重点)
设置自定义属性
btns[i].index=i; 给每个button定义了一个index属性 索引号
index为自定义属性,通过这种设置可以获得当前序号。
输出alrent(this.index);
tab栏切换(面试重点)
tab栏切换的话,那么首先要默认隐藏下面所有的盒子,要在样式里设置。但是第一个默认是显示的,所以需要加行内式
<div style="display: block;">1好盒子</div>
这个里面的核心是用到排他思想,清掉所有人,只剩下自己人。步骤是首先将上面鼠标选择的特效做出来,选择哪个,只有选择的有样式,其他的都没有样式。下面的设置是当选择当前的按钮时,下面所有的都隐藏,然后最后再留下当前索引号的那个盒子。
<style> .box { width: 400px; margin:100px auto; border:1px solid #ccc; } .bottom div{ width:100%; height: 300px; background-color: pink; display: none; } .purple { background-color: purple; } </style> <script> window.onload = function() { var btns = document.getElementsByTagName("button"); var divs = document.getElementById("divs").getElementsByTagName("div"); for(var i =0;i<btns.length;i++) { btns[i].index=i; btns[i].onclick = function() { for(var j=0;j<btns.length;j++) { btns[j].className=""; } this.className ="purple"; for(var i=0;i<divs.length;i++) { divs[i].style.display="none"; } divs[this.index].style.display="block"; } } } </script> </head> <body> <div class="box"> <div class="top"> <button>第一个</button> <button>第二个</button> <button>第三个</button> <button>第四个</button> <button>第五个</button> </div> <div class="bottom" id="divs"> <div style="display: block;">1好盒子</div> <div>2好盒子</div> <div>3好盒子</div> <div>4好盒子</div> <div>5好盒子</div> </div> </div> </body>
btns[i].index=i;
divs[this.index].style.display="block";
改进版
这里要注意一个问题,就是权重问题,js写对了但是效果没出来,可能是css样式里权重太低无法显示的问题
.bottom div{ width:100%; height: 300px; background-color: pink; display: none;
.show { display:block; }
因为show的权重不如上面的高,所以上面是隐藏显示的,下面的显示就会出不来,那么我们只需要加一下权重就可以了。
.bottom .show { display:block; }
最后的代码:
<style> .box { width: 400px; margin:100px auto; border:1px solid #ccc; } .bottom div{ width:100%; height: 300px; background-color: pink; display: none; } .purple { background-color: purple; } .bottom .show { display:block; } </style> <script> window.onload = function() { var btns = document.getElementsByTagName("button"); var divs = document.getElementById("divs").getElementsByTagName("div"); for(var i =0;i<btns.length;i++) { btns[i].index=i; btns[i].onclick = function() { for(var j=0;j<btns.length;j++) { btns[j].className=""; divs[j].className=""; } this.className ="purple"; divs[this.index].className="show"; /* for(var i=0;i<divs.length;i++) { divs[i].style.display="none"; } divs[this.index].style.display="block";*/ } } } </script> </head> <body> <div class="box"> <div class="top"> <button>第一个</button> <button>第二个</button> <button>第三个</button> <button>第四个</button> <button>第五个</button> </div> <div class="bottom" id="divs"> <div class="show">1好盒子</div> <div>2好盒子</div> <div>3好盒子</div> <div>4好盒子</div> <div>5好盒子</div> </div> </div> </body>
问题:
什么时候使用var 来调用id,什么时候用$(id)来调用id?是不是都一样?都适合哪种场合?
一个代码中用几次for
相关文章推荐
- js基础第二天
- js基础第一天
- JS中eval函数(转)
- [javascript]数组基础
- 用js读、写、删除Cookie代码分享及详细注释说明
- [转]去百度面试的javascript 收获
- JavaScript SHA1加密算法实现详细代码
- js链表操作(实例讲解)
- js调用屏幕宽度的简单方法
- javascript中数组的定义及使用实例
- javascript获取系统当前时间的方法
- 基于JavaScript实现点击页面任何位置返回
- 12个常用的js正则表达式
- js鼠标点击图片切换效果实现代码
- 每天一篇javascript学习小结(属性定义方法)
- 跟我学习javascript的作用域与作用域链
- 跟我学习javascript的this关键字
- 跟我学习javascript的Date对象
- javascript获取系统当前时间的方法
- 跟我学习javascript的定时器