day25-web前端

作者: L_4bc8 | 来源:发表于2018-12-11 21:33 被阅读0次

1.基础语法(对象)

1.什么是对象(object) -和Python中的对象一样,有对象属性和对象方法
2.创建对象
a.创建对象字面量
对象字面量:{属性名1:属性值1, 属性名2:属性值}
注意:当属性值是普通值我们叫这个属性为对象属性;当属性值是函数这个属性就是对象方法

p1 = {
            name:'余婷', 
            age:10, 
            eat:function(){
            console.log('吃饭!')
            }
        }
    p2 = {
            name:'小明', 
            age:18, 
            eat:function(){
            console.log('吃饭!')
            }
        }

b.通过构造方法创建对象
声明构造方法(类似python声明类)
声明一个函数,使用函数名来作为类名,在函数中通过this关键字来添加对象属性和对象方法
构造方法的函数名,首字母大写
this类似python中的self
通过构造方法创建对象
对象 = new 构造方法()

function Person(name1='张三', age1=18, sex1='男'){
    this.name = name1
    this.age  = age1
    this.sex = sex1
    this.eat = function(food){
          console.log(this.name+'在吃'+food)
    }
    return this
}
    //创建Person的对象
    p3 = new Person()
    p4 = new Person('小明')
    //使用对象属性和方法
    console.log(p3, p4, p3===p4, p3.age, p4.name)
    p4.eat('苹果')
    
    
    //调用函数，获取返回值
    win1 = Person()
    console.log(win1)
    win1.alert('我是window')

c.函数中this关键字
当调用函数的时候前面加关键字new,就是把这个函数当成构造函数来创建对象,函数中的this就是当前对象;
直接调用函数的时候,函数中的this是window对象

3.使用对象属性(获取属性值)

a.对象.属性 - p5.name
b.对象[属性名]

var t = 'age'
    p5 = new Person('小花', 20, '女')
    console.log(p5.name)
    console.log(p5['name'], p5[t])
    p5.eat('面条')

4.修改对象属性的值
属性存在的时候是修改,不存在的时候就是添加
对象.属性 = 值
对象[属性名] = 值
//修改属性值
p5.name = '小红'
console.log(p5)
p5['age'] = 30
console.log(p5)

添加属性
p5.num = '100222'
p5['num2'] = '110222'
console.log(p5)

给对象添加属性只作用于一个对象,不影响其他对象
console.log(p4)

构造方法(类名).prototype.属性 = 值 - 给指定的构造方法的所有对象都添加指定的属性

Person.prototype.aaa = '123'
    p6 = new Person()
    p6.aaa = 'abc'
    console.log(p6.aaa)
    Person.
    console.log(p5.aaa)
    
    //给String类型添加方法
    String.prototype.ytIndex = function(x){
        return this[x]
    }
    str1 = new String('abcdef')
    console.log(str1.ytIndex(0))
    console.log('hello'.ytIndex(3))
    
    //练习：用一个数组保存多个学生对象，要求学生对象中有姓名，年龄和成绩。最后所有学生按成绩进行排序
    function Student(name, age, score){
        this.name = name;
        this.age = age;
        this.score = score;
        
        return this;
    }
    students = [new Student('小明', 18, 90), new Student('小红', 20, 78), new Student('小花', 19, 98)];
    //sort方法排序后，原数组会改变，也会产生新的数组
    newStudents = students.sort(function(a,b){
        return a.score - b.score;
    });
    console.log(newStudents, students)

2 DOM获取节点

1.什么是dom(文档对象模型)

DOM是document object model的缩写
DOM模型就是一个数结构,里面是由各种节点组成

2.document对象 - js写好的一个对象,代码是网页内容结构

通过document对象可以拿到网页中所有内容对应的节点

3.获取节点(在js中获取网页中的标签)

1.直接获取节点

a.通过标签的id值来获取指定的标签
.document.getElementById(ID值) - 返回节点对象
如果html中同样的id对应的标签有多个,只能取宇哥.所以一般在使用id的时候要唯一

var pNode = document.getElementById('p1')
console.log(pNode)

b.通过标签名来获取指定的标签
.document.getElementsByTagName(标签名) - 返回的是一个数组对象,数组中是节点

 var aNodeArray = document.getElementsByTagName('a')
     for(x in aNodeArray){
        // 拿到aNodeArray对象中的所有属性,这儿除了a标签以外还有length，item等其他非标签对象
        var aNode = aNodeArray[x]
        
        // 只对标签进行操作
        if(typeof(aNode) == 'object'){
            console.log(aNode, '是标签！')
        }
     }

