仿淘宝搜索框案例（有价值）
判断用户输入事件
正常浏览器：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 {
300px;
height: 30px;
margin: 100px auto;
position: relative;
}
.search input {
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 {
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 {
400px;
margin:100px auto;
border:1px solid #ccc;
}
.bottom div{
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{
100%;
height: 300px;
background-color: pink;
display: none;
.show {
display:block;
}
因为show的权重不如上面的高，所以上面是隐藏显示的，下面的显示就会出不来，那么我们只需要加一下权重就可以了。
.bottom .show {
display:block;
}
最后的代码：
<style>
.box {
400px;
margin:100px auto;
border:1px solid #ccc;
}
.bottom div{
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