JavaScript学习笔记

<script></script>标签内部写代码，放在head和body里都可以。

<script></script>一对标签可以加无限制个。

输出document.write();
可以输出标签，例如document.write("<h1>标签h1</h1>");

分号可加可不加

执行顺序是顺序执行

单行注释：//

多行注释：/**/

数据类型：
字符串string
数字number
布尔Boolean
数组Array，定义方式：var a = [1,3,4],或者var a = new Array();此时数组大小是未定义的。
对象Object
空null
未定义
可以通过赋值为null的方式清除变量

运算符

算数运算符
+，-，，/，%，++，--
赋值运算符
=，+=，-+，=，/=，%=

字符串拼接
+，字符串和其他类型拼接，自动把其他类型转换为字符串,包括布尔类型

比较运算符
==，返回布尔类型，值相同就为true，类型可以不相同
===，必须类型和值都相同才为true

逻辑运算符
&&
||
!取反

条件运算符【三目运算符】
判断条件?为真的结果:为假的结果
i>5?"i大于5":"i小于5"

条件语句

if else

if(i>10){
document.write("Yes");
}

switch
switch(i){
case 1:
document.write("是1");
break;
case 2:
document.write("是2");
break;
defualt:
document.write("不满足");
break;

循环

for

for(;;)

for in

var j = ['4',34,'hi',3434]
for(i in j)
{
document.write(i);

while&do while

函数

定义

function 函数名(){
函数体;
}

对大小写敏感，function必须是小写

调用

1、<script>标签内调用
<script>function demo(){alert("this is demo";)
demo();
</script>
2、HTML中调用
<script>function demo(){alert("this is demo";)</script>
<form>
<input type="button" value="按钮" onclick="demo()";
</form>

带参数的函数

局部变量和全局变量

声明在函数之外，或者在函数内部不用var声明，[例如在函数内部，m=10，则调用完此函数后，m就是全局变量了]任何地方都可以使用；
声明在函数内部，只有在函数内部可以使用。

异常处理

异常捕获

try{
发生异常的代码块;
}catch(err){
错误信息处理;
}
function demo(){
try{alert(str);}
catch (err){
alert(err);}
}


image.png

throw语句
<form>
<input id='txt' type='text'>
<input id='btn' type ='button' onclick='demo()' value='按钮'>
</form>
<script>
function demo()
{
try { var a = getElementById('txt').value;
if(a==''){
throw "用户输入为空";
}
catch (err){
alert(err);
}
}
</script>

事件

事件

<button onclick="demo()"></button>

<button mouseout="onOut(this)" onmouseover="Onover(this)"></button>
//这里的this指向当前的函数
<script>
function onOver(ooj){
ooj.innerHTML = "hello";
}
function onOut(ooj){
ooj.innerHTML="world";
}
</script>

DOM

Document Object Model

DOM

DOM操作HTML

DOM操作HTML元素、HTML属性、CSS，事件

DOM操作HTML

1、改变HTML输出流
注意不要在文档加载完成之后使用document.write(),这会覆盖该文档。
2、寻找元素
id，getElementById("id_name")

标签
geElementByTagName("tag_name")
会找到第一个

3、改变HTML内容
使用innerHTML
getElementByTagName("div").innerHTML="None";

4、改变HTML属性：
使用attribute,例如a的href属性，和img的src属性

<a  id="link_to_baidu" href="baidu.com"</a>
<button onclik="demo()">按钮</button>

<script>
document.getElementById("link_to_baidu").href="https://jianshu.com";
</script>
DOM操作CSS

语法：document.getElementById(id).style.property=new style


修改CSS
DOM EventListener
DOM EventListener

背景：通过改一个函数名称，就需要改相对应的调用其函数的名称，如果代码量大的话会很麻烦。

因此，使用句柄。

document.getElementById(id).addEventListener("动作",function_name)

句柄

使用句柄，不会覆盖，而是会顺序执行。

removeEventListener用法同add，会移除前面已经存在的句柄。

Javascript事件

事件流

1、描述的是在页面接受的顺序；

2、事件冒泡：
由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点包括文档
button --> div -->body -->html

3、事件捕获：
从最不具体的节点接收事件，而最具体的节点应该是最后接收事件
html -- > body --> div --> button

事件处理

1、直接添加到HTML结构中

2、DOM0级事件处理
把一个函数值赋值给一个事件处理程序属性

<button id="btn"> 按钮</button>
<script>
var btn = document.getElementById("btn");
btn.onclick=function(){alert("Hi1")}
btn.onclick=function(){alert("Hi2")}
</script>

此时点击按钮只会出现第二个，第一个被覆盖了。

3、DOM2级事件处理
addEventListener("事件名","事件处理函数","布尔值");

true:事件捕获
false:事件冒泡
removeEventListener();

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div>
    <button id="btn">按钮</button>    

    </div>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click",demo1);
btn.addEventListener("click",demo2);
btn.addEventListener("click",demo3);
function demo1(){
    alert("This DOM2 1")
};
function demo2(){
    alert("This DOM2 2")
};
function demo3(){
    alert("This DOM2 3")
};
</script>
</body>
</html>

这里不会覆盖
4、IE事件处理程序【版本<=8】
attachEvent
detachEvent
对于兼容性的问题，可以通过判断

var btn = document.getElementById("btn");
if(btn.addEventListener){
btn.addEventListener("click",demo);
}else if(btn.attachEvent){
btn.attachEvent("onclick",demo);
}else{btn.onclick=demo();
  function demo()
    {
          alert("hello")
    };
事件对象
1、事件对象

在触发DOM事件的时候都会产生一个对象

2、对象事件event：

** type：获取事件类型**

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div>
    <button id="btn">按钮</button>    

    </div>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("mouseover",demo);
    function demo(event){
    alert(event.type);
}
</script>
</body>
</html>

target：获取事件目标

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div>
    <button id="btn">按钮</button>    

    </div>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("mouseover",demo);
    function demo(event){
    alert(event.target);
}
</script>
</body>
</html>
target

stopPropagation():阻止事件冒泡

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div id="div">
    <button id="btn">按钮</button>    

    </div>
<script>

var btn = document.getElementById("btn");
var div = document.getElementById("div");
btn.addEventListener("click",demo1);
    function demo1(event){
    alert(event.target);
    event.stopPropagation();阻止事件冒泡，即div调用的函数将不会被调用，这个很有用
}
div.addEventListener("click",demo2);
    function demo2(event){
    alert(event.type);
}
</script>
</body>
</html>

preventDefault():阻止事件默认行为
例如阻止a标签的点击链接跳转

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div id="div">
        <a href="https://www.baidu.com" id="aid">测试链接</a>
        <button id="btn">按钮</button>    

    </div>
<script>

var btn = document.getElementById("btn");
var div = document.getElementById("div");
var ado = document.getElementById("aid");
btn.addEventListener("click",demo1);
div.addEventListener("click",demo2);
ado.addEventListener("click",demo3)

    function demo1(event){
    alert(event.target);
    event.stopPropagation();//阻止了div对应的事件函数的触发。
}
    function demo2(event){
    alert(event.type);
}
    function demo3(event){
    event.preventDefault();//阻止了默认跳转
    event.stopPropagation();//阻止了div对应的事件函数的触发。
}


</script>
</body>
</html>

内置对象

对象

JavaScript张所有事物都是对象
每个对象带有属性和方法
JavaScript允许自定义对象

自定义对象

1、定义并创建对象实例；

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div id="div">
        <p>Hi there</p>
        <p>It's Me</p>
        <p>Yes</p>
    </div>
<script>
    people = new Object();
    people.name = "Juha";
    people.age='25';//以上三行也可被替代为：people = {name:"juha",age:"25"};
    document.write("name:"+people.name,";age:"+people.age)

</script>
</body>
</html>

2、使用函数定义对象，然后创建新的对象实例

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div id="div">
        <p>Hi there</p>
        <p>It's Me</p>
        <p>Yes</p>
    </div>
<script>
    function people(name,age){
        this._name = name;
        this._age = age;
    }
    person = new people("juha","25")
    document.write("name:"+person._name,";age:"+person._age)
</script>
</body>
</html>
内置对象

String对象
处理已有的字符串，单引号双引号均可以。
常用属性及方法：
长度：str.length
索引：str.indexOf("指定字符串")，-1表示不存在
内容匹配：str.match("字符串")
替换：str.replace("原字符串","新字符串")
大小写转换：toUpperCase()/toLowerCase()
字符串转为数组：str.split("分隔符")

字符串常见属性及方法

Date对象
用于处理日期和时间
var date = new Date();

常用方法：
date.getFullYear()获取年份
date.getTime()获取毫秒
date.setFullYear(yyyy-mm-dd)设置具体日期
getHours() 小时
getMinites()分钟
getSeconds()秒

Array对象

数组

concat
不会改变连接前后的值
a=[1,2]
b=[3,4]
c=a.concat(b)//c为[1,2,3,4]

sort
会改变顺序
a=['t','b','l']
a.sort()//为['b','l','t']

push()
会添加到原数组中
a=[1,2]
a.push(3);//此时a为[1,2,3]

reverse()
会改变原数组的排序
a=[1,2,3]
a.reverse()

Math对象
执行常见的算术任务
Math.round()
Math.random()
结合parseInt可以取到1~10的随机整数值：
parseInt(Math.random()*10)
Math.max()
Math.max(1,5,6,3,12)结果是12

Math.min()

Math.abs()

Javascript DOM对象控制HTML

常见方法

getElemensByName
getElemensByName("name")存储的是一个数组
getElemensByTagName与getElemensByName用法一致

getAttribute("attr_name")
获取节点对象的指定属性名称

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div id="div">
        <p name='test' id='no'>Hi there</p>
        <p name='test'>It's Me</p>
        <p name='test'>Yes</p>
    </div>
<script>
    var  p = document.getElementById('no')；//获取id为no的元素对象   document.write(p.getAttribute('name')//打印出id为no节点对应的name属性

</script>
</body>
</html>

setAttribute("属性名","属性值")

childNodes()
子节点获取的是一个对象列表
parentNode()
父节点只能有一个。

createEement()

var body = document.body;
var input = document.createElement("input");//创建节点类型
inpute.type="button";//节点的类型
input.value="按钮";//新建节点的名称
body.appendChild(input);//body添加目标子节点

inserBefore()
插入节点

    var div = document.getElementById('div')
    var body = document.body;
    var input = document.createElement("input");//创建节点类型
    var node = document.getElementById('2');
    input.type="button";//节点的类型
    input.value="按钮";//新建节点的名称
    div.insertBefore(input,node);//div添加目标子节点,在node之前

offsetHeight不包含滚动条
var width = document.body.offsetwidth||document.documentElement.offsetwidth//这里的||是兼容性的写法

var height = document.body.offsetheight||document.documentElement.offsetheight
scrollHeight包含滚动条

浏览器对象对象

window对象

window对象是BOM的核心，window对象值当前的浏览器窗口；
所有JavaScript全局对象、函数以及变量均自动成为window对象的成员；
全局变量是window对象的属性
全局函数是window对象的方法
甚至HTML DOM的document也是window对象的属性之一，因为document是全局的，因此使用时省略了前面的window.

window尺寸

window.innerHeight - 浏览器窗口内部高度
window.innerWidth - 浏览器窗口内部宽度

window方法

常用方法：
window.open(路径,名称,样式) 打开新窗口
window.close() 关闭当前窗口

计时器

1、计时事件：
通过使用JavaScript，可以在一个设定的时间间隔之后来执行代码，而不是函数被调用后立即执行；
2、计时方法：
a、setInterval(function(){function_name},interval_value) - (这里为啥是函数里调函数呢，是因为不调的话就只会执行一次)间隔指定的毫秒数不停的执行指定的代码【这里有点疑问，即便是我设置间隔值为0一样执行】
clearInterval() 方法用于停止setInterval()方法执行的函数代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div id="div">
        <p name='test' id='no'></p>
        <p name='test' id ='2'>It's Me</p>
        <button onclick="stopTime()">停止时间</button>
    </div>
<script>
    // function demo(){
        var mytime = setInterval(function(){
            getTime();
        },0);//这里有个疑问，后面的这个值我甚至可以设置为0.

    function getTime(){
        var date = new Date();
        var t = date.toLocaleTimeString();
        document.getElementById('no').innerHTML=t;
    }
    function stopTime(){
        clearInterval(mytime);//需要传入上面的mytime
    }

</script>
</body>
</html>

b、setTimeout() - 暂停指定的毫秒数后执行指定的代码；
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body onload="myWin()">

    <div id="div">
        <p name='test' id='no'></p>
        <p name='test' id ='2'>It's Me</p>
        <button onclick="stopWin()">Control</button>
    </div>
<script>
    // function demo(){
        var win;
        function myWin(){
            alert("hi");
            win=setTimeout(function(){myWin()},2000);//这里写win的原因是为了下面可以clear，win作为参数。
        }
        function stopWin(){
            clearTimeout(win)
        }


</script>
</body>
</html>

History对象

window.history 对象包含浏览器的历史url集合

history.back() 与浏览器点击后退按钮功能相同
history.forward() 与浏览器点击前进按钮功能相同;

history.go() 进入历史中的某个页面，进入上一个页面，需要给的值是-1，即history.go(-1)此功能可以结合是否正确登录判断之后应该跳转的页面。【这个还需要再学习】

Location对象

window.location对象 用于获得当前页面的地址(url),并把浏览器重定向到新的页面。
Location对象的属性：
location.hostname 返回web主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回web主机的端口
location.protocal 返回使用的web协议
location.href 返回当前页面的url
location.assign() 加载新的文档，可以在括号内填写地址，使用onclick事件调用


Location对象

Screen对象

window.screen 对象包含有关用户屏幕的信息

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
screen.height - 屏幕高度
screen.width - 屏幕宽度

JS瀑布流效果 - 布局

js里的第十集，每太看明白，可能太累了，下次继续看

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