第15周之javascript学习
1、浏览器本身是javascript的解释器。
2、JS代码需要放置在<body>标签内部的最下面，避免因加载js代码影响其他样式的展示。
JS代码存在形式有两种：
（1）将js代码写在一个js文件中，通过文件路径来调用
<script src='js文件路径'> </script>
（2）将js代码写到script里面
alert(123);执行js代码时，弹窗显示123
<script type="text/javascript">
//javascript代码
alert(123);
</script>
3、注释
// 单行注释
/* */ 多行注释
调试代码：可以在html中调试代码；也可以在浏览器页面控制台临时调试。
4、变量
name="wu" //全局变量
var name="wu" //局部变量
如果在函数中定义一个局部变量，也需要使用var来定义；否则定义的就是全局变量，会将函数外的全局变量覆盖。
5、基本数据类型
（1）数字：
parseInt();将某值转换成数字
<body>
<h1>sadf</h1>
<script>
age = "18";
i = parseInt(age); //将年龄的字符串转换为数字
</script> </body>
执行页面，页面只显示sadf；
打开控制台，点击回车，如下：
（2）字符串：
name.chartAt(索引位置)
name.substring(起始位置，结束位置)，包括起始位置，不包括结束位置
name.lenght 获取当前字符串长度
<body>
<h1>sadf</h1>
<script>
name = 'erixs';
</script>
执行结果如下：
（3）定时器：
a.先来一个简单的定时器：
<body>
<script>
setInterval("alert(123);", 5000);
</script>
</body>
每隔5s界面会弹出一个显示“123”的弹窗，如下：
b.也可以使一个函数每隔一段时间执行一次：
<body>
<script>
function f1(){
console.log(1); //在控制台打印
}
setInterval("f1();", 2000); //f1();，执行这个函数
</script>
</body>
使控制台每隔2秒打印1，执行结果如下（1的次数每增加一次，就说明函数执行一次）：
c.可以利用定时器来跑一个走马灯的案例，使执行结果滚动起来
先来一个简单的页面显示例子，然后在页面控制台调试代码：
<body>
<div id="i1">欢迎报考太原理工大学</div>
<script></script>
</body>
控制台调试代码如下：
如果一直这样将第一个字符串放到最后，速度快一点的话，字符串就滚动起来了。
那么接下来就在html中写入了：
<body>
<div id="i1">欢迎报考太原理工大学</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>
这时发现显示的字符串滚动了起来。
（4）布尔类型：
布尔类型在js中开头字母是小写
（5）字典
a = {'k1':'v1','k2':'v2'}
（6）数组（python中所说的列表）
a = [11,22,33]
有一个a.splice方法需要注意一下
a.splice(1,1,99)；第一个参数：是起始位置；第二个参数：删除个数；第三个参数：插入数值； 删除个数为0的话，就是在某个位置直接插入数值；插入数值为空，则是只删除
6、循环：
（1）支持字典与数组的循环：
当循环元素是索引时，局部变量为item，支持数组与字典
（2）不支持字典的循环：
当循环元素是数字时，局部变量为i，支持数组，不支持字典
因为字典的key无序，所以这种循环不适用于字典
7、条件语句：
if(条件){ }else if(条件){ }else if(条件){ }else{ } == 值相等 === 值和类型都相等 && and || or
8、函数的定义：
function 函数名(形参){
}
9、DOM选择器
1、找到标签 获取单个元素 document.getElementById('i1') 获取多个元素（列表）document.getElementsByTagName('div') 获取多个元素（列表）document.getElementsByClassName('c1') a. 直接找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合 b. 间接 tag = document.getElementById('i1') parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素 2、操作标签 a. innerText 获取标签中的文本内容 标签.innerText 对标签内部文本进行重新赋值 标签.innerText = "" b. className tag.className =》 直接整体做操作 tag.classList.add('样式名') 添加指定样式 tag.classList.remove('样式名') 删除指定样式 PS： <div onclick='func();'>点我</div> <script> function func(){ } </script>
（1）直接选择器：直接找到想要的东西
代码如下：
<body>
<div id="i1">我是i1</div>
<a>abcd</a>
<a>909</a>
<a>cvbnmlk</a>
</body>
直接选择器调试代码如下：
（2）间接选择器，间接找到想要的东西
代码实例如下：
<body>
<div>
<div></div>
<div>
c1
</div>
</div>
<div>
<div></div>
<div id="i1">
c2
</div>
</div>
<div>
<div></div>
<div>
c3
</div>
</div>
</body>
执行结果如下：
（3）以间接选择器的代码为例，对样式做操作
