JS学习：
是独立的语言，浏览器中具有js解释器。
与CSS相似()，JavaScript也可以存在表头(head)，主体(body)及文件(.js)中。
表头：
<head>
<style>
CSS代码
</style>
<scipt>
JS代码
</scipt>
</head>
#<scipt type="text/javasript"> JS代码 </scipt>
#type可写可不写，如果写type，则一定写为"text/javasript"！文件：后缀为“.js”-创建JavaScript文件；文件引用：<script src="#.js"></script>
主体：放置于表的最后
------------------------------------Javasript基本数据类型：
注释：单行-// 多行-/* */
变量：
name ='abc' /*全局变量*/
var name ='zxc' /*局部变量*/
一定要区分清楚，如果非特殊情况，则一定用 var name
数字：
name =18 /*定义数字*/
name ="18" /*字符串*/
i =parseInT(age) /*字符转数字类型*/字符串：
document.getElementById('i1'); #根据keys获取i1的标签
a.innerText; #获取a内容
a.charAt(0); #取索a引值
a.substring(1,x.length); #由索引取a的子序列
a.length #取a长度
a.concat('abcd') #将abcd与a值拼接（append）
a.slice(start,end) #切片
................等等
布尔类型：
布尔值：小写(eg：true/false)
数组（列表）：
a =[1,2,3,4]a.push(ele) #尾部追加元素
a.pop() #尾部获取一个元素
a.unshift(ele) #头部插入一个元素
a.shift() #头部移除一个元素
a.splice(start, deleteCount, value, ....) 插入、删除或替换数组的元素
a.slice() #切片
a.reverse() #反转
a.join(sep) #将数组元素连接起来以构建一个字符串
a.concat(val,......) #连接数组
a.sort() #对数组进行排序
字典：与python无异
---------------循环、条件语句
for循环：
基本循环语句
a =[11,22,33]
for(var item in a){
console.log(item);
}
#循环时，循环的是每个元素的索引值(列表、字典均是如此)，因此要循环每个元素，应是：
for(var item in a){
console.log(a[item]);
}自加语句
a=[11,22,33]
for(var i=0;i<a.length;i+1){
console.log(a[i]);
}
if-else条件语句：
if(1 =='1'){
}else if(1 ==='1'){
}else{
}
#==代表值相等；===代表值和类型都相等逻辑判断符号：
== 相等；=== 值和类型相等；&& and；|| or;
--------------------Dom-直接选择器：将html文件转换成文档对象，(JavaScript下)便于查找
查找元素：
document.getElementById("i1/i2") #根据Id获取单个标签，单数
document.getElementsByName("") #根据name属性获取单个标签
document.getElementsByClassName("c1/c2") #根据class获取单个标签，单数
document.getElementsByTagName("div/a/span") #根据name属性获取标签集合直接找（上）；间接找（下）
parentElement #父节点标签元素
children #所有子标签
firstElementChild #第一个子标签元素
lastElementChild # 最后一个子标签元素
nextElementtSibling #下一个兄弟标签元素
previousElementSibling #上一个兄弟标签元素--------修改(操作)标签：
nnerText：
tag.innerText() ：获取标签内容
tag.innerText =" " ：对标签内容进行重新赋值
className：
tag.className =" " 定义、修改class属性操作
tag.classList.add('样式名') 添加指定样式
tag.classList.remove('样式名') 删除指定样式
onclick：事件
<div οnclick="函数(参)"></div>
alert:：弹窗 alert:()
console.log：输出内容至控制台 console.log()
定时器：
seInterval('执行的代码'，‘间隔时间’)
跑马灯小程序
<body>
<div id="i1">abcdefg</div>
<script>
function func(){
var tag =document.getElementById('i1'); #根据ID获取标签
var content =tag.innerText; #获取内容
var f =content.charAt(0); #取索引值
var l =content.substring(1,content.length); #取索引值
var new_content =l + f;
tag.innerText =new_content;
}
setInterval("func()",500);
</script>
</body>console.log()方法：将参数在页面的控制器中显示
JavaScript程序书写时必须加分号！！！！
------------------JavaScript编程实例
EG：实例-利用遮幕、查、删、增实现动态html对话框
涉及图层使用，属性、选择器的增删改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{ #背景图层
position:fixed;top:0px;left:0px;bottom:0px;right:0px;opacity:0.6;z-index:9;
background-color:black; }
.c2{ #对话框图层
width:400px;height:200px;background-color:white;
position:fixed;left:50%;top:50%;margin-left:-250px;margin-top:-100px;z-index:10; }
.hide{ display:none; } #实现对话框的动态显现
</style>
</head>
<body style="margin:0;">
<div>
<input type="button" value="添加" onclick="show()"/></div>
<div id="i1" class="c1 hide"></div>
<div id="i2" class="c2 hide">
<input type="text"/>
<input type="text"/>
<p>
<input type="button" value="取消" onclick="hidemodel()"/>
<input type="button" value="确定"/>
</p>
</div>
<script>
function show(){
document.getElementById('i1').classList.remove('hide');
document.getElementById('i2').classList.remove('hide'); }
function hidemodel(){
document.getElementById('i1').classList.add('hide');
document.getElementById('i2').classList.add('hide'); }
</script>
</body>
</html>
#onclick="" 点击则....EG：实例-多选项的多选、反选与取消
涉及表格创建，checkbox应用、选择器的增删改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
position:fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
background-color:black;
opacity:0.6;
z-index:9;
}
.c2{
width:400px;height:200px;
background-color:white;
position:fixed;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-100px;
z-index:10;
}
.hide{
display:none;
}
</style>
</head>
<body style="margin:0;">
<div>
<input type="button" value="添加" onclick="show()"/>
<input type="button" value="全选" onclick="chooseall()"/>
<input type="button" value="取消" onclick="cancelall()"/>
<input type="button" value="反选" onclick="reverseall()"/>
<table>
<thead>
<tr>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1.1</td>
<td>191</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1.2</td>
<td>192</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1.3</td>
<td>193</td>
</tr>
</tbody>
</table>
</div>
<div id="i1" class="c1 hide"></div>
<div id="i2" class="c2 hide">
<input type="text"/>
<input type="text"/>
<p>
<input type="button" value="取消" onclick="hidemodel()"/>
<input type="button" value="确定"/>
</p>
</div>
<script>
function show(){
document.getElementById('i1').classList.remove('hide');
document.getElementById('i2').classList.remove('hide');
}
function hidemodel(){
document.getElementById('i1').classList.add('hide');
document.getElementById('i2').classList.add('hide');
}
function chooseall(){
var tbody=document.getElementById('tb');
var tr_list=tbody.children;
for(var i=0;i<tr_list.length;i++){
var current_tr =tr_list[i];
var checkbox =current_tr.children[0].children[0];
checkbox.checked =true;
}}
function cancelall(){
var tbody=document.getElementById('tb');
var tr_list=tbody.children;
for(var i=0;i<tr_list.length;i++){
var current_tr =tr_list[i];
var checkbox =current_tr.children[0].children[0];
checkbox.checked =false;
}}
function reverseall(){
var tbody=document.getElementById('tb');
var tr_list=tbody.children;
for(var i=0;i<tr_list.length;i++){
var current_tr =tr_list[i];
var checkbox =current_tr.children[0].children[0];
if(checkbox.checked){
checkbox.checked =false;
}
else{
checkbox.checked =true;
}
}}
</script>
</body>
</html>EG：实例-创建菜单界面
涉及函数的应用、选择器的增删改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display:none; } .item .header{ height:35px; background-color:#2459a2; color:white; line-height:35px; } </style> </head> <body> <div style="height:48px;"></div> <div style="width:300px;"> <div class="item"> <div id="i1" class="header" onclick="menu('i1')">菜单1</div> <div class="content"> <div>内容1</div> <div>内容1</div> <div>内容1</div> </div> </div> <div class="item"> <div id="i2" class="header" onclick="menu('i2')">菜单2</div> <div class="content hide"> <div>内容2</div> <div>内容2</div> <div>内容2</div> </div> </div> <div class="item"> <div id="i3" class="header" onclick="menu('i3')">菜单3</div> <div class="content hide"> <div>内容3</div> <div>内容3</div> <div>内容3</div> </div> </div> <div class="item"> <div id="i4" class="header" onclick="menu('i4')">菜单4</div> <div class="content hide"> <div>内容4</div> <div>内容4</div> <div>内容4</div> </div> </div> </div> <script> function menu(nid){ var current_header =document.getElementById(nid) //通过形参获取onclick对象 //.parentElement.parentElement.children 获取标签的父父级标签下的所有子标签 var item_list =current_header.parentElement.parentElement.children; console.log(item_list) //上传所有子标签信息至控制台 for(var i=0;i<item_list.length;i++){ var current_item =item_list[i]; current_item.children[1].classList.add('hide'); } //循环每一个子标签，并添加hide隐藏其菜单内容 current_header.nextElementSibling.classList.remove('hide'); //对所点击的标签（菜单），移除hide，使其菜单内容显示 } </script> </body> </html>
196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
