javascript note

前端之家收集整理的这篇文章主要介绍了javascript note前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

function 有两个内置的变量
length 函数的参数个数
prototype 实例,里面存有共享的数据结构

apply call 绑定this

apply(this,array)
call(this,...args) 这两个方法本质上是一样的
bind(object) 不同点在于会返回一个绑定了这个this的函数的实例

“” vs new

引用类型和j基本包装类型的主要区别是对象的生命周期。使用new创建的引用类型的实例,在执行流离开当前作用域之前一直都保存在内存。而自动创建的基本包装类型对象,则只存在于代码的执行瞬间,然后立刻销毁。所以我们不可以在运行时为基本类型值添加属性方法

Number

toFixed(小数位):按照指定的小数位返回数字的字符串表示,四舍五入
toExponential(number):返回以指数表示法表示的数值的字符串形式
toPrecision(number):以上两个方法的综合

String

charAt(i) charCodeAt(i) stringValue[i]
concat 拼接 不改变原来的字符串
slice substring substr
indexOf lastIndexOf
trim 副本
toLowerCase() toLocaleLowerCase() toUpperCase() toLocaleUpperCase()
str.match(pattern) : 返回一个包含匹配情况的字符串 index lastIndex [0]~
serach(pattern) : 返回找到的第一个匹配项的position
replace(pattern/str,str/ function(match,pos,originalText)) : 替换字符串
`

function htmlEscape(text){
    return text.replace(/[<>"&]/g,function(match,originalText){
        switch(match){
            case "<":
                return "&lt;";
            case ">":
                return "&gt;";
            case "&":
                return "&amp;";
            case "\"":
    } });
}
return "&quot;";
alert(htmlEscape("

")); //&lt;p class=&quot;greeting&quot;&gt;Hello world!&lt;/p&gt;

`
split(pattern/str,sizeOfArray) : 该方法不会把字符串看成是正则表达式
localeCompare()
fromCharCode() : 静态方法

Math

`

function selectFrom(lowerValue,upperValue) {
    var choices = upperValue - lowerValue + 1;
    return Math.floor(Math.random() * choices + lowerValue);
}
var num = selectFrom(2,10);
alert(num); //   2 10  (  2 10)    

`

闭包

闭包只能取出包含函数中任何变量的最后一个值,可以通过在外面封装一层匿名函数并立刻执行来解决这个问题
如果闭包的作用域链中存在一个html元素,那么该元素永远不会被销毁
用匿名函数创造块级作用域
利用闭包创建访问私有变量的共有方法

this问题

var name = "The Window";
var object = {
    name : "My Object",getNameFunc : function(){
        return function(){
            return this.name;
        };
} };
alert(object.getNameFunc()()); //"The Window"(  严格   )

每个函数调用的时候会自动取得两个特殊变量:this和arguments。内部函数搜索这两个变量的时候会搜索到其活动对象为止,因此永远不可能访问到w外部函数中的这两个变量

window

outerWidth outerHeight innerWidth innerHeight
resizeTo() resizeBy()
var newWindow = window.open(URL,窗口目标,特性字符串,新页面是否取代浏览器中当前页面)
newWindow.close() 只有弹出窗口可以通过代码关闭
newWindow.closed
newWindow.opener 打开它的窗口对象

top对象指向最外围的框架,也就是整个浏览器的窗口

在一些屏蔽了弹窗的浏览器内置程序,可以通过判断newWindow是否为null来判断是否屏蔽了弹窗
而一些用来屏蔽弹窗的扩展软件则会将open方法抛出错误

var blocked = false;
try{
    var newWindow = window.open(...);
    if(newWindow==null) blocked = true;
}catch(ex){
    blocked = true;
}
if(blocked) alert(...);;

设置超时调用,window的setTimeOut方法 setTimeOut(包含js代码的字符串/function,超时时间)
var timerId = setTimeOut(function,time) 获得该超时调用ID,可用来取消超时调用 clearTimeOut(timerId)

设置间歇调用,window的setInterval方法
var timerId = setInterval(包含js代码的字符串/function,间歇时间)
cleartInterval(timerId)

使用超时调用模拟间歇调用是一种最佳模式

系统对话框
alert prompt confirm

window.print
window.find

location对象
location.assign(url) 等价于window.location,location.href 较常使用的是location.href 这些方式都会在添加一条浏览器的历史记录
location.replace(url) 不添加历史记录
location.reload() 可能从缓存中加载
location.reload(true) 强制从服务器加载

navigator
navigator.plugins : name,description,filename,length
registerContentHandler()
registerProtocalHandler()

history
每个浏览器窗口,每个标签页乃至每个框架都有自己的history对象
go()
back()
forward()
length 保存所有历史记录的数量

尽量使用typeof进行能力检测

DOM

一共有12中node类型
someNode.nodeType == Node.ELEMENT_NODE // IE中不可行
someNode.nodeType == 1 //通用
nodeName 标签
nodeValue 取值
childNodes 保存NodeList对象 length 但不是array

