1.js和html整合:
方式1:在页面上直接写
将js代码放在 <script type="text/javascript"></script>标签中,一般放在head标签中
方式2:独立的js文件
通过script标签的src属性导入<script src="js的路径"></script>
一般放在body后面，无需担心因页面未完成加载，造成DOM节点获取不到，使脚本报错的问题，而且能避免因脚本运行缓慢造成页面卡死的问题
2.js中变量声明:
var 变量名;
变量名=初始化值;
注意:
var可以省略建议不要省略
一行要以分号结尾,最后一个分号可以省略,建议不要省略
3.通过 typeof运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,他还可以判断出属于哪种原始类型 typeof 变量|值
undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的
4.函数定义格式:
方式1:
function 函数名(参数){
函数体;
}
注意:函数不用声明返回值类型
参数不需要加类型
函数调用的时候
函数名(参数);
方式2:
var 函数名=function(参数){
函数体;
}
5. js中的事件:
常见的事件:
焦点事件:onfocus(获取焦点)、onblur(失去焦点)
鼠标事件(单击): onclick
页面加载事件(页面加载完成后): onload,常用在<body></body>中,也可以直接οnlοad=function(){…}
页面退出事件onbeforeunload,
onbeforeunload = function(){
return "确定要离开吗";
}
6．js事件和函数的绑定:
方式1:
通过标签的事件属性 <xxx οnclick="函数名(参数)"></xxx>
方式2:
给元素派发事件
document.getElementById("id值").οnclick=function(参数){....}
document.getElementById("id值").οnclick=函数名
方式3:写在函数里面并且后面跟上定时器 Function f(){…} setTimeout(函数名,毫秒数)
注意:
内存中应该存在该元素才可以派发事件
a.将js代码放在html页面的最下面,即<body></body>下面
b.在页面加载成功之后再运行的js代码,即在<body></body>中添加onload事件或者οnlοad=functon(){…}
7. js获取元素:
var obj=documnet.getElementById("id值");
获取元素的value值
obj.value;
获取元素的标签体中的内容
obj.innerHTML;(没有编译的源码比如 不会解析成空格)(多个空格会当作一个空格)
obj.innerText;(已经编译成浏览器能识别的代码比如 会解析成空格)(几个空格就几个空格)
操作css属性
obj.style.属性="值"
属性:就是css中属性,css属性若有"-"只需要将"-"删除,后面第一个字母变大写即可,例如:backgroud-color---->backgroudColor
注意:
只要是window对象的属性和方法,可以把window省略
window.onload 等价于 onload
window.setInterval() 等价于 setInterval()
8.定时器:
var obj=setInterVal(函数名,毫秒数)
或者var obj=setInterVal(function(参数){....},毫秒数)
每隔指定的毫秒数执行一次函数 周期
清除定时器:
clearInterval(obj);
var obj=setTimeout(函数名,毫秒数)
或者var obj=setTimeout(function(参数){....},毫秒数)
延迟指定的毫秒数之后 只执行一次函数
清除定时器:
claerTimeout(obj);
9. 运算符:
关系运算符:
两边值都是字符串,比较ascii码
两边都是数字,和java一样
一边是数字,一遍是字符串形式的数字, 可以比较,字符串转数字比较
一边是数字,一遍是普通字符串,可以比较值,永远是false
等性运算符
"66"==66 true 仅判断值是否相同
"666"===666 false 不仅判断值相同还判断类型是否相同
10.逻辑语句
if for while和java一样 不同就是变量声明用var
11.消息框
alert("...."):警告框
confirm("你确定要删除吗?"):确定框 返回值:boolean
prompt("请输入您的姓名"):输入框 返回值:你输入的内容
12. location:定位信息
常用属性:
href:获取或者设置当前页面的url(定位信息)
location.href; 获取url
location.href="...";设置url 相当于 a标签
13. history:历史
back();后退
forward():向前
go(int)
go(-1) 相当于 back()
go(1) 相当于 forward()
14. 阻止默认事件的发生(阻止事件传播,了解)
event.preventDefault();(直接函数里面写上这个)
15. dom(文档对象模型)
当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)
节点(Node)
文档节点 document
元素节点 element
属性节点 attribute
文本节点 text
获取节点:
通过document可以获取其他节点:
常用方法:
document.getElementById("id值"):获取一个特定的元素
document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)
document.getElementsByClassName("class属性的值"):通过class属性获取一类元素(多个)
document.getElementsByName("name属性的值"):通过name属性获取一类元素(多个)
扫一扫
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
