###JS 02
----
###console对象常用函数
alert与console相比
alert因为是弹出窗体, 类似Java中的接收用户输入, 会造成线程的等待
console现在支持的浏览器也很多 (支持IE)
普通日志输出:
log(1-n个元素)
异常调试输出:
debug(1-n个元素)
在代码中使用的话, 在控制台的打印会附带超链接, 连接到debug代码编写的位置
带有信息图标的提示:
info(1-n个元素)
带有警告图标的提示:
warn(1-n个元素)
带有错误图标的提示:
error(1-n个元素)
在输出时 . 使用格式化字符串占位置
格式化字符串 类型
%s 可以填充字符串
%d 可以填充整型
%f 可以填充浮点型
%o 可以填充连接对象
如果存在格式化字符串, 则后面的参数 默认填充到格式化字符串位置, 超出部分正常打印
举例:
console.log("这个人叫: %s ,他今年 %d 岁了,性别为 %s","哈哈");
###DOM对象
什么是HTML DOM对象
HTML Document Object Model : 文档对象模型
###JS中对于属性值的获取与设置
属性值的获取:
- var par1 = elementObject.属性;
属性值的设置:
- elementObject.属性= 值;
###获取元素对象
1. document.getElementById(id);
- 通过元素的id , 获取元素对象
2. document.getElementsByTagName(tagName);
- 通过元素的标签名称, 获取一个元素对象数组
3. document.getElementsByName(name)
- 通过元素的name属性值 , 获取一个元素对象数组
4. document.getElementsByClassName(className);
- 通过元素的class属性值, 获取一个元素对象数组
- 新版api ie9和以上支持
###修改元素的属性和内容
修改图片的src
1. 找到图片的对象
2. 更改它的src属性
innerHTML : 修改元素的文本内容
className : 修改元素class属性值
###用户名验证案例:
CSS部分
.span1{
color:#f00;
font-size:12px;
}
.span2{
color:#0f0;
font-size:12px;
}
##
HTML部分
帐号:<input type="text" id="uname" οnblur="test()">
<span class="span1" id="uname_log"></span><br><br>
##
JS部分
function test(){
var uname = document.getElementById("uname");
var uname_val = uname.value;
var uname_log = document.getElementById("uname_log");
if(uname_val.length>=6){
//颜色绿色
uname_log.className="span2";
//显示文本为: 用户名可用
uname_log.innerHTML = "用户名可用";
}else{
//颜色红色
uname_log.className="span1";
//显示文本为: 用户名过短, 请重新输入
uname_log.innerHTML = "用户名过短,请重新输入";
}
}
###通过一个节点 根据 层次从查找节点
遵循文档的层次结构,查找单个节点
- parentNode 查找父节点
- firstChild 查找第一个子节点
- lastChild 查找最后一个子节点
遵循文档的层次结构,查找多个节点
- childNodes 获取所有子节点
获取元素/属性的名称/值/节点类型
- noteName 元素节点返回标签名;属性节点返回属性名;文本节点返回#text
- nodeValue 属性节点返回属性值;文本节点返回内容;元素节点返回null
- nodeType 1表示元素节点;2表示属性节点;3表示文本节点
遵循文档的层次结构,查找多个属性
attributes 获取元素的所有属性
###创建新的节点:
var elementObject = document.createElement("节点的名称");
###通过父元素 添加子元素
//追加子元素
父元素.appendChild(elementObject);
//插入到参考元素之前:
父元素.insertBefore(新元素,要参考的元素);
###删除元素
父元素.removeChild(子元素对象);
###元素对象Select
属性:
options
selectedIndex : 获取被选中的元素的下标
函数:
add(option对象) 添加一个下拉选项
remove(index) 移除一个选项
事件:
当选中的元素发生变化
onchange
###元素对象option
创建对象:
new Option("文本内容","提交服务器的value值");
常用的属性:
1. 获取下标: index
2. 获取文本内容: text
3. 获取提交的value值: value
4. 获取选中状态: selected
###元素对象table
表格
属性:
rows cells
常用方法:
插入一行 var tr = insertRow(index);
指定索引插入一行 , 并返回TableRow对象
删除一行 deleteRow(index);
指定索引删除行
###元素对象TableRow
表格行 <tr>
常用属性:
cells
rowIndex : 获取当前tr的索引值
常用函数:
插入一列 var tr = insertCell(index);
指定索引插入一行 , 并返回TableCell对象
删除一列 deleteCell(index);
指定索引删除行
###元素对象 tableCell
表格中的单元格<td>
常用属性:
1. 获取当前列的索引 cellIndex
2. 当前单元格占用的列数 colSpan
3. 当前单元格占用的行数 rowSpan
###作业
参考网址:
http://itdage.cn/buy/book.jsp
----
###console对象常用函数
alert与console相比
alert因为是弹出窗体, 类似Java中的接收用户输入, 会造成线程的等待
console现在支持的浏览器也很多 (支持IE)
普通日志输出:
log(1-n个元素)
异常调试输出:
debug(1-n个元素)
在代码中使用的话, 在控制台的打印会附带超链接, 连接到debug代码编写的位置
带有信息图标的提示:
info(1-n个元素)
带有警告图标的提示:
warn(1-n个元素)
带有错误图标的提示:
error(1-n个元素)
在输出时 . 使用格式化字符串占位置
格式化字符串 类型
%s 可以填充字符串
%d 可以填充整型
%f 可以填充浮点型
%o 可以填充连接对象
如果存在格式化字符串, 则后面的参数 默认填充到格式化字符串位置, 超出部分正常打印
举例:
console.log("这个人叫: %s ,他今年 %d 岁了,性别为 %s","哈哈");
###DOM对象
什么是HTML DOM对象
HTML Document Object Model : 文档对象模型
###JS中对于属性值的获取与设置
属性值的获取:
- var par1 = elementObject.属性;
属性值的设置:
- elementObject.属性= 值;
###获取元素对象
1. document.getElementById(id);
- 通过元素的id , 获取元素对象
2. document.getElementsByTagName(tagName);
- 通过元素的标签名称, 获取一个元素对象数组
3. document.getElementsByName(name)
- 通过元素的name属性值 , 获取一个元素对象数组
4. document.getElementsByClassName(className);
- 通过元素的class属性值, 获取一个元素对象数组
- 新版api ie9和以上支持
###修改元素的属性和内容
修改图片的src
1. 找到图片的对象
2. 更改它的src属性
innerHTML : 修改元素的文本内容
className : 修改元素class属性值
###用户名验证案例:
CSS部分
.span1{
color:#f00;
font-size:12px;
}
.span2{
color:#0f0;
font-size:12px;
}
##
HTML部分
帐号:<input type="text" id="uname" οnblur="test()">
<span class="span1" id="uname_log"></span><br><br>
##
JS部分
function test(){
var uname = document.getElementById("uname");
var uname_val = uname.value;
var uname_log = document.getElementById("uname_log");
if(uname_val.length>=6){
//颜色绿色
uname_log.className="span2";
//显示文本为: 用户名可用
uname_log.innerHTML = "用户名可用";
}else{
//颜色红色
uname_log.className="span1";
//显示文本为: 用户名过短, 请重新输入
uname_log.innerHTML = "用户名过短,请重新输入";
}
}
###通过一个节点 根据 层次从查找节点
遵循文档的层次结构,查找单个节点
- parentNode 查找父节点
- firstChild 查找第一个子节点
- lastChild 查找最后一个子节点
遵循文档的层次结构,查找多个节点
- childNodes 获取所有子节点
获取元素/属性的名称/值/节点类型
- noteName 元素节点返回标签名;属性节点返回属性名;文本节点返回#text
- nodeValue 属性节点返回属性值;文本节点返回内容;元素节点返回null
- nodeType 1表示元素节点;2表示属性节点;3表示文本节点
遵循文档的层次结构,查找多个属性
attributes 获取元素的所有属性
###创建新的节点:
var elementObject = document.createElement("节点的名称");
###通过父元素 添加子元素
//追加子元素
父元素.appendChild(elementObject);
//插入到参考元素之前:
父元素.insertBefore(新元素,要参考的元素);
###删除元素
父元素.removeChild(子元素对象);
###元素对象Select
属性:
options
selectedIndex : 获取被选中的元素的下标
函数:
add(option对象) 添加一个下拉选项
remove(index) 移除一个选项
事件:
当选中的元素发生变化
onchange
###元素对象option
创建对象:
new Option("文本内容","提交服务器的value值");
常用的属性:
1. 获取下标: index
2. 获取文本内容: text
3. 获取提交的value值: value
4. 获取选中状态: selected
###元素对象table
表格
属性:
rows cells
常用方法:
插入一行 var tr = insertRow(index);
指定索引插入一行 , 并返回TableRow对象
删除一行 deleteRow(index);
指定索引删除行
###元素对象TableRow
表格行 <tr>
常用属性:
cells
rowIndex : 获取当前tr的索引值
常用函数:
插入一列 var tr = insertCell(index);
指定索引插入一行 , 并返回TableCell对象
删除一列 deleteCell(index);
指定索引删除行
###元素对象 tableCell
表格中的单元格<td>
常用属性:
1. 获取当前列的索引 cellIndex
2. 当前单元格占用的列数 colSpan
3. 当前单元格占用的行数 rowSpan
###作业
参考网址:
http://itdage.cn/buy/book.jsp