color 内联 删除表 eight 位置 fun return bom
screen:对象
console.log(screen.width);//屏幕宽度 console.log(screen.availHeight);//可用高度=屏幕高度-底部任务栏 console.log(screen.height);//屏幕高度 console.log(screen.availWidth);//可用宽度
location对象 * * 完整的URL路径: * 协议://主机名(IP地址):端口号/文件路径?传递参数(name1=value1&name2=value2)#锚点
console.log(location.href);//完整路径 console.log(location.protocol);//使用的协议http:https:ftp:file:mailto: console.log(location.pathname);//文件路径 console.log(location.port);//端口号 console.log(location.search);//从?开始往后的部分 console.log(location.hostname);//主机名(IP地址) console.log(location.host);//主机名+端口号 console.log(location.hash);//从#开始的锚点 //使用JS设置页面跳转 //window.location="http://www.baidu.com"; function locationAssign(){ /* *加载新的文档,加载以后,可以回退 * */ location.assign("http://www.baidu.com"); }
function locationReplace(){ /* *使用新的文档,替换当前文档。替换以后,不能回退。 * */ location.replace("http://www.baidu.com"); } function locationReload(){ /* *重新加载当前页面。 * reload(true):从服务器重新加载当前页面 * reload():在本地刷新当前页面 * * */ }
/* *history * 1、length:浏览历史列表的个数 * 2、history.forward();前进到下一个页面 * 3、history.back();后退到上一个页面 * 4、history.go(-1);跳转到浏览历史列表的任意位置 * 位置标志:当前页为第0个,下一个页面第一个,上一个页面-1个 * */ /* *Navigator * * */ console.log(navigator.appName);//产品名称 console.log(navigator.appVersion);//产品版本号 console.log(navigator.userAgent);//用户代理信息 console.log(navigator.platform);//系统平台
/*navigator.plugins。返回一个数组,检测浏览器安装的所有插件 * >>>主要的属性: * description:插件的描述信息 * filename:插件在本地磁盘的文件名 * length:插件的个数 * name:插件名 * */ console.log(navigator.plugins);//检查浏览器安装的插件信息
/*navigator.mimeTypes 浏览器插件,所支持的文件类型 * >>>主要的属性: * description:MIME类型描述 * enabledPlugin:支持此类型的浏览器插件 * suffixes:此类型可能的后缀名 * type:MIME类型的写法,例如:image/x-icon text/CSS * */ console.log(navigator.mimeTypes);//检查浏览器安装的插件支持的文件类型
/*【重点】window对象的常用方法 * >>>window对象中的所有方法,均可以省略前面的window. ,比如close() * *1、prompt:弹窗接收用户输入; *2、alert:弹窗警告; *3、confirm:带有确认/取消按钮的提示框; *4、close:关闭当前浏览器选项卡 *5、open:重新打开一个窗口,传入参数:URL/窗口名称/窗口特征 *6、settimeout:设置延时执行,只会执行一次; *7、setinterval:设置定时器,循环每个N毫秒执行一次; * 两个参数:需要执行的function/毫秒数 *8、cleartimeout:清除延时 *9、clearinterval:清除定时器 * 两个参数:调用setinterval时返回一个ID,通过变量接受ID,传入clearinterval
[DOM树节点] * DOM数节点分为三大类:元素节点、文本节点、属性节点 * * 文本节点、属性节点,为元素节点的两个子节点; * * 通过getElement系列方法,可以取到元素节点。 * */ /*[查看节点] *1、getElementById:通过ID获取唯一的节点;多个同名ID,只会取第一个; *2、getElementsByName:通过Name取到一个数组,包含1到多个节点; * 使用方式:通过循环,取到每一个节点。循环次数:从0开始,<数组.length * * [查看和设置属性节点] * 1、查看属性节点:getAttribute("属性名"); * 2、设置属性节点:setAttribute("属性名","属性值");
【JS修改样式总结】 * 1、 .classname:为元素设置一个新的class名字; * div1.className="class1"; * 2、 .style:为元素设置一个新的样式,注意驼峰命名法; * div1.style.backgroundColor="red"; * 3、 .style.cssText:为元素同时修改多个样式; * div1.style.cssText="width:100px;height:100px;";
[查看节点] * 1、tagName:获取节点的标签名; * 2、innerhtml:设置或者获取节点内部的所有HTML代码; * 3、innerText:设置或者获取节点内部的所有文字;
[获取层次节点的常用属性] * 1、 .childNodes:(数组)元素的所有子节点(包含元素节点/文本节点) * 2、 .firstChild:获取元素的第一个子节点; * 3、 .lastChild:获取元素的最后一个子节点; * 4、 .ownerDocument:获取当前文档根节点。在html文档中,为document节点 * 5、 .parentNode:获取当前节点的父节点; * 6、 .previousSibling:获取当前节点的前一个兄弟节点 * 7、 .nextSibling:获取当前节点的后一个兄弟节点 * * 注:上述属性,均会获得所有的元素节点和文本节点,如果只需要元素节点,需要使用对应Element属性,例如:firstChild--->firstElementChild * * * 8、 .attributes:获取当前元素节点的所有属性节点
【创建并新增节点】 * * 1、 .createElement("标签名"):创建一个新的节点。需要配合.setAttribute()方法设置新节点的相关属性; * 2、 .appendChild(节点名):在某元素的最后追加一个新节点 * 3、 .insertBefore(新节点名,目标节点名):将新节点,插入到目标节点之前 * 4、克隆节点.cloneNode(true/false):需要克隆谁,就用谁去调用克隆对象: * >>>传递参数可以为true或false; * >>>true表示:克隆当前节点及所有子节点; * >>>false表示:只克隆当前节点,不克隆子节点(默认) * * 【删除/替换节点】 * 1、 .removeChild(需删除节点):从父容器中,删除指定节点; * 2、 .replaceChild(新节点,被替换节点):用新节点替换指定节点。如果新节点为页面中已有节点,会在此节点删除后,替换到指定节点。
[表格对象] * 1、rows属性:返回表格中的所有行,数组; * 2、insertRow(index):在表格的第index+1行,插入一个新行 * 3、deleteRow(index):删除表格的第index+1行 * * 【表格的行对象】 * 1、cells属性:返回当前行中的所有单元格,数组; * 2、rowIndex:返回当前行,在表格中的索引顺序,从0开始; * 3、insertCell(index):在当前行的第index+1处插入一个 * 4、deleteCell(index):删除当前行的第index+1个 * * * 【表格的单元格对象】 * 1、cellIndex属性:返回单元格在该行的索引顺序,从0开始; * 2、innerHTML属性:返回或设置当前单元格中的HTML代码; * 3、align属性:设置当前单元格的水平对齐方式; * 4、className属性:设置单元格的class名称;
【JS中的事件分类】 * 1、鼠标事件: * click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup * * 2、键盘事件: * keydown:键盘按下去触发 * keypress:键盘按下并松开的瞬间触发 * keyup:键盘抬起时触发 * * [注意事项:(了解)] * ①执行顺序:keydown-keypress-keyup * ②长按时,会循环不断 的执行keydown-keypress * ③有keydown事件,不一定有keyup事件(事件触发过程中,鼠标移走,可能就没有keyup) * ④keypress只能捕获字母、数字、符号键,不能捕获功能键;keydown/keyup基本可以捕获所有功能键(特殊除外) * ⑤keypress区分大小写,keydown和keyup不区分; * ⑥keydown/keyup区分主键盘和小键盘,keypress不区分; * * * 【确定键盘触发按键】 * ①在触发函数中,传入参数e,代表按键事件; * ②通过e.keycode ,确认按键Ascii码值,进而确定按键; * ③所有浏览器系统的写法(一般不必要): * var evn=e||event;//取到键盘事件 * var code=evn.keyCode||evn.which||evn.charCode;//取到按键编码
[JS中的DOM0事件模型] * 1、内联模型:直接将函数名作为HTML标签的某个事件属性的属性值; * eg:按钮 * 缺点:违反W3C关于HTML与JavaScript分离的基本原则; * 2、脚本模型:在JS脚本中通过事件属性进行绑定; * eg:window.onload=function(){} * 局限性:同一节点,只能绑定一个同类型事件; * *【JS中的DOM2事件模型】 * 1、添加事件绑定: * IE10之前:btn1.attachEvent("onclick",函数); * 其他浏览器:btn1.addEventListener("click",函数,true/false); * 参数三:false(默认),表示事件冒泡,true,表示事件捕获 * * 兼容写法:if(btn1.attachEvent){ * btn1.attachEvent(); * }else{ * btn1.addEventListener(); * } * * 优点:同一节点,可以添加多个同类型事件的监听器; * * 2、取消事件绑定: * 注:如果要取消事件绑定,那么在绑定事件时,回调函数必须使用有名函数,而不能使用匿名函数,因为在取消事件绑定时,需要传入函数名; * .removeEventListener("click",函数名); * .detachEvent("onclick",函数名);
[JS中的事件流] * 1、事件冒泡:当某DOM元素触发某事件时,会从当前DOM元素开始,逐个触发其祖先元素的同类型事件,直到DOM根节点; * DOM0模型,均为事件冒泡; * IE中使用.attachEvent()添加的事件,均为冒泡; * 其他浏览器.addEventListener()添加的事件,当第三个参数为false时,为冒泡; * * 2、事件捕获:当某DOM元素触发某事件时,会从DOM根节点开始,逐个触发其祖先元素的同类型事件,直到触发到当前元素为止; * 只有使用.addEventListener()添加事件,并设置第三个参数为true时,才进行捕获; * * ↓ 当前元素 ↑ * ↓ ↑ * 冒 父元素 捕 * ↓ ↑ * 泡 爷爷元素 获 * ↓ ↑ * DOM根节点 * * 3、阻断事件冒泡: * IE浏览器中,将e.cancelBubble属性设为true; * 其他浏览器,调用e.stopPropagation();方法 * 兼容写法:function myParagraphEventHandler(e) { e = e || window.event; if (e.stopPropagation) { e.stopPropagation(); //IE以外 } else { e.cancelBubble = true; //IE } } 3、阻止默认事件: * IE浏览器中:将e.returnValue属性设为false; * 其他浏览器:调用e.preventDefault();方法 * 兼容写法:function eventHandler(e) { e = e || window.event; // 防止默认行为 if (e.preventDefault) { e.preventDefault(); //IE以外 } else { e.returnValue = false; //IE } }
JS中的BOM以及DOM操作
来源: http://www.bubuko.com/infodetail-2028523.html