首页 > 代码库 > JavaScript初探一
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="http://www.mamicode.com/点击吃饭饭" 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 = "http://www.mamicode.com/晚上好好睡觉"; //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="http://www.mamicode.com/点击求和" /> <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="http://www.mamicode.com/点击明天休息" 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="http://www.mamicode.com/测试用按钮1" /> <input type="button" value="http://www.mamicode.com/测试用按钮2" /> <input type="button" value="http://www.mamicode.com/测试用按钮3" /> </div> <input type="button" value="http://www.mamicode.com/HTML" id="btnHTML" /> <input type="button" value="http://www.mamicode.com/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="http://www.mamicode.com/追加li标签" /> <input type="button" id="btnRemove" value="http://www.mamicode.com/删除选中li标签" /> <input type="button" id="btnInsert" value="http://www.mamicode.com/制定位置插入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="http://www.mamicode.com/修改选中" 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 = http://www.mamicode.com/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>
JavaScript初探一
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。