区分:
JavaScript和JAVA一点关系没有,是一门单独的语言。(浏览器就是JavaScript的解释器)
JavaScript代码存在形式:
#这些代码一般都是在<head></head>里边写的 第一种是直接放在head里边
<head>
<style>CSS代码</style>
<script>JavaScript代码</script>
</head> 第二种是利用脚本引入的方式
<head>
<script src="*.js">JavaScript代码</script>
</head>
网页解释器的代码是从上向下进行,如果要把<script>的代码写到<head>上面,有可能出现地址访问不到网页一直转圈的情况,所以我们可以先让代码先执行完,再执行scipt代码。
也就是将<script>放在<body></body>里边的最后。
同理,<style>也一样
单行注释://
多行注释:/* */
JavaScript基础:
基本数据类型:
数字
字符串
列表
字典
布尔类型
条件语句
for循环(学语言一般要按照这个顺序写)
全局变量:
name=“alex”
局部变量:
var name="alex"
#声明变量一定要注意全局变量和局部变量的区别。
数字:
age=18;//表示创建了一个数字
<再写JavaScript代码的时候,可以在浏览器的终端写F12(console)> 字符串:
a="alex";
//取字符串
a.charAt(1)
//切片,取第几个到i-1的字符串
a.substring(1,4)
//字符串的长度
a.length 创建一个定时器
//setInterval("执行的操作",多少毫秒)
setInterval("alert(123);",5000)
或者setInterval("f1()",5000) document.getElementById("li")
<div id="l1">欢迎老男孩莅临指导</div>
<script>
document.getElementById("li"); #根据ID来判断是哪个标签
tag=document.getElementById("li");
tag.innerText #看标签里面的文本
</script> #跑马灯小练习
<script>
function func(){
//根据ID获取指定标签的内容
var tag=document.getElementById("l1");
//获取标签内部的内容
var content = tag.innerText; var f = content.charAT(0);
var l = content.substring(l,content.length);
var new_content = l + f ;
tag.innerText=new_content;
} setInterval("func()",1000);
</script>
<div id="l1">欢迎老男孩莅临指导</div> 布尔类型:
小写的false或true 数组:(列表)a=[11,22,33]
obj.splice(起始位置,删除个数,插入什么数据) 插入,删除,或替换数字的元素
obj.slice() 切片
obj.join("分隔符") 在js中是列表的方法
obj.concat(value) 拼接 字典:
a={'k1':'v1','k2':'v2'}; for循环:
第一种方式:循环时循环的是索引
a=[11,22,33,44]
for(var item in a ){
console.log(a[item]);
}
#这里输出的是列表的索引 第二种方式:
for(var i=0;i<10;i++){
} eg:
a=[11,22,33,44]
for(var i=0;i<a.length;i=i+1){
console.log(a[item]);
}
//不支持字典的循环 条件语句:
if(条件){}
else if(条件){}
else{} ==值相等
===值和类型都相等
&& and
|| or
JavaScript函数:
函数:
function 函数名(a,b,c){
执行代码
}
Dom选择器:
1,如何去找到标签
Dom直接选择器:
1,找到标签
#获取单个元素
document.getElementById('id')
整个html的id不可重复 #获取多个元素
document.getElementByTagName("div")
或者
document.getElementByClassName('class') Dom间接选择器:
也就是说先找到一个标签,然后去找他的上级,下级,父级等标签
tag = document.getElementById('id') parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
可以利用tag.方法来使用 2,操作标签
标签.innerText="" #对标签内的元素重新赋值
标签.className="" #改掉class的值
标签.classList.add="" #添加指定样式
标签.classList.remove="" #删除指定样式
实现一个菜单切换的小例子模型:
<div onclick='func()'>点我</div>
<script>
function func(){
}
</script>