BOM和DOM(boom炸了)

(╥╯﹏╰╥)ง衣锦还乡、光宗耀祖支撑着我去教室

 

---------------------不定时的更新叕开始了,且更且珍惜------------------------ 

我要每次都写一遍:前面的还没补完,以此催促不定时更新的我
------------------------------------------------------------------------------------------------

 

Ⅰ BOM和DOM简介

  ☄什么是BOM和DOM?

 

      BOM:Browser Object Model,是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。

      DOM :Document Object Model),是指文档对象模型,通过它,可以访问HTML文档的所有元素。

   

  ☄为什么要学BOM和DOM

      到目前为止,我们已经学过了JavaScript的一些简单的语法。

       但是这些简单的语法,并没有和浏览器有任何交互。

     也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DOM相关知识。

     JavaScript分为 ECMAScript,DOM,BOM。 

  ▲补充:

    windows对象

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

       *  如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,

        并为每个框架创建一个额外的 window 对象。

       *  没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。

      所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

      全局变量是 window 对象的属性。全局函数是 window 对象的方法。

      接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。

      一些常用的Window方法:

        ♦ window.innerHeight - 浏览器窗口的内部高度

        ♦ window.innerWidth - 浏览器窗口的内部宽度

        ♦ window.open() - 打开新窗口

        ♦ window.close() - 关闭当前窗口

      Window对象是客户端JavaScript最高层对象之一,由于window对象是其它大部分对象的共同祖先,

         在调用window对象的方法和属性时,可以省略window对象的引用。

         例如:window.document.write()可以简写成:document.write()。

1|2window的子对象

 

 

navigator对象(了解即可)

浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息。

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

screen对象(了解即可)

屏幕对象,不常用。

一些属性:

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

history对象(了解即可)

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

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

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

location对象

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

常用属性和方法:

location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面

弹出框

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

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后,用户需要点击确定按钮才能继续进行操作。

语法:

alert("你看到了吗?");

确认框(了解即可)

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

语法:

confirm("你确定吗?")

提示框(了解即可)

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

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

语法:

prompt("请在下方输入","你的答案")

计时相关

通过使用 JavaScript,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

setTimeout()

语法:

var t=setTimeout("JS语句",毫秒)

setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数(1000 毫秒等于一秒)。

clearTimeout()

语法:

clearTimeout(setTimeout_variable)

举个例子

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);

setInterval()

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法:

setInterval("JS语句",时间间隔)

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

语法:

clearInterval(setinterval返回的ID值)

举个例子:

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

Ⅱ BOM和DOM的操作

☄BOM操作

操作浏览器,需要调用window对象,它是所有浏览器都支持的对象,表示的就是浏览器窗口

window对象可以通过点调用子对象

  • window.navigator

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

  • window.history

    history.forward()  // 前进一页
    history.back()  // 后退一页
  • window.location(重点)

    location.href  获取URL
    location.href="URL" // 跳转到指定页面
    location.reload() 重新加载页面
  • 弹出框

    警告框(alert)
    确认框(confirm)
    提示框(prompt)
  • 计时器相关(重点)

    • setTimeout与clearTimeout(设置单次定时触发,清除)

    • setInterval与clearInterval(循环触发,清除)

      function f1() {
         alert(123);
      }

      function clear() {
         var t = setInterval(f1,3000);
         function inner() {
             clearInterval(t);
        }
         setTimeout(inner,9000)
      }
      clear();

DOM操作

通过JS代码操作html页面,实现相应效果

要想操作html页面,实现相应动态效果,第一步还是得先解决查找标签的事情

查找标签

直接查找

document.getElementById
document.getElementsByClassName
document.getElementsByTagName

间接查找

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

js代码在书写时,一定要保证在页面html文件全部加载完毕后才能正常执行,否则报错。两种解决方式

  • window.onload = function(里面写js代码)title标签内部

  • js写在html文档最下方

