JavaScript是嵌入HTML中在浏览器中的脚本语言，具有与java和C语言类似的语法
- 一种网页编程技术，用来向HTML页面添加交互式行为
- 直接嵌入HTML页面
- 由浏览器解释执行代码，不进行预编译
数据类型转换函数
- toString：所有数据类型均可转换为String类型；
- parseInt：强制转换成整数，如果不能转换，则返回NaN（not a number）；
- parseFloat：强制转换成浮点型，如果不能转换，则返回NaN；
- typeof：查询当前类型，返回string/number/boolean/object/function/undefine 例如：typeof（"test"+3），返回“string”；
- isNaN(is not a number?)，判断被检测表达式经过转换后是不是一个数，如果被检测表达式不是数则返回true，否则返回false；
- null：null在程序中代表“无值”或者“无对象”，可以通过给一个变量赋值null来清除变量的内容；
- undefined：声明了变量但从未赋值，对象属性不存在；
document对象
innerText：设置或获取位于对象起始和结束标签内的文本；
innerHTML:设置或获取位于对象起始和结束标签内的HTML；
节点属性
- getAttribute():方法：根据属性名称获取属性；
- setAttribute()
- removeAttribute()
查询节点
如果需要操作HTML元素，必须首先找到该元素
查询节点的方式：
- 通过id查询 document.getElementById("idname") 通过制定的ID来返回元素节点，忽略文档的结构；查找整个HTML文档中的任何HTML元素；如果ID错误，则返回null。
- 通过层次（节点关系）查询 parentNode---遵循文档的上下层次结构，查找单个父节点 childNodes---遵循文档的上下层次结构，查找多个子节点
- 通过标签名称查询 getElementsByTagName()---根据指定的标签名称返回所有的元素；忽略文档结构；查找整个HTML文档中的所有元素；如果标签从、名称错误，则返回长度为0的节点列表。返回一个节点列表（数组）：使用节点类表的length属性获取个数；[index]:定位具体的元素
- 通过name属性查询 document.getElementsByName()
创建新节点
- documen.createElement(elementname) elementname:要创建元素标签名称；返回新创建的节点
添加新节点
- parentNode.appendChild(newNode) 追加：新节点作为父节点的最后一个子节点添加
- parentNode.insertBefore(newNode,refNode) refNode:参考节点，新节点位于此节点之前添加
删除节点
node.removeChild(childNode)
删除某子节点；childNode必须是node的子节点。
自定义对象
- 自定义对象是一种特殊的数据类型，由属性和方法封装而成 ----属性指与对象有关的值：对象名.属性 ----方法指对象可以执行的行为或可以完全的功能：对象名.方法名（）
- 创建自定义对象 ---直接创建对象 ---使用构造器创建对象 ---使用JSON创建对象
JSON是一种轻量级的数据交换格式
- 使用名/值对的方式定义
- 名称需要使用“”引起来
- 多对定义之间使用，隔开
- 名称可以是属性
- 字符串类型的属性值，需要使用“”引起来
事件属性
- 鼠标事件：onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmouseout
- 键盘事件：onkeydown,onkeyup
- 状态事件：onload,onchange,onfource,onblur,onsubmit
event对象
- 任何事件触发后将会产生一个event对象
- event对象记录事件发生的鼠标位置、键盘按键状态和触发对象等信息 ---获得event对象 ---使用event对象或的相关信息，如单击位置，触发对象等
- 常用属相：clientX/clientY/cancelBubble等
- 对于event对象，经常需要获得事件源(通常要考虑浏览器兼容问题)
- IE浏览器：event.srcElement
- Firefox浏览器：event.target
string对象
- 大小写转换方法 ---x.toLowerCase() --x.toUpperCase()
- 获取指定字符：
- x.charAt(index)：返回指定位置的字符
- x.charCodeAt(index)：返回指定位置字符的Unicode编码
- index：字符位置
- 查询指定字符串：
- x.indexOf(findstr,[index])
- x.lastIndexOf(findstr,[index])
- findstr：查找的字符串
- index：开始查找的位置索引，可以省略
- 返回find石头人在X中出现的首字符位置索引，如果没有找到，则返回-1
- lastIndexOf：从后面找起
- 获取子字符串：
- x.substring(start,[end])
- 替换子字符串：
- x.replace(findstr,tostr)
- 查分子字符串：
- x.split(bystr,[howmany])
number对象
- toFixed(num):转换为字符串，并并保留小数点后一定位数
array对象
- 创建数组对象
- var a1 =new Array();
- 获取数组元素的个数：length属性
- 访问数a1[1]；
- x.reverse()；---反向数组---改变数组x中数值的顺序
- x.sort([sortfunc])：数组排序
date对象
读取时间毫秒数：getTime(),setTime()
读写时间分量--getDate(),getDay(),getFullYear()
--------------------setDate(),setDay(),setFullYear()
转换为字符串
--toString()
--toLocaleTimeString()
--toLocaleDateString()
展示基于JavaScript的一个小小的购物demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物</title>
<style type="text/css">
body{
background: #ccceee;
}
h1 {
text-align: center;
}
table {
width:60%;
margin: 100px auto;
border: 1px solid #ffffff;
border-collapse: collapse;
text-align: center;
}
table th ,table td {
border: 1px solid #ffffff;
padding: 5px;
}
input:hover {
background-color: yellow;
}
</style>
<script type="text/javascript">
function addshopping(btn) {
//获取当前行的信息
var tr = btn.parentNode.parentNode;
//获取当前行下单元格里面的信息
var tds = tr.getElementsByTagName("td");
//获取商品名
var name = tds[0].innerHTML;
//获取商品的价格
var price = tds[1].innerHTML;
//获取购物车表格的tbody
var tbody = document.getElementById("goods");
//添加一行
var tr = tbody.insertRow();
tr.innerHTML='<td>'+name+'</td>'+
'<td>'+price+'</td>'+
'<td align="center">'+
'<input type="button" value="-" onclick="change(this,-1);">'+
'<input type="text" value="1" size="3" readonly>'+
'<input type="button" value="+" onclick="change(this,1);">'+
'</td>'+
'<td>'+price+'</td>'+
'<td align="center">'+
'<input type="button" value="X" onclick="del(this);">'+
'</td>';
total();
}
function del(btn) {
//自己不能删除自己
//只有父节点才能删除自己
var tr = btn.parentNode.parentNode;
tr.parentNode.removeChild(tr);
total();
}
function change(btn,n) {
var inputs = btn.parentNode.getElementsByTagName("input");
var count = parseFloat(inputs[1].value);
//当数量为1时不能点击减按钮
if (count <= 1&& n <0) {
return;
}
inputs[1].value = count + n ;
count = inputs[1].value;
//获取单价信息
var tr = btn.parentNode.parentNode;
var tds = tr.getElementsByTagName("td");
var price = tds[1].innerHTML;
var sum = tds[2].innerHTML;
tds[3].innerHTML = parseFloat(price*count);
total();
}
function total() {
var tbody = document.getElementById("goods");
var trs = tbody.getElementsByTagName("tr");
var sum = 0;
for (var i = 0; i < trs.length; i++) {
var tds = trs[i].getElementsByTagName("td");
var td = tds[3].innerHTML;
sum +=parseFloat(td);
}
var total = document.getElementById("total");
total.innerHTML = sum;
}
</script>
</head>
<body>
<h1>聚划算</h1>
<table>
<thead>
<tr>
<th>商品名</th>
<th>商品价格</th>
<th>商品库存</th>
<th>好评率</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>龙瞎皮肤</td>
<td>888</td>
<td>100</td>
<td>50%</td>
<td>
<input type="button" value="加入购物车" onclick="addshopping(this);"/>
</td>
</tr>
<tr>
<td>寒冰源计划皮肤</td>
<td>666</td>
<td>50</td>
<td>70%</td>
<td>
<input type="button" value="加入购物车" onclick="addshopping(this);"/>
</td>
</tr>
<tr>
<td>劫源计划皮肤</td>
<td>555</td>
<td>30</td>
<td>60%</td>
<td>
<input type="button" value="加入购物车" onclick="addshopping(this);"/>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: center;color: red;">LOL皮肤选购</td>
</tr>
</tfoot>
</table>
<h1>购物车</h1>
<table>
<thead>
<tr>
<th>商品名</th>
<th>商品单价</th>
<th>商品数量</th>
<th>商品总价</th>
<th>操作</th>
</tr>
</thead>
<tbody id="goods">
</tbody>
<tfoot>
<tr>
<td colspan="3">总价：</td>
<td colspan="2" id="total"></td>
</tr>
</tfoot>
</table>
</body>
</html>
270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
