笔记 - 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创建步骤：1、创建ajax对象；2、连接到服务器；3、发送请求；4、接收返回值*/
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是保存的代表实例本身的变量；
};
/*把面向过程的程序，改为面向对象形式：*/
//原则：不能有函数套函数，可以先用全局变量过渡；
//过程：1、window.onload转化为构造函数；2、全局变量转化为对象属性，对象命名开头大写；3、将拎出来的函数转化为对象的方法；4、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}；
/*需要转义的字符前面加反斜杠\即可，如需要单指定.字符，需要输入\.*/

完成。