版权声明:原创作品转载必须标明出处,谢谢配合! https://blog.csdn.net/qq_38704184/article/details/85008792
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>