焦点管理

document.activeElement
文档加载期间,document.activeElement为null
document.hasFocus() 判断文档是否获得焦点
button.focus();
alert(document.hasFocus()); //true

readyState
loading:正在加载
complete:加载完成

var head = document.head || document.getElementsByTagName("head")[0];获得“”

document.charset 获得字符集

HTML5允许为元素添加非标准的属性,但是要添加前缀data-,目的为元素提供与渲染无关的信息,或者提供语义信息。这些属性可以任意添加,随意命名
这些属性可以通过dataset访问
var div = document.getElementById("myDiv");
var appId = div.dataset.appId;
div.dataset.appId = 23456;

插入标记

innerHTML
outerHTML
insertAdjacentHTML()
scrollIntoView() 通过滚动浏览器窗口或某个元素容器,调用元素就可以出现在视觉中。如果这个方法传入true或不传入任何参数,那么窗口滚动只有会让调用元素的顶口与视口顶部尽可能平齐

扩展

children
contains

插入文本

innerText 包括子树的文本
function getInnerText(element){

return (typeof element.textContent == "string") ?
    element.textContent : element.innerText;

}
function setInnerText(element,text){

if (typeof element.textContent == "string"){
    element.textContent = text;
} else {
    element.innerText = text;
}

}

scrollIntoViewIfNeeded(alignCenter):只有不可见时滚动
scrollByLines(lineCount):将元素内容滚动指定的行
scrollByPages(pageCount):将元素内容滚动指定的页面高度

13章 事件

IE事件冒泡:事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)
netscape事件捕获:不太具体的节点应该更早的接收事件,而最具体的节点最后接收事件

DOM事件流:事件捕获阶段,处于目标阶段,事件冒泡阶段

事件处理程序

局部变量event:event.type
btn.onclick = ... //DOM0级别事件
btn.onclick = null
btn.addEventListener("click",function(){
...
},false) false说明会在冒泡阶段调用事件处理程序 //DOM2级别事件处理程序,好处是可以添加多个处理程序

分别使用DOM0级和DOM2级方法或IE方法添加事件
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,handler){
    if (element.removeEventListener){
        element.removeEventListener(type,false);
    } else if (element.detachEvent){
        element.detachEvent("on" + type,handler);
    } else {
        element["on" + type] = null;

} }
};

对象this始终等于currentTarget的值,而target则只包含事件的实际目标

事件类型

UI事件:用户与界面上的元素交互时触发

load:页面完全加载后在window上触发,所有框架加载完毕后在框架集上触发,图像加载完毕后在元素上触发
unload:只要用户从一个页面切换到另一个页面就会触发unload事件
abort:用户停止下载过程时,如果嵌入内容没有完成,则在元素上触发
error:
select:用户选择文本框中一个或多个字符时触发
resize:窗口大小变化时触发 浏览器最大化最小化时也会触发resize事件
scroll:用户滚动带滚动条内容时触发

焦点事件:元素获得或失去焦点时触发

blur:失去焦点触发,不会冒泡
focus:元素获得焦点时,不冒泡
focusin:同上,冒泡

鼠标事件:通过鼠标在页面上执行操作时触发

click:单击,回车
dblclick:双击
mousedown:按下任意鼠标按钮触发,不通过键盘实现
mouseenter:在鼠标从元素外部首次移动到元素范围之内时触发,不冒泡,移到后代元素上也不会触发
mouseleave
mousemove:在元素内移动时重复触发
mouSEOut:
mouSEOver:不论鼠标指针穿过被选元素或其子元素都会触发
mousemove:
mouseup:释放鼠标
mouseup:

clientX clientY 表示事件发生时鼠标指针在视口中的水平和垂直坐标
pageX pageY 鼠标在坐标中的位置,坐标是从页面本身的左边和顶点计算
screenX screenY 屏幕坐标位置
event.shiftKey
event.ctrlKey
event.altKey
event.MetaKey cmd/window

滚轮事件
文本事件:输入文本时触发

textInput:在文本插入文本框之前触发

键盘事件:通过界面操作键盘

keydown:按住不放会重复触发 任意键
keypress:字符键
keyup:释放

keydown->keypress->textInput->keyup

event.keyCode
event.charCode
event.key:键名
event.char:非字符为null
event.location:表示按了什么位置的键 0:默认键盘 1:左侧 2:右侧 3:数字小键盘 4:虚拟键盘 5:手柄
getCharCode: function(event){
if (typeof event.charCode == "number"){
return event.charCode;
} else {
return event.keyCode;
}
},textInput vs keypress
1.任何可以获得焦点的元素都可以触发keypress,但是只有可编辑区域会触发textInput
2.textInput只有在用户输入实际字符的键时才会被触发,而keypress则是按下那些影响文本显示的键都会触发(如退格键)

合成事件:
变动事件:底层DOM发生变化时触发

原文链接:https://www.f2er.com/js/418075.html

猜你在找的JavaScript相关文章