码迷,mamicode.com
首页 > 编程语言 > 详细

HTML-JavaScript

时间:2021-06-06 18:49:06      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:ext   tle   ber   变量声明   创建元素   声明变量   get   append   文档   

HTML-JavaScript

01. JavaScript写在哪里

  • head部分: 用于声明变量,函数,类型,为事件绑定处理函数
  • body部分: 调用脚本执行
  • 外部脚本: 用于定义函数,类型
  • 执行顺序: 在代码中从上往下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="0605-01-HtmlJavaScript.js"></script>
    <title>Document</title>
    <script>
        alert("head");
    </script>
</head>
<body>
    <script>
    alert("body")
    </script>
    
</body>
</html>

02.基础语法

  • 大小写敏感
  • 弱类型语言
  • 分号结尾
  • 字符串可使用单引号和双引号

2.1数据类型

  • 因为JavaScript为弱类型语言,故变量声明只需要使用var ,关键字即可申明任何类型
  • 虽然var关键字可申明为任何类型,但是JavaScript仍有数据类型
    boolean number string Underfined Null Object
    Underfined Null类型只有一个值的数据类型,值分别为underfined与null
  • 查看变量类型可使用typeof方法

2.2 集合

  • 数组 {}
  • 键值对 {"kay1":"value1","kay2":"value2"}
  • 对象数组 {{"kay1":"value1","kay2":"value2"},{"kay3":"value3","kay4":"value4"}}
  • 属性 方法
  • 类型转化

2.3方法的使用

  1. 使用关键字function定义方法
  2. 方法名使用驼峰命名法
  3. 方法可以设置参数和返回值,js中不存在方法的重载
<script>
        var num1 = 3;
        var num2 = 4;
        function ShowInfo(item1,item2){
            return item1 + item2;
        }
        alert(ShowInfo(num1,num2));
    </script>

2.4 匿名方法

  1. 匿名方法可以简单的理解成不需要写方法名称的方法
  2. 匿名方法一般常用两种写法
var fun =  function(params){
....
}
//这种方法可以把匿名方法赋值给一个变量,调用这个变量即可使用该方法
(function(param1,param2){
....
})(1,2);
// 这种方法可以在定义匿名方法的同时传参及调用

03.闭包

目前可以简单的理解成子方法可以使用父方法的变量

04.DOM

  1. DOM用于操作html文档,准确的来说是html标签中的内容
  2. JavaScript中将每一个标签当作对象处理,每隔标签都有自己的属性,也拥有触发事件 方法
  3. 操作DOM对象,一般使用document关键字调用

4.1 Js获取元素的方法

  1. document.getElementById(id): 根据id获取元素节点
  2. document.getElementByClassName(classname): 根据class的值获取一组元素节点
  3. document.getElementByName(name): 根据name获取一组元素节点
  4. document.getElementByTagName(tag): 根据标签名获取一组元素节点
<div id="dv1" class="dv">dv1</div>
    <div id="dv2" class="dv">dv2</div>
    <div id="dv3" class="dv">dv3</div>
    <div id="dv4" class="dv">dv4</div>
    <script>
       alert(document.getElementById("dv1").innerText + "   "+document.getElementsByClassName("dv")[0].innerText)
    </script>

4.2 注册事件

事件常用的注册方式有多种,此处介绍两种,一种直接在元素上注册事件,一种在获取的对象上注册事件

  1. 元素注册法

    <input id="text1" type="text" onclick="ClickMe1()">
        <script>
            function ClickMe1(){
                alert("点我1");
            }
        </script>
    
  2. 对象注册法

<input id="text2" type="text" onclick="ClickMe2()">
<script>
   document.getElementById("text2").onclick = function(){
    alert("点我2");
   }
</script>

4.3 动态操作元素

  1. document.creatElement(): 创建元素
  2. document.appendChild(): 添加子元素
  3. document.insertBefore(newEl,orgEl): 在莫元素前添加元素
  4. document.firstChild; 获取第一个元素

HTML-JavaScript

标签:ext   tle   ber   变量声明   创建元素   声明变量   get   append   文档   

原文地址:https://www.cnblogs.com/alideluobo/p/14853683.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!