js基础第3天
仿淘宝搜索框案例（有价值）
判断用户输入事件
正常浏览器：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基础第3天的更多相关文章
- js 基础篇（点击事件轮播图的实现）
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...
- js 基础
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
- js基础练习二之简易日历
今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...
- [JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
- JS基础（超级简单）
1 JS基础(超级简单) 1.1 数据类型 1.1.1 基本类型: 1) Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2) ...
- Node.js基础与实战
Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...
- js基础到精通全面教程--JS教程
适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...
- JS基础知识总结
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...
- js基础篇——call/apply、arguments、undefined/null
a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...
- js基础知识总结（2016.11.1）
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
随机推荐
- Delphi XE5 android openurl(转)
直接上代码: unit OpenViewUrl; interface // URLEncode is performed on the URL// so you need to format it p ...
- 2733: [HNOI2012]永无乡 - BZOJ
Description 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通过桥可以 ...
- Matlab计算矩阵间距离
夜深人静时分,宿舍就我自己,只有蚊子陪伴着我,我慢慢码下这段文字............ 感觉知识结构不完善:上学期看论文,发现类间离散度矩阵和类内离散度矩阵,然后百度,找不到,现在学模式识别,见了, ...
- PAT-乙级-1032. 挖掘机技术哪家强(20)
1032. 挖掘机技术哪家强(20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 为了用事实说明挖掘机技术到底 ...
- 读取tiled地图
原地址:http://www.unity蛮牛.com/thread-20854-1-1.html Tile是一个非常好用的地图编辑器,一直以来我都在找支持tilemap的unity2D插件,但是找 ...
- VS2013与MySql建立连接；您的项目引用了最新实体框架；但是，找不到数据链接所需的与版本兼容的实体框架数据库 EF6使用Mysql的技巧
因为之前都是看别人的项目,而没有自己从头到尾建立一个项目,所以这次尝试搭建时就出现了问题,主要是ASP.Net MVC项目中VS2013和MySql的连接. 第一个问题: 数据库表已建好,相应的数据库 ...
- jquery layout学习
1.官网:http://layout.jquery-dev.com/index.cfm 2.博客园:http://www.cnblogs.com/chen-fan/articles/2044556.h ...
- Qt之显示网络图片（可以改成升级模块）
http://blog.csdn.net/u011012932/article/details/50773382
- Silverlight之OOB模式下的一些事
本文简介: 1.为什么要使用OOB?使用OOB的作用? 2.如何实现OOB模式 3.对OOB进行一些设置: 4.检测OOB的安装状态: 5.更新应用程序: 6.WebBrowser控件: 7.桌面通知 ...
- C++11内存模型的粗略解释
基本解释 C++11引入了多线程,同时也引入了一套内存模型.从而提供了比较完善的一套多线程体系.在单线程时代,一切都很简单.没有共享数据,没有乱序执行,所有的指令的执行都是按照预定的时间线.但是也正是 ...