Java EE学习日记_JavaScript下

---

layout: post
title: Java EE学习日记_JavaScript
subtitle: JavaScript
date: 2018-01-20
author: ZL
header-img: img/20180120.jpg
catalog: true
tags:
- JavaScript
- JavaEE

---

关于thead和tbody

• 这个是放在table里面的，把表格的标题行和内容行分开

    

        

            
编号
            
姓名
            
年龄
        
    
    

        

            
1
            
张三
            
22
        
        

            
2
            
李四
            
25
        
        

            
3
            
王五
            
27
        
        

            
4
            
赵六
            
29
        
        

            
5
            
田七
            
30
        
        

            
6
            
汾酒
            
20
        
    

其中thead里面用tr和th

tbody里面用tr和td

tr和td的差别不大，一般tr用在标题的单元格里面，字体一般会加粗，td用在表格内容的单元格里面

• 用JavaScript获取table里面的内容

  拿到表格

  var tbid = window.document.getElementById("tbl");

  拿到第i个tbody

  tbid.tBodies[0]

  拿到第i个tbody的第j行

  tbid.tBodies[0].rows[i]

  拿到第i个tbody的行数

  tbid.tBodies[i].rows.length;

  拿到table里面tbody的数量

  tbid.tBodies.length

  设置tbody行的参数

  tbid.tBodies[0].rows[i].style.xxxxx = "xxxx";
  比如：
  tbid.tBodies[0].rows[i].style.backgroundColor = "pink";

事件

之前学了onClick、onSubmit、onblur等
现在介绍2个onmouseover和onMouseout
指的是鼠标滑动上去和鼠标离开

js事件

onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。
onclick/ondblclick:鼠标单击和双击事件
onkeydown/onkeypress：搜索引擎使用较多
onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。
onmouseover/onmouseout/onmousemove：购物网站商品详情页。
onsubmit：表单提交事件 ，有返回值，控制表单是否提交。
onchange:当用户改变内容的时候使用这个事件(二级联动)

getElementsByName("xxxx");

如果设置了name = "xxxx"属性，
通过这name得到该元素
返回值是一个数组，所有name叫xxxx的都会得到

checkBox有一个属性是checked，可以用来判断是否选中，也可以直接设置它。

JavaScript的DOM操作

image

Document:整个html文件都成为一个document文档
Element:所有的标签都是Element元素
Attribute：标签里面的属性
Text：标签中间夹着的内容为text文本
Node:document、element、attribute、text统称为节点node.

Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

document对象的方法

后面两个方法获取之后需要遍历！

以下两个方法很重要，但是在手册中查不到！
创建文本节点：document.createTextNode()
创建元素节点：document.createElement()

Element对象

我们所认知的html页面中所有的标签都是element元素

element.appendChild()向元素添加新的子节点，作为最后一个子节点。
element.firstChild返回元素的首个子节点。
element.getAttribute()返回元素节点的指定属性值。
element.innerHTML设置或返回元素的内容。
element.insertBefore()在指定的已有的子节点之前插入新节点。
element.lastChild返回元素的最后一个子元素。
element.setAttribute()把指定属性设置或更改为指定值。
element.removeChild()从元素中移除子节点。
element.replaceChild()替换元素中的子节点。

Attribute对象

我们所认知的html页面中所有标签里面的属性都是attribute

attribute方法

例子：
在页面中使用列表显示一些城市

    
北京
    
上海
    
广州

我们希望点击一个按钮实现动态添加城市。

分析：
事件(onclick)
获取ul元素节点
创建一个城市的文本节点
创建一个li元素节点
将文本节点添加到li元素节点中去。
使用element里面的方法appendChild()来添加子节点
代码：

    
    
    


    

        
北京
        
北京
        
北京
    
    

创建数组的方式

new Array();
new Array(size);
new Array(element0,element1,element2......)

省市联动的例子

    
    
    


    
        just choose
        1
        2
        3
        4
    

    

    

JavaScript内置对象

js内置对象

Array对象

数组的创建

数组的特点：
长度可变！数组的长度=最大角标+1
Java的数组长度不可变

Boolean对象

Boolean对象创建

如果value 不写，那么默认创建的结果为false

Date对象

getTime()
返回 1970 年 1 月 1 日至今的毫秒数。
解决浏览器缓存问题

Math和Number对象

与java里面的基本一致。

String对象

match()找到一个或多个正则表达式的匹配。
substr()从起始索引号提取字符串中指定数目的字符。
substring()提取字符串中两个指定的索引号之间的字符。

例子

RegExp对象

正则表达式对象
test检索字符串中指定的值。返回 true 或 false。

全局对象

全局属性和函数可用于所有内建的 JavaScript 对象

js全局函数

例子：