JavaScript初探一
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table {
border: 1px solid #0094ff;
}
</style>
<script type="text/javascript">
//00.注意,js代码无差别折叠,ctrl+m+h
//01.js代码写在javascript标签中,一般放在 head标签里面(约定_规范),放在其他地方也行
//02.js中定义变量, var关键字,js中定义对象,new Object()
var fox = 123;
var foxage = 18.5;
var foxSex = true;
var foxName = "狐狸一号";
var people = new Object();
people.skill = "吃饭饭";
//03.js中 对象的字面量表示法
var animal = {
skill: "打小动物", height: "18cm"
}
//04.js中 数组长度可变
//js中的数组,可以放任意元素
//js中,变量定义了,未赋值 就是 undefined
var numArr = new Array();
// alert(numArr.length);
numArr.length = 10000;
//alert(numArr.length);
numArr[0] = "小二黑";
numArr[9999] = 998;
//alert(numArr[0] + "||" + numArr[9999] + "||" + numArr[2]);
var haha;
// alert(haha)
//05.判断语句
// string true 数字(除0以外) 对象 数组
// false 0 undefined null NaN
//var smallFox = "胡二皓";
//if (null) {
// alert("这是大女儿");
//} else {
// alert("这是二小姐");
//}
//06.选择语句
//写法 跟c#类似,但是 break 可以不写,会直接向下执行
//var nowDay="星期一";
//switch (nowDay) {
// case "星期一":
// alert("睡觉觉");
// case "星期二", "星期三", "星期四":
// alert("上班班");
// break;
// default:
//}
//07.循环语句
//07.1for c#一样
for (var i = 0; i < 2; i++) {
// alert("捏方便面_哈哈");
}
//07.2while循环 do while
//while (true) {
//}
//do {
//}
//while(true)
//07.3for in 循环
//没有办法tab出来 需要自己写,
//一般用来循环对象
//item 访问到的是属性名,通过对象[属性名]可以取到属性值
//var lunch = {
// food1:"白切鸡",food2:"叉烧饭",food3:"叉烧猪脚双拼"
//}
//for (var item in lunch) {
// alert(item + ":" + lunch[item]);
//}
//08方法(函数)的定义
//命名规范跟c#一样
//形参 和实参可以不匹配,
//如果定义了形参,不传,那么就是undeifned
//如果传多了,只能接收到形参个数一样的实参
//无参无返回值的方法
function SayHi() {
//alert("成龙大哥好啊");
}
//有参无返回值
function EatFood(foodName) {
alert("水煮肉片,味道不错" + foodName + "味道也可以");
}
//EatFood(123);
//有参,又返回值
//js方法有一个默认的返回值 undefined
//也可以理解成,定义变量.未赋值,就是undefined
function BuyFood(money) {
if (money > 5 && money < 10) {
return "兰州拉面";
}
else if (money >= 10) {
return "水煮肉片";
}
}
var someFood = BuyFood("铁板牛肉");
// alert(SayHi());
//09.重要 js中方法也是对象
//可以new出来
//可以为方法对象添加属性
var peopleRun = new Function("alert('123');");
// peopleRun();
peopleRun.sayhi = "1233";
function peopleEatFood() {
alert("肚子饿了,吃饭饭");
}
peopleRun.eatFood = peopleEatFood;
// peopleRun.eatFood();
//匿名函数
//没有名字的函数
peopleEatFood.jump = function () {
alert("大跳,大跳");
}
peopleEatFood.jump();
</script>
</head>
<body>
<table>
<tr>
<td>姓名</td>
</tr>
</table>
</body>
</html>
全局函数
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
//01.alert()输出内容
//02.confirm()选择的框,形参是提示信息,选择确定,返回true 选择取消返回false
//var eatOrNot = confirm("今天中午吃饭吗?");
// alert(eatOrNot);
//03.prompt()输入框,第一个形参,提示信息,第二个形参默认值
//点击确定,获取文本内容,点击取消就为null
//var sleepWhere = prompt("今天中午睡哪里?", "教室我看就不错");
//alert(sleepWhere);
//小练习 让用户依次输入两个数字,然后将这两个数字的和打印给用户看 友情提示,运算符,跟c#一样
var num1 = parseInt( prompt("请输入第一个数字"));
var num2 = parseInt( prompt("请输入第二个数字"));
alert(num1 + num2);
//04.转型parseInt()
//数字,直接转换成数字
//数字+字母,从左往右转换,直到遇到字母,就跳出
//字母+数字,NaN not a num
//alert(parseInt(prompt("请随便输入")));
//alert(parseFloat(prompt("请随便输入")));
//05.math这个函数里面提供了一些数学方法,比如四舍五入,天花板函数
//06.转换数字的新方法
//Number() int float 直接转换 但是不能转换 字母和数字拼接的
// alert(Number(prompt("请输入一些东西")) + 1);
if (Number("abc")) {
alert("对了");
} else {
alert("不对哦");
}
</script>
</head>
<body>
</body>
</html>
dom元素初识
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<input type="button" value="点击吃饭饭" id="btnEatFood" name="ha"/>
<br />
<label>食物名称:</label>
<input type="text" id="foodName" />
</body>
</html>
<script type="text/javascript">
//00.alert可以阻断浏览器线程,其他的弹窗也会阻断线程
//01.通过id获取dom元素
//alert("稍微等一会");
//01.通过id获取dom对象
//document.getElementById("btnEatFood");通过id获取单个对象
//dom元素的属性可读可写
//var inputObj = document.getElementById("btnEatFood");
//inputObj.value = "晚上好好睡觉";
//inputObj.type = "text";
//inputObj.name = "捏哈哈";
// alert(inputObj.value);
//02.元素事件
document.getElementById("btnEatFood").onclick = function () {
alert("大家好,马上吃午饭了");
//获取文本框里面的文本质
alert(document.getElementById("foodName").value);
}
</script>
小练习
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<label>数字1</label>
<input type="text" id="num1" />
<br />
<label>数字2</label>
<input type="text" id="num2" />
<br />
<input type="button" id="sum" value="点击求和" />
<table>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
//01.添加点击事件
document.getElementById("sum").onclick = function () {
//获取两个文本框里面的值 加起来,给用户看
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
alert(parseInt(num1) + parseInt(num2));
}
</script>
dombom
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<ol>
<li id="apple" class="fruit" >小苹果</li>
<li class="fruit">小榴莲</li>
<li id="vegettableOne">小南瓜</li>
<li id="Twodog" class="littleDog">小哈士奇</li>
</ol>
</body>
</html>
<script type="text/javascript">
// window.location = "http://www.baidu.com";
// window.close();
//01.window对象相当于是页面中的顶级对象,
//如果是通过window.xx 的方式写出来的变量 可以省略掉 window.
//我们定义的所有 全局 变量,都相当于为window对象添加属性
window.sayHi = "123";
var fox = "小狐狸";
function sayHello() {
var people = "火星人";
}
//----------分割线=-----------------------------------
//02.dom对象时存放在 window对象的document属性下面
//document对象为我们提供了很多种获取dom元素的方式
//02.1byid 通过id获取单个dom元素
//双标签里面的文本值,通过innerHTML修改
// document.getElementById("apple").innerHTML = "西兰花";
//02.2byClass 获取所有符合 class的 元素 返回的是dom数组无论元素个数是多少个
//注意:写js代码的时候,可能出现没有智能提示---不要不敢写哦
var fruitObjs = document.getElementsByClassName("fruit");
for (var i = 0; i < fruitObjs.length; i++) {
fruitObjs[i].innerHTML = "西洋菜";
}
// document.getElementsByClassName("littleDog").innerHTML = "大哈士奇";
//02.3byTagName获取的也是dom数组
//修改样式,必须通过style点出来,如果在css中 是 background-color的写法 需要改写为 backgroundColor
var liObjs = document.getElementsByTagName("li");
for (var i = 0; i < liObjs.length; i++) {
liObjs[i].style.color = "yellow";
liObjs[i].style.backgroundColor = "#0094ff";
}
//----------分割线=--------------------------s---------
//----------分割线=-----------------------------------
</script>
this
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<input type="button" value="点击明天休息" id="tomorrowSleep"/>
</body>
</html>
<script type="text/javascript">
//js中方法体里面的this 看 这个方法由谁点出来
document.getElementById("tomorrowSleep").onclick = function () {
alert(this.value);
}
//用户点击按钮的时候 浏览器调用了 document.getElementById("tomorrowSleep").onclick();
function sayHello() {
alert(this.value+"1");
}
window.sayHello();
//js中重新为元素属性复制,会覆盖之前的
document.getElementById("tomorrowSleep").onclick = sayHello;
</script>
HTMLText
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div style="height: 100px; width: 100px; border: 1px solid #0094ff" id="divBox">
<input type="button" value="测试用按钮1" />
<input type="button" value="测试用按钮2" />
<input type="button" value="测试用按钮3" />
</div>
<input type="button" value="HTML" id="btnHTML" />
<input type="button" value="Text" id="btnTEXT" />
</body>
</html>
<script type="text/javascript">
//innerHTML如果设置的是 符合html规范的标签,那么浏览器会解析成html代码
//可以使用InnerHTML来清空某些元素内部的所有元素
document.getElementById("btnHTML").onclick = function () {
var inputStr = prompt("请输入内容_HTML");
//设置给div
document.getElementById("divBox").innerHTML = inputStr;
}
//innerText不管输入什么,都当成字符串
//innerText火狐不支持 contextText(火狐用)
//后面做开发用的是jq
document.getElementById("btnTEXT").onclick = function () {
var inputStr = prompt("请输入内容_Test");
//设置给div
document.getElementById("divBox") = inputStr;
}
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
ol {
list-style: none;
text-align: center;
}
li {
border: 1px solid #0094ff;
width: 200px;
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<input type="button" id="btnAdd" value="追加li标签" />
<input type="button" id="btnRemove" value="删除选中li标签" />
<input type="button" id="btnInsert" value="制定位置插入li标签" />
<ol id="olList">
<li>红烧排骨</li>
<li>糖醋里脊</li>
<li>剁椒鱼头</li>
<li>驴肉火烧</li>
<li>鱼香肉丝</li>
</ol>
</body>
</html>
<script type="text/javascript">
//选中的li标签;
var liSelected;
//-----------风格线-下面是方法上面是变量--------
//00.为所有的li标签 添加点击事件
var liObjs = document.getElementsByTagName("li");
//为每一个li标签设置点击事件
for (var i = 0; i < liObjs.length; i++) {
liObjs[i].onclick = highSel;
}
//01.为新增按钮添加点击事件
document.getElementById("btnAdd").onclick = function () {
//01.创建dom元素
var liCreate = document.createElement("li");
//02.接受用户输入,并且将用户输入设置到创建的li标签中
liCreate.innerHTML = prompt("请输入问本值");
//03.追加到ol标签里面
document.getElementById("olList").appendChild(liCreate);
//04设置点击事件
liCreate.onclick = highSel;
}
//02.为删除按钮添加点击事件
//dom元素的删除,注意,不能自杀,需要他杀-通过父元素的 removeChild方法来删除
//dom元素.removeChild方法来删除 只是将dom元素从dom树里面移除,dom元素还在内存中
document.getElementById("btnRemove").onclick = function () {
//02.1测试删除代码
//var liObjs = document.getElementsByTagName("li");
//document.getElementById("olList").removeChild(liObjs[0]);
//调用ol标签的删除放发
document.getElementById("olList").removeChild(liSelected);
//将liselected设置为undifned
liSelected = undefined;
}
//03.为插入按钮 添加点击事件
//注意,insertBefore在指定位置插入dom元素 父元素点出来的
//如果不传指定元素位置,那么在最后追加
document.getElementById("btnInsert").onclick = function () {
//01.创建dom元素
var liCreate = document.createElement("li");
//02.接受用户输入,并且将用户输入设置到创建的li标签中
var inputStr = prompt("请输入问本值");
//判断文本的正确性
if (inputStr == null||inputStr.trim()=="") {
return;
}
//如果不为空才设置
liCreate.innerHTML = inputStr;
//03.插入到指定的位置到
document.getElementById("olList").insertBefore(liCreate, liSelected);
//04设置点击事件
liCreate.onclick = highSel;
}
//修改逻辑
//01.判断是否选中li标签
//02.创建一个文本框
//03.设置文本框的.value
//04.将文本框追加到li标签里面
//05.设置文本框的失去焦点事件onblur
//05.1失去焦点的时候,获取文本框的value值,设置给li标签
//------------全局函数
//高亮选中方法
function highSel () {
//这里的this就是点击的那个li标签
liSelected = this;
//还原其他的li标签的颜色
for (var j = 0; j < liObjs.length; j++) {
liObjs[j].style.color = "black";
}
//高亮显示选中
this.style.color = "pink";
}
</script>
编辑
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<input type="button" value="修改选中" id="btnEdit" />
<ol>
<li>小苹果</li>
<li>小西瓜</li>
</ol>
</body>
</html>
<script type="text/javascript">
//全局变量 保存点击的li标签
var liSelect = undefined;
//添加高亮选中方法
var liObjs = document.getElementsByTagName("li");
for (var i = 0; i < liObjs.length; i++) {
liObjs[i].onclick = function () {
//还原其他
for (var j = 0; j < liObjs.length; j++) {
liObjs[j].style.backgroundColor = "white";
}
this.style.backgroundColor = "pink";
//为全局变量赋值
liSelect = this;
}
}
//为修改按钮添加点击事件
document.getElementById("btnEdit").onclick = function () {
//创建一个input标签
var inputEdit = document.createElement("input");
//设置input标签的value值
inputEdit.value = liSelect.innerHTML;
//清空
liSelect.innerHTML = "";
//将input标签追加到li标签里面
liSelect.appendChild(inputEdit);
//让文本框获得焦点
inputEdit.focus();
//为文本框添加失去焦点事件
inputEdit.onblur = function () {
if (inputEdit.value.trim()=="") {
alert("不能为空");
this.focus();
return;
}
//将文本框的value值 设置给li标签的html值
liSelect.innerHTML = this.value;
}
}
</script>
