各种API以及事件初识——笔记

最新推荐文章于 2022-08-02 19:47:26 发布

weixin_45114208

最新推荐文章于 2022-08-02 19:47:26 发布

阅读量680

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_45114208/article/details/109597805

版权

1.outerHTML/ innerText / innerHTML

innerHTML
将元素中所有的内容都获取到包括HTML标签但是不包括自身标签
innerText
将元素的内容获取出来不包括HTML标签
outerHTML
将自身以及子元素所有的内容都获取出来包括HTML标签包括自身标签
在这里插入图片描述

<body >
        <div id="d">
            老王<span>住你隔壁</span>
        </div>
    </body>
</html>
<script>
    var x  = document.getElementById("d");
    console.log(x.innerHTML);
    console.log(x.innerText);
    console.log(x.outerHTML);
</script>

自定义属性及getAttribute/setAttribute方法

<div id="d"></div>
//setAttribute("属性名称","属性值名称")
//getAttribute("属性名称") : 返回属性名称对应的属性值
//我们可以通过setAttribute设置自定义属性
var d = document.getElementById("d");
    d.setAttribute("heihei",123);
    document.write(d.getAttribute("heihei"));

获取非行内样式（兼容问题）

行内样式
行内样式就是卸载标签体内的样式
非行内样式
非行内样式就是指不是写在标签内的样式

<div id="box" style="color: red;"> </div>
var d = document.getElementById("box");
        //获取行内样式
document.write(d.style.color);
#box{
     color: blue;
}
var d = document.getElementById("box");
//获取非行内样式
document.write(d.style.color); 返回空 
----------------------------------------
#box{
     color: red;
     font-size: 22px;
}
//照抄 扩展 兼容性
var d = document.getElementById("box");
function getStyle(obj,attr){    //获取非行间样式，obj是对象，attr是值
   if(obj.currentStyle){       //针对ie获取非行间样式
       return obj.currentStyle[attr];
   }else{
       return getComputedStyle(obj,false)[attr];   //针对非ie
   };
};
document.write(getStyle(d,"color") + "</br>");
document.write(getStyle(d,"font-size"));

insertBefore:添加到一个节点前面

父节点：insertBefore(要添加的子节点，参照节点）；
参照节点如果为null 那就和appendChild()一样

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul id="list">
            <li>槑槑</li>
            <li>晶晶</li>
            <li>叕叕</li>
        </ul>
    </body>
</html>
<script>
    var list = document.getElementById("list");
    var o = document.createElement("li");
    o.innerHTML = "淼淼";    
    //如果参数2位null，则和appendChild一样
    //list.insertBefore(o,null);
    list.insertBefore(o,list.children[2]);
</script>

offsetWidth/offsetHeight/offsetLeft/offsetTop

在这里插入图片描述

<style>
            *{
                margin: 0;
                padding: 0;
            }
            #big{
                border: 1px solid red;
                position: relative;
                height: 400px;
                width: 400px;
            }
            #small{
                border: 1px solid red;
                position: absolute;
                height: 100px;
                width: 100px;
                left: 80px;
                top: 70px;
            }
        </style>
    </head>
    <body>
        <div id="big">
            <div id="small">
                
            </div>
        </div>
    </body>
</html>
<script>
    var d = document.getElementById("small");
    //只读
    document.write(d.offsetLeft + " " + d.offsetTop + "</br>");
    //这2是哪来的?
    document.write(d.offsetWidth + " " + d.offsetHeight);
    //d.style.left = 200 + "px";
style.left返回字符串 如20px, offsetLeft返回数值 如20
style.left读写,offsetLeft只读
style.left必须要事先定义，否则值为空
//style.height style.width style.top 也一样

window.onscroll事件

回到顶部案例

<body>
        <div id="t">
            <p>111111111111111</p>
                        ....
            <p>111111111111111</p>
        </div>
        <button onclick="fun()">按钮</button>
    </body>
