【第68天】BOM DOM

1 BOM：通过js控制浏览器

代码块
弹出框：alert('hello,world')
打开一个新的窗口：window.open()

2 window子对象

2-1 navigator导航对象

代码块
获取浏览器全称：navigator.appName;
获取版本：navigator.appVersion;
获取客户端绝大多数信息：navigator.userAgent;
获取浏览器操作系统：navigator.platform;

2-2 location对象

代码块
获取当前页面的网址：location.href
跳转到指定的网址：location.href='http://www.sofo.com'
重新加载当前页面：location.reload()

2-3 弹出框

代码块
警告框：alert('are you sure ?')
确认框：confirm('你确定吗')
提示框：prompt('请输入提示内容','西红柿')

2-4 计时

代码块：多长时间后执行
setTimeout(function(){alert('hello')},4000);

3秒后执行launch函数
function launch(){
    alert('hello');
}

setTimeout(launch,3000)

代码块：每隔一段时间做
定义一个函数
function auto(){
    console.log('hello,world')
}

每隔一段时间，3秒执行打印
var res = setInterval(auto,3000)


清除打印，结束打印：clearInterval(res);

清空定时器

3 通过JS操作DOM

3-1 查找标签

查找标签

代码块
通过ID获取标签：document.getElementById('d1')

根据类名class去找：document.getElementsByClassName('c1')

根据标签的名字去找：document.getElementsByTageName('p')

3-2间接查找

间接查找

找标签

3-3 添加节点

image.png

代码块：创建一个标签，放到子节点最后
第一步：找到父节点
var father =document.getElementById('d2');

第二：生成子节点
var last_son =document.createElement('div');

第三：子节点文字
last_son.innerText='helloworld';

第四：插入正确位置
father.appendChild(last_son);

3-4 删除节点

image.png

4 属性attribute

属性设置

4-1 属性的操作

代码块
HTML代码如下：

<div id='d2'>
<p>我是前面的P</p>
<div id='d3' ec14='siyu'>我是子div标签</div>
<p>我是后面的P</p>

</div>


js代码如下：

var res =document.getElementById('d3');
拿到属性值：res.getAttribute('ec14');
"siyu"

设置新的属性值：res.setAttribute('ec14','wanjun');

查看属性值是否为新的：res.getAttribute('ec14');
"wanjun"

移除属性值：res.removeAttribute('ec14');
undefined

res.getAttribute('ec14');
null

4-2通过标签名操作属性

代码块：
HTML代码：
<div id='d2'>
<p>我是前面的P</p>
<div id='d3' ec14='siyu'>我是子div标签</div>
<p>我是后面的P</p>
<span class='c1' dept='it center'>我是王思雨</span>
</div>


js代码：

拿到span标签：var res = document.getElementsByTagName('span');
是一个数组。

res[0].getAttribute('dept');
"it center"

res[0].setAttribute('dept','database');
undefined

res[0].getAttribute('dept');
"database"

res[0].remove('dept');
undefined

4-3 通过标签名操作图片的属性

代码块

HTML:

<img id='c1' src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2894487835,3534766040&fm=58&bpow=480&bpoh=640" alt="" /> 

JS:
res=document.getElementById('c1');

res.setAttribute('src','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569079312315&di=2851a676ef5ad078b2b9055b8249fa33&imgtype=0&src=http%3A%2F%2Fy.zdmimg.com%2F201702%2F07%2F5899a7e766f035068.jpg_e600.jpg');

4-4通过js操作表单的内容

代码块
HTML代码部分：
<body>
<input type="text" id='i1'>
<input type="password" id='i2'>

<select id='s1'>
<option value='杭州'>杭州</option>
<option value='上海'>上海</option>
</select>
<textarea id='t1' cols="60" rows="60">请输入内容：</textarea>
</body>

JS代码部分：

res1=document.getElementById('i1');

<input type="text" id="i1">

res1.value;
"王思雨"

"王思雨"

res2=document.getElementById('i2');

res2.value;


"qwehkkwjjkd"
res3=document.getElementById('s1');

<select id="s1">…</select>
res3.value;
"杭州"
res4=document.getElementById('t1');
res4.value;
"请输入内容：真正的猛男"

5样式操作

image.png

