一.javaweb笔记之javaScript简介+基本语法+事件驱动+DOM

时间：2022-08-26 16:54:41
1.JavaScript简介
    1. 起源
         在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。Netscape在最初将其脚本语言命名为LiveScript，因为Netscape与Sun合作，网景公司管理层希望它外观看起来像Java，因此取名为JavaScript。
    1. 特性
         ①脚本语言。JavaScript是一种解释型的脚本语言,C、C++、Java等语言先编译  后执行,   而JavaScript是在程序的运行过程中逐行进行解释。          ②基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也    能使用现有的对象。          ③简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做    出严格的要求,是基于Java基本语句和控制的脚本语言。          ④动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务    器就可以对用户的输入做出响应。          ⑤跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因    此一个JavaScript脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器支    持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。           
  1. JavaScript基本语法
    1. 编写位置
        ①编写到HTML中<script>标签中。
<scripttype="text/javascript">       </script>

        ②写在外部的.js文件中。然后通过script标签引入。
<scripttype="text/javascript"src="script.js"></script>

    1. 变量
①变量的声明 [1]变量声明时不需要指定类型，可以为其赋值任何类型的数据。 [2]JavaScript严格区分大小写，Num和num是完全不同的两个变量。 ②变量的使用：变量在使用过程中可以接受不同类型的值。
    1. 函数
①函数声明 [1]使用function关键字 [2]不需要指定形参类型 [3]不需要指定返回值
functionsum(n, m) {    returnn + m;}
②函数调用       调用JavaScript函数时系统不检查传入参数的个数和类型。 ③函数也是对象 在JavaScript中，函数也作为一种数据类型存在，而且是引用数据类型，函数名就是指向其内存空间地址的引用。
vara =function() {    return2;};varb = a;a.fname = "tom";alert(b.fname);//结果为tom
④函数的执行   函数名+ ( )。
vara =function() {    return2;};alert(a());//结果为2
    1. 对象
                     ①对象的创建           第一种，使用new Object()创建
varobj =newObject();
          第二种，使用{}创建
varobj = {};
          ②为对象添加属性 n         第一种，通过 对象.属性名 = “属性值” 添加
obj.name ="zhangsan";obj.age = 12;obj.sum =function(a,b){returna+b;}
n         第二种，使用{}创建对象时，直接向对象中添加属性
varobj = {"name":"zhangsan",            "age": 21,            "sum":function(a,b){returna+b;}             };
    1. this关键字
在JavaScript函数中，this关键字指向的是调用当前函数的对象。   
    varobj01 = {       name :"obj01 name",       getName : showName    };    varobj02 = {       name :"obj02 name",       getName : showName    };    functionshowName() {       alert(this.name);    }    obj01.getName();//结果为obj01 name    obj02.getName();//结果为obj02 name
  1. JavaScript事件驱动
    1. 事件
①用户事件：用户操作，例如单击、鼠标移入、鼠标移出等。 ②系统事件：由系统触发的事件，例如文档加载完成。
    1. 自定义事件响应函数
①从文档对象模型中获取控件对象[借助DOM API实现] ②声明一个事件响应函数 ③将事件响应函数的引用赋值给控件对象的事件属性  例如：window.onload = function(){}
    1. 取消控件默认行为
①默认行为       [1]超链接跳转页面       [2]submit按钮提交表单 ②取消方式：return false
  1. JavaScript嵌入方式
    1. 浏览器加载顺序
①按从上到下的顺序加载 ②遇到script标签先执行脚本程序，执行完成后再继续加载
    1. 嵌入HTML标签的事件属性中
<buttononclick="alert('hello');">点我</button>
       结构与行为耦合，不推荐使用
    1. 嵌入head标签内
<scripttype="text/javascript">    varbtnEle = document.getElementById("btn");    btnEle.onclick =function() {       alert("hello");    };</script></head><body>    <buttonid="btn">点我</button></body>
                   无法获取body标签中的节点
    1. 嵌入body标签后面
                   可以获取节点，但是不符合常规习惯
    1. window对象
代表当前浏览器窗口
    1. onload事件
                   将整个文档加载完成后触发
    1. 使用window.onload完美解决问题
                   