</html>
<script>
    var _top = null;
    window.onscroll = function(){
        //兼容问题  获取滚动条移动的垂直距离
        _top = document.body.scrollTop || document.documentElement.scrollTop;
        console.log(_top);
    }
    function fun(){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }

事件

事件对象
事件：对某一个元素的某种操作
事件对象：当某个事件触发时产生的对象，就是事件对象
event 使用前提，必须有事件，不同的事件产生的事件对象不同
事件对象的兼容： var e = event || evt;
事件对象拥有改事件相关的属性和方法
Demo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //事件对象 event
            document.onkeyup = function(evt){
                var e =  evt || event;
                alert(e);
            }
        </script>
    </body>
</html>

Demo: 小老虎跳一跳
在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #box{
                height: 100px;
                width: 100px;
                background: url(img/3.jpg);
                background-size: 100px 100px;
                position: absolute;
                left: 200px;
                top: 600px;
            }
        </style>
    </head>
    <body>
        <div id="box" onclick="jump()">
            
        </div>
    </body>
</html>
<script>
    var d = document.getElementById("box");
    function jump(){
        d.style.top = d.offsetTop - 200 + "px";
        setTimeout(function(){
            d.style.top = "600px";
        },2000);
    }
</script>

2.事件对象的属性
坐标属性
pageX / pageY :x相对于整个文档顶部和左侧的坐标。
clientX / clientY :相对于局部窗口的左侧和顶部的坐标
offsetX / offsetY : 相对于内部元素的距离左侧和顶部的坐标，常用于拖拽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                height: 1000px;
            }
            #div1{
                height: 200px;
                width: 200px;
                border: 1px solid red;
                position: absolute;
                left: 200px;
            }
        </style>
        <script>
            document.onclick = function(evt){
                var e = evt || event;
                console.log("client" + e.clientX + "," + e.clientY);//只记录当前的局部页面算
                console.log("page" + e.pageX + "," + e.pageY);//从document页面算起...习惯上用page
                console.log("offset" + e.offsetX + "," + e.offsetY);
            }
        </script>
    </head>
    <body>
        <div id="div1">
            
        </div>
    </body>
</html>

3.案例图片跟随（练习）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #myimg{
                height: 100px;
                width: 100px;
                position: absolute;
                background: url(img/clothes.jpg);
                background-size: 100px 100px;
            }
        </style>
    </head>
    <body>
        <div id="myimg">
            
        </div>
    </body>
</html>
<script>
    document.onmousemove = function(evt){
        //获取实
        var e = evt || event;
        var oImg = document.getElementById("myimg");
        //操作图片X和Y的位置
        oImg.style.left = e.pageX - oImg.offsetWidth/2 + "px";
        oImg.style.top = e.pageY -oImg.offsetHeight/2 + "px";
    }
</script>

4.键盘事件
onkeyup: 用户释放某一个按键时发生
onkeydown: 用户按下按键时发生,任何一个按键即可发生事件
onkeypress: 用户按下按键，并且产生一个字符时发生（意思就是说按ctrl这样的按键没有效果的）

事件对象的属性:
keyCode: 获取键盘按键值字母对应其ASCII值识别
A:65 a:97 0:48 回车:13
【注意】:keyPress 的ctrl+回车返回值为10

    document.onkeypress = function(evt){
        var e = evt || event;
        if(e.keyCode == 13 || e.keyCode == 10 && e.ctrlKey){
            alert("send");
        }
    }

ctrlKey:返回当事件被触发时，“Ctrl” 是否被按下,返回值为true or false

【注意】:键盘检测兼容写方法
var key = e.keyCode || e.which || e.charCode;

weixin_45114208

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
各种API以及事件初识——笔记

1.outerHTML/ innerText / innerHTMLinnerHTML将元素中所有的内容都获取到包括HTML标签但是不包括自身标签innerText将元素的内容获取出来不包括HTML标签outerHTML将自身以及子元素所有的内容都获取出来包括HTML标签包括自身标签<body > <div id="d"> 老王<span>住你隔壁</span> </
复制链接

扫一扫