js一些基础知识1

1、第一个JS程序：
     onclick="alert(1);"
     on     当....的时候
     click      点击
     alert      弹

事件：用户的操作
    onclick  用户点击
    鼠标移入事件
    鼠标移出事件
2、onclick="div1.style.display='block';"

div1: 一个div的id 这句话的意思：点击的时候，把id为div1的元素的style的display设置为block -- 显示 这种写法不符合 w3c 标准 符合标准的写法是：

document.getElementById('div1').style.display='block'; 
各部分的含义：
document    文档(整个页面)
get         获取
Element     元素
By          通过/用...
Id          id
连起来：通过id获取一个元素
.   的
=   赋值
3、不仅可以修改display还可以修改，
如：width,height,background
JS修改样式时， html/css中怎么写，JS中就怎么写，但， class --> className
4、事件只能给按钮吗？答： 事件可以加给任何标签
5、

鼠标移入事件： onmouseover 鼠标移出事件： onmouseout

6、函数
定义函数
function 函数名(){
//要执行的语句
}

使用函数
函数名();

 <script>
    window.onload = function(){
        var oBtn = document.getElementById('btn1');
        oBtn.onclick = show;

        function show(){
            alert(1);
        }
    };
</script>

<body>
<input type="button" value="按钮" id="btn1">
</body>
7、css写在style里，js写在script标签里
8、变量：起外号
语法：var 变量名=值;
可以完全替代！

9、
第一个函数toBig里定义了 oDiv，但在第二个函数里没定义，可以直接使用 × --像两个城市中的人

10、换肤
三种方式：
1)硬换 设置每个style
2)更换样式文件 link √

3)用className替换class
<style>
    .div1{
        width: 100px;
        height: 100px;
        background:red;
    }
    .div2{
        width: 200px;
        height: 200px;
        background:green;
    }
</style>
<script>
    function changeColor(){
        var oDiv = document.getElementById('div8');
        oDiv.className='div2';
    }
</script>

<body>
<input type="button" value="换肤" onclick="changeColor();">
<div id="div8" class="div1" ></div>
</body>


都有哪些标签可以加ID？*任何标签都能加ID

标签上哪些属性可以修改？*标签上的任何属性都能修改 style,href
11、获取body简写 document.body
12、注释的方法
单行 一行开头用 //
多行 用/* */
13、条件判断 语句
语法：
if (条件){
//条件成立时要执行的语句
}
else{
//条件不成立时要执行的语句
}
14、javascript中
分号的使用：单独一句话，带赋值的
空格的使用：操作符两边
大括号的使用：第一个跟行，第二个换行--建议
15、变量和字符串
a 'a'
*变量是可变的；
*变量没有单引号，字符串有单引号（建议用单引号）
16、函数参数,函数传参
函数定义：
function 函数名(参数1,参数2...){
  语句;
  使用参数
}

调用：
函数名(1,'a'..);

*定义函数中的-参数，只是占位
*参数的个数根据需求来定
*什么时候用传参？ 当函数中有可变的东西，就可以用传参
17、操作属性的方式
1) . ‘的’，可以操作属性
2)[] 也可以操作属性
区别： . 不可以用变量，[]可以用变量
点可以做到的，方括号一定能做到
方括号能做到的，点不一定能做到

18、三者分离是指：行为 表现 结构 三者分离

分别对应：行为-JS 表现-CSS 结构-HTML

19、再看函数
有名字的
没名字的叫 （匿名函数）
特点
不可重复利用
如果多次调用，重复利用，需要用有名字的函数
20、页面加载顺序：html,css,js

加载完成做的事，代码放在 window.onload 里

21、以后写JS:
1)window.onload
2)获取元素
3)加事件
22、循环：重复做一件事情，操作一组元素

普遍特点：初始值--条件--语句--改条件

23、while循环：
初始值；
while(条件){
 要重复做的事情

 改变条件

}

24、for 循环

for(初始值;条件;改变条件){
语句
}
25、用于条件的几个符号：
= 赋值（这个不是用于条件的：）
== 比较相等

>= 大于等于

<= 小于等于
26、设置复选框的选中状态：

oChk.checked = true;//false

27、i值问题：循环里面加事件了，事件里面的 i 不能用了
28、this:当前发生事件的元素(对象)
29、点一组DIV，当前的变色，需要两件事(两步)
1）让他们都变成默认色
2）让自己变成要求的色

