笔记 - JavaScript - 川哥视频

第一节：

obj.onmouseover　　//添加事件，鼠标移入；
obj.onmouseout　　//添加事件，鼠标移出；
obj.attr = value　　//元素属性操做方式一，经过点（.）的方式，不赋值便进行读取；
document.getElementById(str)　　//在当前文档中（页面中）获取id为某值的元素；
/*直接使用id.attr兼容性较差*/

第二节：

obj[attr] = value　　//元素属性操做方式二，arr通常是string类型，实际使用中须要使用引号（‘’）括起来；
className　　//在JS中不能直接使用class获取和操做该属性；  
style　　//获取和修改的是行内样式，可能会覆盖className样式；  
window.onload　　//意为页面加载完成后执行；
obj.innerHTML　　//读取或设置标签元素内的全部内容；
/*灵活使用JS添加和使用行内索引值*/
/*没法对一个数组进行读取样式或进行设置样式、绑定事件的操做，通常须要使用循环*/

第三节：

typeof obj　　//获取数据类型，包括：number、string、boolean、undefined、object、function六类；
parseInt(str, radix)　　//强制类型转换，将变量值转换为整数型，可设置转换进制；
parseFloat(str)　　//强制类型转换，将变量值转换为浮点型；
NaN　　//是一个number类型，但不等于任何数字（包括自身）；
%　　//取模是一个颇有用的算术运算符，能够完成诸如取单双数、数组无限循环等应用；
%=　　//取得余数并将余数赋值给变量；
true　　//包括true、非零数字、非空字符串、非空对象；
false　　//包括false、undefined、数字零、空字符串、空对象；
/*强制类型转换又称显性类型转换，与之对应的叫自动类型转换，又称隐性类型转换；例如使用双等号（==）时，某一侧数据类型会与另外一侧转换一致后比较，还有如减法计算等*/
/*关于Json对象：Json对象使用大括号（{}）包裹数据，使用key:value的方式保存数据，key值相似数组的下标，但它不具有length属性，遍历数据须要使用for in循环*/

第四节：

arguments　　//称为不定参或可变参，是函数的默认传参，应用如利用其length属性判断参数个数进行不一样操做；
obj.currentStyle[attr]　　//操做元素目前最终的样式（行内外皆可），只适用于IE；
getComputedStyle(obj, pseudoClass)[attr]　　//只读，获取元素的计算完成后的样式（行内外皆可），适用于Firefox和Chrome，参数中的伪类部分能够填写任意值；
arrObj.length　　//数组的长度能够获取，也能够在定义好数组后修改，若是比初始时小，会丢弃多余长度对应的数据，此特性能够用来清空数组；
concat(arrX, ..., arrX)　　//合并多个数组；
join(separator)　　//使用指定字符串链接数组内数据并转换为字符串，默认为逗号（,）号；
push(newX)　　//从尾部添加数据，并返回新的长度；
unshift(newX)　　//从头部添加数据，并返回新的长度；
pop()　　//删除并返回数组的末一个元素；
shift()　　//删除并返回数组的第一个元素；
splice(index, howmany, item1, ..., itemX)　　//参数为从某下标开始，删除几个，要插入的数据；可用此方法完成删除、添加及替换操做；
sort(sortby)　　//对数组内数据排序，无参时按string类型排序，字母先大写后小写排列，数字也做为字符串排列，参数为sortNumber则按数字字面值大小升序排列；
sort(function(n1, n2) {　　//使用比较函数让sort方法排序数字实际大小；
　　return n1 - n2　　//升序n1-n2，降序n2-n1；
});

第五节：

