js初识、JS基础交互、JavaScript 元素操作

js初识

js外链引入

外链引入.js 
    通过script标签的src属性引入外部js文件
    在外部新建一个后缀名为js的文件
    注意：用于引入外部js文件的script标签，就不要再写其他的js代码,不会执行
​
<script src="./js/demo.js"></script>
​
​
<script src='./outer.js'>
    //此代码不执行
    // alert("对，你说的对!!!");
</script>
​
​
 <!-- 内部引入 -->
  <script>
    alert('hello world--内部引入');
  </script>

变量

• 变量：可以改变的量，用于存储数据的容器

• 语法：var 变量名 = 值

  // 语法  var
  // var  变量名  =  变量值；
  // =  把=右边的值赋给左边的值
  ​
  // 1.只声明变量，不赋值
  // 声明一个变量  变量名：a
  var a;
  console.log(a); //undefined  只定义变量，没有赋值
  ​
  // 2.声明了变量且赋值     用的最最多
  // 把10 赋值 给  变量b
  var b = 10;
  console.log(b); //10
  ​
  // 3.声明多个变量,变量之间逗号隔开
  // 一次声明了3个变量 c d e
  var c = 10,
      d = 20,
      e = 30;
  ​
  console.log(c);
  console.log(d);
  console.log(e);
  ​
  ​
  // 控制台打印，一次可以打印多个，变量之间用逗号隔开
  console.log(c, d, e); //10 20 30
  ​
  ​
  // 4.连等
  // 一次声明三个变量 f g h,这三个变量的值都是100
  var f = g = h = 100;
  console.log(f, g, h); //100 100 100
  ​
  ​
  console.log(t); //没有声明，没有赋值  报错   t is not defined

• 变量的命名规则

1.只能以数字、字母、下划线_、$组成,不能以数字开头
    2.不能使用关键词（提前定义后的关键性 div  var ）和保留字（后续可能发展为关键词）
    3.见名知意，遵循驼峰命名（小驼峰：fontsize--fontSize第二个单词首字母大小）  （大驼峰：fontsize--FontSize每个单词首字母大小）  
    4.不要重名，重名会覆盖

JS基础交互

1、通过ID

     1.找整个文档的id：document.getElementById('id名');
​
   // document.getElementById('id名')；
​
    // document 整个文档、页面
    // get 得到、获取
    // Element 元素
    // by  通过
    // id  id名
​
    // 在整个文档中通过id来获取元素
​

 var box = document.getElementById('box');
        console.log(box);// <div id="box"></div>
        box.onclick = function () {
            alert('嘿，你好');
        }

2、通过标签名

​
    语法：
    1.获取整个文档下面的元素
        document.getElementsByTagName('标签');
    2.获取父元素下面的元素
        父级.getElementsByTagName('标签')
    
    获取长度：变量.length
    获取元素：变量[下标]
​
    通过标签名来获取元素,返回的是一个对象(类数组，伪数组)，有长度，可以通过下标来获取某一个元素
    注意:通过标签名来获取元素的时候，一定要加上下标，否则是整个文档的元素
    
    
     // document 整个文档、页面
    // get 得到、获取
    // Elements 元素复数（很多个）
    // by  通过
    // TagName 标签名

// 获取页面中所有的div标签
    var divs = document.getElementsByTagName('div');
    console.log(divs); //HTMLCollection(5) [div#box, div, div, div, div, box: div#box]
    // 获取长度
    console.log(divs.length);
    // 获取某个元素
    console.log(divs[0]);
    console.log(divs[2]);
    console.log(divs[4]);
    console.log(divs[5]); //undefined 如果获取的没有的下标，则返回undefined
​
​
 // 通过父元素获取标签
​
    // 1.先获取父元素
    // 可以直接通过下标获取指定元素
    var ol = document.getElementsByTagName('ol')[0];
    // console.log(ol);
​
    // 2.父级.getElementsByTagName()
    var li = ol.getElementsByTagName('li');
    // 获取的是第一个ol里li元素
    console.log(li);
​
    // 通过下标来获取元素
    console.log(li[0]);

JavaScript 元素操作

元素操作可以分为：内容操作，属性操作，样式的操作等

每种操作都分为读（获取）和写（设置）的操作

内容操作

1、表单元素操作

表单元素内容操作
内容操作的是表单的value
设置：表单元素.value=值；
读取：表单元素.value;
​
​
 // 1.获取标签
    var inp = document.getElementsByTagName('input')[0];
    var btn = document.getElementsByTagName('button');
​
    // console.log(inp, btn);
​
    //   点击设置内容 按钮 把后台的内容设置到表单
    // console.log(btn[0]);
    btn[0].onclick = function () {
      // 设置表单内容
      inp.value = '大情种靓仔';
    }
    //   点击获取内容 按钮 把表单的内容打印到控制台
    // console.log(btn[1]);
    btn[1].onclick = function () {
      // 获取表单内容
     console.log(inp.value);
    }
​
 // 1.设置表单内容
    inp.value = '我就问你耶不耶';
    // 后写的会覆盖先写的
    inp.value = 'yeyeyeye';