JavaScript基础三

一、BOM

1、windows对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

一些常用的Window方法：

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口

 

2.windows子对象

navigator对象

//web浏览器全程
navigator.appCodeName;
"Mozilla"

// Web浏览器厂商和版本的详细字符串
navigator.appVersion;
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36"

// 客户端绝大部分信息
navigator.userAgent;
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36"

// 浏览器运行所在的操作系统
navigator.platform;
"Win32"

 

screen对象

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

 

history对象

window.history 对象包含浏览器的历史。

浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。

// 前进一页
history.forward();

// 后退一页
history.back();

 

location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

常用属性和方法：

// 获取当前url
location.href;

// 跳转到指定页面
location.href="https://www.google.com.hk";

// 重新加载页面
location.reload();

 

3.弹出框

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

 

警告框

//警告框
alert('哈哈');

 

确认框

确认则返回true，取消返回False

// 确认框
confirm("是否需要进行QQ登陆");

 

提示框

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

// 提示框
prompt("1+1=?","请输入答案");

 

4.计时相关

setTimeout('JS语句',毫秒)           过了X毫米之后执行JS语句

setInterval('JS语句',毫秒)            每隔X毫秒执行JS语句

 

两个方法都会返回任务的ID值

 

clearTimeout(ID值)　　　　　　取消setTimeout() 方法的任务

clearInterval(ID值)　　　　　　 取消clearInterval() 方法的任务

 

两个方法的都需要填入相应的ID值才能取消任务

//10000毫秒后执行函数
setTimeout(function(){console.log(111)},10000)
//返回任务ID
42

//取消计时任务
clearTimeout(42)

//每个2000毫秒执行一次函数
setInterval(function(){console.log(123)},2000);
//返回任务ID
43

//取消定时任务
clearInterval(43);

 

二、DOM

DOM 是一套对文档的内容进行抽象和概念化的方法

通过JavaScript操作HTML文档，操作HTML的元素

将HTML映射成用代码去描述HTML页面，把HTML的元素当成节点来处理

 

1、查找标签

//根据ID获取标签
document.getElementById('i1');

//根据class属性获取
document.getElementsByClassName('.jumbotron');

//根据标签名获取标签合计
document.getElementsByTagName('div');

parentElement            //父节点标签元素
children                 //所有子标签
firstElementChild        //第一个子标签元素
lastElementChild         //最后一个子标签元素
nextElementSibling       //下一个兄弟标签元素
previousElementSibling   //上一个兄弟标签元素

 

2、节点操作

创建节点：createElement(标签名)

添加节点：

追加一个子节点（作为最后的子节点）

somenode.appendChild(newnode)；

把增加的节点放到某个节点的前边。

somenode.insertBefore(newnode,某个节点);

//定义变量找到标签，返回是一个数组
var divEle = document.getElementsByClassName('d1');
//创建标签
var aEle = document.createElement('a');

// 查看divEle变量的内容，是一个数组
divEle
HTMLCollection [div.d1]

//查看创建的标签
aEle
<a>​</a>​

// 给div的追加一个子节点
divEle[0].appendChild(aEle);
<a>​</a>​

//创建标签
var pEle = document.createElement('p');

//查找标签，返回数组
var aEle = document.getElementsByTagName('a');

//插入标签
divEle[0].insertBefore(pEle,aEle[0]);

 

删除节点

somenode.removeChild(要删除的节点)

//删除节点
divEle[0].removeChild(aEle[0]);

 

替换节点

//替换节点
somenode.replaceChild(newnode, 某个节点);

 

3、获取节点文本的值

innerText 　　不认识html标签，获取该标签和内部标签的所有文本内容

//查找标签
var divEle = document.getElementsByTagName('div');
// 获取节点的值
divEle[0].innerText

 

innerHTML 　　认识html标签，获取文本内容和子标签及内容

//查找标签
var divEle = document.getElementsByTagName('div');
// 获取节点的值（含标签）
divEle[0].innerHTML;

 

4、设置文本的值

// 查找标签
var h1Ele = document.getElementsByTagName('h1');

// 修改标签的文本内容（标签当作字符串）
h1Ele[0].innerText='<a>abc</a>';
// 修改标签的内容（标签仍为标签）
h1Ele[0].innerHTML='<a>abc</a>';

 

5、attribute操作，修改属性

// 设置标签的属性
h1Ele[0].setAttribute('k','v');
// 查看标签的属性
h1Ele[0].getAttribute('k');
// 删除标签的属性
h1Ele[0].removeAttribute('k');

// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

 

6、获取值操作

获取用户输入的值

适用于以下标签：

input
select
textarea

// 查找标签
var selEle = document.getElementById('s1');
//获取option的被用户选中的value属性，如果没有value属性则获取文本内容
selEle.value


// 查找标签
var inEle = document.getElementById('i1');
// 获取用户输入的内容
inEle.value

//查找标签
var texEle = document.getElementById('t1');
// 获取用户输入的内容
texEle.value

 

7、class操作

classList.remove(cls)  //删除指定类
classList.add(cls)  //添加类
classList.contains(cls)  //存在返回true，否则返回false
classList.toggle(cls)  //存在就删除，否则添加

 

8、指定CSS操作

JS操作CSS属性的规律：

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

 

三、事件

1.常用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。             
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

 

2.绑定方式：

方式一：

<div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>

注意：

this是实参，表示触发事件的当前元素。

函数定义过程中的ths为形参。

方式二：

<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>