30、选项卡重用，使用onload法 31、表单元素的值： 用value 获取；非表单元素的内容： 用 innerHTML 获取 32、字符串连接：两撇两加加内容 33、控制优先级，用 括号 () 34、数组：一组数的集合 定义： var 数组名= [元素1,元素2....];

35、调试：
chrome:F12
firefox:firebug
IE:禁用脚本调试
软调试：程序手段
1）alert(有用的东西);
2）console.log(要显示的东西);
3）document.write(要显示的东西);
36、数据类型：
typeof(x); //测试x的数据类型

1）number        数字类型
2）string        字符串类型
3）function  函数类型
4）boolean       布尔类型(true，false)
5）object        对象类型
6）undefined 未定义
-------------------------------
typeof null --object
typeof undefined -- undefined
typeof NaN --number
var str='332efg'; typeof str++ number// 因为 str++ 是 NaN
--------------------------------
null == undefined? -- true
NaN == NaN? --false
37、undefined:

1)真的没定义(报错 is not defined) 2)定义了，但是没有给东西(没有赋值)

38、JS中，变量本身没有类型，其类型取决于存的是什么东西
39、数据类型转换
 显式转化(强制转化)：
 parseInt()
 12 -> 12
 12.5 -> 12
 12abc -> 12
 abc -> NaN
 从左边开始查看 看见第一个不是数字的就停
 如果第一个不是数字 返回一个NaN
 parseFloat()
 12 -> 12
 12.5 -> 12.5
 12abc-> 12
 12.5abc ->12.5
 abc->NaN
 从左往右看 看见一个不是数字的停 看见点也会继续看
 如果第一个不是数字 返回NaN
 Number()
 12->12
 12.5->12.5
 12abc-> NaN
 abc->NaN
 看见不是数字的 整体返回NaN
 
 *NaN not a number

 1.typeof(NaN) number
 2.NaN跟任何东西都不相等 包括他本身
 3.isNaN 可以检测是不是NaN 是就返回一个true 不是就返回false
 隐式转化
 计算机偷偷的给转化了

40、函数里定义变量，不能在函数外访问 41、局部变量：只能在函数内部使用； 全局变量：在哪里都可以使用 42、闭包：子函数可以使用父函数的局部变量 43、如果函数内部的变量和全局同名，不会覆盖，会 遮蔽 44、命名规范：易交流、大家都能看明白 匈牙利命名法： a)类型前缀 b)首字母大写

46、运算符：优先级控制 --> ()
算术运算符：+ - * / %
0%6=？
赋值运算：= += -= /= *= %=
比较运算：== < <= > >= 
!=  不等
===     严格的比较，是不是相等，先比较类型
!== 严格的比较，是不是不相等
逻辑运算：与 或 非
|| 或者 只要一个成立，则为真
&& 并且    全部成立，则为真
！ 非 反过来```
#####47、if扩展： 
```if(){}
if(){}
else if(){}
else if(){}
else{}```
#####48、switch：
```switch(值){
case 值1：
语句；
break;
......
default:
语句；
}```
#####49、

break:中断，在循环中，中断整个循环
continue:继续 -- 跳出当次循环，继续走```

50、简写，降低可读性
1）if 简写 
a==12 && alert(a);

可读性很差，非常的条件，一目了然的，可以考虑用一点

2）if else 简写
三目运算： 条件?为真时执行：为假时执行;
3）一句时，省略大括号，不建议使用
if(..) alert(1);```
``51、真：非0数字 ， 非空字符串，非空对象
52、假：0,空字符串 ， null(空对象), undefined,NaN``
######53、获取样式：

obj.style.xxx 行间样式
获取非行间样式（获取计算后的样式-生效的样式）：
getComputedStyle(谁，false).样式; //IE9+,FF,chrome
obj.currentStyle.xxx;//兼容整个IE，在ff,chrome下，是 undefined
处理兼容性：
if (oDiv.currentStyle){
alert(oDiv.currentStyle.width);

}else{

alert(getComputedStyle(oDiv,false).width);

}

#####54、随机数

随机数： Math.random() 0-1之间的随机数，包括0，不包括1
n到m间的随机整数：
parseInt(Math.random()*(m-n))+n;```
55、eval: eval('字符串') --把字符串解析成JS能理解的程序 --不要用

