2019-06-05 webapi第二天

1找元素方法补充

<!--

可以用document来点出getElementsByTagName。找网页中所有匹配的标签

也可以用X元素来点出getElementsByTagName，找X元素里面所有匹配的标签

总结：getElementsByXXXX的方法，除了用document点出来，也可以用别的元素点出来，如果是document点出来，那么就是找网页中所有匹配的，如果是别的元素点出来，就是只找这个元素下面匹配的

但是注意：getElementById只能通过document点出来

-->

</head>

<body>

</ul>

<ul>

</ul>

// 我要找到第一个ul里的li，那怎么办？

// 下面这个方法找到网页中所有的li

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

// console.log(liList);

// 先找到第一个ul

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

// 只是找到ul1里面所有的li

// var list = ul1.getElementsByTagName('li');

// console.log(list);

// var list = document.getElementsByClassName('test');

// console.log(list);

// 只是找到ul1里面所有类名叫test的元素

// var list = ul1.getElementsByClassName('test');

// console.log(list);

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

console.log(li3);

02全选，全不选，反选

<input type="checkbox">男

<input type="checkbox">女

<input type="checkbox">李宇春

<hr>

// 找到所有的checkbox

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

// 给全选加点击事件

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

// 要让每一个checkbox都选中

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

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

list[i].checked = true;

}

// 给全不选加点击事件

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

// 要让每一个checkbox都选中

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

list[i].checked = false;

}

// 给反选加点击事件

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

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

// if(list[i].checked){

// list[i].checked = false;

// }else{

// list[i].checked = true;

// }

// list[i].checked = list[i].checked ? false : true;

// 最终一句话：其实就是取反

list[i].checked = !(list[i].checked);

}

03表格中的全选和全不选

<style>

/* table的样式 */

table{

margin: 100px auto;

/* 合并单元格边框，而且不会挨在一起 */

/* 只是给table用的，其他的不能用 */

border-collapse: collapse;

}

th{

background-color: #0099cc;

color:white;

}

th,td{

padding: 10px;

text-align: center;

}

td{

border: 1px solid #000;

height:60px;

}

</style>

</head>

<body>

<table>

<thead>

<tr>

<th>

全选/全不选

</th>

</tr>

</thead>

<tbody>

<tr>

<td>

</td>

<td>

红烧肉

</td>

<td>

隆江猪脚饭

</td>

<td>

200

</td>

</tr>

<tr>

<td>

</td>

<td>

香酥排骨

</td>

<td>

隆江猪脚饭

</td>

<td>

300

</td>

</tr>

<tr>

<td>

</td>

<td>

北京烤鸭

</td>

<td>

隆江猪脚饭

</td>

<td>

</td>

</tr>

</tbody>

</table>

// 找到tbody里所有的checkbox

var list = document.getElementsByName('food');

// 全选/全不选的点击事件

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

all.onclick = function(){

// 点击的时候如果全选是true，那么就让list里的每一个元素都是true

// 如果是false,就让它每一个元素都是false

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

list[i].checked = this.checked;

}

// 遍历list，给它们每一个加点击事件

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

list[i].onclick = function(){

//判断选中的数量，是否等于总数量

var count = 0;

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

if(list[j].checked){

count++;

}

// 上面循环完了，count里面就保存了所有选中的数量

// if(count == list.length){

// all.checked = true;

// }else{

// // 没有全部选中就给它false

// all.checked = false;

// }

// 下面这句话等同于上面的判断

all.checked = count == list.length;

}

04复习随机数

// // 0-1之间，不包括1

// var res = Math.random();

// console.log(res);

// var res = Math.ceil(Math.random() * 100);

// console.log(res);

0 - 0.999999999999 之间如果乘以100

0 - 99.9999999999 之间，再向上取整就是 0 - 100之间了

这里面的0的概念贼低

如何让0的概率跟其他数字一样大

0 - 0.99999999999999 之间乘以101

0 - 100.xxxxx 之间 100.099 直接取整得到100

直接取整得到0

再直接取整就是（向下取整也是一样的）

0 - 100之间

这样子0和其他数字都是一样的

0.x得到0

1.x得到1

100.x得到100，概率都是一样的了

// 结论：如果要随机得到1 - n 之间的数： parseInt ( Math.random() * (n+1) );

// var res = parseInt ( Math.random() * 101 );

// console.log(res);

// 随机0-5之间

// var res = parseInt ( Math.random() * 6 );

// console.log(res);

05随机反牌

</select>

// 获取所有option

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

// 翻牌子的点击事件

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

// 生成随机下标： 0 到（长度-1）

// 算法： parseInt( Math.random() * (n+1) ) ,此时n为长度-1

// 代入以后-1+1 相当于是parseInt( Math.random() * 长度 )

var idx = parseInt(Math.random() * list.length);

// 根据下标找到对应的option

list[idx].selected = true;

}

06点击对应按钮显示对应图片

<br>

// 找到img

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

// 找到所有按钮

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

// 遍历所有按钮，给它们加点击事件

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

// i是从0开始，我们的图片是1开始，所以记得要+1

// 这句话是把每个按钮对应的图片名字存在title里

list[i].title = "pic" + (i + 1) + ".jpg";

// 点击谁，就把谁的title拼接给img的路径

list[i].onclick = function () {

icon.src = "images/" + this.title;

}

07解释为什么不能用list[i ]

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

// 页面一打开的时候执行了

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