节点操作

  • 1.创建节点,2.添加自定义属性,3.添加固有属性,4.添加到DOM树中浏览器展示

    // appendChild 直接尾部添加

    // 创建标签
    var imgEle = document.createElement('img');
    // 设置自定义属性
    imgEle.setAttribute('id','i1')
    // 设置固有的属性
    imgEle.src = 'longzhu.png'
    // 添加到DOM树中,让浏览器展示出来
    var d1Ele = document.getElementById('d1')
    d1Ele.appendChild(imgEle)
  • 1.创建节点,2.添加固有属性和标签文本值,3.指定位置添加标签

    // insertBefore 固定位置添加

    // 创建标签
    var aEle = document.createElement("a")
    aEle.href = 'https:www.baidu.com'
    aEle.innerText = '点我点我'
    // 获取参考点标签
    var d3Ele = document.getElementById('d3')
    var s1Ele = document.getElementById('s1')
    // 在d3标签内部,s1标签上方添加创建的a标签
    d3Ele.insertBefore(aEle,s1Ele)
  • innerText和innerHTML的区别

    // 获取一个标签
    var d2Ele = document.getElementById('d2');
    // 仅仅能获取到d2标签的内部文本
    d2Ele.innerText
    // 不仅获取文本,标签页全部获取到
    d2Ele.innerHTML

    // 获取标签
    var d2Ele = document.getElementById('d2');
    // 设置内部文本
    d2Ele.innerText = '哈哈'
    d2Ele.innerHTML = '呵呵'
    // 设置内部文本(文本中包含标签)
    d2Ele.innerText = '<h1>我是h1</h1>' // 不认识html标签
    d2Ele.innerHTML = '<h1>我是h1</h1>' // 能够识别html标签
  • 获取值操作

    // 用于获取用户选择或输入的标签
    input
    select
    textarea

    // 获取值
    demoEle.value
    // 设置值
    demoEle.value = '我改了'
  • class操作

    // 注意点:通过class获取到的数据是一个数组,需要通过索引拿到单个对象

    // 根据class找到相应的标签对象
    var c1Ele = document.getElementsByClassName('c1')[0]

    // 获取该标签对象的class属性列表并移除背景红色
    c1Ele.classList.remove('bg-red')

    // 添加属性
    c1Ele.classList.add('bg-green')

    // 判断是否存在
    c1Ele.classList.contains('bg-green')
    c1Ele.classList.contains('bg-red')

    // 有则删除,无则添加
    c1Ele.classList.toggle('bg-green')
  • style样式操作

    // 修改高度样式
    d1Ele.style.height = '200px'
    // 修改宽度样式
    d1Ele.style.width = '200px'
    // 修改背景色样式
    d1Ele.style.backgroundColor = 'blue'

事件绑定

两种绑定事件的方法

  • 标签内直接调用相应事件函数

  • js代码自动查找标签并绑定事件

示例

<div class="bg-red " id="d1"></div>
<button id='b1' onclick='change();'>开关1</button>
<button id='b2'>开关2</button>
<script>
   // 标签直接绑定事件
   function change(){
       var d1Ele = document.getElementById('d1');
       d1Ele.classLict.toggle('bg-green');
  }
   // 通过JS代码绑定事件
   var b2Ele = document.getElementById('b2');
   b2Ele.onclick = ()=>{
       change();
  }

搜索框案例

<input type="text" value="苹果手机" id="i1">
   var i1Ele = document.getElementById('i1');
   i1Ele.onfocus = function (ev) {
       i1Ele.value = '';
       // 也可以直接用this
       this.value = ''
  };
   i1Ele.onblur = function (ev) {
       i1Ele.value = '苹果电脑';
       // 也可以直接用this
       this.value = '苹果电脑'
  }

计时器案例

// 全局变量
var t;
// 步骤1
// 将当前时间填写到i1中
var now = new Date();
var i1Ele = document.getElementById('i1');
i1Ele.value = now.toLocalString();

// 步骤2(点开始,时间动起来)>>>(每隔一秒执行一次展示时间操作)
// 将添加时间的功能封装成一个函数
function showTime(){
   var now = new Date();
   var i1Ele = document.getElementById('i1');
   i1Ele.value = now.toLocalString();
};
// 页面一刷新先展示当前时间
showTime()
// 找到开始按钮,绑定事件
var b1Ele = document.getElementById('b1');
b1Ele.onclick = function(){
   // 判断是否已经开启过定时器了
   if (!t){
       // t指代定时器
  t = setInterval(showTime,1000);
  }
}