56、函数返回值
函数返回值：return 返回值； 返回给调用者，谁调用就返回给谁
能返回什么？ 只要你愿意，什么都可以返回

随机数封装：
function rnd(n,m){return parseInt(Math.random()*(m-n))+n;}

示例1：
function show(){alert(1);}
alert(show); //没有调用，show是什么？是函数？ 弹出函数定义的内容 function show(){alert(1);}
接上： var b = show(); alert(b); //alert(1); undefined
接上：
function show2(c){
  alert('show2');
  alert(c());
  return function(){
  alert('show2里的匿名函数');
}
}
alert(show2(show)()); //show2 1 undefined show2里的匿名函数 undefined ```
#####57、双色球

<script>
function rnd(n,m){
return parseInt(Math.random() * (m - n) ) + n;
}
//在一个数组中找一个数是否存在
function findInArray(n,arr){
for(var i = 0; i<arr.length;i++){
if (n == arr[i]){
return true;
}
}
return false;
}
var arr = [];
while(arr.length < 6){
var n = rnd(1,34);
if (!findInArray(n,arr)){
arr.push(n);
}
}
document.write(arr);
</script>```

58、return 深入
*return 之后，代码就不执行了
*如果一个函数没有写return，默认返回undefined，写return了，
但是没有东西，也是undefined```
#####59、undefined出现的情况：

1)函数没有写return，返回undefined
2)没有定义也没有赋值变量 （报错：is not defined,报错 和 undefined不一样）
3)定义了变量，但是没有赋值 //var a; alert(a); 函数的参数相当于局部变量，
不传时undefined
4)访问一个不存在属性```

60、定时器
定时器 setInterval(函数，时间); --函数不带括号，每隔 时间 执行
清除：clearInterval(定时器名称)
秒表应用：
<script>
    //变成两位数
    function toDou(n){
        return n < 10 ? '0'+n : ''+n;
    }
    window.onload = function(){
        var oBtn = document.getElementById('btn1');
        var oBtn2 = document.getElementById('btn2');
        var oT = document.getElementById('t1');

        var timer;

        oBtn.onclick = function(){
            clearInterval(timer);
            timer = setInterval(show,1000);
            var n = 0;
            show();
            function show(){
                n++;
                oT.value = toDou(parseInt(n / 60)) + ':'+ toDou(n%60);
            }
        };
        oBtn2.onclick = function(){
            //清定时器
            clearInterval(timer);
        };
    };
</script>

<body>
<input type="text" id="t1" value="0">
<input type="button" value="开始" id="btn1">
<input type="button" value="停止" id="btn2">
</body>
1）补0（变两位）
function toDou(n){return n<10?'0'+n:''+n;}

2)刚开始卡一下
提取出函数，执行一次

3)多点几次，变快了
*原则：定时器要先清除，再打开

61、另一个定时器setTimeout
setInterval 一直执行，连续不断的
setTimeout  只执行一次
setTimeout(函数名，时间)
清除：clearTimeout();```
#####62、判断整数（parseInt(oT.value)==oT.value）数字转字符串 ''+a;
#####63、getStyle封装

//获取计算后的样式（兼容所有浏览器）
function getStyle(obj,name){
return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj,false)[name];
}```

64、为什么定时器时函数不要括号？--带括号就执行，如果不明确返回，会返回undefined，导致出错；

`