c.通过类名来后驱指定的标签
.document.getElementsByClassName(类名) - 获取所有class属性值是指定的值的标签,返回的是一个数组对象

 var c1NodeArray = document.getElementsByClassName('c1')
     console.log(c1NodeArray)

d.通过name属性的值来获取指定的标签
document.getElementsByName('username') - 返回一个节点数组对象

3 DOM间接获取节点

1.获取父节点

子节点.parentElement - 获取子节点对应的父节点

    var box1Node = box11Node.parentElement;
    var box1Node2 = box11Node.parentNode;
    console.log(box1Node, box1Node2);

2.获取子节点

a.获取所有的子节点
父节点.children - 返回一个数组对象

    var allChildArray = box1Node.children
    console.log(allChildArray)

父节点.childNodes - 获取父节点下的所有内容(包括子节点和文本)

    var allChildArray2 = box1Node.childNodes
    console.log(allChildArray2)

b.获取第一个子节点
父节点.firstElementiChild

    var childNode = box1Node.firstElementChild
    console.log(childNode)

c.获取最后一个子节点

var childNode2 = box1Node.lastElementChild
console.log(childNode2)

4 DOM创建添加和删除节点

1.创建节点

document.createElement(标签名) - 创建指定标签节点(创建后不会主动添加到浏览器上)
a.节点属性:
标签节点就是标签对象,可以通过document去网页中获取到,也可以自己创建
标签对象中有相应的标签相关属性,可以通过标签节点获取或者修改这些属性值
例如,a标签节点有:href属性,id属性, classNme属性, style属性等...
img标签的属性有:src, id属性, style, alt, title
b.innerHTML和InnerText属性
innerHTML - 双标签的标签内容包含其他标签
innerText - 双标签的标签内容侧重只有文字

 var divNode =  document.createElement('div')
    divNode.innerText = '我是box1'
    
    //创建一个img标签对象
    var imgNode = document.createElement('img')
    imgNode.src = 'img/thumb-1.jpg'

2添加节点

a.在指定的标签中的最后,添加一个节点
父节点.appendChild(需要添加的节点)

var div1Node = document.getElementById('div1')
    function addDiv(){
        var divNode =  document.createElement('div')
        divNode.innerText = '我是box1'
        div1Node.appendChild(divNode)
    }

b.在指定的节点前插入一个节点
父节点.insertBefore(新节点, 指定节点) - 在父节点中的指定节点前插入新节点

div1Node.inserBefore(imgNode, div1Node.firstChild)

3.删除节点

父节点.removeChild(子节点) - 删除父节点中指定的节点

div1Node.removeChild(imgNode)

清空标签(删除所有的子标签)

div1Node.innerHTML = null

节点.remove() - 将节点从浏览器中删除

