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的规划():避 ...
随机推荐
- C#中字符串驻留技术
转自:http://www.cnblogs.com/Charles2008/archive/2009/04/12/1434115.html MSDN概念:公共语言运行库通过维护一个表来存放字符串,该表 ...
- jquery下拉列表选中项改变时获取新选项的属性值
$("#textSel").change(funtion(){ var selVal=$(this).val(); var selText=$("#textSel opt ...
- Why are very few schools involved in deep learning research? Why are they still hooked on to Bayesian methods?
Why are very few schools involved in deep learning research? Why are they still hooked on to Bayesia ...
- ADO.net--杂七杂八（一）
private void BtnConnectDataBase_Click(object sender, RoutedEventArgs e) { string connectionString = ...
- eclipse代码自动提示功能设置
一 般默认情况下,Eclipse ,MyEclipse的代码提示功能是比Microsoft Visual Studio的差很多的,主要是Eclipse ,MyEclipse本身有很多选项是默认关闭的, ...
- [itint5]两有序数组的中位数
这个题和leetcode的基本一样.用了更好点的思路.在A中折半猜是不是中位数,A中没有后在B中猜.最后猜到B[j]<=A[i]<=B[j+1],此时,无论奇偶(2k+1或者2k个),A[ ...
- CentOS SSH安装与配置
SSH 为 Secure Shell 的缩写,由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为建立在应用层和传输层基础上的安全协议. 传 统的网络服务程序, ...
- 新LNMP环境，但是SESSION跨页面或者刷新 session丢失
唠叨:本地WAMP做了一个微信项目,一切OK,昨天需要在LINUX架设一套LNMP环境.但是,在架设代码的时候,登录总是不成功~~~ 最终解决:权限 其实,作为一个程序猿,只要涉及到服务器内容,都应该 ...
- OSI模型七层模型结构
OSI模型,即开放式通信系统互联参考模型(Open System Interconnection,OSI/RM,Open Systems Interconnection Reference Model ...
- cf 189B - Counting Rhombi
题目:189B - Counting Rhombi http://codeforces.com/problemset/problem/189/B 题意:给定一个长方形的 矩形,求能在这个矩形里有多少 ...