2019-06-05 webapi第一天

01 web：网页

api：接口，其实就是别人封装好的一套方法（函数），用来实现对应的功能，我们不用管它这个方法里面是怎么写的，只要调用就能实现对应的功能。

webAPI：一套用来操作网页的方法和函数

-->

02根据id来找到网页元素

<div id="box">我是div</div>

// 它会去找网页里id名叫title的元素，找到以后会当返回值返回

var title = document.getElementById('title');

console.log(title);

var box = document.getElementById('box');

console.log(box);

03为什么script标签写在body快结束的位置

<!--

js如果写在head里就找不到元素

规范写法：写在/body前面，也就是body结束位置的前面

-->

</head>

<body>

<div id="box">我是div</div>

// 1.如果找不到，这个方法会返回null

// 2.如果JS代码写在head里，找不到元素

var box = document.getElementById('box');

console.log(box);

04添加点击事件

点击事件：代表要等点击才会触发代码

写法：

元素.onclick = function(){

点击要触发的代码

}

这个函数可以是匿名也可以是已经声明过的函数，但是如果是声明过的函数，记得赋值时，不要加括号

-->

</head>

<body>

// 找到按钮

var btn = document.getElementById('btn');

// 添加点击事件

// 当btn被点击的时候会来调用这个函数的函数体

// btn.onclick = function(){

// alert(123);

// }

function test(){

alert(123);

}

// 点击事件给的函数，也可以是已经存在的函数

// 但是千万不要加括号

// btn.onclick = test(); //错误的(点击后才发生,不是没有点击就发生)

btn.onclick = test; //正确的

05点击按钮改掉所有p标签文字

<!--

伪（类）数组：有下标有元素有长度可以被遍历，但是没有数组的那些方法，这种叫伪数组

document.getElementsByTagName

根据标签获取元素，获得是一个伪数组

元素.innerText

修改双标签里面的文字

-->

</head>

<body>

<p>我是p标签1</p>

<p>我是p标签2</p>

<p>我是p标签3</p>

<p>我是p标签4</p>

<p>我是p标签5</p>

<p>我是p标签6</p>

<p>我是p标签7</p>

<p>我是p标签8</p>

<p>我是p标签9</p>

<p>我是p标签10</p>

//找到按钮

var btn = document.getElementById('btn');

// 找到所有p标签(根据标签名找元素)

// 找到所有的p标签，返回值是一个伪数组

var pList = document.getElementsByTagName('p');

// console.log(pList);

// pList.push(190);

//给按钮加点击事件