5 删除广告

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                position: relative;
            }
            #hide{
                display: none;
            }
            #ad{
                height: 100px;
                background-color: lightgoldenrodyellow;
            }
            #ad img{
                width: 100%;
                height: 100%;
            }
            #ad #close{
                position: absolute;
                top: 10px;
                right: 15px;
                width: 30px;
                height: 30px;
                background-color: lightgray;
                color: white;
                text-align: center;
                line-height: 30px;
            }
            #content{
                height: 400px;
                background-color: deepskyblue;
            }
        </style>
    </head>
    <body>
        <!--html-->
        <div id="ad">
            <img src="img/picture-1.jpg"/>
            <div id="close" onclick="close1()" style="cursor: pointer;">
                X
            </div>
        </div>
        <div id="content"></div>
        
        <!--js-->
        <script type="text/javascript">
            //产生0~255的随机整数
            //parseInt() - 转换成整数
            //parseFloat() - 转换成小数
            //Math.random() - 产生随机数0~1(小数)
            num = parseInt(Math.random()*255)
            
            
            console.log(num)
            function close1(){
                var adNode = document.getElementById('ad')
//              adNode.parentNode.removeChild(adNode)
                // 直接移除指定标签
//              adNode.remove()

                
                //让指定的标签不显示
                adNode.style.display = 'none'
                

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

6动态添加和删除

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                position: relative;
            }
            #top{
                margin-left: 60px;
                margin-top: 60px;
            }
            #top div{
                width: 200px;
                height: 50px;
                color: white;
                font-size: 20px;
                margin-bottom: 2px;
                text-align: center;
                line-height: 50px;
            }
            #top div font{
                position: absolute;
                right: 3px;
                /*将光标变成手*/
                cursor: pointer;
            }
            
            #bottom{
                margin-left: 60px;
            }
            #bottom #text{
                display: inline-block;
                width: 200px;
                height: 50px;
                border: none;
                outline: none;
                /*让光标在中间*/
                text-align: center;
                border-bottom: 2px solid lightgrey;
                font-size: 16px;
            }
            #bottom #button{
                display: inline-block;
                width: 100px;
                height: 30px;
                border: none;
                outline: none;
                background-color: coral;
                color: white;
            }
            
            
        </style>
    </head>
    <body>
        <div id="top">
        </div>
        <!--添加默认的水果标签-->
        <script type="text/javascript">
                var fruitArray = ['香蕉', '苹果', '草莓', '火龙果'];
                for(index in fruitArray){
                    fruitName = fruitArray[index];
                    creatFruitNode(fruitName, 'darkgreen')
                }
                //==========删除水果=============
                function delFruit(){
                    //在这儿，点击的是哪个标签this就指向谁
                    this.parentElement.remove()
                    
                }
                //添加节点
                function creatFruitNode(fruitName, color1){
                    //创建标签
                    var fruitNode = document.createElement('div')
                    fruitNode.innerHTML = fruitName;
                    var fontNode = document.createElement('font');
                    fontNode.innerText = '×';
                    //给点击事件绑定驱动程序
                    fontNode.onclick = delFruit;
                    fruitNode.appendChild(fontNode);
                    //设置背景颜色
                    fruitNode.style.backgroundColor = color1
                    //添加标签
                    var topNode = document.getElementById('top')
                    topNode.appendChild(fruitNode)
                }
            </script>
            
        <div id="bottom">
            <input type="text" name="" id="text" value="" />
            <input type="button" name="" id="button" value="确定" onclick="addFruit()"/>
        </div>
        <script type="text/javascript">
            //=========产生随机颜色=============
            function randomColor(){
                var num1 = parseInt(Math.random()*255);
                var num2 = parseInt(Math.random()*255);
                var num3 = parseInt(Math.random()*255);
                return 'rgb('+num1+','+num2+','+num3+')';
            }
            
            //==========添加水果==============
            function addFruit(){
                //获取输入框中的内容
                var inputNode = document.getElementById('text');
                var addName = inputNode.value;
                if(addName.length == 0){
                    alert('输入的内容为空！');
                    return;
                }
                //清空输入框中的内容
                inputNode.value = '';
                //创建标签
                var fruitNode = document.createElement('div');
                fruitNode.innerHTML = addName;
                var fontNode = document.createElement('font');
                fontNode.innerText = '×';
                //给点击事件绑定驱动程序
                fontNode.onclick = delFruit;
                fruitNode.appendChild(fontNode);
                //创建随机颜色
                //'rgb(255, 0, 0)'
                fruitNode.style.backgroundColor = randomColor();
                var topNode = document.getElementById('top');
                topNode.insertBefore(fruitNode, topNode.firstChild);
                
            }
        </script>
    </body>
</html>

7DOM属性操作

1.属性的点语法操作

节点.属性 - 获取属性值; 节点.属性 = 新值 - 修改属性的值

    console.log(imgNode.src)
    imgNode.title = '图片1'
    
    var name = 'src'

2.通过相应方法对属性进行操作

a.获取属性
节点.getAttribute(属性名)
var srcAttr = imgNode.getAttribute(name)
console.log(srcAttr)

b.给属性赋值
节点.setAttribute(属性名, 值)

imgNode.setAttribute('title', '帅哥1')

c.删除属性
节点.removeAttribute(属性值)

    var buttonNode = document.getElementsByTagName('button')[0]

让按钮可以点击

buttonNode.disabled = ''

添加属性

buttonNode.ytIndex = 100

删除属性

buttonNode.removeAttribute('ytIndex')

8.BOM 基础

1.什么是BOM - 浏览器对象模型(broser object model)

