2021-03-04

回顾选择器

基础选择器

1.元素选择器

元素名(标签名)

如：

div

span

input

form

option

select

2.id选择器

在html里面使用id=“cc”

使用#来查找 id选择器

如：#cc

3.类选择器

在HTML里面使用class设置

在CSS和JS里面查找使用.类选择器的名字

如：.haha

如：<div class = "haha"></div>

后代选择器

只要是某个元素中的子元素都可以选择上

后代选择器是通过空格隔开的如：.xx .title{}、div a{}、#ff .vv{}

两个选择器之间是有空格的

子类选择器

只能选择直接子元素

父元素的选择器>子元素的选择器

如：

.item>p

交集选择器

div.top

都包含

p.top

并集选择器

html,body

.top,.nav

属性选择器

input[type=password]

选择器名[属性名=属性值]

子类第几个元素

：first-child

：nth-child

注意分清交集和后代

1.查询DOM元素

1.document.querySelector("选择器")

查找到的是第一个元素

2.document.querySelectorAll("选择器")

伪数组

3.id选择器 document.getElementById("不需要加#");

4.通过类选择器查找document.getElementByClassName("div");

伪数组

5.通过元素名查找document.getElementByTagName("div");

伪数组

2.创建DOM元素

document.createElement("标签的名字")

步骤

1.创建dom元素

var 变量名= document.createElement("标签的名字")；

2.放内容

dom.innerText = "wenben"

放文本

dom.innerHTML = "<div>< img src="" ></div>"

放HTML里的字符串

dom.src="";

dom.appendChild(子元素)；

dom 不一定是父元素

3.放到父元素中

父元素.appendChild(dom);

//在nav里面创建一个li 里面放入首页文字

var nav = document.querySelector(".nav");

var li = document.createElement("li");

li.innerText = "首页";

nav.appendChild(li);

</script>

//商品goods

var goods =document.querySelector(".goods");

var goodsItem = document.createElement("li");

goods.appendChild(goodsItem);

创建日期对象

获取当前日期

var date = new Date();

new 通过类名创建对象的关键字

Date 日期类

通过日期类 -> 创建一个当前的日期对象

日期

年

月

得加1

日

周

大写的M

时

分

小写的M

秒

毫秒

获取将来过去的时间（指定时间）

new Date(1288336112000)

var date = new Date();

date.set

Time(1288336112000);

时间戳

1970年-某个时间的毫秒数

时间戳转日期对象

new Date(1288336112000)

var date = new Date();

date.setTime(1288336112000);

日期对象转时间戳

var date = new Date();

date.getTime();

JS操作HTML

1.创建 HTML

document.createElement("标签名");

如

var p = document.createElement("p");

属性

在js也同样可以获取或设置属性

如

div.style.opacity = 0.6;

var image = document.createElement("img");

image.src = "https://www.baidu.com/img/dong_f17b19f600dbf0bfc9b8bed5836f50be.gif";

< img src="1.jpg">

注意：

创建完得标签需要放到指定才能显示

步骤

1.创建HTML标签

var image = document.createElement("img");

2.放到某个容器

document.body.appendChild(image);

拼接dom对象

2.获取HTML

功能

用js修改样式

修改里面的内容

添加事件

查询标签

var d = document.querySelector("选择器")

3.删除HTML

清空标签/插入标签

xx.innerHTML = ""；

4.替换HTML

1.窗口对象

window窗口包含的部分

浏览器可视的范围

1.导航

2.历史记录

3.屏幕大小

4.位置

窗口对象是Window的实例对象

注意：

1.定义的全局变量

是定义到window对象上面的

可以通过window.xx访问

2.在最外面定义的函数

是定义到了window对象上面

可以通过window.xx访问

this 就表示-> window对象

尺寸

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)

window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

如果IE 5、6、7、8

document.documentElement.clientHeight

document.documentElement.clientWidth

事件

resize

屏幕尺寸发生改变的时候调用

load

等窗口里的资源加载完成的时候调用

2.Location位置定位

location.hostname 返回 web 主机的域名

location.pathname 返回当前页面的路径和文件名

location.port 返回 web 主机的端口（80 或 443）

web页面的默认端口

443

https

加密超文本传输协议

普通的http不需要开启443

FTP

文件传输协议 fail

3306

mysql数据库默认

location.protocol 返回所使用的 web 协议（http: 或 https:）

location.search 返回搜索的结果（http GET方法的参数）

页面之间传参

location.href

本页的位置

指定页面要跳转到的位置

端口号

2021-03-04

推荐阅读更多精彩内容