setInterval(code, millisec)　　//间隔性计时器，按指定毫秒调用函数或计算表达式；
clearInterval(obj)　　//中止指定间隔性计时器；
setTimeout(code, millisec)　　//延时性计时器，在指定毫秒后调用函数或计算表达式，能够调用自身以起到无限循环的做用；
clearTimeout(obj)　　//中止指定延时性计时器；
DateObj.getFullYear　　//获取当前年份，返回4位数字；
string[index]　　//获取字符串中指定下标的字符，有兼容性问题；
strObj.charAt(index)　　//获取字符串中指定下标的字符，推荐使用；
obj.offsetLeft　　//获取对象相对于父级的左边距，只读属性，返回值为number类型，什么时候均可使用，同类属性还包括offsetTop、offsetWidth；
obj.style.left　　//获取或设置相对于具备定位属性父级的左边距，返回值为string类型，只有对象具备left属性时（外链无效）才能使用，同类属性还包括top、bottom、right；
/*在JS中可使用连等于，如：obj1=obj2=onclick=function(){}，两个对象绑定了相同的点击事件*/

第六节：

obj.childNodes　　//标准DOM属性，获取元素全部子节点，高级浏览器返回节点包括元素节点、属性节点和文本节点；
obj.children　　//非标准DOM属性，获取元素全部元素子节点，低版本IE返回值中包含注释节点，兼容性较好；
obj.nodeType　　//获取节点类型，元素节点返回1，属性节点返回2，文本节点返回3，通常和childNodes配合使用；
obj.firstChild　　//获取第一个元素子节点，适用于IE6~8，同类属性还包括：lastChild、nextSibling、previousSibling；
obj.firstElementChild　　//获取第一个元素子节点，适用于Firefox、Chrome浏览器，同类属性还包括：lastElementChild、nextElementSibling、previousElementSibling；
obj.offsetParent　　//获取元素定位参照的父元素；
obj.setAttribute(attr, value)　　//元素属性操做方式三，同类属性还包括：getAttribute()、removeAttribute()；
/*经常使用if语句判断和解决兼容性问题，例如：*/
if (obj.firstElementChild) {　　//判断是否可用;
　　obj.firstElementChild.something;　　//适用高级浏览器;
} else {
　　obj.firstChild.something;　　//适用IE6~8;
}

第七节：

createElement(tagname)　　//建立一个新节点，新建立的节点与文档中事先有的节点别无二致，能够为其赋值；
obj.appendChild(new)　　//将new元素插入obj元素子集末尾；
obj,insertBefore(new, objson)　　//将new元素插入obj指定子元素以前，低版本IE在父元素没有任何子元素时会出错，因此先用子元素length判断后，决定使用哪一种方式；
obj.removeChild(objson)　　//删除obj元素的某一子元素，要删除一个元素须要经过其父元素；
createElementFragment()　　//建立一个文档碎片，可将全部准备放入同一父元素的子元素打包其内，统一添加至目标父元素，已不经常使用；

第八节：

obj.tBodies　　//表格类DOM属性，获取表格对象的某一tbody下元素的子集，相似属性还包括：tHead、tFoot、rows、cells；
str.search(regexp)　　//检索在字符串中是否包含某字符或是否匹配指定正则表达式，包含则返回字符位置下标，不包含返回-1；
str.toLowerCase()　　//将字母字符串转换为小写，toUpperCase是转换为大写；
str.split()　　//将字符串用指定字符分割；
obj.onSubmit　　//添加事件，提交表单；
obj.onReset　　//添加事件，重置表单；
/*实现隔行变色时，能够声明一个变量存储选定行以前的颜色，在变换之间后将该变量赋值回该行颜色*/
/*建立一个新元素的流程：新建父元素暂存，新建子元素1，赋值，扔进新建父元素，新建子元素2，扔进新建父元素，...，将新建父元素扔进指定位置*/
/*使用appendChild()方法操做一个已有元素的流程：先将选定元素从原父元素删除，再将选定元素插入目标父元素末尾，也能够再次插入原来的父元素末尾*/
/*使用sort()排序数组，数组内能够是object类型，在使用比较函数时，能够在比较函数中传入objcet中的某值进行比较，如value，innerHTML等，使object数据按要求排序*/

第九节：

