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

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> 标签中。
<script type="text/javascript">
       
</ script >

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

    1. 变量
①变量的声明
[1] 变量声明时不需要指定类型,可以为其赋值任何类型的数据。
[2]JavaScript 严格区分大小写, Num num 是完全不同的两个变量。
②变量的使用:变量在使用过程中可以接受不同类型的值。
    1. 函数
①函数声明
[1] 使用 function 关键字
[2] 不需要指定形参类型
[3] 不需要指定返回值
function sum(n, m) {
     return n + m;
}
②函数调用
       调用 JavaScript 函数时系统不检查传入参数的个数和类型。
③函数也是对象
JavaScript 中,函数也作为一种数据类型存在,而且是引用数据类型,函数名就是指向其内存空间地址的引用。
var a = function() {
     return 2;
};
var b = a;
a.fname = "tom";
alert(b.fname); // 结果为 tom
④函数的执行
   函数名 + ( )
var a = function() {
     return 2;
};
alert(a()); // 结果为 2
    1. 对象
                     ① 对象的创建
          第一种,使用new Object()创建
var obj = new Object();
          第二种,使用{}创建
var obj = {};
          ②为对象添加属性
n         第一种,通过 对象.属性名 = “属性值” 添加
obj.name = "zhangsan";
obj.age = 12;
obj.sum = function (a,b){
return a+b;
}
n         第二种,使用{}创建对象时,直接向对象中添加属性
var obj = {"name" : "zhangsan",
             "age" : 21,
             "sum" : function (a,b){ return a+b;}
             };
    1. this 关键字
JavaScript 函数中, this 关键字指向的是调用当前函数的对象。    
    var obj01 = {
       name : "obj01 name" ,
       getName : showName
    };
     var obj02 = {
       name : "obj02 name" ,
       getName : showName
    };
     function showName() {
       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 标签的事件属性中
< button onclick = "alert('hello');" > 点我 </ button >
        结构与行为耦合,不推荐使用
    1. 嵌入 head 标签内
<script type="text/javascript">
     var btnEle = document.getElementById( "btn" );
    btnEle.onclick = function () {
       alert( "hello" );
    };
</ script >
</head>
< body >
     < button id = "btn" > 点我 </ button >
</ body >
                    无法获取 body 标签中的节点
    1. 嵌入 body 标签后面
                    可以获取节点,但是不符合常规习惯
    1. window 对象
代表当前浏览器窗口
    1. onload 事件
                    将整个文档加载完成后触发
    1. 使用 window.onload 完美解决问题
                   
<script type="text/javascript">
    window.onload = function () {
        var btnEle = document.getElementById( "btn" );
       btnEle.onclick = function () {
           alert( "hello" );
       };
    };
</ script >
</ head >
< body >
     < button id = "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. 文本节点: 返回值是这个文本节点的内容
graphic
    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 代码
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值