BOM与DOM操作

BOM

BOM指浏览器对象模型, 主要用于管理窗口与窗口之间的通讯,因此其核心对象是window;

window对象

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

window是浏览器中的顶级对象,所有JavaScript的全局对象、函数以及变量都会成为window中的对象的属性或者方法,在调用window是可以省略“window”

常用的window方法

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

window的子对象

window.navigator浏览器对象,通过这个对象可以判定用户使用的浏览器信息,window.可省略

  • window.navigator.appName // web浏览器全称
  • navigator.appVersion // web浏览器厂商和版本详细信息
  • navigator.userAgent // 客户端大部分信息
  • navigator.platform // 浏览器运行所在的操作系统

screen对象

window.screen屏幕对象

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

history 对象

window.history对象,对象包含浏览器的浏览记录

  • history.forward() // 前进一页
  • history.back() // 后退一页

location对象

window.location对象,用于获得当前页面URL,以及重定向

  • location.href // 获取当前页面的URL
  • location.href="URL" // 跳转到指定的URL地址
  • location.reload() // 重新加载页面

弹出框

在JavaScript中有三种类型的弹出框:警告框、确认框、提示框

  • alert("这是一个警告框,只有一个确认按钮,必须点击确认才能进行其他操作")
  • confirm("这是一个确认框,有确认-返回true、取消-false两个按钮,可用于验证或接受消息")
  • prompt("这是一个提示框,需要输入值,有确认-返回输入的值或者“ ”、取消-返回null两个按钮")

计时

通过使用 JavaScript,我们可以在一定时间间隔之后来执行代码,即计时事件

  • var t=setTimeout(“JS语句”,毫秒) // 相隔xx毫秒,执行JS语句
  • clearTimeout("计时变量") // 清除取消setTimeout设置
  • var t=setInterval(“JS语句”,时间间隔毫秒) // 每隔xx毫秒,就执行一次JS语句
  • clearInterval("计时变量") // 清除取消setInterval设置
<script>
    // setTimeout
    var t=setTimeout(function () {alert("提示框出来啦");},3000)
    
    // 清除setTimeout
    clearTimeout(t)
    
    
    // 每隔3秒就执行一次相应函数
    var t2 = setInterval(function(){alert("提示框出来啦");}, 3000)
    
    // 取消setInterval设置
    clearInterval(t2);

</script>

DOM

DOM指文档对象模型,它定义了访问和处理HTML文档中的标准方法。HTML文档中每一个成分都代表着树中的一个节点。

节点分为:文档节点、元素节点、属性节点、文本节点,通过这些节点可以控制并修改HTML

查找标签

直接查找

  • document.getElementById("id值") // 根据id值获取一个标签
  • document.getElementsByClassName("类值") // 根据class属性获取,返回的是数组
  • document.getElementsByTagName("标签名") // 根据标签名获取标签合集,返回的是数组

间接查找

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

节点操作

创建节点

  • 语法:createElement(标签名)

    实例:var divEle = document.createElement("div");

添加节点

  • 语法:父元素.appendChild(newnode) // 在最后追加一个子节点
  • 语法: 父元素.insertBefore(newnode,某个节点); // 把增加的节点放到某个节点的前边。

删除节点

  • 父元素.removeChild(要删除的节点) // 获得要删除的元素,通过父元素调用该方法删除。

替换节点

  • 父元素.replaceChild(newnode, 某个节点);

属性节点

  • 获取文本节点的值

    var divEle = document.getElementById("d1")
    divEle.innerText
    divEle.innerHTML
    
  • 设置文本节点的值

    var divEle = document.getElementById("d1")
    divEle.innerText="1"
    divEle.innerHTML="<p>2</p>"
    
  • attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

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

获取值操作

  • 语法:elementNode.value

    var iEle = document.getElementById("i1");   //input
    console.log(iEle.value);
    
    var sEle = document.getElementById("s1");   // select
    console.log(sEle.value);
    
    var tEle = document.getElementById("t1");   // textarea
    console.log(tEle.value);
    

class操作

  • className // 获取所有样式类名(字符串)
  • classList.remove(cls) // 删除指定类
  • classList.add(cls) // 添加类
  • classList.contains(cls) // 判断是否存在,存在返回true,否则返回false
  • classList.toggle(cls) // 判断是否存在,存在就删除,否则添加

指定css操作

  • 对于没有中横线的CSS属性一般直接使用style.属性名即可。
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
  • 对含有中横线的CSS属性,将中横线后面的第一个字母换成大写即可。如:
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

事件

常用事件

  • onclick // 当用户点击某个对象时调用的事件句柄
  • ondblclick // 当用户双击某个对象时调用的事件句柄
  • onfocus // 元素获得焦点
  • onblur // 元素失去焦点
  • onchange // 域的内容被改变
  • onkeydown // 某个键盘按键被按下
  • onkeypress // 某个键盘按键被按下并松开
  • onkeyup // 某个键盘按键被松开
  • onload // 一张页面或一幅图像完成加载
  • onmousedown // 鼠标按钮被按下
  • onmousemove // 鼠标被移动
  • onmouseout // 鼠标从某元素移开
  • onmouseover // 鼠标移到某元素之上
  • onselect // 在文本框中的文本被选中时发生
  • onsubmit // 确认按钮被点击,使用的对象是form

js绑定事件的方式

  • 方式1 不推荐使用
    <button onclick="func()">按钮</button>
  • 方式2 推荐使用 标签查找动态绑定的方式
    function func() { alert('我被点击了') } var i1Ele = document.getElementById('d1'); i1Ele.onclick = function () { // i1Ele标签被点击之后 你能做的事 func() }
    ```

解决 js代码体现运行报错的情况

  • 方式1
    利用 window.onload事件 等待某个对象加载完毕之后再执行
    xxx.onload = function ()
  • 方式2
    直接将你的js代码写在body最下方

jQuery

jQuery介绍

jQuery是一个轻量级的、兼容多浏览器的JavaScript库,能够更方便的处理并简化JavaScript编程

类似python的模块

jQuery的使用

必须要先导入,再使用。引入本地jQuery文件,或者是在线文档,如:

jQuery语法结构

  • jQuery('选择器').action(属性)
  • $('选择器').action(属性)

查找标签

基本选择器

id选择器:

$("#id")

标签选择器:

$("tagName")

class选择器:

$(".className")

配合使用:

$("div.c1")  // 找到有c1 class类的div标签

所有元素选择器:

$("*")

组合选择器:

$("#id, .className, tagName")

层次选择器

x和y可以为任意选择器

$("x y");// x的所有后代y(子子孙孙)
$("x > y");// x的所有儿子y(儿子)
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
posted @ 2019-11-19 20:14  ^啷个哩个啷$  阅读(154)  评论(0编辑  收藏  举报