/*让图像运动是利用间隔定时器循环改变图像的定位属性实现的*/
/*图像运动速度的快慢，通常不会改变运动时间，而采用更改单位时间改变的距离或其余数值来控制*/
/*要让运动的图像在须要的位置中止，就要设置目标值，当达到目标值，便关闭间隔定时器*/
/*当速度值乘以时间不能正好等于目标值时，要采用“当前值>=目标值”的形式来判断是否中止运动*/
/*要使用if else将中止计时器和更改位置代码分开，避免运动到达目标后再次启动定时器仍然会执行一次更改位置代码，图像便会再次运动一下*/
/*每次启动间隔定时器前，先关闭一次定时器，避免重复启动定时器，使参数累加，致使图像运动速度改变*/
/*使用运动框架改变图像透明值，因为没有方便的取值方法，能够声明一个变量存储透明度*/
/*缓冲运动的速度=(目标值-当前值)/缩放系数，速度使用三目运算判断取整*/
/*目标值可能带有小数时，传参前将目标值转换为整数，不然没法到达目标值*/
/*匀速运动时当前值距离目标值<=单位速度的长度时便认定到达目标位置，并将值取绝对值，防止正负数一直计算使图像左右抖动，此条件知足后将当前值直接设置为目标值*/
/*注意变量做用域以及赋值时是否须要拼接字符串“px”*/

第十节：

Math.round(x)　　//把一个数字四舍五入为最接近的整数；
/*使用parseFloat转换获取到的透明值，乘100使适用面变大，使用Math.round舍入透明值，防止透明值计算偏差而没法到达目标值*/
/*透明值不须要加px单位，整合运动框架时须要额外判断是否为透明度属性来区分操做*/
/*多元素运动须要为每一个元素添加定时器才能互不干扰*/
/*属性可与运动元素绑定，如定时器、速度及其余属性值如：透明度*/
/*多元素运动时，全部参数不可共用*/
/*要弄清楚须要变化的属性或变量是哪一个*/
/*使用offsetWidth和offsetHeight获取的是元素盒子模型尺寸，包括元素的内边距和边框，而不仅仅是元素的内容尺寸，但元素运动须要获取和操做的都是内容尺寸，
因此须要使用currentStyle或getComputedStyle来获取与元素的内容尺寸，使用这两种方法获取的元素样式能够用parseInt将获取值由字符串型转换为整数型便于计算和赋值*/
/*对象的时间函数也能够像普通函数同样放入定时器，如setInterval(obj.onclick,30)*/
/*不要急于求成，久练才能久熟，先模仿再创新*/

第十一节：

obj.hasOwnProperty(property)　　//判断对象是否有某个特定属性，必须用字符串指定该属性；此方法没法检查对象原型链中是否具备该属性，该属性必须是对象自己的一个成员；检查框架内json传参颇有用；
/*建立一个函数时，为此函数传入的函数类型参数称为回调函数，可利用回调函数调用函数自己，组成函数链，应用如：链式运动框架，当元素运动完毕后，在运动框架内部继续调用本框架，执行下一个元素属性的变化*/
/*元素运动须要使多个值变化时，须要用json对象代替单一的属性和目标值，使用for in循环遍历json内的键值对，对多个属性操做；使用这个方式须要注意可能发生其中一个值改变时间短而过早中止定时器，须要设定开关变量，判断只要有一个属性没有到达目标值，开关变量便为false，在定时器第二次循环，此时已经都到达目标值，开关变量为true*/
/*在运动结束时使用回调函数，要清除整个运动框架的结束点在哪里；用if判断是否传入了回调函数，再执行调用*/
/*轮播图类效果除了每一个按钮须要定义index属性，还要用一个变量存储index，这样才能封装变化函数，也方便各类计算*/
/*标签类效果大体思路是：先循环给标签添加事件，当某个标签发生事件时进行函数，在此函数内循环为每一个标签去除样式，再给发生事件的标签添加样式*/
/*对于offsetWidth和offsetHeight要加深理解，他们获取的数值中包含了元素的内边距和边框尺寸，纯粹的元素width或height，须要使用currentStyle或getComputedStyle,*/
/*运动框架演变过程*/
startMove(iTarget)　　//运动框架
startMove(obj, iTarget)　　//多物体
startMove(obj, attr, iTarget)　　//任意值
startMove(obj, attr, iTarget, fns)　　//链式运动
startMove(obj, json)　　//多值运动
startMove(obj, json, fn)　　//完美运动框架

