2021-03-04

回顾选择器

基础选择器

  1.元素选择器

  元素名(标签名)

    如：

    h1

    div

    a

    span

    input

    form

    option

    select

  2.id选择器

  在html里面  使用id=“cc”

  使用#来查找 id选择器

    如：#cc

  3.类选择器

  在HTML里面使用class设置

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

    如：.haha

  如：

后代选择器

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

  后代选择器是通过空格隔开的    如：.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 = "

< img src="" >

"

    放HTML里的字符串

  dom.src="";

  dom.appendChild(子元素)；

    dom 不一定是父元素

  3.放到父元素中

  父元素.appendChild(dom);

 

//商品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）

  80

  web页面的默认端口

  443

  https

    加密  超文本传输协议

    普通的http不需要开启443

  21

  FTP

    文件传输协议  fail

  3306

  mysql数据库默认

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

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

  页面之间传参

location.href

  本页的位置

  指定页面要跳转到的位置

端口号