JS函数和JS事件知识总结
程序员文章站
2024-03-26 10:05:47
...
文章目录
1.数值转换：
//将括号中的内容转化为数值类型
Number();
//将内容转化为整数/浮点，如果内容中包含字符且无法转化，返回值为NaN
parseInt();/paresnFloat
2.字符串函数：
属性：length
方法：
a.charAt(i);返回a的第i个字符；
a.concat(str);连接字符串,将str与a拼接；
a.indexOf(str);字符串str在a字符串出现的第一个字符下标;
a.lastIndexOf(str);字符串str最后一场在a字符串中出现的第一个字符下标
a.match(str);//检测a中有无与str相同的部分，str也可以为正则表达式，为正则时是判断是否符合正则
a.replace(str1,str2);将字符串a中的str1部分替换为str2
a.split(str);将字符串分割为字符串数组,str为分割依据，如str=","；则通过逗号进行分割
a.substr(start)/a.substr(start,length);可以有一个或两个参数，一个参数时，为起始位置，两个参数时为起始位置和要截取的长度。
a.substring(begin)/a.substring(begin,end)
一个参数时为开始的位置，两个参数时，为起始加终点位置
a.toLowerCase();将字符串转化为小写
a.toUpperCase();将字符串转化为大写
3.window对象
属性：
history
location
document
screen
Navigator
方法：
alert();弹出带ok的提示框
close()关闭浏览器
confirm();打开带提示确认和取消的对话框
open()打开一个新的浏览器窗口
prompt()显示用户可输入的对话框
setInterval(fun,time)；fun为函数/函数名，time为函数调用的周期，是每time的时间反复调用fun函数
setTimout(fun,time);与setInterval相似，不同的是他只调用一次
clearInterval();清除由setInterval()设置的
clearTimeout();清除setTimeout()设置的
4.history对象
方法：
back()加载history列表的前一个url
forward()加载history列表的下一个url
go()加载history列表的某个具体页面
5.location对象
属性：
href设置或返回完整的url
方法:
reload()重新加载当前文档
replace()用新的文档代替当前文档
6.document对象
属性：
referrer返回加入当前文档的url(需要在服务器部署页面才行)
url :返回当前文档的URL
7.改变文本的内容
标签对象.innerHtml="新内容";
或者标签对象.innerText="新内容"
8.Date对象
//创建当前日期对象
var date = new Date();
方法：
date.getDate();//返回今天是本月第几天
date.getDay();返回的是今天的日
date.getMonth();返回月份0~11
date.getFullYear;返回年份
date.getHours();返回小时数0~23
date.getMinutes();返回分钟
date.getSeconds();返回秒数（0-59）
9.Math对象
属性：
Math.PI返回圆周率
方法：
ceil(x)向上取整
floor(x)向下取整
max(x,y)返回x和y中的最高值
min(x,y)返回低值
random()返回0~1的随机数
round(x)将数进行四舍五入为整数
10.节点操作：
document.getElementByXXX();
其中XXX可以为Id、ClassName、TagName
a.节点具有的属性：
parentNode 父节点，也就是直接包含这个节 点的节点，如
<ul>
<li></li>
<li></li>
</ul>中，li的父节点为ul;
childNodes，如上ul的子节点就有两个li
firstChild 第一个子节点 也就是第一个li
lastChild 最后一个节点也就是最后一个li
nextSibling 下一个节点
nodeName 节点名称
nodeValue 节点值
nodeType 节点类型
attr 节点的属性
element 元素
text 节点文本
b.element属性
firstElementChild 第一个子节点
lastElementChild 最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点
c.操作节点的属性
Core Dom
var a = obj.getAttribute("属性名");obj为节点
obj.setAttribute("属性名","值");
HTML DOM
var a = obj.属性名
obj.属性名=值
d.节点的创建和插入：
var element = document.createElement(tagName)
//节点追加
A.appendChild(B);
//将A节点插入B节点之前
parent.insertBefore(A,B);
//节点的复制
cloneNode(deep);deep为true复制所有，包括后代，为false时，仅当前
e.节点的删除和替换
//移除子节点：
parent.removeChild(child)；parent为父节点，child为parent下你要删除的子节点
parent.replaceChild(newNode,oldNode);
f.操作节点的样式：
1.使用style属性
element.style.样式属性 = 值；
如
<div id="content"></div>
<script>
window.onload = function(){
var content = document.getElementById("content");
content.style.backgroundColor="red";
content.style.fontSize="36px;
}
</script>
2.使用className属性
element.className="列名";
g.获取元素样式
a.获取行内样式
var 属性值 = element.style.样式
b.获取内部样式或外部样式属性值
IE浏览器
var 属性值 = element.currentStyle.属性值；
FireFox浏览器
var 属性值 = document.defaultView.getComplatedStyle(element,null).样式属性
i.滚动条的滚动距离
document.documentElement.scrollTop
document.documentElement.crollLeft//标准浏览器
或
document.body.scrollTop
document.body.scrollLeft//chorme浏览器
11.JS时事件：
1.事件流：
从页面中接收事件的顺序
从具体的元素传到模糊的元素称为事件冒泡。如从产生事件的p元素逐级传到html
从模糊的元素传到具体的元素称为捕获流。如从html逐级传到具体的元素。
DOM2级事件流的三个阶段：
a.事件捕获
b.处于目标阶段
c.事件冒泡阶段
2.事件处理程序
响应某个事件的函数称为事件处理函数
事件处理的方式：
1.HTML事件处理程序：
<script>
function show(){
alert("弹出")
}
</script>
<input type="button" value="Click Me" onclick="show（）" />
2.DOM0级事件处理程序
html:
<input type="button" value="Click Me" id="btn" />
<script type="text/javascript">
//处理函数
function showMessage(){
alert("Hello world!");
}
window.onload=function(){
//获取元素
var btn = document.getElementById("btn");
//元素.事件 = 处理函数
//这就是dom0级的标志
btn.onclick = showMessage;
};
</script>
3.DOM2级事件处理程序
html:
4.跨浏览器事件处理
var EventUtil = {
//添加事件
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
//移除事件
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
};
5.event对象的属性和方法：
1.DOM中的事件对象 说明
cancelable 表明事件是否冒泡（只读）
currentTarget 其事件处理程序当前正在处理事件的那个元素
preventDefault() 取消事件的默认行为。 *****
stopPropagation() 取消事件的进一步捕获或冒泡。 *****
target 事件的目标
type 被触发的事件的类型
2.IE中的事件对象
var event = event | window.event;
cancelBubble 取消事件的进一步捕获或冒泡
returnValue 默认值为true，但将其设置为false就可以取消事件的默认行为
srcElement 事件的目标
type 被触发的事件的类型
3.跨浏览器的事件对象
var EventUtil = {
//获取事件对象
getEvent: function(event){
return event ? event : window.event;
},
//获取事件的目标
getTarget: function(event){
return event.target || event.srcElement;
},
//取消事件默认行为
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
//取消事件的进一步捕获或冒泡
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
//添加事件处理（跨浏览器）
addHandler : function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type] = handler;
}
},
//移除事件处理（跨浏览器）
removeHandler : function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.dettachEvent){
element.dettachEvent("on"+type,handler);
}else{
element["on"+type] = null;
}
}
};
6.常用事件类型
UI（User Interface，用户界面）事件，当用户与页面上的元素交互时触发
load：当页面完全加载后在window 上面触发
unload：当页面完全卸载后在window 上面触发
scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发
焦点事件，当元素获得或失去焦点时触发；
blur：在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
鼠标事件，当用户通过鼠标在页面上执行操作时触发；
滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
click：在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发
dblclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发
mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发
mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发
mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。
文本事件，当在文档中输入文本时触发；
键盘事件，当用户通过键盘在页面上执行操作时触发；
keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件
keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件
keyup：当用户释放键盘上的键时触发
上一篇： JS内置对象
下一篇： 类模板的定义与继承实现