list[i].onclick = function(){

// 这里的代码要点击才会执行

// console.log(i); //3

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

// 如果你是想点哪个按钮，就找到那个按钮，一定要用this

console.log(this);

}

// 也是页面一打开自动执行

// 当我们看到弹框的时候，循环就结束了，循环i的值为3

alert('结束了');

// 有一个数组，数组中每个元素是一个对象

var list = [ { name:"jack" },{ name:"rose" },{ name:"andy" } ];

// 需要给数组中每个对象加一个方法

for(var i = 0; i < list.length; i++){ //长度为3，循环里面0,1,2，当等于3的时候循环结束

// console.log(i);//0,1,2

//0,1,2

list[i].age = 18;

list[i].sayHi = function(){

// 这段代码它是循环结束来执行的，所以打印3

console.log(i);

}

// 调用的时候循环早就结束了

list[0].sayHi();

list[1].sayHi();

list[2].sayHi();

08阻止a标签跳转

<!--

怎么阻止？

1. 给a标签加一个点击事件，点击事件里写一个 return false

2. href属性改成javascript:void(0) 简写形式：javascript:

-->

</head>

<body>

//找到a1

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

a1.onclick = function(){

alert(123);

// 哥们不要跳转了！

return false;

}

09美女相册

<style>

* {

margin: 0;

padding: 0;

list-style: none;

}

body {

padding-left: 100px;

}

#imgs {

overflow: hidden;

margin: 50px 0;

}

#imgs li {

float: left;

margin-right: 10px;

}

</style>

</head>

<body>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

<p id="des">这是描述信息</p>

<!--

总结思路：

1.找到所有的a标签、大图、p标签

2.遍历所有的a，给它们加点击事件

2.1 点击事件，哪个a被点击就获取这个a的href给大图的src，在把被点的a的title给p标签的文字

-->

// 找到所有的a标签

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

// 找到大图

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

// 找到p标签

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

// 遍历所有的a标签，给它加点击事件

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

list[i].onclick = function(){

// 找到被点击的a标签用this

bigImg.src = this.href;

des.innerText = this.title;

return false;

}

10模拟京东搜索框

<!--

获得焦点事件：

onfocus

什么叫获得焦点？说人话就是：这个文本框能够被输入了，就叫获得焦点

失去焦点事件：

onblur

-->

</head>

<body>

//找到文本框

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

// 当获得焦点的时候，清掉文本内容

txt.onfocus = function(){

// 获取焦点不能无条件情况

// 应该再判断，等于蚕丝被的时候才清空，不等于都不要清空

// txt.value = "";

if(txt.value == "蚕丝被"){

txt.value = "";

}

// 当文本框失去焦点时，要恢复原来的value

txt.onblur = function(){

// 只要失去焦点就无条件的恢复成蚕丝被

// txt.value = "蚕丝被";

// 我们要为空才恢复，不为空代表用户输入国内人了就不恢复

if(txt.value == "")

txt.value = "蚕丝被";

}

11排他思想

<!--

排他思想：先让大家都恢复默认，只让自己特殊

-->

<style>

.green{

background-color: green;

}

</style>

</head>

<body>

//找到所有的按钮

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

// 遍历所有按钮，给它们加点击事件

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

list[i].onclick = function(){

// 先让所有按钮恢复成原样

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

list[j].className = "";

list[j].value = "哼哼";

}

// 让被点击的按钮变绿

this.className = "green";

this.value = "哈哈";

}

12操作行内属性的另一种方式

<!--

JS里无法用点语法的形式来修改自定义的行内属性

setAttribute：

参数1：要修改的属性名

参数2：修改后的值

专门用来设置行内属性的方法，既可以修改自定义属性也可以修改自带属性，但最主要还是用来修改自定义属性，因为自带属性用点语法更方便

getAttribute：

获取行内属性的值

参数：要获取的属性名

既可以获取自带属性也可以获取自定义，主要用来获取自定义属性

removeAttribute():

移除行内属性

参数：要移除的属性名

-->

</head>

<body>

<!--

id，class,style默认就存在的属性叫自带属性

除了这些属性以外，我们也可以写其他属性，其他属性就叫自定义属性

-->

<div id="box" shengao="199cm">我是div</div>

// 不管是id还是style，都是div默认存在的属性（这个叫自带属性）

//找到这个div

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

// box.id = "xx";

// box.style.width = "200px";

// box.style.height = "200px";

// box.style.backgroundColor = "red";

// // 自定义属性能不能用JS的点语法来修改

// box.shengao = "188cm";

// 参数1：要修改的属性名

// 参数2：要修改后的属性值

// box.setAttribute('id','xx');

// box.setAttribute('shengao','188cm');

// 参数1：属性名

// var res = box.getAttribute('id');

// console.log(res);

// console.log(box.getAttribute('shengao'));

// box.removeAttribute('shengao');

// 如果我用这个方法操作类

box.setAttribute('class','red');

13打印按钮的下标

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

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

// 先把下标存到每个按钮里

list[i].setAttribute('index',i);

list[i].onclick = function(){

// 点谁，就取出谁的index属性，就是它们的下标

var idx = this.getAttribute('index');

alert(idx);

}

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念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第二天

1找元素方法补充

02全选，全不选，反选

03表格中的全选和全不选

04复习随机数

05随机反牌

06点击对应按钮显示对应图片

07解释为什么不能用list[i ]

08阻止a标签跳转

09美女相册

10模拟京东搜索框

11排他思想

12操作行内属性的另一种方式

13打印按钮的下标

推荐阅读更多精彩内容