js 一些基础的理解

Posted 2020-10-05 进击的小程序员

javascript(JS)的组成?

• DOM 文档对象模型
• BOM 浏览器对象模型
• ECMAScript

javascript(JS)在页面中处理了什么事情?

• 特效交互
• 数据交互
• 逻辑操作

常见特效的原理

• 通过js修改元素的css样式，来操作元素的变化

js可以写在哪

• 写在写标签内部，行间事件(不允许使用)
• 写在页面内部专门的script标签中
• 写在专门的js文件中(注意文件的后缀名是.js)，通过script标签的src引入文件

获取元素

• 如果说要获取的是个id，可以直接写元素的id名
• document.getElementById(‘idName‘) 获取Id

调试

• alert() 弹出对话框 接受的是个字符串
• console.log() 打印控制台

属性操作

• .

  • 属性读操作 (获取元素的属性值)

    • class 不叫class，叫className
    • style 操作的是元素的行间样式
    • 获取src时候，获取到的是绝对路径
    • 获取background这类复合样式的时候,firefox下可以获取到复合样式中的所有样式而chrom下获取到的只是我们写了的样式
    • 设置了十六进制颜色，但是获取的时候，获取到的是rgb颜色
    • 遇到"-",删除"-"首字母大写

  • 属性的写操作 (修改元素的属性值)

    • 把等号右侧的值赋给左侧
    • cssText 获取style中所有内容
      • 直接修改cssText会覆盖，style中的所有内容，如果不想覆盖之前的所有内容，可以直接写 style，或者用 +=
    • cssText = "" 可以直接情况所有的行间样式

  • innerhtml 元素的内容

    • 从元素的开标签到闭合标签之间的所有内容,包括元素中包含的子元素
    • 直接设置元素的innerHTML，或替换掉之前的所有内容,如果不想替换只是添加内容用 +=

字符串

• 一种数据格式,引号包起来的一串字符

undefined

• 一种数据类型，未定义

+号运算符

• 加法运算
• 链接两个字符串
• += (a += b --- a = a + b)