<scripttype="text/javascript">    window.onload =function() {       varbtnEle = document.getElementById("btn");       btnEle.onclick =function() {           alert("hello");       };    };</script></head><body>    <buttonid="btn">点我</button></body>
  1. DOM
    1. DOM标准
        Document Object Model：文档对象模型定义了访问和处理HTML文档的标准方              法。是W3C国际组织制定的统一标准，在很多计算机语言中都有不同实现如C#、PHP、         Java、Ruby、perl、python等
    1. document对象
                   window对象的一个属性，代表当前HTML文档，包含了整个文档的树形结构。获         取document对象的本质方法是：window.document，而“window.”可以省略。
    1. DOM树
父元素：直接包含当前元素的元素就是当前元素的父元素子元素：当前元素直接包含的元素就是当前元素的子元素祖先元素：直接或间接包含当前元素的所有元素都是当前元素的祖先元素后代元素：当前元素直接或间接包含的元素就是当前元素的后代元素兄弟元素：有相同父元素的元素是兄弟元素
    1. 节点(Node)
      1. HTML文档中的每个成分都是一个节点，HTML文档是由DOM节点构成的集合。
      2. 节点的分类
①文档节点(Document)：DOM标准将整个HTML文档的相关信息封装后得到的对象。 ②元素节点(Element)：DOM标准将HTML标签的相关信息封装后得到的对象。 ③属性节点(Attribute)：DOM标准将HTML标签属性的相关信息封装后得到的对象。 ④文本节点(Text)：DOM标准将HTML文本的相关信息封装后得到的对象。
      1. 节点的属性
  1. nodeName: 代表当前节点的名字，只读属性。如果给定节点是一个文本节点，nodeName 属性将返回内容为 #text 的字符串。
  2. nodeType：返回一个整数, 这个数值代表着给定节点的类型，只读属性。  1 -- 元素节点    2 -- 属性节点    3 -- 文本节点
  3. nodeValue：返回给定节点的当前值(字符串)，可读写的属性。
  1. 元素节点, 返回值是 null
  2. 属性节点: 返回值是这个属性的值
  3. 文本节点: 返回值是这个文本节点的内容
一.javaweb笔记之javaScript简介+基本语法+事件驱动+DOM
    1. DOM查询API
①元素查询
功能 API 返回值
·在整个文档范围内查询元素节点
根据id值查询 document.getElementById(“id值”) 一个具体的元素节点
根据标签名查询 document.getElementsByTagName(“标签名”) 元素节点数组
根据name属性值查询 document.getElementsByName(“name值”) 元素节点数组
 
·在具体元素节点范围内查找子节点
查找全部子节点 element.childNodes【W3C考虑换行，IE≤8不考虑】 节点数组
查找第一个子节点 element.firstChild【W3C考虑换行，IE≤8不考虑】 节点对象
查找最后一个子节点 element.lastChild【W3C考虑换行，IE≤8不考虑】 节点对象
查找指定标签名的子节点 element.getElementsByTagName(“标签名”) 元素节点数组
 
·查找指定元素节点的父节点：element.parentNode
 
·查找指定元素节点的兄弟节点
查找前一个兄弟节点 node.previousSibling【W3C考虑换行，IE≤8不考虑】 节点对象
查找后一个兄弟节点 node.nextSibling【W3C考虑换行，IE≤8不考虑】 节点对象
②属性操作       [1]读取属性值 元素对象.属性名 [2]修改属性值 元素对象.属性名=新的属性值 ③文本操作       [1]读取文本值：element.firstChild.nodeValue       [2]修改文本值：element.firstChild.nodeValue=新文本值
    1. DOM增删改API
API 功能
document.createElement(“标签名”) 创建元素节点并返回，但不会自动添加到文档中
document.createTextNode(“文本值”) 创建文本节点并返回，但不会自动添加到文档中
 
element.appendChild(ele) 将ele添加到element所有子节点后面
parentEle.insertBefore(newEle,targetEle) 将newEle插入到targetEle前面
   
parentEle.replaceChild(newEle, oldEle) 用新节点替换原有的旧子节点
parentEle.removeChild(childNode) 删除指定的子节点
   
element.innerHTML 读写HTML代码
标签：

相关文章