第十二节：

event.clientX　　//获取当前页面可视区域的鼠标X轴坐标，而clientY获取的是Y坐标，仅支持IE，其余浏览器中调用事件函数须要在事件处理函数中传入事件对象参数；
event.keyCode　　//返回按下键位的对应数字，不一样键盘的键位返回值均相同，几个特殊键值：ctrlkey、altkey、shiftkey，可用来组合快捷键；
obj.onkeydown　　//添加事件，键盘按下，注意要清楚为哪一个元素添加；
obj.onclick = function(e){　　//事件函数的兼容性写法；
　　oEvent = e || event;
}
/*使用clientX/Y定位元素，在有滚动条的状况下，要加上scroll距离，消除滚动条的影响；可将此方法封装，把事件对象做为参数传入函数后，将顶部滚动距离和左侧滚动距离分别与事件对象的鼠标Y坐标和X坐标相加后返回成为json对象，以下：*/
function getPos(e) {
　　var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
　　var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
　　return {x: scrollLeft + e.clientX, y: scrollTop + e.clientY};
}
event.cancelBubble = true;　　//经过事件对象的“取消冒泡”属性设置为true来关闭次触发事件对象的事件冒泡；
/*没法经过body元素添加页面事件，由于它默认没有高度，页面事件须要添加给document对象*/
/*document的本质就是整个文档，是全部标签（包括文档声明和html）的父元素*/
/*event对象时用来获取事件的状态*/

第十三节：

/*浏览器中的右键菜单、输入框中输入字符后显示都属于默认行为，又称为默认事件；阻止默认事件能够在事件函数末尾用return false阻止默认行为，能够运用这种方法自定义事件行为或阻判定义的键盘输入*/
/*拖拽的原理是计算出鼠标点击在元素的位置，鼠标移动后，鼠标当前位置减去在元素上的位置，就是元素被拖拽后的位置*/
/*拖拽元素时为了防止鼠标移动过快而脱离元素，一般将onmousemove添加在document对象上；为了防止鼠标移出可视区松开鼠标事件无效，onmouseup事件也添加在document对象上*/
/*在onmouseup事件函数中，清空元素的onmousemove事件的同时，也要清空元素的onmouseup事件，从而释放无用事件占用的内存*/
/*用if判断能够设定元素拖拽范围，也能够为拖拽元素添加边缘吸附效果*/
/*拖拽元素的函数末尾添加return false，能够解决火狐浏览器中无内容元素的二次拖拽残影的Bug*/

第十四节：

elem.attachEvent(ev, fn)　　//为元素绑定事件，事件名为字符串，适用于IE6~10；解除绑定方法为elem.detachEvent()，参数相同;
elem.addEventListener(ev, fn, false)　　//为元素绑定时间，事件名为字符串，不加‘on’，适用于FF、chrome及IE9以上版本，要注意不要忘记写第三个参数；解除绑定方法为elem.removeEventListener()，参数相同；
elem.setCapture()　　//为元素添加事件捕获，仅支持IE，将全部同类事件集中在添加了事件捕获的元素上，解除事件捕获方法为releaseCapture()，在低版本IE拖拽元素时选中文字的Bug能够用为拖拽元素添加事件捕获解决；
/*同一个元素须要添加同一种事件时，常规的方式会让后来添加的事件覆盖前面添加的事件，在此时可使用事件绑定，在协做代码时比较经常使用；绑定与解除事件传参中的函数，要单独封装，传参时使用函数名，不然没法解除绑定匿名函数*/
/*封装兼容性方法无论浏览器是否支持该代码，即使只有一行，都要使用if判断后再调用*/
/*自定义滚动条的滚动比例是用距离头部的值除以整个滚动范围减去滚动条自身长度的值*/

第十五节：