代码块
HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    .c1{
        height:100px;
        width:100px;
        background-color:#F00;
        border-radius:50%;
        }
        
    .c2{
        background-color:#9F0;}

</style>
</head>

<body>
<div id='d1' class="c1 c2"></div>
</body>
</html>


JS代码如下：
d1ele=document.getElementById('d1');

d1ele.classList.remove('c2');  移除c2的属性

d1ele.classList.add('c2');    添加C2的属性

d1ele.classList.contains('c2');   查询是否包含某个属性


来回切换属性值：
d1ele.classList.toggle('c2');
false
d1ele.classList.toggle('c2');
true

6 指定css的操作

2.png

代码块
d1ele;
<div id="d1" class="c1 c2"></div>

d1ele.style.backgroundColor='blue';
"blue"
d1ele.style.borderRadius='20px';
"20px"

7 js捆绑元素之获得焦点（直接在标签内绑定事件）

image.png

代码块
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    .c1{
        height:100px;
        width:100px;
        background-color:#F00;
        border-radius:50%;
        }
        
    .c2{
        background-color:#9F0;}

</style>
</head>

<body>
<div id='d1' class="c1 c2"></div>
<button id='b1' onclick="change()">点击我切换颜色</button>
<script>
function change(){
    var d1ele=document.getElementById('d1');
    d1ele.classList.toggle('c2');
    }
</script>
</body>
</html>

8 通过在js代码中绑定事件控制样式

image.png

代码块
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    .c1{
        height:100px;
        width:100px;
        background-color:#F00;
        border-radius:50%;
        }
        
    .c2{
        background-color:#9F0;}

</style>
</head>

<body>
<div id='d1' class="c1 c2"></div>
<button id='b1' >点击</button>

<script>
    var b1ele=document.getElementById('d1');
    b1.onclick=function(){
        var d1ele=document.getElementById('d1');
        d1ele.classList.toggle('c2');
            
    }
</script>

</body>
</html>

9 js常用事件

js常用事件

10：练习获得焦点和失去焦点输入框默认值的变化

代码块
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

</head>

<body>
<input type='text' value="请输入姓名：" id="i1">
<script>
    resele=document.getElementById('i1');
    //获得焦点：
    resele.onfocus=function(){
        this.value='';
        
        }
    
    resele.onblur=function(){
        this.value='请输入姓名：';
        
        }

</script>


</body>
</html>

11 js级联列表，选择省份，后面城市自动变化

image.png

代码块
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>练习曲</title>

</head>

<body>
<label for="s1">省份：</label>
<select id='s1'>
    <option>请选择省份</option>
</select>


<label for="c1">城市：</label>
<select id="c1">
    <option>请选择城市</option>
</select>

<script>
    var data = {
        "北京": ["昌平区", "海淀区", "朝阳区"],
        "上海": ["浦东区", "徐汇区", "浦东新区"],
        "山东": ["烟台", "青岛", "威海"]
    };
    // 1. 拿到所有的省，在s1中生成对应的option选项
    var s1ele=document.getElementById('s1');
    var c1ele=document.getElementById('c1');
    
    for (var i in data){
        console.log(i);
        
    // 2. 创建option标签,将i赋值给option,将option添加到父元素里面就OK
    var tmp =document.createElement('option');
    tmp.innerText=i;
    s1ele.appendChild(tmp);
    }
    
    // 3.当用户选中某个省之后才做的事儿
    s1ele.onchange=function(){
        //清空之前选择省份添加的城市项
        c1ele.innerHTML='';
        //获取用户选择的省份
        var p=this.value;
        // 根据用户选择的省，去data中找省对应的城市数据
        var c=data[p];
        //将对应城市数据添加到option中
        for (var m in c){
            console.log(m);
            var tmp1=document.createElement('option');
            tmp1.innerText=c[m];
            c1ele.appendChild(tmp1);
            }
        
        }
    
</script>


</body>
</html>

最后编辑于：2020.03.13 23:43:29

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

【第68天】BOM DOM

1 BOM：通过js控制浏览器

2 window子对象

2-1 navigator导航对象

2-2 location对象

2-3 弹出框

2-4 计时

3 通过JS操作DOM

3-1 查找标签

3-2间接查找

3-3 添加节点

3-4 删除节点

4 属性attribute

4-1 属性的操作

4-2通过标签名操作属性

4-3 通过标签名操作图片的属性

4-4通过js操作表单的内容

5样式操作

6 指定css的操作

7 js捆绑元素之获得焦点（直接在标签内绑定事件）

8 通过在js代码中绑定事件控制样式

9 js常用事件

10：练习获得焦点和失去焦点输入框默认值的变化

11 js级联列表，选择省份，后面城市自动变化

推荐阅读更多精彩内容