文章目录
javascript （数据类型，方法）
- javascript:客户端的一个脚本语言
- js是一门弱类型的语言（弱类型语言：变量的数据类型会根据赋的值的类型决定）
- 基本数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。
4.定义一个函数 function+方法名([参数]){} 无返回值类型，参数无类型
<html>
<head>
<meta charset="GBK">
<script language="javascript">
//javascipt中如何定义变量
//var str = "hello world";
/*//引用数据类型
var person = new Object();
person.id = "51515";
person.name = "张三";
alert(person.id+"_"+person.name);
*/
//定义一个函数 function+方法名([参数]){} 无返回值类型，参数无类型
function hello(name){
return "hello to" + name;
}
alert(hello("张三"));
</script>
</head>
<body>
</body>
</html>
<!--
1. javascript:客户端的一个脚本语言
2. js是一门弱类型的语言（弱类型语言：变量的数据类型会根据赋的值的类型决定）
3. 基本数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。
-->
javascrip使用
1.JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
2. 点击按钮触发事件
<body>
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
//window 当前窗口
//document 当前窗口的页面
//表示当前的页面加载完会实现一个匿名的函数
window.onload=function(){
//当页面加载完成，我们需要绑定各种事件
//根据id获取到表格
var fruitTbl = document.getElementById("tb1_fruit");
//获取表格中的所有行
var rows = fruitTbl.rows;
for(var i = 0;i<rows.length;i++){
var tr = rows[i];
//1.绑定鼠标悬浮设置背景颜色事件
//showBGColor没有小括号，表示鼠标悬浮时，绑定此事件，而不是执行此事件
tr.onmouseover = showBGColor;//(没有小括号)
tr.onmouseout = clearBGColor;//(没有小括号)
//获取tr这一行的所有单元格
var cells = tr.cells;
var priceID = cells[1];
//2. 绑定鼠标悬浮在单价格手势的事件
priceID.onmouseover = showHand;
}
}
/*
当鼠标悬浮时，显示背景颜色
*/
function showBGColor(){
//event：当前发生的事件
//event.srcElemnt:事件源
//alert(event.srcElement);
//为什么是TD,因为事件传递
//alert(event.srcElement.tagName); //TD
if(event && event.srcElement && event.srcElement.tagName == "TD"){
var td = event.srcElement;
//td.parentElement表示获取td的父元素->TR
var tr = td.parentElement;
//如果想通过js代码设置某节点的样式，则需加上.style
tr.style.backgroundColor = "navy";
//tr.cells 表示获取这个tr中的所有的单元格
var tds = tr.cells;
for(var i = 0;i<tds.length;i++){
tds[i].style.color="while";
}
}
}
//当鼠标离开时，恢复原始样式
function clearBGColor(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement;
var tr = td.parentElement;
//透明色
tr.style.backgroundColor="transparent";
var tds = tr.cells;
for(var i = 0;i<tds.length;i++){
tds[i].style.color="green";
}
}
}
//当鼠标悬浮在单价单元格时，显示手势
function showHand(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement;
//cursor:光标 hand:手势形状
td.style.cursor="hand";
}
}
/*--
1.JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
2. 点击按钮触发事件
<body>
<button οnclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
</body>
3. （1）JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法
（2） document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
（3）innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
4.
使用 document.write() 可以向文档写入内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
5. //window 当前窗口
//document 当前窗口的页面
//表示当前的页面加载完会实现一个匿名的函数
*/
javascrip使用进阶
HTML代码
<html>
<head>
<meta charset="GBK">
<link rel="stylesheet" href="D:\JavaWeb学习\demo1.css">
<script type="text/javascript" src="D:\JavaWeb学习\javascriptdemo9.js">
</script>
</head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<table id="tb1_fruit">
<tr> <!--行-->
<th class="w20">名称</th>
<th class="w20">单价</th>
<th class="w20">数量</th>
<th class="w20">小计</th>
<th class="w20">操作</th>
</tr>
<tr>
<td>苹果</td>
<td>5</td>
<td>20</td>
<td>100</td>
<td><img src="D:\JavaWeb学习\girl4\all.jpg" width="40" height="40"/></td>
</tr>
<tr>
<td>西瓜</td><input type='text' size='4'/>
<td>3</td>
<td>20</td>
<td>60</td>
<td><img src="D:\JavaWeb学习\girl4\all.jpg" width="40" height="40"/></td>
</tr>
<tr>
<td>菠萝</td>
<td>6</td>
<td>20</td>
<td>120</td>
<td><img src="D:\JavaWeb学习\girl4\all.jpg" width="40" height="40"/></td>
</tr>
<tr>
<td>榴莲</td>
<td>50</td>
<td>3</td>
<td>150</td>
<td><img src="D:\JavaWeb学习\girl4\all.jpg" width="40" height="40"/></td>
</tr>
<tr>
<td>总计</td>
<td colspan="4">999</td>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS代码
body{
margin:0;
padding:0;
}
/*全部都是相对布局*/
div{
position:relative;
float:left;
}
#div_container{
width:80%;
height:100%;
border:0px solid blue;
margin-left:10%;
float:left;
}
#tb1_fruit{
width:100%;
border:1px solid gray;
line-height:28px;
margin-top:120px;
margin-left:20%;
}
#tb1_fruit,#tb1_fruit tr,#tb1_fruit th,#tb1_fruit td{
border:1px solid gray;
border-collapse:collapse;
text-align:center;
font-size:16px;
font-family:"黑体";
font-weight:lighter;
color:green;
}
#div_fruit_list{
width:100%;
}
.w20{
width:20%;
}
.delImg{
width:10px;
height:10px;
}
javascript代码
//window 当前窗口
//document 当前窗口的页面
//表示当前的页面加载完会实现一个匿名的函数
window.οnlοad=function(){
//当页面加载完成，我们需要绑定各种事件
//根据id获取到表格
var fruitTbl = document.getElementById("tb1_fruit");
//获取表格中的所有行
var rows = fruitTbl.rows;
for(var i = 1;i<rows.length-1;i++){
var tr = rows[i];
//1.绑定鼠标悬浮设置背景颜色事件
//showBGColor没有小括号，表示鼠标悬浮时，绑定此事件，而不是执行此事件
tr.onmouseover = showBGColor;//(没有小括号)
tr.onmouseout = clearBGColor;//(没有小括号)
//获取tr这一行的所有单元格
var cells = tr.cells;
var priceID = cells[1];
//2. 绑定鼠标悬浮在单价格手势的事件
priceID.onmouseover = showHand;
//3.绑定鼠标点击单价单元格的事件，触发出现文本框，编辑修改单价
priceID.οnclick=editPrice;
}
}
/*
当鼠标悬浮时，显示背景颜色
*/
function showBGColor(){
//event：当前发生的事件
//event.srcElemnt:事件源
//alert(event.srcElement);
//为什么是TD,因为事件传递
//alert(event.srcElement.tagName); //TD
if(event && event.srcElement && event.srcElement.tagName == "TD"){
var td = event.srcElement;
//td.parentElement表示获取td的父元素->TR
var tr = td.parentElement;
//如果想通过js代码设置某节点的样式，则需加上.style
tr.style.backgroundColor = "navy";
//tr.cells 表示获取这个tr中的所有的单元格
var tds = tr.cells;
for(var i = 0;i<tds.length;i++){
tds[i].style.color="while";
}
}
}
//当鼠标离开时，恢复原始样式
function clearBGColor(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement;
var tr = td.parentElement;
//透明色
tr.style.backgroundColor="transparent";
var tds = tr.cells;
for(var i = 0;i<tds.length;i++){
tds[i].style.color="green";
}
}
}
//当鼠标悬浮在单价单元格时，显示手势
function showHand(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement;
//cursor:光标 hand:手势形状
td.style.cursor="hand";
}
}
//当鼠标点击单价单元格时进行编辑修改
function editPrice(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var priceID = event.srcElement;
//nodeType==3表示为文本节点，ElementNode(元素节点)：1。目的时判断当前priceID有子节点，而且第一个节点是文本节点，
if(priceID.firstChild && priceID.firstChild.nodeType==3){
//innerText 表示设置或者获取当前节点的内部文本
var oldPrice = priceID.innerText;
//innerHTML 表示设置当前的节点的内部HTML
priceID.innerHTML="<input type='text' size='4'/>";
//<td><input type='text' size='4'/></td>
var input = priceID.firstChild;
if(input.tagName=="INPUT"){
input.value = oldPrice;
//选中输入框内部的文本(自动选中输入框内的文本)
input.select();
//绑定输入框失去焦点事件，失去焦点，更新单价
//onblur:表示失去焦点
input.οnblur=updatePice;
}
}
}
}
function updatePice(){
if(event && event.srcElement && event.srcElement.tagName=="INPUT"){
var input = event.srcElement;
//得到输入到输入框中输入的新的价格
var newPrice = input.value;
//拿到input的父节点td;
var priceTD = input.parentElement;
priceTD.innerText = newPrice;
//更新当前的小计这一个格子的值
//priceTD.parentElement td的父元素是tr
updateXJ(priceTD.parentElement);
}
}
//更新指定行的小计
function updateXJ(tr){
if(tr && tr.tagName=="TR"){
var tds = tr.cells;
var price= tds[1].innerText;
var count = tds[2].innerText;
//由于innerText获取到的是字符串，则通过parseInt()强转为int类型
var xj = parseInt(price) * parseInt(count);
tds[3].innerText = xj;
//更新总计
updateZJ();
}
}
//更新总计
//rows 行
//cells 列
function updateZJ(){
var fruitTbl = document.getElementById("tb1_fruit");
//获取列
var rows = fruitTbl.rows;
var sum = 0;
//0为表头,length-1为总计
/*
如何取到一列数，先找到所在的行，在该行的第几个即为所找值
*/
for(var i = 1;i<rows.length-1;i++){
//取到某一行
var tr = rows[i];
//通过列，取到这一行，对应的列
var xj = parseInt(tr.cells[3].innerText);
sum = sum + xj;
}
rows[rows.length-1].cells[1].innerText = sum;
}
/*--
1.JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
2. 点击按钮触发事件
<body>
<button οnclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
</body>
3. （1）JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法
（2） document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
（3）innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
4.
使用 document.write() 可以向文档写入内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
5. //window 当前窗口
//document 当前窗口的页面
//表示当前的页面加载完会实现一个匿名的函数
*/
javascrip使用进阶2
HTML代码
<html>
<head>
<meta charset="GBK">
<link rel="stylesheet" href="D:\JavaWeb学习\demo1.css">
<script type="text/javascript" src="D:\JavaWeb学习\javascriptdemo9.js">
</script>
</head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<table id="tb1_fruit">
<tr> <!--行-->
<th class="w20">名称</th>
<th class="w20">单价</th>
<th class="w20">数量</th>
<th class="w20">小计</th>
<th class="w20">操作</th>
</tr>
<tr>
<td>苹果</td>
<td>5</td>
<td>20</td>
<td>100</td>
<td><img src="D:\JavaWeb学习\girl4\all.jpg" width="40" height="40"/></td>
</tr>
<tr>
<td>西瓜</td><input type='text' size='4'/>
<td>3</td>
<td>20</td>
<td>60</td>
<td><img src="D:\JavaWeb学习\girl4\all.jpg" width="40" height="40"/></td>
</tr>
<tr>
<td>菠萝</td>
<td>6</td>
<td>20</td>
<td>120</td>
<td><img src="D:\JavaWeb学习\girl4\all.jpg" width="40" height="40"/></td>
</tr>
<tr>
<td>榴莲</td>
<td>50</td>
<td>3</td>
<td>150</td>
<td><img src="D:\JavaWeb学习\girl4\all.jpg" width="40" height="40"/></td>
</tr>
<tr>
<td>总计</td>
<td colspan="4">999</td>
</tr>
</table>
<hr/>
<div id="add_fruit_div"></div>
<table>
<tr>
<td>名称：</td>
<td><input type="text" id='fname' /></td>
</tr>
<tr>
<td>单价：</td>
<td><input type="text" id='price' /></td>
</tr>
<tr>
<td>数量：</td>
<td><input type="text" id='fcount' /></td>
</tr>
<tr>
<td><input type="button" class="btn" value="添加"/></td>
<td><input type="button" class="btn" value="充填"/></td>
</tr>
</table>
</div>
</div>
</body>
</html>
javascrip代码
//window 当前窗口
//document 当前窗口的页面
//表示当前的页面加载完会实现一个匿名的函数
window.οnlοad=function(){
//当页面加载完成，我们需要绑定各种事件
//根据id获取到表格
var fruitTbl = document.getElementById("tb1_fruit");
//获取表格中的所有行
var rows = fruitTbl.rows;
for(var i = 1;i<rows.length-1;i++){
var tr = rows[i];
//1.绑定鼠标悬浮设置背景颜色事件
//showBGColor没有小括号，表示鼠标悬浮时，绑定此事件，而不是执行此事件
tr.onmouseover = showBGColor;//(没有小括号)
tr.onmouseout = clearBGColor;//(没有小括号)
//获取tr这一行的所有单元格
var cells = tr.cells;
var priceID = cells[1];
//2. 绑定鼠标悬浮在单价格手势的事件
priceID.onmouseover = showHand;
//3.绑定鼠标点击单价单元格的事件，触发出现文本框，编辑修改单价
priceID.οnclick=editPrice;
//7.绑定删除小图标的点击事件
var img = cells[4].firstChild;
if(img && img.tagName=="IMG"){
//绑定单击事件
img.onclick = delFruit;
}
}
}
//删除
function delFruit(){
if(event && event.srcElement && event.srcElement.tagName == "IMG"){
//alert表示弹出一个对话框，只有确定按钮
//confirm表示弹出一个对话框，有确定和取消按钮。当点击确定，返回true,否则返回false;
if(window.confirm("是否确认删除当前记录")){
var img = event.srcElement;
var tr = img.parentElement.parentElement;
var fruitTbl = document.getElementById("tb1_fruit");
fruitTbl.deleteRow(tr.rowIndex);
updateZJ();
}
}
}
/*
当鼠标悬浮时，显示背景颜色
*/
function showBGColor(){
//event：当前发生的事件
//event.srcElemnt:事件源
//alert(event.srcElement);
//为什么是TD,因为事件传递
//alert(event.srcElement.tagName); //TD
if(event && event.srcElement && event.srcElement.tagName == "TD"){
var td = event.srcElement;
//td.parentElement表示获取td的父元素->TR
var tr = td.parentElement;
//如果想通过js代码设置某节点的样式，则需加上.style
tr.style.backgroundColor = "navy";
//tr.cells 表示获取这个tr中的所有的单元格
var tds = tr.cells;
for(var i = 0;i<tds.length;i++){
tds[i].style.color="while";
}
}
}
//当鼠标离开时，恢复原始样式
function clearBGColor(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement;
var tr = td.parentElement;
//透明色
tr.style.backgroundColor="transparent";
var tds = tr.cells;
for(var i = 0;i<tds.length;i++){
tds[i].style.color="green";
}
}
}
//当鼠标悬浮在单价单元格时，显示手势
function showHand(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement;
//cursor:光标 hand:手势形状
td.style.cursor="hand";
}
}
//当鼠标点击单价单元格时进行编辑修改
function editPrice(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var priceID = event.srcElement;
//nodeType==3表示为文本节点，ElementNode(元素节点)：1。目的时判断当前priceID有子节点，而且第一个节点是文本节点，
if(priceID.firstChild && priceID.firstChild.nodeType==3){
//innerText 表示设置或者获取当前节点的内部文本
var oldPrice = priceID.innerText;
//innerHTML 表示设置当前的节点的内部HTML
priceID.innerHTML="<input type='text' size='4'/>";
//<td><input type='text' size='4'/></td>
var input = priceID.firstChild;
if(input.tagName=="INPUT"){
input.value = oldPrice;
//选中输入框内部的文本(自动选中输入框内的文本)
input.select();
//绑定输入框失去焦点事件，失去焦点，更新单价
//onblur:表示失去焦点
input.οnblur=updatePice;
//8.在输入框上绑定键盘按下的事件，在此需要保证用户输入的是数字
input.οnkeydοwn=ckInput;
}
}
}
}
//检验键盘按下的值
function ckInput(){
var kc = event.keyCode;
//console:控制台 log:打印到控制台
//0~9对应 48~57
//backspace空格：8
//enter：13
//console.log(kc);
if(!(( kc>=48 && kc<=57) || kc==8 || kc==13)){
event.returnValue=false;
}
if(kc==13){
event.srcElement.blur();
}
}
function updatePice(){
if(event && event.srcElement && event.srcElement.tagName=="INPUT"){
var input = event.srcElement;
//得到输入到输入框中输入的新的价格
var newPrice = input.value;
//拿到input的父节点td;
var priceTD = input.parentElement;
priceTD.innerText = newPrice;
//更新当前的小计这一个格子的值
//priceTD.parentElement td的父元素是tr
updateXJ(priceTD.parentElement);
}
}
//更新指定行的小计
function updateXJ(tr){
if(tr && tr.tagName=="TR"){
var tds = tr.cells;
var price= tds[1].innerText;
var count = tds[2].innerText;
//由于innerText获取到的是字符串，则通过parseInt()强转为int类型
var xj = parseInt(price) * parseInt(count);
tds[3].innerText = xj;
//更新总计
updateZJ();
}
}
//更新总计
//rows 行
//cells 列
function updateZJ(){
var fruitTbl = document.getElementById("tb1_fruit");
//获取列
var rows = fruitTbl.rows;
var sum = 0;
//0为表头,length-1为总计
/*
如何取到一列数，先找到所在的行，在该行的第几个即为所找值
*/
for(var i = 1;i<rows.length-1;i++){
//取到某一行
var tr = rows[i];
//通过列，取到这一行，对应的列
var xj = parseInt(tr.cells[3].innerText);
sum = sum + xj;
}
rows[rows.length-1].cells[1].innerText = sum;
}
/*--
1.JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
2. 点击按钮触发事件
<body>
<button οnclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
</body>
3. （1）JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法
（2） document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
（3）innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
4.
使用 document.write() 可以向文档写入内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
5. //window 当前窗口
//document 当前窗口的页面
//表示当前的页面加载完会实现一个匿名的函数
*/
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