ajax(url, fnSucc, fnFail)　　//ajax函数中参数第一个是读取文件的路径，第二个是读取完成后要进行的操做，第三是读取失败后要进行的操做；
eval(str)　　//此函数可计算某个字符串，并执行其中的代码；
/*阻止缓存可使用在文件名后添加自定义的get数据，好比添加Date数据*/
/*在同一项目中，最好使用统一的字符编码，通常推荐UTF-8*/
/*使用json对象，必定要记住，key值能够不用引号括，可是value值通常要用引号括*/

第十六节：

XMLHttpRequest　　//ajax对象接口，支持除IE6的其余高级浏览器；在兼容性判断时，为了照顾IE6，须要在把前面默认的window对象也写上：window.XMLHttpRequest；
ActiveXObject("Microsoft.XMLHTTP")　　//IE6须要经过插件来建立ajaX对象；
ajax.open(method,url,async)　　//ajax链接服务器，参数分别为：提交方式，地址，是否异步；
ajax.send()　　//ajax向服务器发送请求；
ajax.onreadystatechange　　//ajax接收返回值；
ajax.readyState　　//返回ajax请求状态，判断为4时表明读取完成，但读取完成不表明读取成功，只做为下一步的开始条件；
/*readyState属性返回值含义*/
//0（未初始化）尚未调用open()方法；
//1（载入）已调用send()方法，正在发送请求；
//2（载入完成）send()方法完成，已收到所有响应内容；
//3（解析）正在解析响应内容；
//4（完成）响应内容解析完成，能够在客户端调用了；
ajax.status　　//返回http状态码，判断为200时表明读取成功，返回其余值则为读取失败；常见的如404，表示请求的文件不存在；503，表示服务不可用；其余可参照状态码表；
ajax.responseText　　//返回ajax成功获取到的文件文本；
/*ajax建立步骤：一、建立ajax对象；二、链接到服务器；三、发送请求；四、接收返回值*/
function ajax (url, fnSucc, fnFail){
　　if (window.XMLHttpRequest) {
　　　　var oAjax = new XMLHttpRequest();
　　}else{
　　　　var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
　　}
　　oAjax.open('GET', url, true);
　　oAjax.send();
　　oAjax.onreadystatechange = function () {
　　　　if (oAjax.readyState === 4) {
　　　　　　if (oAjax.status === 200) {
　　　　　　　　fnSucc(oAjax.responseText);
　　　　　　}else {
　　　　　　　　if (fnFail) {
　　　　　　　　　　fnFail(oAjax.status);
　　　　　　　　}
　　　　　　}
　　　　}
　　};
}

第十七节：

/*关于this：触发事件的是哪一个元素便指向哪一个元素，在方法中时，方法属于哪一个元素便指向哪一个元素*/
/*为元素添加事件与为对象添加方法在本质上没什么区别，差别在于，方法是使用者调用，而事件是系统自动调用*/
/*用prototype相似使用CSS中的类样式*/
/*构造函数用来添加属性，原型用来添加方法*/

第十八节：

obj.onclick = function () {
　　_this.fn(this);　　//这里的this是触发事件的对象，须要把它传入，fn方法才能执行，而_this是保存的表明实例自己的变量；
};
/*把面向过程的程序，改成面向对象形式：*/
//原则：不能有函数套函数，能够先用全局变量过渡；
//过程：一、window.onload转化为构造函数；二、全局变量转化为对象属性，对象命名开头大写；三、将拎出来的函数转化为对象的方法；四、this的使用，闭包保存并传递this，事件调用时传递参数；

 第十九节：

var json {
　　name: 'name';
　　showName: function() {
　　　　alert (this.name);
　　}
}
/*利用json对象也能够写面向对象程序，可是只适合单体程序，不适合多个对象；json还能够用来做为命名空间使用，使相同名字的函数不会互相冲突*/
obj.call(this, arg1, arg2)　　//使用call时，第一个是指定this指向，后面的是自定义参数，使用call方法来继承上级对象的属性；
objB.prototype.fn = objA.prototype.fn　　//虽然可使objB拥有objA的全部方法，但在修改objB的方法时，会影响objA的方法，由于这只是将objA的方法索引复制给objB，故继承方法使用循环遍历复制比较好；

第二十节：