js中提供了一个全局的window对象,用来表示当前浏览器
js中声明的全局变量,其实都是绑定在window对象中的属性(使用window的属性和方法的时候前面可以加window,也可以省略)

    var a = 100;  //window.a = 100
    console.log(a, window.a)  
    //window.alert('你好！')
    //alert('你好！')
    //2.window基本操作
    //a.打开新窗口
    //window.open('http://www.baidu.com')  
    //b.关闭窗口
    //window.close()
    //c.移动当前窗口
    //窗口对象.moveTo(x坐标, y坐标)
    function windowAction(){
        myWindow = window.open('','','width=200,height=300')
        myWindow.moveTo(300, 300)
        //d.调整窗口大小
        myWindow.resizeTo(400, 400)
        //e.刷新(暂时看不到效果)
        //true -> 强制刷新
        window.reload(true)
    }

f.获取浏览器的宽度和高度
innerWidth\innerHeight - 浏览器显示内容部分的宽度和高度
outerWidth\outerHeight - 整个浏览器的宽度和高度

    console.log(window.innerWidth, window.innerHeight)
    console.log(window.outerWidth, window.outerHeight)

3弹框

a.alert(提示信息) - 弹出提示信息(带确定按钮)

window.alert('alert弹出')

b.confirm(提示信息) - 弹出提示信息(带确定和取消按钮),返回值是布尔值,取消 - false, 确定 - true

result = window.confirm('confirm,是否删除?')
console.log('===:',result)

function closeAction(){
        var result = window.confirm('是否删除?')
        if(result==false){
            return
        }
        var divNode = document.getElementById('div1')
        divNode.remove()
    }

c.prompt(提示信息,输入框中的默认值) - 弹出一个带输入框和取消, 确定按钮的提示框; 点取消, 返回值是 null; 点确定返回值是输入框中输入的内容

        var result = window.prompt('message', 'defalut')
    console.log(result)

9定时事件

1.

setInterval(函数,时间) - 每隔指定的时间调用一次函数, 时间单位是毫秒l;返回定时对象
clearInterval(定时对象) - 停止定时
1000毫秒 = 1秒

  var pNode = document.getElementById('time')
  var num = 0
  //开始定时
  var interval1 = window.setInterval(function(){
      //这个里面的代码每个1秒会执行一次
      num ++
      //console.log(num)
      pNode.innerText = num
      
      if(num == 10){
          //停止指定的定时
          window.clearInterval(interval1)
      }
  }, 1000)

setTimeout(函数, 时间) - 隔指定的时间调用一次函数(函数只会调用一次,就像定时炸弹)
clearTimeout(定时对象) - 停止定时

    var message = '爆炸!!!!!!!!!!!'
    var timeout1 = window.setTimeout(function(){
        console.log(message)
    }, 10000)
    
    function clearBoom(){
        //
        window.clearTimeout(timeout1)
        console.log('炸弹被拆除')
    }

10 自动跳转

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                position: relative;
            }
            #box1{
                width: 400px;
                height: 150px;
                background-color: lightcyan;
                margin-left: auto;
                margin-right: auto;
                border: 2px dotted lightgrey;
                display: none;
            }
            #box1 p{
                line-height: 70px;
                margin-left: 20px;
            }
            #box1 font{
                position: absolute;
                right: 20px;
                bottom: 15px;
                color: darkslateblue;
                text-decoration: underline;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <button onclick="showBox()">进入百度</button>
        <div id="box1">
            <p>5s后自动跳转到百度...</p>
            <!--<a href="http://www.baidu.com", target="_blank">马上跳转</a>-->
            <font onclick="jump()">马上跳转</font>
            
        </div>
    </body>
</html>
<script type="text/javascript">
    var box1Node = document.getElementById('box1');
    var pNode = box1Node.firstElementChild;
    function showBox(){
        if(box1Node.style.display == 'block'){
            return
        }
        //显示提示框
        box1Node.style.display = 'block';
        //开始倒计时
        var time = 5;
        interval1 = window.setInterval(function(){
            time--;
            pNode.innerText = time+'s后自动跳转到百度...'
            
            if(time === 0){
                //停止定时
                window.clearInterval(interval1)
                //打开网页
                window.open('https://www.baidu.com')
                //隐藏提示框
                box1Node.style.display = 'none'
                pNode.innerText = '5s后自动跳转到百度...'
            }
            
        }, 1000);
    }
    
    function jump(){
        //停止定时
        window.clearInterval(interval1)
        //打开网页
        window.open('https://www.baidu.com')
        //隐藏提示框
        box1Node.style.display = 'none'
        pNode.innerText = '5s后自动跳转到百度...'
    }
</script>

1.事件

js是事件驱动语言

1.事件三要素(事件源、事件、事件驱动程序)

