JavaScript

------------恢复内容开始------------

一、简介

概念：JavaScript作用主要是用于页面数据验证，因此，它的运行在客户端，需要浏览器支持并解析该页面的JavaScript代码（JS与JAVA半毛钱关系都没有，JS是弱类型语言，JAVA是强类型语言）
特点：
- 交互性（信息交互）
- 安全性（不允许直接访问本地硬盘）
- 跨平台性（只要浏览器能解析即可，与平台无关）

二、JavaScript与Html页面相结合的方式

在head标签或body标签中书写JavaScript代码
<script type=''text/javaScript'' src="相对路径/绝对路径">
- src用来引入JS标签，注意：script标签既可以用来定义JS代码，也可以用来引入，但是二者只能选择一个

三、JavaScript变量

变量类型：用于存放某些值的内存的命名
- 数值型 number
- 字符创型 string
- 对象　　 object
- 布尔类型 boolean
- 函数类型 function
特殊值：
- undefined 未定义，变量声明未赋值时的情况
- null　　　　空值
- NaN　　非数值
变量命名的格式：
- var 变量名 = 值；
关系（比较）运算
- ==：只做表面值上的判断
- ===：安全等于，除了判断值是否相等，还会判断变量类型是否相等
逻辑运算：在JavaScript中，所有的变量，都可以作为一个boolean类型去判断（0，null，undifined，""空串默认认为是false）
- 且运算&&：当表达式全为真时，返回最后一个表达式的值；当第一个表达式为假时，返回第一个的值
- 或运算||：当表达式全为假时，返回最后一个表达式的值；当第一个表达式为真时，返回第一个的值
- 取反运算!：将当前boolean类型的值取反
数组的定义
- var 数组名 = [];
- var 数组名 = [1,2,3,4];
函数
- 第一种定义方式：var 函数名 = function(形参列表){函数体}
- 第二种定义方式：function fun(形参列表){函数体}
- 注意点：如需要返回值，直接在函数体内加return语句即可。JS中的函数支持重载，但会抹调上一次函数的定义
- 隐形参数：无需定义形参，但是我们却可以获取所有传进来的参数的值，有点像JAVA中的object...args，也支持像Java操作可变长参数一样去遍历
- 代码演示:将传进的数值型参数相加并返回
```
    <script type="text/javascript">
       function sum() {
           var result = 0;
            for(i=0;i<arguments.length;i++){
                if(typeof (arguments[i])=="number"){
                    result+=arguments[i];
                }
            }
            return result;
       }
       alert(sum(1,1,1,2,2,2,3,4,'g','h'));
    </script>
```

JS中的自定义对象

方式一：

 var obj = new Object();
 obj.name = "Tom";
 obj.age = 18;
 obj.getName = function () {
    alert(this.name)
 }

方式二：

 var obj = {
     name:"Tom",
     age:18,
     getName:function () {
         alert(this.name);
     }
 }

四、JS中的事件

概念：页面中电脑输入设备与页面进行交互的响应，称之为事件。
常用的事件：
- onload加载完成事件当页面加载完成之后，常用语页面JS代码初始化操作
- onclick鼠标单击事件用于按钮点击响应操作
- onblur 用于输入框失去焦点后验证其内容是否合法
- onchange　　用于下拉列表和输入框该表后的操作
- onsubmit　　用于表单提交前，判断其内容是否合法,经常添加true/false返回值，用于阻止或同意表单提交
- onmousemove 鼠标滑动事件
- onmouseover 鼠标经过事件
- onmouseout 鼠标划出事件
事件的注册：
- 概念：事件的注册（绑定）即告诉浏览器当事件响应时，我要执行的代码
- 静态注册事件：通过Html标签直接赋予事件响应后的代码，这叫静态注册
```
1     <script type="text/javascript">
2         function onclickFun() {
3             alert("静态注册事件")
4         }
5     </script>
6 </head>
7 <body>
8 <div onclick="onclickFun()">123123</div>
9 </body>
```
- 动态注册事件：通过先获取标签的dom对象，通过dom对象.事件名=function(){}这种形式赋予标签事件响应后的代码，称之为动态注册
- 动态注册事件的步骤：1-获取标签对象的dom对象 2-对象.事件名=function(){}

  <script type="text/javascript">
       window.onload=function () {
           var div1 = document.getElementById("001");
           alert(div1)//[object HTMLDivElement]
           div1.onclick=function () {
               alert("动态注册事件！")
           }
       }
    </script>

    <script type="text/javascript">
        window.onload = function () {
            var form01 = document.getElementById("form01");
            alert(form01)
            form01.onsubmit = function () {
                alert("发现不合法，阻止表单提交")
                return false;
            }
        }
    </script>
</head>
<body>
<form id="form01">
    <input type="submit">
</form>

五、DOM对象

概念：全程是 Document Object Module,即将标签中的属性，文本等转化为对象进行管理
特点

它管理了html标签中所有的文档内容，是一种树结构，具有层级关系
它将所有的标签都进行了对象化
我们可通过document访问所有的标签对像化

 1 class Dom{
 2     private String id;
 3     private String tagName;
 4     private Dom parentNode;
 5     private List<Dom> childrenNode;
 6     private String innerHtml;
 7 }
 8 <body>
 9 <div id="01">123123</div>
10 </body>

　　3.Document对象中的重要方法

document.getElementById(elementId) 通过标签对象id获取dom对象
document.getElementByName(elementName) 通过标签对象的name属性获取dom对象
document.getElementByTagName(tagName) 通过标签名获取dom对象
document.createElement(tagName) 通过传入一个标签名创造标签对象

　　注意：获取DOM对象的方式优先使用第一、二种

　　dom对象的方法：

　　　　dom对象.getElementByTagName(tagName)获取传入的标签名获取相应子节点对象

　　　　dom对象.appendChild(oChildNode)向标签中添加子节点

　　4.dom对象的属性

- childNode
- firstNode
- lastNode
- parentNode
- nextSibling
- previousSibling
- className
- innerHtml 获取起始标签，结束标签中的内容（双标签）
- innerText　　获取起始标签，结束标签中的文本

posted @ 2020-11-26 09:37 arraySet 阅读(124) 评论(0) 收藏举报

刷新页面返回顶部

arraySet

JavaScript

公告