1.JavaScript简介
独立的语言,浏览器本身就是一个JavaScript的解释器 js要加分号
是因为网页上要尽量把js代码压缩成一行,所以必须加分号来识别哪个是一行
2.JavaScript代码存在形式:
- head中 (一进入网页就触发)
1. < script>
// js代码 alert(123); < /script>
< script type="text/javascript"> // js代码 alert(123); < /script>
- 文件
<script src="文件路径"></script>
注意:除开在head中的情况,JS代码需要放置在< body>标签内部的最下方
3.JS注释
当行注释 //
多行注释 /* */
4.变量
python: name=‘alex’
JavaScript: name=‘alex’ # js中这样是默认全局变量
var name=‘alex’ # 这个才是局部变量 最好都这样 全局变量一般很少
5.写JS代码
- html 文件中编写
调试: - 浏览器终端 比如chrome 点审查 然后console里面写代码
在浏览器consle打印信息:
function func(){
console.log(内容);
}
可在百度的console看到校园招聘的信息
回到顶部的实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white;
position: fixed;
bottom:20px;
right: 20px;
">返回顶部</div>
<div style="height: 5000px;background-color: #dddddd;">
asdfasdf
</div>
<script>
function GoTop(){
document.body.scrollTop = 0;
}
</script>
</body>
</html>
6.定时器
setInterval(‘func();’,1000)
7.基本数据类型
(1) 数字
a =18;
(2) 字符串
a = ‘alex’ a.chartAt(索引未知)
a.substring(起始位置,结束位置) 取头不取尾
比如:substring(0,length) 就都取完了 因为第一个index为0 最后一个是index是长度-1 a.length
获取当前字符串长度
…
滚动条的实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">欢迎杨浩然大帅哥</div>
<script>
function func(){
// 根据ID获取指定标签的内容,定义局部变量接受
var tag=document.getElementById('i1');
// 获取标签内部的内容
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();',1000)
</script>
</body>
</html>
(3) 列表(数组)
a=[1,2,3] 方法见博客
最难的是a.splice 加入 删除数组元素
(4)字典
a = {‘k1’:‘v1’,‘k2’:‘v2’}
a[‘k1’]=v1
(5)布尔类型
python: True False
Js:true false (小写)
8.for循环
(1)循环时,循环的是元素的索引
字典 循环的是元素的key
a=[1,2,3,4]
for(var item in a){
console.log(item); # 输出的是下表索引
}
(2)第二种循环(不支持字典,因为字典是无序的)
(1)for(var i=0;i<10;i++){
}
a=[1,2,3,4](2)for (var i=0;i<a.length;i++){
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">我是i1</div>
<a>aa</a>
<a>aa</a>
<a>aa</a>
<script>
var tag=document.getElementsByTagName('a')
for (var i=0;i<tag.length;i++) {
tag[i].innerText = 123;
}
</script>
</body>
</html>
9.条件语句
if(条件){
}
else if(){
}
else(){
}== 值相等
=== 值和类型都相等
!= 值不相等
!== 值和类型都不相等
&& and
|| or
10.函数
function 函数名(a,b,c){
}
函数名(1,2,3)
11.Dom 直接选择器:
(1)找到标签
a.直接找
获取单个元素:document.getElementById('') 获取单个元素:document.getElementByName('') 获取多个元素(数组)document.getElementsByTagName('div') 获取多个元素(数组)document.getElementsByClassName('')
b.间接找
parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
(2)操作标签
a.innerText
获取标签中的文本内容
标签.innerText对标签内部文本进行重新赋值
标签.innerText=’’
b.className
tag.className = > 直接整体做操作
tag.classList.add(‘样式名’) 添加指定样式
tag.classList.remove(‘样式名’) 删除指定样式
c.checkbox
选中 checkbox对象.checked=true
不选中 checkbox对象.checked=false
全选 反选 取消 添加的实现:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.c1{
position: fixed;
left:0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top:50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
</style>
</head>
<body style="margin: 0;">
<div>
<input type="button" value="添加" onclick="ShowModel();" />
<input type="button" value="全选" onclick="ChooseAll();" />
<input type="button" value="取消" onclick="CancleAll();" />
<input type="button" value="反选" onclick="ReverseAll();" />
<table>
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox">
</td>
<td>1.1.1.1</td>
<td>190</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>1.1.1.2</td>
<td>192</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>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">
<p><input type="text"></p>
<p><input type="text"></p>
<p>
<input type="button" value="取消" onclick="HideModel();" />
<input type="button" value="确定">
</p>
</div>
<!-- 弹出框结束-->
<script>
function ShowModel(){
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');
// 获取所有tr
var trlist=tbody.children;
for(var i=0;i<trlist.length;i++){
//循环所有tr
var current_tr =trlist[i];
var checkbox=current_tr.children[0].children[0];
checkbox.checked=true;
}
}
function CancleAll(){
var tbody=document.getElementById('tb');
// 获取所有tr
var trlist=tbody.children;
for(var i=0;i<trlist.length;i++){
//循环所有tr
var current_tr =trlist[i];
var checkbox=current_tr.children[0].children[0];
checkbox.checked=false;
}
}
function ReverseAll(){
var tbody=document.getElementById('tb');
// 获取所有tr
var trlist=tbody.children;
for(var i=0;i<trlist.length;i++){
//循环所有tr
var current_tr =trlist[i];
var checkbox=current_tr.children[0].children[0];
if (checkbox.checked==true){
checkbox.checked=false;
}
else{
checkbox.checked=true;
}
}
}
</script>
</body>
</html>
左侧导航栏的实现:
<!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="ChangeMenu('i1');">菜单1</div>
<div class="content hide">
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
</div>
</div>
<div class="item">
<div id="i2" class="header" onclick="ChangeMenu('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="ChangeMenu('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="ChangeMenu('i4')">菜单4</div>
<div class="content hide">
<div>内容4</div>
<div>内容4</div>
<div>内容4</div>
</div>
</div>
</div>
<script>
function ChangeMenu(nid){
var current_header=document.getElementById(nid);
var item_list=current_header.parentElement.parentElement.children;
for(var i=0;i<item_list.length;i++){
var current_item=item_list[i];
current_item.children[1].classList.add('hide')
}
current_header.nextElementSibling.classList.remove('hide')
}
</script>
</body>
</html>
上述JS代码解读,先为每个菜单定制div的id,将id传入JS函数中,查找父节点再查找父节点找到item标签,并取item标签所有的子节点,for循环进行添加hide属性的操作,实现点击该菜单,其他菜单消失的功能,然后调用nextElementSibling把下一个兄弟节点也就是该菜单的内容属性移除hide,进而展示出来。