// 步骤3(给停止按钮绑定事件,点击后清除定时器)
var b2Ele = document.getElementById('b1');
b2Ele.onclik = function(){
   // 问题来了,清除谁呢?需要有一个变量指代定时器
   clearInterval(t)
}

// 步骤4(如果点击多次开始按钮,发现无法清除定时器)
// 判断定时器是否已开启

省市联动案例

data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
 // 先提前将两个标签对象查找到
   var pEle = document.getElementById('province');
   var cEle = document.getElementById('city');
   // 先展示省份信息
   for (var province in data){
       var proEle = document.createElement('option');
       proEle.innerText = province;
       pEle.appendChild(proEle)
  }
 // 绑定变化事件
   pEle.onchange = function () {
       // 获取对应的省信息
       var currentProvince = pEle.value;
       // 将之前的省对应的市清除
       cEle.innerHTML = '';
     
       // 添加默认的请选择项
       var newEle = document.createElement('option');
       newEle.innerText = '请选择';
       cEle.appendChild(newEle);
     
       // 获取当前省对应的市
       relCity = data[currentProvince];
       // 循环对应的市,添加到市对应的选择框中
       for(var i=0;i<relCity.length;i++){
           var cityEle = document.createElement('option');
           cityEle.innerText = relCity[i];
           cEle.appendChild(cityEle)
      }
  }

 

jQuery

找到div标签并给div标签设置为红色

// 原生js操作
var d1Ele = document.getElementById('d1');
d1Ele.style.color = 'red';

// jQuery操作
$('#d1').css('color','blue');

什么是jQuery?

  • 是一个工具,简单方便实现DOM操作

  • python里可能叫模块贴切一点,但在前端叫"类库"

jQuery学什么?

  • 查找标签

  • 修改属性样式

  • 事件

  • Ajax异步请求

  • 插件机制

使用注意事项

  • 一定要先导入后使用

基础语法

$(selector).action()

// 样式演变,原本应该
jQuery();
// 为了简化
$();

标签查找

找标签的总格式:$("")

介绍三种最基本的找法

id查找

类名查找

标签查找

组合查找

  • 提出注意点,原生DOM查找和jQuery查找出来的结果区别DOM对象与jQuery对象

    // DOM对象与jQuery对象互相转换
    $('#d1')[0]
    var d1Ele = document.getElementById('d1');
    $(d1Ele)
  • 层级选择器

    后代

    儿子

    毗邻

    弟弟

  • 基本筛选器

    // 用ul标签举例
    $('#ul>li:first')
    $('#u1>li:last')
    $('#ul>li:eq(3)')
    $('#ul>li:even')
    $('#ul>li:odd')
    $('#ul>li:gt(3)')
    $('#ul>li:lt(3)')
    $('#u1>li:not(.c1)')

    // 最后一个has的玩法需要写个三个div
    // 一个空div
    // 一个儿子有a标签
    // 一个儿子没有a,孙子有a标签
    $('div:has(a)')
  • 样式操作(原生DOM和jQuery实现标签红绿变幻)

    addClass();// 添加指定的CSS类名。
    removeClass();// 移除指定的CSS类名。
    hasClass();// 判断样式存不存在
    toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。
  • jQuery操作模态框显隐(类添加隐藏类)

  • 表单筛选器

    # 针对表单内的标签
    $('input[type="text"]')
    # 简化写法
    $(':text')

    # 找到所有被选中的checkbox
    $(':checkbox')  # 注意select框中默认selected标签也会被找到
    $('input:checkbox')
  • 筛选器方法

    # 避免$('input:first')太麻烦
    $('input').first()

    $("#id").next()
    $("#id").nextAll()
    $("#id").nextUntil("#i2")

    $("#id").prev()
    $("#id").prevAll()
    $("#id").prevUntil("#i2")

    $("#id").parent()
    $("#id").parents()  // 查找当前元素的所有的父辈元素
    $("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。

    $("#id").children();// 儿子们
    $("#id").siblings();// 兄弟们
  • jQuery链式操作

    <div>
    <p>p1</p>
    <p>p2</p>
    </div>

    $('div>p').first().addclass('c1').next().addclass('c2');

    # python代码诠释链式调用,其实就是在调用方法之后讲对象再次返回
  •  

猜你喜欢

转载自www.cnblogs.com/yangyinyin/p/10976600.html