65、select用法： 取值： oSle.value 发生改变时的事件：oSle.onchange = function(){};
66、时间
var oDate = new Date();
年：oDate.getFullYear();
月：oDate.getMonth(); //从0开始
日：oDate.getDate();
星期：oDate.getDay(); //星期日是0
时：oDate.getHours();
分：oDate.getMinutes();
秒：oDate.getSeconds();
毫秒：oDate.getMilliseconds();
时间戳：oDate.getTime();```
#####67、文字时钟

<style>
body{
text-align: center;
font-size: 80px;
background: #000;
color:#fff;
}
</style>
<script>
//补0
function toDou(n) {
return n < 10 ? '0' + n : '' + n;
}
window.onload = function(){
var oDiv = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');

    function clock(){
        //获取当前时间
        var oDate = new Date();
        var h = oDate.getHours();
        var m = oDate.getMinutes();
        var s = oDate.getSeconds();

        var Y = oDate.getFullYear();
        var M = oDate.getMonth() + 1;
        var D = oDate.getDate();
        var W = oDate.getDay();

        //转换 W  星期，为汉字
        switch (W){
            case 1:
                W = '一';
                break;
            case 2:
                W = '二';
                break;
            case 3:
                W = '三';
                break;
            case 4:
                W = '四';
                break;
            case 5:
                W = '五';
            case 6:
                W = '六';
                break;
            case 0:
                W = '日';
                break;

        }

        //设置div的内容，并且完成了补0
        oDiv.innerHTML = toDou(h) + ':' + toDou(m) + ':' + toDou(s);
        oDiv2.innerHTML = Y + '年'+ M +'月'+ D +'日   星期' + W;
    }
    clock();
    setInterval(clock,1000);

};

</script>

<body>
<div id="div1">11:44:58</div>
<div id="div2"></div>
</body>

######68、图片时钟 str = '123456'; //12点34分56秒
``字符串下标：IE7及以下出问题，访问字符串下标不能直接用 str[i]
用 charAt(i); ``
######69、倒计时

new Date是当前时间，需要设置时间
调（设置）时间：
var oDate = new Date();
oDate.setFullYear(年，月，日);
oDate.setFullYear(年，月);
oDate.setFullYear(年);

oDate.setMonth(月，日);
oDate.setMonth(月);
oDate.setDate(日);

oDate.setHours(时, 分, 秒, 毫秒);
oDate.setHours(时);
oDate.setMinutes(分);
oDate.setSeconds(秒);
时间对象深入：
如果本月有31天，oDate.setDate(32); 会进入下个月第一天
oDate.setDate(0); -> 会变成上个月第一天

<style>
body{
text-align: center;
font-size: 80px;
background: #000;
color:#fff;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');

    //2017年1月27日
    var oDate = new Date();
    oDate.setFullYear(2017,0,27);
    oDate.setHours(0,0,0,0);
    function clock(){
        //当前时间
        var now = new Date();
        //时间差 除1000后表示 秒
        var r = parseInt((oDate.getTime() - now.getTime())/1000);
        var d = parseInt(r / (24*60*60)); //天数
        r %= (24*60*60);  //剩下的秒数
        var h = parseInt(r / (60*60));// 小时数
        r %= 60*60; //剩下的秒数
        var m = parseInt(r / 60); //分钟
        var s = r % 60;   //秒
        oDiv.innerHTML = d + '天'+ h +'小时'+ m +'分钟'+ s +'秒';

    }
    clock();
    setInterval(clock,1000);

};

</script>
</head>
<body>
<div>离春节还有</div>
<div id="div1">70天10小时45分钟20秒</div>
</body>

#####70、oDate.getTime() 时间戳
``此刻的时间距离 1970年那天的毫秒数（那天开始，计算机才能计时）``
#####71、时间转化

把毫秒转为 x天y小时z分钟s秒
var s = parseInt(ms / 1000);//秒
var d = parseInt(s / (24 * 60 * 60));//天数
//去掉天的秒数
s %= 24 * 60 * 60;
var h = parseInt(s / (60 * 60));//小时
//去掉小时的秒数
s %= 60 * 60;
var m = parseInt(s / 60);//分钟
s %= 60;```

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,117评论 4赞 360
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 66,963评论 1赞 290
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 107,897评论 0赞 240
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,805评论 0赞 203
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,208评论 3赞 286
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,535评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,797评论 2赞 311
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,493评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,215评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2赞 244
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,325评论 2赞 252
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,971评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2赞 271
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2赞 266

推荐阅读更多精彩内容

  • javascript基础07
    1.HTML DOM (Document Object Model) document.getElementByI...
    廖马儿阅读 1,363评论 0赞 17
  • 2016.12.16
    personally Personally,i think the CEO should apologise fo...
    小朋友966阅读 100评论 0赞 0
  • 我怎么如此幸运 第一天
    本来濒临放弃的我，今天给自己放了一天假。很高兴值得一提的是，放松心情。拿了快递，去了约定好的网上妹子那里。衣服洗了...
    薄荷糖L阅读 161评论 0赞 0
  • 0422晨读
    咿呀作语阅读 131评论 0赞 0
  • 2017-07-22
    本来铅笔画的挺好的，然后拿中性笔一描，再作死的又描了第二遍就惨不忍睹了……还有这个上色，请叫我手抖上色者……被自己...
    沐水杰杰杰阅读 90评论 3赞 1