JavaScript基础

JavaScript基础

• 弹出窗口函数

  • alert(“文本内容”);

• js引入方式

  • 外部文件引入

    <script src="../js/myjs.js"></script>
    

  • 直接script标签引入

  <script>
      //js代码编写地
      alert("我是文本内容")
  </script>
  

四种输入输出语句

1. prompt(“输入提示内容”)
2. alert(“弹出窗口显示内容”)
3. 控制台打印： console.log(“具体内容”)
   1. F12打开调试界面
   2. 选择Console窗口
4. document.write(“内容”)

js中变量的定义

• 就是中定义变量无需进行变量类型声明，直接给出相应的值即可

• 变量的类型

  • 局部变量

    let name=值
    

• 全局变量

  //1.前面加上var
  var name=值
  //2.直接写变量名，var可省略
  	name=值
  

• 常量(类似于java中的final)

  const name = 值
  

• 变量类型

  • String
  • Number
  • boolean
  • undefined
  • function

• typeof 获取变量类型的方法

数组

• 定义

  let array = [1,2,3,4,5]
  

• 高级特性 …

  • 作用：可以将一个多元素的变量内容展开
    • …array

函数（方法）

• 普通函数

  function 函数名(参数名,参数名) {
      函数体
      return 还回值;
  }
  

• 定义函数的步骤

  • 函数名
  • 是否有参数
  • 是否有返回值

• 匿名函数

  let func = function(参数1，参数2) {
      函数体
      return 还回值;
  }
  

• 函数的参数里面有函数

      //匿名函数
      let fun = function(){
          document.write("hello");
      }
      // fun();
  
      // 定义一个函数，函数参数是函数类型
      function myfunction(reciveFunc) {
          reciveFunc();
      }
      myfunction(fun);
  

DOM

• DOM:文档对象模型
• 将HTML文档的各个组成部分封装为对象。借助这些对象，可以对HTML文档进行增删改的动态操作。
• Element:以下三部分不是每一个元素（标签都有）
  • 子元素： Element数组类型
  • 属性
  • 文本

HTML元素

• Element元素的创建

  let el = document.createElement("标签名") //默认创建后没有添加到dom树里面之前是不可见的
  

• Element元素的获取

  说明	方法名
  根据id获得一个元素	getElementById(id属性值)
  根据标签名称获得多个元素	getElementsByTagName(标签名称)
  根据name属性获得多个元素	getElementsByName(name属性值)
  根据class属性获得多个元素	getElementsByClassName(class属性值)
  获取当前元素的父元素	子元素对象.parentElement属性

元素添加到dom树

• 找到你需要添加的父元素
• 调用父元素的appendChild方法

从dom树种删除元素

• 找到你需要删除的父元素
• removeChild

元素的属性

• Text文本的操作

  属性名	说明
  innerText	添加文本内容，不解析标签
  innerHTML	添加文本内容，解析标签

• Attribute属性的操作

  方法名	说明
  setAtrribute(属性名，属性值)	设置属性
  getAtrribute(属性名)	根据属性名获取属性值
  removeAtrribute(属性名)	根据属性名移除指定的属性
  style属性	为元素添加样式

事件

• 事件指的是当某些组件执行了某些操作后，会触发某些代码的执行

• 常用事件

  事件名	说明
  onload	某个页面或图像被完成加载
  onsubmit	当表单提交时触发该事件
  onclick	鼠标单击事件
  ondblclick	鼠标双击事件
  onblur	失去焦点
  onfocus	获得焦点
  onchange	用户改变域的内容

• 了解事件

  事件名	说明
  onkeydown	某个键盘的键被按下
  onkeypress	某个键盘的键被按下或按住
  onkeyup	某个键盘的键被松开
  onmousedown	某个鼠标按键被按下
  onmouseup	某个鼠标按键被松开
  onmouseover	鼠标被移到某元素之上
  onmouseout	鼠标从某元素移开