例如：
小明打狗，狗嗷嗷叫！ --- 事件;在这个事件中狗是事件源, 狗被打就是事件，狗嗷嗷叫就是事件驱动程序
小明打狗，他老爸就打他 --- 狗是事件源,狗被打是事件，小明被打是事件驱动程序
点击按钮，就弹出一个弹框 - 事件源：按钮, 事件：点击, 驱动程序：弹出弹框

2.绑定事件

第一步：获取事件源
第二步：绑定事件
第二步：写驱动程序

在标签内部给事件源的事件属性赋值
标签事件属性='驱动程序'></标签>
标签事件属性='函数名()'></标签> - 一般不这样绑定
/注意：这个时候被绑定的驱动程序如果是函数，那么这个函数中的this关键字是

window
    function showAlert(){
        console.log(this)
    }

b.通过节点绑定事件1
标签节点.事件属性 = 函数
注意：这个时候函数中的this是事件源

    var btnNode = document.getElementById('btn2');
    function changeColor(){
        console.log(this)
        this.style.backgroundColor = 'skyblue'
    }
    btnNode.onclick = changeColor;

c.通过节点绑定事件2
标签节点.事件属性 = 匿名函数
注意：这个时候函数中的this是事件源

    var btn3Node =  document.getElementById('btn3');
    btn3Node.onclick = function(){
        this.style.color = 'red';
    }

d.通过节点绑定事件3
节点.addEventListener(事件名,函数) - 指定的节点产生指定的事件后调用指定函数
事件名 - 字符串，去掉on
注意：这个时候函数中的this是事件源; 这种方式可以给同一个节点的同一事件绑定多个驱动程序

    var btn4Node = document.getElementById('btn4');
    btn4Node.addEventListener('click', function(){
        this.style.color = 'yellow';
    });
    btn3Node.addEventListener('click', function(){
        this.style.backgroundColor = 'yellow';
    })

3.获取事件对象
当事件的驱动程序时一个函数的时候，函数中可以设置一个参数，来获取当前事件的事件对象

    var div1Node = document.getElementById('div1');
    div1Node.onclick = function(evt){
        //参数evt就是事件对象
        //a.clientX/clientY - 事件产生的位置的坐标(相对浏览器内容部分)
        console.log(evt.clientX, evt.clientY);
        
        console.log(evt.offsetX, evt.offsetY);
        console.log(this.style.width)
        if(evt.offsetX < 100){
            this.style.backgroundColor = 'red';
        }else{
            this.style.backgroundColor = 'yellow';
        }
    }

12常见事件类型

常见事件类型

1.onload - 页面加载完成对应的事件(标签加载成功)

window.onload = 函数

2.鼠标事件

onclick - 点击
onmouseover
onmouseout
...

3.键盘事件

onkeypress - 按下弹起
onkeydown
onkeyup

4.输入框内容改变

onchange - 输入框输入状态结束

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            //1.在页面加载完成后才去获取节点
            window.onload = function(){
                var pNode = document.getElementById('p1')
                console.log(pNode)
                
                //点击事件
                pNode.onclick = function(){
                    alert('被点击!');
                }
                
                //鼠标进入事件
                pNode.onmouseover = function(){
                    this.innerText = '鼠标进入';
                    this.style.backgroundColor = 'red';
                }
                
                //鼠标移出事件
                pNode.onmouseout = function(){
                    this.innerText = '输入移出';
                    this.style.backgroundColor = 'white';
                }
                //鼠标按下事件
                pNode.onmousedown = function(){
                    this.innerText = '鼠标按下';
                }
                pNode.onmouseup = function(){
                    this.innerText = '鼠标弹起';
                }
                
                pNode.onmousewheel = function(){
                    this.innerText = '鼠标滚动';
                    console.log('鼠标滚动')
                }
                
                
            }
            
            
        </script>
    </head>
    <body>
        <p id="p1" style="height: 200px;">我是段落</p>
        <textarea name="" rows="4" cols="100"></textarea>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544525699572&di=6bd446b73556fbdfd6407aaf22f428ee&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fa%2F5842337e52dde.jpg"/>
    </body>
</html>
<script type="text/javascript">
    var textareaNode = document.getElementsByTagName('textarea')[0]
    textareaNode.onkeypress = function(evt){
        //键盘事件对象: key属性 - 按键的值, keyCode属性 - 按键的值的编码
        console.log(evt);
    }
    
    textareaNode.onchange = function(evt){
        alert('onchange事件')
    }
</script>