提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

MDN学习

学习
2023-09-14 08:58:45 时间 
var {log} = console
    
    // Document.characterSet  返回文档使用的字符集。
    log(`1 ${document.characterSet} \n\n`)
    
    // Document.compatMode   Quirks 模式还是在 Strict 模式下渲染文档的 <!DOCTYPE html>
    log(`2 ${document.compatMode} \n\n`)
    
    // Document.contentType  当前文档的 MIME 首部返回 Content-Type
    log(`3 ${document.contentType} \n\n`)
    
    // Document.doctype  当前文档的 Document Type
    log(document.doctype)
    
    // Document.documentElement  对于 HTML文档来说，返回的一般是 HTML 元素
    log(document.documentElement)
    
    // Document.documentURI  返回文档的 URL
    log(`${document.documentURI} \n\n`)
    
    // Document.hidden
    log( document.hidden)
    
    // Document.inputEncoding  本属性替代 Document.characterSet
    log( document.inputEncoding)
    
    //  Document.mozFullScreen  当前文档是否处于全屏模式.
    log(document.mozFullScreen)
    
    //Document.styleSheets  当前 document 可用的样式表集的列表
    log( document.styleSheets)
    
    // Document.URL
    log( document.URL)
    
    // Document.visibilityState  可以监听用户是否离开页面，在返回页面
    var t1;
    document.addEventListener("visibilitychange", function() {
            if(this.visibilityState === 'hidden' ){
                t1 = new Date().getTime();
                log('页面对用户不可见.')
            }
            if( this.visibilityState === 'prerender'){
                log('页面此时正在渲染中')
            }
            if( this.visibilityState === 'visible' ){
                log( ~~((Date.now() - t1) / 1000) )
                log('页面内容至少是部分可见')
            }
            if(this.visibilityState === 'unloaded'){
                log('页面从内存中卸载清除')
            }
    });
    
    // node.children; 返回一个包含父节点所有Element 类型的后代的动态html集合
    log($('body')[0].childElementCount, $('body')[0].children )
    
    // ParentNode.firstElementChild  返回父节点的第一个Element后代，没有时候返回null
    log( $('body')[0].firstElementChild )
    
    // ParentNode.lastElementChild  返回父节点的最后一个Element后代，没有时返回null
    log( $('body')[0].lastElementChild )
    
    
    
    // Document.activeElement [.selectionStart, .selectionStart] 返回当前正在操作的元素 返回一个对象
    log( document.activeElement)
    
    //Document.body 当前文档的 <body> 元素
    log( document.body)
    
    // Document.cookie 返回文档的由分号分隔的cookie列表，或者设置一个单独的cookie值
    //https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie
    log( document.cookie)
    
    // Document.defaultView  返回对window对象的引用
    log( document.defaultView )
    
    // document.designMode  控制整个文档是否可编辑。有效值为 “On”和 “Off”
    log( document.designMode)
    // document.designMode = "On";
    
    // Document.dir  代表了文档的文字朝向
    log( document.dir )
    document.dir = 'rtl'
    
    // Document.domain  获取/设置当前文档的域名.
    log( document.domain)
    
    // Document.embeds  返回当前文档中的embed元素列表
    log(document.embeds)
    
    //Document.forms  返回当前文档中的form元素列表
    log( document.forms)
    
    // Document.head  返回当前文档的head元素
    log(document.head)
    
    //document.body.clientHeight  返回当前文档中的<body>元素的高度.
    log(document.body.clientHeight )
    log(document.body.clientWidth )
    
    // document.documentElement.clientHeight 返回浏览器窗口文档大小
    log( document.documentElement.clientHeight)
    log( document.documentElement.clientWidth)
    
    // document.images 返回当前文档中所有 image 元素的集合.
    log( document.images)
    
    //document.lastModified  返回一个字符串,其中包含了当前文档的最后修改日期和时间.chrome无效
    log( document.lastModified)
    
    // document.links 返回一个包含文档中所有具有 href 属性值的元素
    log( document.links)
    
    // Document.location 返回当前文档的URI
    log('%cDocument.location','color:red', document.location)
    
    // document.readyState  属性描述了文档的加载状态
    // loading / 加载  document 仍在加载。
    // interactive / 互动  文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载
    // complete / 完成   状态表示 load 事件即将被触发
    // 这个属性的值变化时，document 对象上的readystatechange 事件将被触发。
    log( document.readyState)
    document.addEventListener('readystatechange', e=>{
        if(document.readyState === 'loading'){
            log('document 仍在加载')
        }
        if(document.readyState === 'interactive'){
            log('图像，样式表 仍在加载')
        }
        if(document.readyState === 'complete'){
            log('load 事件即将被触发')
        }
    })
    
    // document.referrer  返回跳转或打开到当前页面的那个页面的URI
    // 返回上一个 页面
    log('%cdocument.referrer','color:red',  document.referrer === ''?'不是跳转打开':document.referrer)
    
    // Document.scripts 当前文档中所有script元素的集合
    log( document.scripts)
    
    // document.title 获取或设置文档的标题
    log( document.title)
    
    //document.URL 返回当前文档的URL地址
    log( document.URL)
    
    
    // Document.onafterscriptexecute 当HTML文档中的<script>标签内的代码执行完毕时触发该事件
    // 动态添加上去的script,则不会触发该事件
    document.addEventListener("afterscriptexecute", function(){alert('标签内的代码 执行完毕时触发该事件')}, false);
    
    //document.onbeforescriptexecute  script标签内的代码将要执行时触发该事件
    document.addEventListener("beforescriptexecute", function(){alert('标签内的代码 将要执行时触发该事件')}, false);
    
    // Document.oncopy 属性用来获取或设置当前元素的copy事件的事件处理函数
    // Document.onpaste  粘贴事件
    // Document.oncut  剪切事件
    document.addEventListener('copy',e=>{
        log( e.target )
    })
    
    // Document.onfullscreenchange 监听文档进入全屏or退出全屏
    // document.documentElement.requestFullscreen();  把ele设置全屏
    // Document.onfullscreenerror  当前文档不能进入全屏模式，即使它被请求时触发
    
    document.addEventListener('wheel',e=>{
        // 鼠标轮子事件
        // log(e.deltaX) // x偏移量
        // log(e.deltaY) // y 偏移量 默认100
        // log( e.deltaZ) //z偏移量
        // log( e.deltaMode )
        // e.preventDefault();
        log( e)
    })
    
    window.onabort = function() {
      alert("中断了加载");
    }
    
    // GlobalEventHandlers.onanimationcancel
    // 当CSS动画意外中止
    
    // $('.animationcancel').delay(2000).fadeOut()
    
    var x = $('.animationcancel')[0]
    x.addEventListener("animationcancel", e=>{
        alert('CSS动画意外中止')
    });
    x.addEventListener("animationend", e=>{
        alert('CSS动画结束')
    });
    x.addEventListener("animationiteration", e=>{
        log('CSS动画 重新播放 重新迭代')
    });
    x.addEventListener("animationstart", e=>{
        log('CSS动画开始播放')
    });
    
    // GlobalEventHandlers.onauxclick
    // 鼠标中键 firefox 有效
    // 右键也有效
    document.addEventListener('auxclick',e=>{
        log('点击鼠标 中键')
    })
    
    // GlobalEventHandlers.onblur
    // 用于离开表单
    // 
    // GlobalEventHandlers.onfocus
    // 用于聚焦表单
    // 
    // GlobalEventHandlers.onchange
    // 表单内容被更改
    // 
    // GlobalEventHandlers.onclick
    // 点击事件
     
    // document.oncontextmenu
    // 禁用 鼠标右键菜单
    window.addEventListener('contextmenu', function (e) { // Not compatible    with IE < 9
        e.preventDefault();
    }, false);
    
    // GlobalEventHandlers.ondblclick
    // 鼠标双击
    
    $('.animationcancel')[0].addEventListener('gotpointercapture',e=>{
        log(e.target)
    })
    
    
    window.addEventListener('input', function (e) {
     console.log("窗口上输入事件的事件处理程序。 输入事件在<input>元素值更改时引发", e.target);
    }, false);

相关文章