window.open(url, name, features, replace)　　//打开一个新浏览器窗口或查找一个指定名称的窗口；
document.write()　　//此方法会先将文档清空后再写入指定内容；
window.navigator.userAgent　　//获取当前浏览器和系统信息；
window.location　　//获取或设置窗口的地址；
window.onscroll　　//窗口滚动事件；
window.onresize　　//窗口大小变化事件；
document.documentElement.scrollTop　　//获取当前窗口距离顶部的滚动距离，scrollLeft为距离左侧的滚动距离，支持IE、FF；
document.body.scrollTop　　//获取当前窗口距离顶部的滚动距离，scrollLeft为距离左侧的滚动距离，支持chrome；
alert(content)　　//警告窗口,参数传入警告内容；
confirm(content)　　//选择窗口，选择“肯定”返回true，选择“取消”返回false,参数传入提示信息；
prompt(content, value)　　//输入窗口，有输入内容便返回输入的值，没有输入内容返回null，参数传入提示信息和默认值（可选）；

第二十一节：

document.cookie　　//获取存储在页面中的cookie；
dateObj.setDate(dateObj.getDate() + num)　　//设置一个日期对象的时间值为当前时间加指定num值；
document.cookie = 'expires = ' + dateObj　　//设置cookie的过时时间；
/*在cookie内，=号是添加符，并不是赋值符*/
/*读取cookie中存储的值能够建立函数，使用split方法分割获取到的cookie值，循环并分割获取到的全部值再进行判断须要读取的值是否存在，存在便返回此值，不存在返回空值*/
/*但是用设置过时时间为-1的方法删除cookie*/
function setCookie(name, value, time) {
　　var oDate = new Date();
　　oDate.setDate(oDate.getDate() + time);
　　document.cookie = name + '=' + value +'; expires=' + oDate;
}
function getCookie(name) {
　　var arr = document.cookie.split('; ');
　　for(var i = 0; i<arr.length; i++){
　　　　var arr2 = arr[i].split('=');
　　　　if (arr2[0] === name){
　　　　　　return arr2[1];
　　　　}
　　}
　　return '';
}
function delCookie (name) {
　　setCookie(name, 1, -1);
}

第二十二节：

str.search(char)　　//检索并返回指定单字符在字符串中的位置，从0开始，若是没有找到返回-1；
str.charAt(index)　　//检索并返回字符串中指定下标的单字符；
str.substring(index1, index2)　　//检索并截取字符串中位置1到位置2之间的字符串后返回，带前不带后；
str.match(reg)　　//检索并返回一次指定的或符合规则的字符，返回值为数组，全局检索时有空格隔开字符时，按隔开顺序返回为数组元素；
str.test(reg)　　//检测字符串中是否有符合规则的或指定的字符，整句匹配须要加首尾符号；
str.replace(reg, newStr)　　//将符合规则的或指定的字符替换为新指定的字符；
/*正则表达式能够先分段制定规则后再合并为一句*/
i　　//ignore，忽略大小写；
g　　//global，全局匹配；
[char]　　//元字符，指定任意字符规则；
[a-z]　　//小写a-z范围；
[A-Z]　　//大写A-Z范围；
[0-9]　　//数字0-9范围；
.　　//除了换行符以外的任意字符；
\d　　//数字0-9，等价于[0-9]；
\D　　//除了数字0-9以外的全部字符，等价于[^0-9]；
\w　　//匹配一个数字，下划线或字母字符，等价于[A-Za-z0-9_]；
\W　　//排除单字符，等价于[^A-Za-z0-9_]；
\s　　//任何空字符；
\S　　//任何非空字符；
{n}　　//匹配n次;
{n, }　　//匹配最少n次，最多不限次；
{n, m}　　//匹配最少n次，最多m次；
*　　//匹配0次或不限次，等价于{0, }，通常不推荐使用；
+　　//最少匹配1次，最多不限次，等价于{1, }；
?　　//最少匹配0次，最多1次，表明前一项是可选的，等价于{0, 1}；
/*须要转义的字符前面加反斜杠\便可，如须要单指定.字符，须要输入\.*/

完成。