HTML基础（一）

最新推荐文章于 2024-04-18 05:00:00 发布

Markov Zheng

最新推荐文章于 2024-04-18 05:00:00 发布

阅读量288

点赞数

分类专栏：网络学习日志 HTML 文章标签： html5

本文链接：https://blog.csdn.net/marko_zheng/article/details/79031684

版权

网络学习日志同时被 2 个专栏收录

111 篇文章 4 订阅

订阅专栏

HTML

37 篇文章 0 订阅

订阅专栏

BOM(浏览器对象模型)

window bom 核心对象；

组成

history

location

dom

screen

frames

navigator：浏览器制造商

属性

window——最顶层对象

window.screenLeft //浏览器到屏幕左上角的距离

window.screenTop //浏览器到屏幕顶部的距离

window.innerText //操作元素中包含的所有文本内容

window.innerWidth //获取浏览器宽度，可视部分宽度（内容）

window.innerHeight //获取浏览器高度，可视部分高度（内容）

document.documentElement.clientWidth // 获取浏览器尺寸

//client_客户端

window.screen.weight //屏幕分辨率

window.screen.height //屏幕分辨率

window.scrollTo() //控制滚动条位置

window.scrollBy() //控制滚动条位置

方法

window.resizeTo() //控制原窗口尺寸

window.moveTo(100,100) //移动浏览器到某位值

window.moveBy(100,100) //在原来基础上移动某值

时间函数

window.setInterval(callback, 1000) //按照指定周期不停执行某一函数，不是死循环

回调函数时间/毫秒

function aa(){

    alert(1)

}

setInterval(aa,1000) //aa后不加括号

清除时间函数（需要一个变量）

把时间函赋给变量，在用clearInterval(a)可以删除

window.setTimeout(aa,1000) //一段时间后自动执行某函数执行一次

let a = window.setTimeout(aa,1000)

window.clearTimeout(a) //清除

其他方法

alert

prompt

confirm(‘确定退出吗？’) //自带确定和取消按钮的对话框有返回值 true/false

open(”) close(”) //通过js打开/关闭一个窗口

window == self // 二者等价

iframe //标签，可以在一个窗口嵌套另一个窗口

history(历史记录)

history.length //历史记录的条数

history.back //返回

history.forward； //前进

history.go（0） //刷新

事件——3要素

1 事件：如何发生

2 事件源：发生在谁的身上

3 事件处理函数：要干什么

window.οnlοad=function(){ }

获取元素

let 变量名=document.getElementById(’ ‘)

获取表单元素的内容（value）

inputObj.value

dom元素文本的获取和设置

获取obj.innerText

设置obj.innerText=value

表单(form)

placeholder //默认提示信息

autofocus //自动对焦

autocomplete //自动填充

获取表单元素的值。value

操作标签中的值

label(自动聚焦)

08-10 Location(地址栏)

又名定位符，统一资源

location.href 返回或修改完整的地址

location.reload 重新加载

**打开新的页面**x

1 open（‘’）

2 replace（‘’）无历史记录不可返回

3 assign（‘’）有历史记录，可返回

4 herf=“ A.html” 改变地址

DOM(文档对象模型)

document dom的核心对象

属性

document.URL=‘’ 只能读地址，不能写

document.title = ‘ ’ 获取文档标题；可进行设置

document.bgcolor

js引入

使用window.onload，可写在任意位置

不写window.onload，把script标签对写在最后。

方法

获取

    ####    获取页面中第一个拥有指定id的元素

document.getElementById（‘id名’）

let box =document.getElementById（‘box’）

box.innerText=‘box’

    ####    获取指定标签的**集合**

document.getElementsByTagName(’ 标签名’)

获取到的是一个集合，需要访问的时候使用下标的方式 eg: div[0].style.color=’blue’

可通过for循环遍历不允许越界访问，会报错

let box =document.getElementByTagName（’div’）

div[0].innerText=‘这是第一个div’

    ####    指定范围 obj是一个dom对象，不是一个集合

let divs=obj.getElementByTagName（‘div’）

obj：代表某一范围

    ####    通过类名获取

document.getElementsByClassName(’ class名’) //也是一个集合

获取页面中所有元素

let all = document.all

let all = document.getElemengtsByTagName(‘*’)

鼠标移入事件

click

dblclick //双击

onmouseover/onmouseout //鼠标移入移出

onmouseenter/onmouseleave //鼠标移入移出

onmousemove //移动

键盘

onkeydown

onkeyup

keypress //按族不妨

表单元素

focus //获得焦点

blur //失去焦点

change //获得焦点，并且值改变，

window

load

resize //当尺寸发生改变

innerHTML //识别标签对

innerText //不识别标签对

08-11

classList.add()          //添加一个类名

classList.remove //移除一个类

classList.toggle        //切换类

