美文网首页
【第68天】BOM DOM

【第68天】BOM DOM

作者: 36140820cbfd | 来源:发表于2019-09-28 20:47 被阅读0次

    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>
    
    

    相关文章

      网友评论

          本文标题:【第68天】BOM DOM

          本文链接:https://www.haomeiwen.com/subject/wsijuctx.html