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的规划():避 ...
随机推荐
- [转]popwindow用法
[转]弹出窗口的两种实现方式 PopupWindow 和 Activity 链接:http://www.cnblogs.com/winxiang/archive/2012/11/20/2778729 ...
- 简单的SQL Server在线查看和执行系统
在大的公司里面,往往数据库和表都非常的多,一张表的字段也是会有几十个.如果这么多的表和字段没有说明注释的话,查看起来会一头雾水,新来的或者别的部门的同事看到表和字段会完全不知道是干嘛的,只能靠名称来猜 ...
- 在openwrt上初体验PostgreSQL数据库
要求 请确保在你的路由器shell 中有以下这些命令 adduser, deluser, addgroup, delgroup, su . 还需要熟悉su,chown ,opkg,mkdir,服务操作 ...
- 如何在JavaScript里防止事件函数的高频触发和调用
网页中JavaScript最基本的功能是监听或响应用户的动作,这非常的有用.用户的动作有些频率非常高,有的十分罕见.有些监听器函数的执行如闪电般完成,而有些繁重的会把浏览器拖死.拿浏览器窗口的resi ...
- 【数位DP】Hdu 3652:B-number
B-number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...
- BZOJ 1710: [Usaco2007 Open]Cheappal 廉价回文
Description 为了跟踪所有的牛,农夫JOHN在农场上装了一套自动系统. 他给了每一个头牛一个电子牌号 当牛走过这个系统时,牛的名字将被自动读入. 每一头牛的电子名字是一个长度为M (1 &l ...
- javascript中跨源资源共享
来自<javascript高级程序设计 第三版:作者Nicholas C. Zakas>的学习笔记(十) 通过XHR实现Ajax通信的一个主要限制,来源于跨域安全策略.默认情况下,XHR对 ...
- hdu 4655 Cut Pieces
这个解题报告讲的很详细了!!! 代码如下: #include<iostream> #include<stdio.h> #include<algorithm> #in ...
- http://blog.csdn.net/majian_1987/article/details/44939911
http://blog.csdn.net/majian_1987/article/details/44939911
- jquery.cookie.js使用介绍
Cookies概述: Cookies是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存,或是从客户端的硬盘读取数据的一种技术.Cookies是当你浏览某网站时,由Web服务器置于你硬盘上的一个非 ...