08-14

js——>jQuery——>后台（mysql，php）——>框架（react vue angular）nodeJs

获取外部样式：window.getComputedStyle（box,null）//只获取，不能设置

封装

/*
方便获取页面中元素，返回
添加window.onload事件
$(select)
参数：
select 选择器 #box(id选择器) .box(类名) div(标签)
函数—->window.onload

1.首字符  #->document.getElectmentById()
          .->document.getElectmentsClassName()
        符合字符（div img a span ol li ul form input h1-h6 p b u canvas audio video time code）
            以字母开头
2.return

    function $(element，ranger=document){
    if(typeof select=='string'){                     //typeof判断数据类型
        let selecter = select.tirm()
        let firstChar = selecter.charAt(0)         //获取首字符
        if(firstChar=='#') {
            return ranger.getElementById(selecter.substring(1)           //截取   并返回
        }else if(firstChar=='.'){
            return ranger.getElementsByClassName(selecter.substring(1))  //截取   并返回
        }else if(/^[a-zA-Z][a-zA-Z1-6]{0,8}$/.test(selecter)){ //匹配 是不是标签  /  正则 / 代表一个规则
            return ranger.getElementsByTagName(selecter.substring(1)) 
        }
        }else if(typeof select=='function'){
            window.onload()=function(){
                select()
            }
        }
    }

封装一个函数

function html(element,content){                  //获取文本内容，可进行设置 2各参数，
    if(arguments.length==2){
        element.innerHTML=content
    }
    if(arguments.length==1){
        return element.innerHTML
    }   
}
function text(element,content){                  //获取文本那内容，不可设置
    if(arguments.length==2){
        element.innerText=content
    }
    if(arguments.length==1){
        return element.innerText
    }   
}


function css(element,attrObj){                  //js中设置样式      
    for(let i in attrObj){
        element.style[i]=attrObj[i]
    }
}

attrObj代表一个json对象 {width:’50px’,height:’500px’}

方法的继承

1.原型对象的继承方法//永久性

2.冒充的方法call //只用一次 //lisi要用zhangsan的方法 zhangsan.say.call（lisi）

只能冒充方法传参的时候穿的是数 zhangsan.say.call（lisi1,2,3）

3.申请 apply 传参的时候传的是数组 zhangsan.say.apply（lisi,[1,2]）

获取在页面中占得实际尺寸（box.offsetWidth）（box.offsetHeight）

获取在页面中占得设置的尺寸 getComputedStyle(box,null)

文档对象模型：

html：文档节点：
标签：元素节点

属性：属性节点

注释：注释节点

通过节点之间的关系获取元素

获取元素的新方法：document.querySelector（‘选择器’）

document.querySelector（‘.box’）/div.box/div.first-child/

获取回来直接是元素，可以直接使用，不加下标，只能选择第一个元素

document.querySelectorAll（‘.box’）//获取拥有box所有的元素

box.children：只识别子元素节点

box.childNodes：获取所有的节点

box.firstElementChild：获取第一个元素节点

box.lastElementChild：获取最后一个元素节点

第一个子元素：firstchild 识别文本。也识别注释

最后一个子元素：lastchild 识别文本。也识别注释

parentNode:获取父节点

nextSilibling:下一个兄弟元素节点，识别文本注释

childElementCount 获取子元素个数

node

文档对象模型

节点

整个文档是一个文档节点

html标签是元素节点

元素属性是属性节点

元素内容是内容节点

## 元素节点属性

1.childNode：获取子节点的集合

2.children:获取某个父元素对应的元素节点（childElementCount）

>   let children=box.children

children.length //box.（childElementCount

遍历 for //children.forEach

3.firstChild第一个子节点元素 firstElementChild 第一个元素节点

4.lastChild最后一个子节点 lastElementChild 最后一个元素节点

5.parentNode 父节点

6.nextSibling：下一个兄弟节点 nextElementSibling 下一个元素节点

7.previousSibling 上一个兄弟节点 previousElemenSibling 上一个元素节点

8.没有（下）上一个返回null

获取元素的新方法：

document.querySelector（‘选择器’）

document.querySelector（‘.box’）/div.box/div.first-child/

获取回来直接是元素，可以直接使用，不加下标，只能选择第一个元素

document.querySelectorAll（‘.box’）//获取拥有box所有的元素,指定元素的集合

querySelectorAll

参数：选择器

原型：nodeList

遍历：for forEach

节点

NodeName nodeValue nodeType

节点类型	nodeName	nodeType	nodeValue
元素节点	标签名大写	1	null
属性节点	属性名	2	属性值
文本节点	text	3	内容
注释	comment	8	注释内容
文档节点	document	9	null

元素节点的方法

setAttribute( ) ///设置自定义属性

getAttribute() ///获取自定义属性

创建类方法

节点

创建元素节点：document.createElement(‘div’)

属性

标准属性——obj.属性名 obj.属性名=值

自定义属性——setAttribute( ) ///设置自定义属性

getAttribute() ///获取自定义属性

文本

操作文本内容：obj.innerText obj.innerHTML

插入类方法

父元素的最后插入子元素

插入到某父元素里：父元素名.appendChild(要插入的东西)

某元素前面插入一个节点

parent.insertBefore（newNode，pNode）

操作元素样式

div.style.cssText= width:200px;height200px;background:red;

重写样式

transitionEnd；

/事件监听/

element.addElementListener (‘webkittransitionEnd’，function（）{ element.style.transition=’none’

element.style.top=‘-50px’;

setTimeout(function(){

},1)

})

事件类型

08-16

移除一个节点：removechild（）/

删掉以后，内存中还有、

p = null；从内存中移除；

复制一个节点：let copy = cloneNode（true）

默认情况下是false；

替换一个节点：divs.replaceChild(p,ul)

获取在页面中占得实际尺寸（box.offsetWidth）（box.offsetHeight）

获取在页面中占得设置的尺寸 getComputedStyle(box,null).marginRight

缩放/平移不影响布局,

ctrl+d:加选

Ctrl+shift+d;复制光标当前坐在的一行

如果子元素进行定位，父元素的padding border 不影响子元素位置margin

关于尺寸和位置

尺寸

获取元素的尺寸width+（padding-left）+（padding-right）+（border-leftwidth）+（border-rightwidth），返回值是一个数字，可直接用

（obj.box.offsetWidth）（obj.box.offsetHeight）

位置

obj.offsetLeft: obj.offsetTop——获取相对于具有定位属性的父元素的位置

父元素和本身都没有定位

> 相当于元素局页面左上角的位置
>
> 本身（son）margin-left+parent.paddingLeft+(pargin.margin-left)+(pargin.border-left)

父元素定位子元素本身没有定位

son.marginLeft+parent.paddingLeft

相当于返回距离父元素左上角的位置

父元素定位子元素本身定位

son.marginLeft+son.Left

相当于返回距离父元素左上角的位置

08-17

childElementcount：获取子元素个数

getComputedStyle(box,null).marginRight：获取marginRight/获取设置的属性

scrollLeft/scrollTop：获取子元素超出父元素部分父元素顶部的距离

滚动事件：onscroll

优化方式

图片精灵：

代码压缩：

按需加载：减少请求次数，提高加载次数

需要请求资源的属性：src herf

getAttribute（‘’） //返回指定属性的属性值

eg：imgs[i].src=imgs[i].getAttribute(‘imgPath’) //返回指定属性的属性值

数组的方法：

isArray from off

使集合拥有forEach属性

1.冒充    Array.prototype.forEach.call(div.function(element,index,obj){ })
2.直接把集合转化成数组        Array.from() //能够遍历的，类似于数组结构的

08-18

浏览器事件 window. onload——重新加载

window. onscroll—滚动事件

window. onresize-——窗口大小改变

filter: blur(1px);模糊

window.addEventListener(‘click’, function(){ this.style.background=’green’}, false)

事件绑定方式：

添加HTML
通过js脚本

on+eventType

js

box.οnclick=function(){}

box.οnclick=null
addEventListner

box.addEventListener(type,fn,bool)

type:事件类型 fn；事件处理函数，bool;布尔值默认false

box.addEventLisetener()

添加事件：_ _ _ _ _（事件监听）

1.box.addEventListener(‘click’, function(){ this.style.background=’green’}, false)

事件类型事件处理函数布尔值（可穿可不穿）

传一个匿名函数，删不掉

2.box.addEventListner(’ click’, fn )

function fn(){

this.style.background=’green’

}

删除事件

函数名

box.removeEventListener( ‘click’, fn ) fn不可省

事件对象（e）

事件发生时，关于事件的详细信息（点击事件，滚轮方向，键盘码，移入移出）

获取事件对象

事件处理函数里边的第一个参数，只能在函数内部用

鼠标事件属性：

box.οnclick=function(e){}

box.addEventListenter(‘click’,function(e){ })

鼠标相对于屏幕左上角的位置：e.screenX / e.screeenY

鼠标相对于浏览器左上角的位置：e.clientX / e.clientY

鼠标相对于文档左上角的位置：pageX / pageY

鼠标相对于事件源的位置：offsetX / offsetY

new的时候

1空对象构造函数里面的属性和方法把this 冒充给zhangsan

动画延迟：transitionDelay

Markov Zheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础（一）

BOM(浏览器对象模型)window bom 核心对象；组成 history location dom screen frames navigator：浏览器制造商属性window——最顶层对象window.screenLeft //浏览器到屏幕左上角的距离window.screenTop
复制链接

扫一扫