btn.onclick = function(){

for(var i = 0; i < pList.length; i++){

// console.log(pList[i]);

// innerText修改双标签里面的文字

pList[i].innerText = '我修改了';

}

06换图片

</head>

<body>

<hr>

// 找到按钮

var btn = document.getElementById('btn');

// 找到img

var icon = document.getElementById('icon');

// 给按钮加点击事件

btn.onclick = function(){

//修改img的src

icon.src = 'images/wm.png';

}

07用js操作类ming

<!--

className ：获取类名

className 也可以重新赋值

如果用 += 代表添加一个类，但是记得类前面要加空格

如果要删除一个类，就要给它重新赋值，赋值的时候，少掉那一个要删的类就行了

-->

<style>

.box{

width: 100px;

height: 100px;

}

.border{

border: 1px solid #000;

}

.green{

background-color: green;

}

</style>

</head>

<body>

// 找到div

var box = document.getElementById('box');

//找到按钮，给它加点击事件

document.getElementById('btn1').onclick = function(){

// 获取div的类

console.log(box.className);

}

//找到第二个按钮，给它加点击事件

document.getElementById('btn2').onclick = function(){

// 给div加一个类

// box.className = "box border green";

// 添加一个类，记得添加类的时候前面要加空格

box.className += " green";

}

// 找到第三个按钮，加点击事件

document.getElementById('btn3').onclick = function(){

// 所有的-都是当数字来运算

// box.className -= " green"; //相当于 box.className = box.className - " green";

box.className = "box border";

};

08显示与隐藏的案例

<!--

找到元素的方法：

document.getElementById

document.getElementsByTagName

document.getElementsByClassName

-->

<style>

.box{

width: 100px;

height: 100px;

background-color: #f00;

}

.hide{

display: none;

}

</style>

</head>

<body>

// 根据类名获取元素,它返回的也是伪数组

var res = document.getElementsByClassName('box')[0];

console.log(res);

// 隐藏按钮的点击事件

document.getElementById('hide').onclick = function(){

//给div加一个类hide

res.className += ' hide';

};

// 显示按钮的点击事件

document.getElementById('show').onclick = function(){

res.className = "box";

}

09一个按钮做显示与隐藏

<style>

.box {

width: 100px;

height: 100px;

background-color: #f00;

}

.hide {

display: none;

}

</style>

</head>

<body>

// 找按钮

var btn = document.getElementById('btn');

// 找div

var box = document.getElementsByClassName('box')[0];

// 给按钮加点击事件

btn.onclick = function () {

if (btn.value == "隐藏") {

// 隐藏div

box.className += ' hide';

// 修改按钮文字变显示

btn.value = "显示";

} else {

// 显示div

box.className = "box";

// 修改按钮文字变隐藏

btn.value = "隐藏";

}

10隔行变色

<style>

.green{

background-color: yellowgreen;

}

.hotpink{

background-color: hotpink;

}

</style>

</head>

<body>

<ul>

</ul>

// 找到所有的li

var liList = document.getElementsByTagName('li');

// console.log(liList);

for(var i = 0; i < liList.length; i++){

if( i % 2 == 0)

liList[i].className = "green";

else

liList[i].className = "hotpink";

}

11省略大括号的问题

<!--

如果if和else语句块里的语句只有一句话，那么大括号可以省略

if(条件)

1句话

else

1句话

if和循环语句，如果语句块里只有1句话，那么大括号可以省略，但是函数，无论如何不能省略大括号

-->

// var age = 19;

// if( age >= 18 )

// alert('成年了，可以进网吧了');

// else

// alert('未成年，滚出');

// alert('哈哈哈哈哈啊');

// for(var i = 0; i < 5; i++)

// alert(i);

// alert('结束了');

function test(){

alert(123);

}

test();

12用js直接修改样式

在JS里要修改样式，都是操作style属性

元素.style.样式属性名 = 值;

例：

元素.style.width = "300px";

注意：css属性怎么写，JS还是怎么写，但是如果css里的属性名有-，那么要把-去掉，并且-后面首字母大写

例：

元素.style.backgroundColor = "red";

-->

<style>

.box {

width: 100px;

height: 100px;

border: 1px solid black;

}

</style>

</head>

<body>

//找到按钮

var btn = document.getElementById('btn1');

//找到div

var box = document.getElementsByClassName('box')[0];

//按钮的点击事件

btn.onclick = function(){

// console.log(box.style);

// 在JS里，会把-去掉，然后把-后面的首字母大写

box.style.backgroundColor = "red";

}

// 变宽变高的点击事件

document.getElementById('btn2').onclick = function(){

box.style.width = "300px";

box.style.height = "300px";

}

// 修改透明度

document.getElementById('btn3').onclick = function(){

box.style.opacity = 0.3;

}

// 修改上间距

document.getElementById('btn4').onclick = function(){

box.style.marginTop = "150px";

}

13显示和隐藏二维码

<!--

鼠标移入事件：onmouseover

移入才触发

鼠标移出事件：onmouseout

移出才触发

-->

<style>

.small{

width: 50px;

height: 50px;

background:url(images/bgs.png) no-repeat -159px -51px;

position: fixed;

right:0;

top:50%;

margin-top: -25px;

}

#big{

width: 210px;

position: absolute;

left: -210px;

display: none;

}

</style>

</head>

<body>

</div>

// 找到小图

var small = document.getElementsByClassName('small')[0];

// 找到大图

var big = document.getElementById('big');

// 鼠标移入事件

small.onmouseover = function(){

big.style.display = "block";

}

// 鼠标移出事件

small.onmouseout = function(){

big.style.display = "none";

}

14事件里的this

<!--

之前学的JS里的this：谁调用方法，方法里的this就是谁

如果是直接调用函数，前面没有加任何前缀，那么this是window

-->

<style>

.box{

width: 100px;

height: 100px;

background-color: #f00;;

}

</style>

// 复习JS部分

// function f1(){

// console.log(this);

// }

// var obj1 = { name:"jack" };

// var obj2 = { name:"rose" };

// obj1.test = f1;

// obj1.test();

// obj2.test = f1;

// obj2.test();

// f1();//window

</script>

</head>

<body>

// webAPI的事件里this:谁触发事件,事件里的this就是谁

//找到btn

var btn = document.getElementById('btn');

btn.onclick = function(){

console.log(this);

}

// 找到div

var box = document.getElementsByClassName('box')[0];

box.onclick = function(){

console.log(this);

}

15隔行变色与移入变色

<ul>

</ul>

// 变量声明到外面才能访问，这个变量用来保存原来的颜色

var oldColor;

// 找到所有的li

var liList = document.getElementsByTagName('li');

// 遍历所有的li

for (var i = 0; i < liList.length; i++) {

// console.log(liList[i]);

// 偶数行一个颜色，奇数行一个颜色

if (i % 2 == 0)

liList[i].style.backgroundColor = "yellowgreen";

else

liList[i].style.backgroundColor = "hotpink";

// 给每个li加鼠标移入事件

liList[i].onmouseover = function () {

// 把它原本的颜色存起来

oldColor = this.style.backgroundColor;

// 谁移入this就是谁

// 谁移入就把谁背景颜色变红

this.style.backgroundColor = "red";

}

// 给每个li加鼠标移出事件

liList[i].onmouseout = function () {

// 谁移出，谁的背景颜色就恢复

this.style.backgroundColor = oldColor;

}

16禁用和启用表单元素

<!--

如果加了disabled那么就代表禁用，它不用给属性值，只要加上就有效果，不加就没有效果

像这样不用给属性值，只要写上就有效果的属性还有：

checked

selected

-->

<hr>

// 找到所有的表单元素

var list = document.getElementsByTagName('input');

// console.log(list);

// 禁用的点击事件

document.getElementById('btn1').onclick = function () {

// 要把所有表单元素都禁用，所以要遍历

for (var i = 0; i < list.length; i++) {

// true是代表让它有一个disabled属性

list[i].disabled = true;

}

// 启用的点击事件

document.getElementById('btn2').onclick = function () {

// 要把所有表单元素都禁用，所以要遍历

for (var i = 0; i < list.length; i++) {

// false是代表让它没有disabled属性

list[i].disabled = false;

}

17一个元素禁用和启用

<!--

如果加了disabled那么就代表禁用，它不用给属性值，只要加上就有效果，不加就没有效果

像这样不用给属性值，只要写上就有效果的属性还有：

checked

selected

-->

<hr>

// 找到所有的表单元素

var list = document.getElementsByTagName('input');

// 点击事件

document.getElementById('btn1').onclick = function () {

// 如果按钮文字是禁用

// if (this.innerText == "禁用") {

// //遍历元素

// for (var i = 0; i < list.length; i++) {

// // 让所有表单disabled为true

// list[i].disabled = true;

// }

// //改完后按钮文字变启用

// this.innerText = "启用";

// } else {

// //else里做相反的事就行了

// for (var i = 0; i < list.length; i++) {

// list[i].disabled = false;

// }

// this.innerText = "禁用";

// }

for (var i = 0; i < list.length; i++) {

// 如果文字等于禁用才给true，否则给false

// ==的结果本来就是true或false

list[i].disabled = this.innerText == '禁用';

}

// 它们先算的是右边得到一个结果，要么是禁用要么是启用，然后重新赋值给按钮

// 如果原来是禁用，就会重新赋值为启用，如果原来是启用，就会重新赋值为禁用

this.innerText = this.innerText == "禁用" ? "启用" : "禁用";

18总结找元素的方法和总结

<!--

document.getElementById

直接返回元素对象，找不到返回null

下面这些方法：无论如何返回的一定都是伪数组，找到几个就返回长度为几的伪数组

document.getElementsByTagName：根据标签名来找

document.getElementsByClassName：根据类名来找，有兼容问题，IE8和之前的浏览器不支持

document.getElementsByName：根据name属性来找,在新浏览器里所有元素都能找到，但是在IE8里只能找到表单元素

-->

</head>

<body>

<form action="#">(提交的地址,#默认提交到本地)

<!-- <input type="text" placeholder="请输入姓名" name="chk">

男<input type="radio" name="sex">

女<input type="radio" name="sex">

蔡徐坤<input type="radio" name="sex">

</form>

// var res = document.getElementById('test');

// console.log(res); //返回的这个div对象

// var res = document.getElementsByTagName('div');

// console.log(res);

var res = document.getElementsByClassName('box');

console.log(res);

// var res = document.getElementsByName('sex');

// console.log(res);

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

2019-06-05 webapi第一天

01 web：网页

02根据id来找到网页元素

03为什么script标签写在body快结束的位置

04添加点击事件

05点击按钮改掉所有p标签文字

06换图片

07用js操作类ming

08显示与隐藏的案例

09一个按钮做显示与隐藏

10隔行变色

11省略大括号的问题

12用js直接修改样式

13显示和隐藏二维码

14事件里的this

15隔行变色与移入变色

16禁用和启用表单元素

17一个元素禁用和启用

18总结找元素的方法和总结

推荐阅读更多精彩内容