JavaScript基础
Posted RobotsRising
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript基础相关的知识，希望对你有一定的参考价值。
1、javascript存在形式
1.1、直接放在html文件的head中
<script type="text/javascript"> alert(123); </script>
1.2、保存在文件中
html调用方式： <script src="commons.js"></script>
1.3、放在html中<body>标签内部的最下方
2、JavaScript基本语法
2.1、变量
name = "Trump"，全局变量。
var name="Trump"，局部变量
2.2、基本数据类型
a. 数字
a = 18
b. 字符串
a = "Trump"；
a.chartAt(索引位置)；
a.substirng(起始位置,结束位置)；
a.lenght：获取当前字符串长度。
c. 列表（数组）
a = [1,2,3]
d. 字典（对象）
e. 布尔类型
小写，true；false。
2.3、条件语句
a. if语句
if(条件){ }else if(){ }else{ }
b. 条件
== ： 值相等；
===：值和类型都相等；
&&：与；
||：或；
！：非。
2.4、for循环
a. 第一种循环：循环时，循环的元素是索引
a = [11,22,33,44]; for(var item in a){ console.log(a[item]); }
a = [\'k1\':\'v1\',\'k2\':\'v2\']; for(var item in a){ console.log(a[item]); }
b. 第二种循环：
这种循环不支持字典。
a = [11,22,33,44]; for(var i=0;i<a.length; i++){ console.log(a[i]); }
2.5、定时器
setInterval("func();",间隔时间);
间隔时间以ms为单位。
2.6、定义函数
定义：function func(a,b,c){ };
调用方式：func(1,2,3);
2.7、其他
alert()：弹窗；
console.log()：在console中输出内容。
3、HTML中DOM的
通过 HTML DOM，可以使用JavaScript 访问HTML 文档的所有元素。
具体内容见：https://www.cnblogs.com/bad-robot/p/9316550.html
4、JavaScript实例
4.1、实例1
JavaScript的基本使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .welcome{ color: red; font-weight: bold; background-color: blanchedalmond; text-align: center; } .pg-header{ display: inline-block; float: left; width: 20%; } </style> </head> <body> <div id="i1" class="welcome">欢迎大家登录淘宝商城</div> <div id="header" style="height: 48px; line-height: 48px; margin: 0 auto; background-color: #1a66b3;"> a <span id="item1" class="pg-header">男装</span>b <span id="item2" class="pg-header">女装</span>c <span id="item3" class="pg-header">男鞋</span>d <span id="item4" class="pg-header">女鞋</span>e <span id="item5" class="pg-header">箱包</span>f </div> <div> <p>用户登录</p> <input type="text" id="user" name="user"> <input type="password" id="pwd" name="pwd"> <input type="button" onclick="GetData()" value="点我"> </div> <!--网址不存在，加载不成功--> <!--<script src="https://www.gstasdfasdfc.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>--> <!--打开网页后在弹出框中显示“123”--> <!--<script type="text/javascript" src="javascript/commons.js">--> <script type="text/javascript" > function GetData() { var i = document.getElementById("user"); // alert(i.value); // alert(i.parentElement.innerText); // alert(i.nextElementSibling.nextElementSibling.value); // alert(i.parentElement.previousElementSibling.innerHTML); // alert(i.parentElement.previousElementSibling.firstChild.textContent); alert(i.parentElement.previousElementSibling.firstElementChild.innerText); } // 格式转换 age = "18"; i = parseInt(age); j = parseFloat(age); // alert(j); // 定时处理 function f1() { console.log(1); } setInterval("f1();",2000); // function func() { // 根据ID获取指定标签的内容， 定义局部变量接收 var tag = document.getElementById("i1") // 获取标签内部的内容 var content = tag.innerText; var first= content.charAt(0); var last = content.substring(1,content.length); var new_content = last + first; tag.innerText = new_content; } setInterval("func();", 1000) </script> </body> </html>
4.2、实例2
使用Javascript实现主机信息的添加、全选、取消、反选、删除功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .main-page{ } .add-page{ position: fixed; width: 400px; height: 300px; left: 50%; top: 50%; margin-left: -200px; margin-top: -150px; background-color: white; z-index: 10; } .shade{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } .hide{ display: none; } .input-box{ width: 300px; height: 60px; text-align: center; line-height: 60px; } </style> </head> <body style="margin: 0"> <div id="main-page" class="main-page"> <div id="menu"> <input id="add_button" type="button" value="添加" onclick="add_info();"> <input id="all_button" type="button" value="全选" onclick="select_all();"> <input id="cancel_button" type="button" value="取消" onclick="cancel();"> <input id=invert_button" type="button" value="反选" onclick="invert_select();"> <input id=delete_button" type="button" value="删除" onclick="delete_info();"> </div> <div id="table"> <table> <thead> <tr> <th>请选择</th> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>192.168.1.1</td> <td>8080</td> </tr> <tr> <td><input type="checkbox"></td> <td>192.168.22.8</td> <td>5000</td> </tr> <tr> <td><input type="checkbox"></td> <td>192.128.16.5</td> <td>9000</td> </tr> </tbody> </table> </div> </div> <div id="add-page" class="add-page hide"> <div> <div class="input-box"> <label for="host">主机名</label> <input id="host" type="text" name="host"> </div> <div class="input-box"> <label for="port">端 口</label> <input id="port" type="text" name="port"> </div> <div class="input-box"> <input type="submit" value="提交" onclick="submit_info()"> <input type="submit" value="取消" onclick="cancel_info()"> </div> </div> </div> <div id="shade-page" class="shade hide"> </div> <script> function add_info() { var tag_1 = document.getElementById("add-page"); tag_1.classList.remove("hide"); var tag_2 = document.getElementById("shade-page"); tag_2.classList.remove("hide") } function select_all() { var tag = document.getElementById("table"); var trs = tag.firstElementChild.lastElementChild.children; for(var i=0;i<trs.length;i++){ var checkbox = trs[i].firstElementChild.firstElementChild; checkbox.checked = true; } } function cancel() { var tag = document.getElementById("table"); var trs = tag.firstElementChild.lastElementChild.children; for(var i=0;i<trs.length;i++){ var checkbox = trs[i].firstElementChild.firstElementChild; if(checkbox.checked){ checkbox.checked = false } } } function invert_select() { var tag = document.g以上是关于JavaScript基础的主要内容，如果未能解决你的问题，请参考以下文章