JS-NO.1

页面由三部分组成

HTML 超文本编辑
CSS 层叠样式表
JS 轻量级脚本语言

JS由三部分组成

ECMAScript js[语法] 变量条件判断循环数据类型；兼容性很好没问题
DOM document object model 文档对象模型增删改查兼容性问题很多
BOM browser object model 浏览器对象模型不兼容不能解决

常用快捷键

复制 ctrl + D;
强制换行 ctrl+enter；command+enter;
快速生成列表 ul>li*6>a{列表$} + Tab;
收缩代码 ctrl + -/+;
div.box + Tab;
-#header+#main+#footer;
-#header+(#main>.left.right)+#footer;
w200+h200+bg#ccc +Tab;
width: 200px;
height: 200px;
background: #cccccc;
c +Tab
color: #000;
psa +Tab
position: absolute;
psr +Tab
position: relative;
psf +Tab
position: fixed;
mg20 +Tab
margin:20px;
pa20 +Tab
padding: 20px;
mgl/r/t/b/20 +Tab
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;

pa/r/t/b20 + Tab

      padding-top: 20px;
      padding-bottom: 20px;
      padding-right: 20px;

dib +Tab
display: inline-block;
di +Tab
display: inline;
db +Tab
display: block;
fz20 + tab;
font-size: 20px;
lh30px + Tab;
line-height:30px ;
fl + tab ;
float: left;
fr + tab ;
float: right;
tac+ tab;
text-align: center;
alt 选两个
script:src + tab

CSS 引入方式

行内
内嵌
外联
导入

JS 引入方式

行内
内嵌 script标签内部
外链 script:src + tab 引入

js思路

拿到谁获取元素
添加事件
做什么事

JS作用

JS操作CSS

对象具有的两个特征：属性和方法；

属性和方法的区别：属性没括号，方法有括号；

this 是谁:

当函数被调用的时候，点前面是谁，this就是谁;
当函数被调用的时候，没有点，this就是window;
当元素身上的事件被触发时，会触发一个函数，函数中的this指向当前被触发事件的这个元素

输出方式--调试代码

alert 弹出框
confirm() 弹出框返回值是布尔值 true / false
console.log() 打印在控制台
console.dir() 打印属性和方法
console.table() 把对象以表格的形式输出 -- 基本不用
document.write 在页面输出
innerHTML 输出元素包裹的内容 innerText 输出文本

命名方式：匈牙利命名法又称驼峰式命名法

除了第一个单词外从第二个单词开始每个单词首字母大写
常用的命名前缀
- a 数组 aDiv 获取一组元素对象 arr array ary
- o 对象 oDiv 获取一个元素对象 obj普通对象
- s 字符串 string
- n 数字 number
- b 布尔值 boolean

数据类型

1.基本数据类型
五种:
- string
- number
- boolean
- null
- undefined
2.引用数据类型
两类:
- 对象数据类型 array 普通对象object Date RegExp ...
- 函数数据类型 function(){}
3.区别：
- 基本数据类型是对值的引用
- 引用数据类型是对地址的引用

循环

for 循环四部曲
1.定义
2.条件
3.语句
4.自增

for循环图解

判断

if ...else if...else

  if(num==0){
     alert('0')
  }else if(num==1){
      alert('1')
  }else if(num==2){
      alert('2')
  }else{
      alert('3')
  }

switch...case..break

switch(num){
        case 0:
            alert(0);
            break;
        case 1:
            alert(1);
            break;
        case 2:
            alert(2);
            break;
        default:
            alert(3);
            break;
    }