js基础

  • 渲染
*{

}
font-size:200px; < 字体大小
text-align: center; < 字体左右居中
line-height: 400px; < 字体上下居中/垂直居中(要和盒子高度一样!)
color: red; < 颜色
background-color: red; < 背景颜色
width: 800px; < 宽度
height: 400px; < 高度
margin: auto; < 外边距上 右 左 下 auto > 自动
margin-left: 12px; <依次向右的边距
border-radius: 7px; <修圆角
float: left; <像右边浮动
list-style-type: none; < 取消列表的小圆点
text-decoration: nine; <去掉a标签下划线
border:1px solid #000000; < div边框

  • 选择器
document.getElementById('标识') ---> HTMLElement [!]
document.getElementsByTagName('标签名') ---> NodeList
document.getElementsByClassName('类名') ---> NodeList
document.querySelector('样式表选择器') ---> HTMLElement [!]
document.querySelectorAll('样式表选择器') ---> NodeList [!]
firstChild / lastChild / children --- 获取子节点
parentNode --- 获取父节点
previousSibling / nextSibling --- 获取兄弟
  • 在标签上显示指定内容
span.textContent = counter
 ^在它上显示^          ^他的内容
  • 浏览器
location对象代表了浏览器的地址栏
location.href = 'http://www.baidu.com'
跳转指定网页^
  • 按钮


^<按钮   ^按钮事件  ^函数名
  • 随机数
let i = parseInt(Math.random() * 30+1)
           ^<取随机数并转换成整数
  • 定时器
let time1 = setInterval(yaohao, 1000)
^一直变量名    ^<固定      ^函数名  ^隔多少时间执行一次
function ting(){
            clearInterval(time1)
                ^停止执行    ^一直执行的变量名    
            }
---------------------------------------------------
let aaa = setTimeout(q1, 3000)
                函数名^   ^ 等多少时间执行
clearTimeout(aaa)
  ^停止执行    ^一直执行的变量名        
  • 显示指定内容
const clockDiv = document.getElementById('clock') 常量 ^ ^拿到盒子的id ^ clockDiv.textContent = n ^常量名 ^在盒子上显示 n 的值
  • 事件监听器
advImage.addEventListener('mouseover',() => {clearInterval(time1)})
      鼠标移上去执行函数
advImage.addEventListener('mouseout', () => {time1= setInterval(lunhuan, 1000)})
     鼠标移开执行函数
advImage.addEventListener('keypress',() => {clearInterval(time1)})
      键盘按键操作 (需要判断哪个键按下)

你可能感兴趣的:(js基础)