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)以间接选择器的代码为例,对样式做操作