细看JS中的BOM、DOM对象
DOM对象模型
DOM（Document Object Model），是指文档对象模型，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型。
【DOM树节点】
DOM节点分为三大类：元素节点，文本节点，属性节点：
文本节点，属性节点为元素节点的两个子节点；
通过getElment系列方法，可以去到元素节点；
【查看节点】
1.getElementById：通过id获取唯一的节点；多个同名ID只会取到第一个；
2.etElementByName：通过name取到一个数组，包含1到多个节点；
使用方式：通过循环取到每个节点，循环次数，从0开始<数组.length
[查看设置属性节点]
1.查看属性节点：getAttribute("属性名")
2.设置属性节点：setAttribute("属性名""属性值")*/
【js修改样式总结】
1、.className:为元素设置一个新的clas名字；
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：设置或者获取节点内部的所有文字；
获取行内样式的方法：var div=document.getElementsByTagName("div")；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM代码详述（一）</title> <script type="text/javascript"> window.onload = function(){
var div1 = document.getElementById("div1");//通过ID获取唯一的节点；多个同名ID只会取第一个
console.log(div1); console.log(div1.tagName);//查看节点：①属性；获取节点的标签名
console.log(div1.innerHTML);//②设置或者获取节点内部的所有HTML代码
console.log(div1.innerText);//③设置或者获取节点内部的所有文字 console.log(window.getComputedStyle(div1,null));//查看所有属性（非IE属性）
console.log(div1.currentStyle);//查看所有属性（IE属性） }
function getById(){
//取到元素节点的样式属性节点
var div1 = document.getElementById("div1").style;//获取
div1.backgroundColor = "#FF00FF";//行级样式表权重1000;所有节点属性，一律驼峰命名法 //取到元素节点
var divDoc = document.getElementById("div1");//获取
divDoc.innerHTML = "<s>king_land</s>";//重置修改div中的HTML代码
} //——————————————分割线—————————————————— function getByName(){//通过Name取到一个数组，包含1到多个节点; var div = document.getElementsByName("div1"); console.log(div.length); //使用方式：通过循环，取到每一个节点，循环次数从0开始，<数组.length
for(var n = 0 ;n < div.length ; n++){
div[n].style.backgroundColor = "#FFFF00";
} //div1.backgroundColor = "#FFFF00";
//div[0].style.backgroundColor = "#FFFF00";//★ } //——————————————分割线—————————————————— //document.getElementsByTagName();//同Name function getByTagName(){ var div = document.getElementsByTagName("div"); div[0].style.backgroundColor = "#00FF00"; } //——————————————分割线—————————————————— //document.getElementsByClassName();//同Name function getByClass(){ var div = document.getElementsByClassName("div1"); div[0].style.backgroundColor = "#00FFFF"; }
//——————————————分割线—————————————————— function getAttr () { var img1 = document.getElementById("img1");
alert(img1.getAttribute("src")); }//查看属性节点 getAttribute("属性名"); //——————————————分割线—————————————————— function setAttr () { var img1 = document.getElementById("img1");
img1.setAttribute("src","../../2-CSS基础语法/img/bg_flower_multi.gif");
img1.setAttribute("style","width: 100px;height: 100px;"); }//设置属性节点 getAttribute("属性名","属性值"); //——————————————分割线—————————————————— //JS修改样式总结
//1、.className：为元素设置一个新的class名字 例如：div1.className = "div2";
//2、.style：为元素设置新的样式 例如：div1.style.background-color = "blue";
//3、.style.cssText：为元素同时修改多个样式 例如：div1.style.cssText = "width:100px;height:200px;"; </script> <style type="text/css"> .div1{
height: 100px;
width: 100px;
background-color: #000000;
color: #FFFFFF;
line-height: 100px;
text-align: center;
} </style> </head>
<body> <div id="div1" name="div1" class="div1">
这里是测试区
</div>
<div id="div1" name="div1" class="div1">
这里是测试区
</div>
<div id="div1" name="div1" class="div1">
这里是测试区
</div>
<img src="../../2-CSS基础语法/img/bg_flower_multi.gif" id="img1"/> <br />
<button onclick="getById()">通过ID修改divcolor</button>
<br />
<button onclick="getByName()">通过Name修改divcolor</button>
<br />
<button onclick="getByTagName()">通过TagName修改divcolor</button>
<br />
<button onclick="getByClass()">通过ClassName修改divcolor</button>
<br />
<button onclick="getAttr()">取到img的src属性值</button>
<br />
<button onclick="setAttr()">修改img的src属性值</button> </body>
</html>
[获取层次节点的常用属性]：
1、.childNodes：（数组）获取元素的所有子节点（元素节点：子标签、文本节点）；
2、 .firstChild：获取元素的第一个子节点；
3、.lastChild:获取元素的最后一个子节点；
4、.ownerDocument:获取当前文档根节点，在html中，为doucument节点；
5、.parentNode：:获取当前文档父节点；
6、.previousSibling：获取当前节点的前一个兄弟节点
7、.nextSibling：获取当前节点的后一个兄弟节点；
8、.attributes：获取当前节点的所有属性节点；
【注意】：上述属性均会获得所有元素节点和文本节点，如果只需要元素节点，需要使用对应的Element属性，例如： .firstChild->.firstElementChild
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> <script type="text/javascript"> window.onload = function (){ //获取层次节点的常用属性 var ul1 = document.getElementById("ul1"); // var lis = ul1.getElementsByTagName("li"); //只取到ul1中所有li
// var lis = document.getElementsByTagName("li"); //取到页面中所有的li console.log(ul1.childNodes);//获取元素的所有子节点（包含元素节点、文本节点） console.log(ul1.firstChild);//获取元素的第一个子节点 console.log(ul1.lastChild);//获取元素的最后一个子节点 console.log(ul1.ownerDocument);//获取当前文档根节点，在html文档中为document节点 console.log(ul1.parentNode);//获取当前节点的父节点 console.log(ul1.previousSibling);//获取当前节点的前一个兄弟节点 console.log(ul1.nextSibling);//获取当前节点的后一个兄弟节点 //上述属性均会获得所有的元素节点和文本节点，如果只需要元素节点，需要使用对应Element属性，例如：firstChild→firstElementChild console.log(ul1.attributes);//获取当前节点的所有属性节点 } //——————————————创建并新增节点—————————————————— //方法一：.creatElement("标签名")创建一个新节点，需要配合setAttribute()方法设置属性；
//方法二：.appendChild(节点名)在元素的最后追加一个新节点
//方法三：.insertBefore(新节点名,目标节点名)：将新节点插入到目标节点之前
//方法四：克隆对象.cloneNode(true/false)：需要克隆谁，就用谁去调用克隆节点；传递参数可以为true/false，true表示克隆当前节点及子节点；false表示只克隆当前节点，不克隆子节点。 function appendImg(){ //1、创建一个图片节点
var img = document.createElement("img");
//2、给img节点设置属性
img.setAttribute("src","../../1-HTML基本标签/ivicon.png");
//3、将设置好的img节点追加到body最后
document.body.appendChild(img)//.setAttribute("src","../../img/2017-02-25_143342.png"); } function insertImg(){ //1、创建一个图片节点
var img = document.createElement("img");
//2、给img节点设置属性
img.setAttribute("src","../../1-HTML基本标签/ivicon.png");
//3、在两个ul之间插入图片
var ul2 = document.getElementById("ul2");
document.body.insertBefore(img,ul2); }
var count = 2;
function copyUl(){ //1、取到ul2节点
var ul2 = document.getElementById("ul2");
//2、克隆节点
var ul2Clon = ul2.cloneNode(true);
count ++;
ul2Clon.setAttribute("id","ul"+count)
//3、在原ul2节点之前，插入新克隆节点
document.body.insertBefore(ul2Clon,ul2); } //——————————————删除和替换节点—————————————————— //1、.removeChild(需删除节点)：从父容器中删除指定节点；
//2、.replaceChild(新节点，被替换节点)：用新节点替换被指定节点，如果新节点为页面中已有节点，会将此节点删除后替换到指定节点。 function deleteUl1(){ //取到ul1
var ul1 = document.getElementById("ul1");
if (ul1){
//从父容器body中删除ul1节点
document.body.removeChild(ul1);
}else{
alert("憋删了，早没了");
} } function ul1ReplaceUl2(){ var div = document.createElement("div");
div.setAttribute("style","width: 100px;height: 100px;background-color: #20B2AA;");
var ul2 = document.getElementById("ul2");
document.body.replaceChild(div,ul2); } </script> <style type="text/css"> ul{
width: 600px;
list-style: none;
padding: 0;
background-color: #20B2AA;
display: flex;
justify-content: space-around;
margin-top: 20px;
} </style> </head>
<body> <ul id="ul1">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul> <ul id="ul2">
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li>第4项</li>
</ul> <button onclick="appendImg()">在最后插入一幅图片</button>
<button onclick="insertImg()">在两个ul之间插入一幅图片</button>
<button onclick="copyUl()">copy一个ul2</button>
<br /> <button onclick="deleteUl1()">删除ul1</button>
<button onclick="ul1ReplaceUl2() ">用ul1替换ul2</button> </body>
</html>
[创建新增节点]：
1、.createElement("标签名")：创建一个新的节点，需要配合.setAttribute()方法设置新节点的相关属性；
2、.appendChild(节点名)：在某元素的最后追加一个新节点；
3、.insertBefore(新节点名，目标节点名)：将新节点插入到目标节点之前
4、克隆节点 .cloneNode(true/false):需要克隆谁，就用谁去调用克隆对象；
传递参数可以是(true/false)；
true：为科隆当前节点和所有子节点；
false：之科隆当前节点，不克隆子节点（默认）；
[删除替换节点]
1、.removeChild(需删除节点)：从父容器中，删除指定节点;
2、.replaceChild(，新节点，被替换节点)：用新节点替换指定节点，如果新节点为页面中已有节点会删除后替换指定节点
function deleteUl1(){
//取到ul1
var ul1=document.getElementById("ul1");
//从ul的父容器删除ul1
if(ul1){
document.body.removeChild(ul1);
}else{
alert("ul1已经不存在");
}
}
【表格对象】
1、rows属性：返回表格中的所有行，数组;
2、insertRow(index)：在表格的第index+1行，插入新行;
3.deleteRow():删除表格的第index+1行;
【表格行对象】：
1、cells属性：返回表格中的所有行，数组;
2、rowIndex：返回当前行，在表格中的索引顺序，从0开始;
3、indexCell(index):在表格的第index+1处插入一个<td>;
4、deleteCell(index):删除当前行的第index+1个<td>;
【表格的单元格对象】：
1.cellIndex属性：返回单元格在该行的索引顺序，从0开始;
2、innerHTML属性：返回或设置当前单元格中的HTML代码;
3、align属性：设置当前单元格的水平对齐方式;
4、claaName属性：设置单元格的class属性;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM操作表格</title> <script type="text/javascript"> //表格对象：
//1、rows属性：返回表格中的所有行，数组；
//2、insertRow(index)：在表格的第index+1行，插入一个新行；
//3、deleteRow(index)：删除表格的第index+1行； //表格的行对象：
//1、cells属性：返回当前行中的所有单元格，数组；
//2、rowIndex属性：返回当前行在表格中的索引顺序，从0开始；
//3、insertCell(index)：在当前行的index+1处插入一个td；
//4、deleteCell(index)：删除当前行的第index+1个td； //表格的单元格对象：
//1、cellIndex属性：返回单元格在该行的索引顺序，从0开始；
//2、innerHTML属性：设置或者返回当前单元格中的HTMl代码；
//3、align（valign）属性：设置当前单元格的水平对齐方式；
//4、className属性：设置单元格的class名称。 function newRow(){ var book = prompt("书名：");
var price = prompt("价格："); var table = document.getElementsByTagName("table");
//在表格的最后一行插入一个新行
var newRow = table[0].insertRow(table[0].rows.length-1);
//给新行设置单元格
var cell0 = newRow.insertCell(0);
cell0.innerHTML = book;
var cell1 = newRow.insertCell(1);
cell1.innerHTML = price; getSum(); } function deleteRow(){ var table = document.getElementsByTagName("table");
if(table[0].rows.length>2){
table[0].deleteRow(table[0].rows.length-2);
}else{
alert("删删删！删你妹啊删！")
}
getSum();
} function changeTitle(){ var color = prompt("请输入6位十六进制颜色值：");
var table = document.getElementsByTagName("table");
table[0].rows[0].style = "background-color:#"+color; } function copyRow(){ var table = document.getElementsByTagName("table");
var copyRow = table[0].rows[table[0].rows.length-2].cloneNode(true);
var heJi = table[0].rows[table[0].rows.length-1];
//由于浏览器，自动将表格的<tr>包裹在<tbody>中
//所以<tr>实际并非<table>的子节点，故需取到<table>中的<tbody>进行插入； if(table[0].rows.length>2){
table[0].getElementsByTagName("tbody")[0].insertBefore(copyRow,heJi);
}else{
alert("没有可以复制的行");
}
getSum();
} function getSum(){
//取到当前表格 表格所有行
var table = document.getElementsByTagName("table");
var rows = table[0].rows;
//
if(rows.length<=2){
rows[rows.length-1].cells[1].innerText = 0 + "元";
alert("没有可计算的行！");
return;
}
//求和
var sum = 0 ; for(var i = 1 ; i <= rows.length-2 ; i++){//第0行与最后一行舍弃1 rows.length-2 var cells = rows[i].cells;//取到单元格
sum += parseFloat(cells[cells.length-1].innerText);//最后一个单元格的 内容（innerText） 转化成数字并求和计算！ } rows[rows.length-1].cells[cells.length-1].innerText = sum.toFixed(2) + "元"; } window.onload = function(){
getSum();
} </script> <style type="text/css"> table{
border-collapse: collapse;
width: 400px;
text-align: center;
color: #585858;
}
td,th{
border: 1px solid #8B8A8B;
}
table tr:last-child{
color: #E70014;
} </style> </head>
<body> <table>
<tr>
<th>书名</th>
<th>价格</th>
</tr>
<tr>
<td>看得见风景的房间</td>
<td>30.00元</td>
</tr>
<tr>
<td>幸福从天而降</td>
<td>18.50元</td>
</tr>
<tr>
<td>60个瞬间</td>
<td>32.00元</td>
</tr>
<tr>
<td>合计</td>
<td></td>
</tr>
</table> <br /> <button onclick="newRow()">增加一行</button>
<button onclick="deleteRow()">删除最后一行</button>
<button onclick="changeTitle()">修改标题样式</button>
<button onclick="copyRow()">复制最后一行</button> </body>
</html>
BOM(Browser Object Model) 是指浏览器对象模型
【screen对象】
console.log(screen);
console.log(screen.width); //屏幕宽度；
console.log(screen.height); //屏幕高度；
console.log(screen.availWidth);//屏幕可用宽度；
console.log(screen.availHeight);//屏幕可用高度=屏幕高度-底部任务栏高度；
location对象
location完整的URL路径：
1.协议：//主机名（IP地址）：端口号(默认80端口)/文件路径？传递参数(参数名=参数值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);//从#开始的锚点
window.location="http://www.baidu.com";//使用JS跳转页面
function locationAssign(){
location.assign("http://www.baidu.com");
加载新文档，加载之后，可以回退；
}
function locationReplace(){
location.replace("http://www.baidu.com");
使用新的文档，替换当前文档，替换之后不能回退；
}
function locationReload(){
重新加载当前页面
reload(true)：从服务器重新加载页面
reload()：在本地刷新当前页面*/
location.reload(true);
}
console.log(history.length);
浏览历史列表的个数
history.forward();前进到前一个页面；
history.back();前进到后一个页面；
history.go(-1);跳转到任意页面：前一个页面为第一个，后一个页面为-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；
在这九种方法中，最常用到也是这里面最麻烦的四种是setTimeout/clearTimeout和setInterval/clearInterval，它们两两对应，常放在一起搭配使用。下面就给大伙举一个这方面的栗子~
（栗子：setTimeout/clearTimeout）
（栗子：setInterval/clearInterval）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首先是setTimeout与clearTimeout</title>
<!--要记得首先打开控制台哟~-->
<script type="text/javascript">
var timeoutid = setTimeout(function(){
console.log("setTimeout");
},5000) ;
function clearTimeoutBtn(){
clearTimeout(timeoutid);
}
</script>
</head>
<body>
<button onclick="clearTimeoutBtn()">clearTimeout</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>然后是setInterval与clearInterval</title>
<!--要记得首先打开控制台哟~-->
<script type="text/javascript">
var num = 10;
var timeinterval = setInterval(function(){
num--;
console.log(num);
if (num==0){
clearInterval(timeinterval);
}
},1000)
function clearIntervalBtn(){
clearInterval(timeinterval);
}
</script>
</head>
<body>
<button onclick="clearIntervalBtn()">clearIntervar</button>
</body>
</html>
js事件模型
1 DOM0事件模型
1.1 内联模型：直接将函数名作为HTML标签的某个事件属性的属性值； 栗子 <button onclick="func()"></button> 缺点：违反了W3C关于HTML与JS分离的基本原则！
1.2 脚本模型：在JS脚本中通过事件属性进行绑定； 栗子 window.onload = function(){} 局限性：同一节点只能绑定一个同类型事件；
2 DOM2事件模型（后面有栗子！）
优点：同一节点，可以添加多个同类型事件的监听器；
①添加事件绑定： IE10之前：btn1.attachEvent("onclick",函数); 其他浏览器：btn1.addEventListener("click",函数,true/false); true：表示事件捕获；false（默认）：表示事件冒泡 兼容写法：if(btn1.attackEvent){btn1.attachEvent("onclick",函数);}else{btn1.addEventListener("click",函数,true/false);}
②取消事件绑定： .detachEvent("onclick",函数名); .removeEventListener("click",函数名); 注：如果取消时间帮顶，回调函数必须使用有名函数，而不能使用匿名函数。因为在取消事件帮顶时，需要传入函数名；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这里是栗子</title> <script type="text/javascript">
window.onload = function (){ var btn1 = document.getElementById("btn1");
function func1(){
alert(1);
}
function func2(){
alert(2);
}
btn1.addEventListener("click",func1,false);
btn1.addEventListener("click",func2,false); var btn2 = document.getElementById("btn2");
btn2.addEventListener("click",function(){
btn1.removeEventListener("click",func1);
},false); }
</script>
</head>
<body> <button id="btn1">点我会弹窗！</button> <br /><br /> <button id="btn2">点我不弹窗！</button>
</body>
</html>
JS中的事件流
1 事件冒泡
当某DOM元素触发某事件时，会从当前DOM元素开始，逐个触发其祖先元素的同类型事件，直到DOM根节点； DOM0事件流均为事件冒泡； IE中使用.attachEvent()事件，均为冒泡； 其他浏览器.addEventListener()添加的事件，当第三个参数为false时，为冒泡。
2 事件捕获
当某DOM元素触发某事件时，会从DOM根节点，逐个触发其祖先元素的同类型事件，直到触发到当前DOM元素开始；
只有使用.addEventListener()添加的事件，并且当第三个参数为true时，才进行捕获。
3 阻止事件冒泡
IE浏览器：将e.cancelBubble属性设为true； 其他浏览器：调用e.stopPropagation();方法
4 取消事件默认行为
IE浏览器：将e.returnValue属性设为false； 其他浏览器：调用e.preventDefault(); 方法
（这里有栗子）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件流举栗</title>
<style type="text/css"> #div1{
width: 200px;
height: 200px;
background-color: #20B2AA;
color: #FFFFFF;
font-size: 20px;
font-weight: 700;
}
#div2{
width: 100px;
height: 100px;
background-color: #436690;
color: #FFFFFF;
font-size: 20px;
font-weight: 700;
}
#div3{
width: 50px;
height: 50px;
background-color: #4E2E83;
color: #FFFFFF;
font-size: 20px;
font-weight: 700;
} </style> </head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">3</div>
</div>
</div> <a href="../07 JS中的DOM/笔记.html" onclick="stopHref()">跳转页面</a>
</body> <script type="text/javascript">
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3"); div1.addEventListener("click",function(e){
handleE();
console.log("div1触发了click事件");
},false); div2.addEventListener("click",function(e){
handleE();
console.log("div2触发了click事件");
},false); div3.addEventListener("click",function(e){
handleE();
console.log("div3触发了click事件");
},false); function handleE(e){
var evn = e||window.event;
evn.stopPropagation();
}
function stopHref(e){ e = e||window.event;
if (e.preventDefault) {
e.preventDefault(); //IE以外
} else {
e.returnValue = false; //IE
} alert("好气呀！"); } </script> </html>
细看JS中的BOM、DOM对象的更多相关文章
- JavaScript BOM DOM 对象
title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...
- JS中遍历数组、对象的方式
1.标准的for循环遍历数组 //不打印自定义属性和继承属性 var array = [1,2,3]; for (var i = 0; i < array.length; i++) { cons ...
- js中内置有对象
statpot:使用mongo+bootstrap+highcharts做统计报表 最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求 ...
- JS中的内置对象简介与简单的属性方法
JS中的数组: 1.数组的概念: 数组是在内存中连续存储的多个有序元素的结构,元素的顺序称为下标,通过下标查找对应元素 2.数组的声明: ①通过字面量声明var arr1 = [,,,,] JS中同一 ...
- JavaScript -- 时光流逝（六）：js中的正则表达式 -- RegExp 对象
JavaScript -- 知识点回顾篇(六):js中的正则表达式 -- RegExp 对象 1. js正则表达式匹配字符之含义 查找以八进制数 规定的字符. 查找以十六进制数 规定 ...
- JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
- js下 Day01、DOM对象，BOM浏览器对象模型
一．初识DOM 1．什么是DOM?为什么学习DOM 2．DOM是实现js在网页实现交互的关键环节,我们的js代码就是通过DOM的方法来实现对于html内容的操作. 3．认识DOM实现了js和网页结合的 ...
- js中的BOM对象
浏览器对象模型(BOM)以 window 对象为依托,表示浏览器窗口以及页面可见区域.同时, window对象还是 ECMAScript 中的 Global 对象,因而所有全局变量和函数都是它的属性, ...
- js中__proto__, property, prototype, 对象自身属性方法和原型中的属性方法的区别
__proto__: 这个属性是实例对象的属性,每个实例对象都有一个__proto__属性,这个属性指向实例化该实例的构造函数的原型对象(prototype). proterty:这个方法是对象的属性 ...
随机推荐
- 使用Atom打造无懈可击的Markdown编辑器
一直以来都奢想拥有一款全能好用的Markdown编辑器,直到遇到了Atom.废话不多说,直接开搞! 1. 安装Atom 下载安装Atom:https://atom.io/ 2. 增强预览(markdo ...
- 在 WPF 中使用 Path 路径
在 WPF 中总会修改 Button 的 Style,比如一个自定义的 Close 按钮.刚入门的可能会用一张 PNG 格式的图片来做这个按钮的 Icon,但这个是不优雅的.而且你要改的时候还得去操作 ...
- UNIX基础上
时光飞逝,转眼已经毕业快2年了,觉得自己学的东西多却不精.对此深深的思考一下,觉得有必要连载unix环境编程文章,以此激励自己学习.在此立贴为证,2天一篇博客从零开始阐述unix的环境编程. 参考书籍 ...
- WPF之路一：相对路径图片显示
由于公司项目的需要,改为WPF开发,因此需要学习WPF,遇到的第一个问题就是在显示的图片的时候,写绝对路径,图片显示没有问题,但是写相对路径的时候,发现图片无法正常显示,在网上搜了一下,得到的答案是需 ...
- Java并发编程：JDK中的阻塞队列
上次我们讲了一些常用的4个阻塞队列,但是在JDK中还提供了其他的一些阻塞队列.这篇文章将全面介绍一下JDK中的所有阻塞队列,并比较他们的区别. JDK7提供了7个阻塞队列.分别是 ArrayBlock ...
- ServerSuperIO 3.5版本的体系结构，以及未来规划的几点思考
一.特点 1.轻型高性能通信框架,适用于多种应用场,轮询模式.自控模式.并发模式和单例模式. 2.不仅是通讯框架,是设备驱动.IO通道.控制模式场景的协调机制. 3.支持协议驱动器,可以按规范写标准协 ...
- 事务隔离级别与传播机制，spring+mybatis+atomikos实现分布式事务管理
1.事务的定义:事务是指多个操作单元组成的合集,多个单元操作是整体不可分割的,要么都操作不成功,要么都成功.其必须遵循四个原则(ACID). 原子性(Atomicity):即事务是不可分割的最小工作单 ...
- 【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- Sql日期时间格式转换大全
简介:我们经常会用到sql日期转换,这里列出了日期输出为字符串的所有代码 输出格式 2014-06-12 ), ) 输出格式 2014-06-12 22:31:18 ), ) 以下是各种转换日期代码号 ...
- 因为文件组 'PRIMARY' 已满 解决办法
简介:文件组 'PRIMARY' 已满 一般虚拟主机提供商是通过限制数据库文件的大小来实现提供定制的数据库空间的.当你把从虚拟数据库空间备份下来的文件恢复到自己的服务器上时,这个限制还是存在的.找到数 ...