C1认证学习笔记（第四章）_结构 c1认证

最新推荐文章于 2024-10-24 23:03:12 发布

2401_84281648

最新推荐文章于 2024-10-24 23:03:12 发布

阅读量828

点赞数 9

分类专栏：程序员文章标签： c1认证学习笔记

本文链接：https://blog.csdn.net/2401_84281648/article/details/138264176

版权

程序员专栏收录该内容

166 篇文章 0 订阅

订阅专栏

DOM控制CSS样式：

任务目标:

掌握通过style属性控制样式
掌握通过classList属性及其方法控制样式

任务背景:

为了实现网页交互效果，我们经常需要控制DOM的CSS样式，了解并掌握如何控制CSS是Web开发中的重要技能之一。

通过style属性控制样式：

style属性可以设置或返回元素的内联样式

语法：element.style.property = value
property为CSS属性名，如：color，margin。如果属性名原来包含“-”，则需转换为小驼峰形式，如：backgroundColor，marginLeft。

var box = document.querySelector('div')
box.style.color = "#fff" // 将元素中文字设置为白色 
box.style.marginLeft = "100px" // 将元素左外边距设置为100px

通过classList控制样式：

classList属性返回一个元素类属性集合（这里可以简单理解为类名的集合），通过使用classList中的方法可以方便的访问和控制元素类名，达到控制样式的目的

classList常用方法介绍

名称	描述
add(class1, class2, …)	添加一个或多个类名
remove(class1, class2, …)	移除一个或多个类名
replace(oldClass, newClass)	替换类名
contains(class)	判定类名是否存在，返回布尔值
toggle(class, truefalse)	如果类名存在，则移除它，否则添加它，第二个参数代表无论类名是否存在，强制添加（true）或删除（false）

<div class="box">classList test</div>
<script>
  var box = document.querySelector('.box')
  box.classList.add('box1', 'box2')    // [box] => [box, box1, box2]
  box.classList.remove('box1', 'box2') // [box, box1, box2] => [box]
  box.classList.replace('box', 'box2')  // [box] => [box2]
  box.classList.contains('box1')  // 当前元素不包含类名box1，返回false
  box.classList.toggle('active')   // [box2] => [box2, active]
</script>

任务练习：

①：将div元素背景颜色设置为蓝色，请补全横线处代码

var box = document.querySelector('div')
box.style.________ = 'blue'

backgroundColor

②：将div设置为隐藏，请补全横线处代码

<style>
  .hidden {
    display: none;
  } 
</style>
<div class="box">看不见我</div>
<script>
  var box = document.querySelector('.box')
  box.classList.\_\_\_\_\_\_\_\_('hidden')
</script>

add

③：将包含disabled类名的按钮设置为禁用，请补全横线处代码

<button class="delete disabled">删除</button>
<script>
  var delBtn = document.querySelector('.delete')
    if (delBtn.classList.\_\_\_\_\_\_\_\_ ('disabled')) {
        delBtn.setAttribute('disabled', true)
    }
</script>

思路：该题用到了 if 语句，需要判断 button 元素中是否包含 disabled类名，此处应使用classList中的 contains对应的判断类名是否存在。

contains

④：将span元素文字颜色设置为绿色，请补全横线处代码

<style>
    .pass {
        color: green;
    }
    .loading {
        color: orange;
    }
</style>
<span class="pass loading">考试通过</span>
<script>
  var item = document.querySelector('span')
  item.classList.remove('\_\_\_\_\_\_\_\_')
</script>

loading

⑤：span元素的文字颜色是红色

<style>
    .active {
        color: red;
    }
</style>
<span>逢考必过</span>
<script>
  var item = document.querySelector('span')
  item.style.color = 'blue'
  item.classList.add('active')
</script>

在这里插入图片描述

节点写入：

任务目标:

掌握节点写入的常用方式
掌握通过classList属性及其方法控制样式

任务背景:

当我们需要更改一个标签的文字或内容时，这时就需要了解节点写入的知识，学会节点写入可以帮助我们更加精确的控制网页内容，节点写入的方式有很多种，这里介绍常用的几种方法。

节点写入常用方式：

名称	描述
`innerHTML`	返回元素中的`html`内容，通过赋值，可设置元素中的`html`内容
`innerText`	返回元素中的文本内容，通过赋值，可设置元素中的文本内容
`document.write()`	将`html`字符串写入到文档中

1.1 innerHTML：

在div中写入h1元素

<body>
  <div></div>
</body>
<script>
	document.querySelector('div').innerHTML = '<h1>我是新内容</h1>'
</script>

在这里插入图片描述

如果写入内容中包含html标签字符串，会被解析成对应的html标签

1.2 innerText：

在div中写入字符串

<body>
  <div></div>
</body>
<script>
	document.querySelector('div').innerText = '<h1>我是新内容</h1>'
</script>

在这里插入图片描述

html标签字符串不会被解析，会被当作普通字符串写入

1.3 document.write():

document.write('我是新内容')
document.write('<h1>我是新内容</h1>')

和innerHTML类似，写入内容如果包含html标签字符串，会被解析成对应的html标签。document.write()根据运行时机，会写入文档不同的位置

任务练习：

①：在div中插入文字内容为“加油，我要通过C认证”的p元素，请补全横线处代码

<div></div>
<script>
  var box = document.querySelector('div')
  box.________ = '<p>加油，我要通过C认证</p>'
</script>

innerHTML

②：使如下代码运行后输出字符串sky，请补全横线处代码

<div>
    <span>s</span><span>k</span><span>y</span>
</div>
<script>
  var word = document.querySelector('div').________
  console.log(word)
</script>

innerText

③：在第一行元素后插入第二行元素，请补全横线处代码

<div>第一行</div>
<script>
    document.\_\_\_\_\_\_\_\_ ('<div>第二行</div>')
</script>

write

④：将ul中的span元素改为li元素，文字内容不变，请补全横线处代码

<ul>
  <span>第一梯队</span>
  <li>第二梯队</li>
</ul>
<script>
  var box = document.querySelector('ul')
  box._______ = box.innerHTML.replace('span', 'li')
</script>

innerHTML

⑤：代码运行后，页面中所有数字之和是________

<ul>
    <script>
        document.write('<li>5</li>')
    </script>
    <li>6</li>
    <script>
        var box = document.querySelector('ul')
        box.innerHTML = '<li>7</li>'
    </script>
</ul>

7

事件基础：

任务目标:

掌握节点写入的常用方式
掌握通过classList属性及其方法控制样式

任务背景:

节点写入常用方式：

1.1 事件定义：

用户与浏览器交互的方法，规定了浏览器在什么时刻执行什么事情

事件举例：鼠标单击，双击，键盘输入，页面或图像载入

1.2 事件三要素（事件源，事件，事件处理程序）

事件源：谁触发的，一般指某个元素节点
事件：怎么触发的
事件处理程序：触发后发生了什么事

在这里插入图片描述

事件绑定：

事件源要与事件绑定后，才能触发对应事件。下面以鼠标点击事件为例，介绍事件的三种绑定方式。

2.1 方式一：行内事件属性赋值：

<button onclick="alert('行内事件属性赋值')">点击按钮</button>

2.2 方式二：事件属性赋值：

var btn = document.querySelector('button');
btn.onclick = function() {
  alert('事件属性赋值')
}

2.3 方式三：事件监听：

addEventListener(type, listener, useCapture)

type: 事件类型
listener: 监听器（处理程序）
useCapture: 默认为false，设置为true时，不会因冒泡触发监听器

const btn = document.querySelector('button');
btn.addEventListener('click', function() {
  alert('事件监听')
})

事件属性赋值与事件监听区别：

事件属性多次赋值，只会执行最后一次事件处理程序；事件监听可以添加多个监听器，执行多个事件处理程序；
事件属性赋值兼容IE8及以下浏览器，而事件监听最低兼容到IE9浏览器

任务练习：

①：实现点击按钮，更改按钮内容效果，请补全横线处代码

<button class="btn">点击我</button>
<script>
document.querySelector('.btn').\_\_\_\_\_\_\_\_ ('click', function() {
    this.innerText = '我被点击了'
})
</script>

addEventListener

②：实现点击按钮，更改按钮内容效果，请补全横线处代码

<div class="box">点击这个盒子</div>
<script>
    document.querySelector('.box').________ = function() {
        this.style.backgroundColor = '#000'
        this.style.color = '#fff'
        this.innerText = '盒子黑了'
    }
</script>

onclick

③：实现点击变身按钮，弹出变身台词，请补全横线处代码

<button>变身</button>
<script>
    var btn = document.querySelector('button')
    btn.addEventListener('click', ________)

    function rider() {
        alert("胜利的法则已经确定了！")
    }
</script>

rider

④：点击输出数字按钮，最终输出的数字是________

<button>输出数字</button>
<script>
    var btn = document.querySelector('button')
    btn.onclick = foo2
    btn.onclick = foo1
    
    function foo1() {
        console.log(111)
    }
    function foo2() {
        console.log(222)
    }
</script>

思路：使用事件属性绑定两个事件处理程序，只会执行最后一个。

111

⑤：代码如下，点击一次按钮，p元素中显示的数字是________

<button >按钮</button>
<p>0</p>
<script>
  var btn = document.querySelector('button')
  var num = 0
  btn.addEventListener('click', function() {
    num++
    document.querySelector('p').innerHTML = num
  })
  btn.addEventListener('click', function() {
    num++
    document.querySelector('p').innerHTML = num
  })
</script>

2

鼠标及键盘事件：

任务目标:

掌握常用鼠标事件
掌握常用键盘事件及键盘事件属性

任务背景:

我们与网页的交互大多是通过鼠标和键盘来触发的，了解并掌握鼠标及键盘事件可以帮助我们实现许多常用的交互效果。

常用鼠标事件：

名称	描述
`click`	单击鼠标左键触发。焦点在按钮并按了Enter键时，也会触发
`contextmenu`	右键点击（右键菜单显示前触发）
`dblclick`	双击左键触发
`mouseenter`	指针移至元素范围内触发一次
`mouseleave`	指针移出元素范围外触发一次
`mouseover`	指针移至元素或其子元素内，可能触发多次
`mouseout`	指针移出元素，或者移至其子元素内，可能触发多次

代码示例：

var btn = document.querySelector('button')
btn.addEventListener('mouseenter', function() { // 鼠标移入文字为红色
  this.style.color = 'red'
})
btn.addEventListener('click', function() {  // 鼠标单击文字为蓝色
  this.style.color = 'blue'
})
btn.addEventListener('mouseleave', function() { // 鼠标移出文字为黑色
  this.style.color = 'black'
})

事件处理程序中的this指代当前操作元素

常用键盘事件:

名称	描述
`keyCode`	`keyCode`属性返回keypress事件触发的键的值的字符代码，或者keydown或keyup事件的键盘代码。字符代码 - 表示ASCII字符的数字键盘代码 - 表示键盘上真实键的数字
`charCode`	返回keypress事件触发时按下的字符键的字符Unicode值，用于keydown或keyup时总是返回0
`key`	返回按键的标识符(字母区分大小写)。keypress，keyup，keydown返回值相同

代码示例：

// 以输入a为例，分别查看三种事件返回结果
var input = document.querySelector('input')
input.addEventListener('keydown', function(event) {
  console.log(event.keyCode)      // 65
  console.log(event.charCode)	  // 0
  console.log(event.key)           // a
})
input.addEventListener('keypress', function(event) {
  console.log(event.keyCode)      // 97
  console.log(event.charCode)     // 97
  console.log(event.key)           // a
})
input.addEventListener('keyup', function(event) {
  console.log(event.keyCode)      // 65
  console.log(event.charCode)     // 0
  console.log(event.key)           // a
})

可以看到，三种事件中，只有key属性返回的结果保持统一，如果不考虑IE8以下浏览器兼容性，推荐使用key来代替keyCode和charCode

任务练习：

①：实现点击按钮，弹出“已点击”提示，补全代码

var btn = document.querySelector('button');
btn.addEventListener('\_\_\_\_\_\_\_\_', showPublish);
function showPublish() {
  alert('已点击');
}

click

②：点击按钮，弹框显示对应按钮中文字，补全代码

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
  var btns = document.querySelectorAll('button')
  for (var idx = 0; idx < btns.length; idx++) {
    btns[idx].addEventListener('click', function() {
      alert(________.innerHTML)
    })
  }
</script>

this

③：鼠标移出span元素时，字体大小是________px

<span>五谷丰登</span>
<script>
    var span = document.querySelector('span')
    span.addEventListener('mouseenter', function() {
        this.style.fontSize = '16px'
    })
    span.addEventListener('mouseleave', function() {
        this.style.fontSize = '14px'
    })
</script>

mouseleave代表鼠标移出事件

14

④：补全代码，实现在文本框中输入内容时，唐僧先于白龙马输出

<input type="text" />
<script>
  var input = document.querySelector('input')
  input.addEventListener('\_\_\_\_\_\_\_\_', function() {
    console.log('白龙马')
  })
  input.addEventListener('keypress', function() {
    console.log('唐僧')
  })
</script>

思路：常用键盘事件执行顺序为：keydown->keypress->keyup

keyup

⑤：在input输入框中点击回车后，弹出登录成功提示，补全代码

<input type="text">
<script>
  var input = document.querySelector('input')
  input.addEventListener('keyup', function(event) {
    if (event.key=== '\_\_\_\_\_\_\_\_') {
      alert('登录成功')
    }
  })
</script>

Enter

窗口事件：

任务目标:

掌握常用的窗口事件
掌握常用键盘事件及键盘事件属性

任务背景:

窗口事件在浏览器窗口发生变化时触发，其中包括窗口大小更改，加载窗口，关闭窗口，窗口滚动等，掌握如何处理窗口事件可以帮助我们实现更加丰富的交互效果。

常用鼠标事件：

名称	描述
`load`	当整个页面及所有依赖资源（如样式表和图片）都已完成加载时，将触发load事件
`beforeunload`	window、document 和它们的资源即将卸载时触发。当事件属性 returnValue 被赋值为非空字符串时，会弹出一个对话框，让用户确认是否离开页面（示例如下）。否则，事件被静默处理。一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框
`resize`	窗口大小改变时触发
`scroll`	元素内发生滚动时触发
3.1.1 load事件代码示例:

<script>
/\* 输出div中文字内容 \*/
// 方式一
window.addEventListener('load', function() {
  console.log(document.querySelector('.box').innerHTML)
})
// 方式二
window.onload = function() {
  console.log(document.querySelector('.box').innerHTML)
}
</script>
<div class="box">主要内容</div>

此处JS代码在元素之前，所以应该将代码放在load事件中，等待元素加载完成后再获取其内容。

使用onload绑定事件时，注意一个页面不要存在多个onload，这样会只会运行最后一个onload中的代码，推荐使用addEventListener绑定事件。

1.2 beforeunload事件代码示例:

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "confirm close window ?"
  // 兼容WebKit与非WebKit内核浏览器
  (e || window.event).returnValue = confirmationMessage
  return confirmationMessage
})

根据returnValue或return的值可自定义对话框信息（只对IE有效）

1.3 resize事件代码示例:

/\* 调整浏览器窗口时，获取可视窗口宽高 \*/
window.addEventListener("resize", function (e) {
  console.log(window.innerWidth) // 可视窗口宽
  console.log(window.innerHeight) // 可视窗口高
})

多用于检测不同屏幕尺寸，自适应布局

1.4 scroll事件代码示例:

/\* 获取滚动条垂直滚动距离 \*/
window.addEventListener("scroll", function () {
    var myTop = 
    window.pageYOffset || 
    document.documentElement.scrollTop || 
    document.body.scrollTop; // 兼容写法
    console.log(myTop);
})

常用于检测滚动条滚动距离

任务练习：

①：实现窗口大小发生变化时，重置div元素高度为当前窗口高度的一半，请补全横线处代码

<style>
    .box {
        width: 200px;
        height: 500px;
        background-color: blue;
    }
</style>
<div class="box"></div>
<script>
  window.addEventListener('\_\_\_\_\_\_\_\_', function() {
      document.querySelector('.box').style.height = window.innerHeight/2 + 'px'
  })
</script>

resize

②：实现窗口滚动时，类名为top的元素固定在顶部，请补全横线处代码

<style>
    .box {height: 3000px;}
    .top {width: 200px;height: 200px;background-color: gray;}
</style>
<div class="box">
    <span>我是顶部</span>
    <div class="top">顶部元素</div>
</div>
<script>
  window.addEventListener('\_\_\_\_\_\_\_\_', function() {
      document.querySelector('.top').style.position = 'fixed'
  })
</script>

scroll

③：将h1元素中文字改为“欢迎光临”，请补全横线处代码

<script>
  window.addEventListener('\_\_\_\_\_\_\_\_', function() {
    document.querySelector('h1').innerText = "欢迎光临"
  })
</script>
<h1>等待中</h1>

load

④：浏览器窗口宽度为1000px时，p元素的字体大小为________px

<style>
  .item {
      font-size: 20px;
  }
</style>
<p class="item">我爱学习</p>
<script>
window.addEventListener('resize', function() {
    if (window.innerWidth < 900) {
      document.querySelector('.item').style.fontSize = '12px'
    }
})
</script>

思路：浏览器窗口宽度为1000px没有满足if条件，所以不改变

20

⑤：代码如下，最后输出的num数字是________

<script>
  var num = 0
  function add() {
    if(document.querySelector('.box')) {
      num++
    }
    console.log(num)
  }
  add()
  window.addEventListener('load', function() {
    add()
  })
  add()
</script>
<div class="box"></div>

思路：add方法中，只有获取到box节点时才会对num加1；
box节点在JS代码下方，只有在load事件中的add方法才能获取到box节点，所以最终num只会执行一次相加。

1

BOM window对象：

任务目标:

熟悉BOM结构
掌握window对象及其常用方法属性
掌握window的子对象常用属性和方法

任务背景:

BOM即浏览器对象模型（Browser Object Model），它提供了页面与浏览器窗口进行交互的对象接口。BOM由一系列的相关对象组成，window作为BOM的顶层对象，所有其他全局对象都是window的子对象，甚至DOM也是其子对象之一。学会了window对象及其子对象的常用属性方法，基本就掌握了BOM的大部分知识。

BOM结构：

在这里插入图片描述

window对象作为BOM的顶级对象，本身包含一些全局属性和方法，其子对象也有其特有的属性和方法

使用window子对象时，可以使用完整语法，也可以忽略window，如：window.alert()与alert()效果相同

window对象：

名称	描述
`open()`	打开一个新浏览器窗口
`alert()`	显示警告框
`close()`	关闭当前浏览器窗口
`scrollTo()`	可把内容滑动到指定坐标
`scrollBy()`	可将内容滑动指定的距离（相对于当前位置）
`innerWidth`	返回窗口的网页显示区域宽度
`innerHeight`	返回窗口的网页显示区域高度
2.1 open(url, name, features, replace)

url: 打开指定页面的url，如果没有则打开空白页
name: 指定target属性或窗口名称，支持以下值：
_blank –- url加载到新窗口（默认）
_parent –- url加载到父框架
_self –- url替换当前页面
_top –- url替换任何可加载的框架集
name – 窗口名称
features: 设置新打开窗口的功能样式（如：width=500）
replace
true –- url替换浏览历史中的当前条目
false –- 在浏览历史中创建新条目

 - // 新窗口打开csdn首页
open('https://www.csdn.net/')
// 当前窗口打开csdn首页
open('https://www.csdn.net/', '\_self')
// 新窗口打开csdn首页，并设置窗口宽高500px
open('https://www.csdn.net/', '\_blank', 'width=500,height=500')

2.2 scrollTo(xpos, ypos)

xpos：距离网页左上角x坐标
ypos：距离网页左上角y坐标

<style>
  .box { height: 3000px; }
</style>
<div class="box">
  <p>我是顶部</p>
</div>
<script>
window.addEventListener('load', function() {
    scrollTo(0, 500) // 页面加载后，滚动到距离顶部500px
  })
</script>

location对象：

location对象包含当前url信息，经常用于网址判断，url跳转

名称	描述
href	返回当前完整网址
host	返回主机名和端口号，通常指完整域名
protocol	返回网址协议
port	返回端口号
pathname	返回网址路径部分
search	返回网址中的?及?后的字符串（查询部分），通常指查询参数
hash	返回网址中的#及#后的字符串，通常指锚点名称
assign(url)	在当前页面打开指定新url（增加浏览记录）
reload()	重新加载当前页面
replace(url)	打开新url替换当前页面（替换当前浏览记录）

3.1 获取网址信息：

// 以https://www.csdn.net/nav/python?param1=111&param2=222#first为例，
查看输出结果
console.log(location.href)

// “https://www.csdn.net/nav/python?param1=111&param2=222#first” 
console.log(location.host)        // “www.csdn.net”

console.log(location.protocol)    // “https://”

console.log(location.pathname)  // “/nav/python”

console.log(location.search)     // “?param1=111&param2=222”

console.log(location.hash)       // “#first”

3.2 通过给href属性赋值url字符串的方式，可以跳转到对应url：

location.href = 'https://www.csdn.net'

history对象：

history对象包含用户浏览器的历史记录，但是不可读取，经常用于页面跳转

名称	描述
back()	返回历史记录的上一个url
forward()	返回历史记录的下一个url
go(n)	返回相对于当前记录的第n个url
n>0，表前进；n<0，表后退；n=0，刷新当前页	history.go(-1)

navigator对象:

navigator对象包含浏览器相关信息，经常用于判断设备类型，浏览器兼容性

名称	描述
platform	返回操作系统类型
userAgent	返回用户代理头的值

判断是否为谷歌内核：

navigator.userAgent.toLowerCase().indexOf('chrome')
// 返回-1时不是chrome内核，大于-1时是chrome内核

screen对象:

screen对象包含用户屏幕的信息

名称	描述
availWidth	返回屏幕的宽度（不包括windows任务栏）
availHeight	返回屏幕的高度（不包括windows任务栏）
width	返回屏幕的总宽度
height	返回屏幕的总高度

任务练习：

①：补全代码，完成点击按钮返回顶部的功能

<style>
  .box { height: 3000px; }
  .btn { position: fixed;bottom: 50px;right: 50px; }
</style>
<div class="box"><p>我是顶部</p></div>
<button class="btn">返回顶部</button>
<script>
  var btn = document.querySelector('.btn')
  btn.addEventListener('click', function() {
    scrollTo(0,________)
  })
</script>

0

②：判断当前网页是否为http协议，如果是，则在当前页面跳转到https协议的页面，补全代码

<script>
  if (location.________ === 'http:') {
	window.open('https://newsite.com', 'self')
  }
</script>

protocol

③：当前操作系统是否为windows，如果是windows则跳转对应下载地址，补全代码

<button>下载VS code</button>
<script>
  if (navigator.________ === 'Win32') {
      document.querySelector('button').addEventListener('click', function() {
          location.href= 'https://code.visualstudio.com/docs/?dv=win64user'
      })
  }
</script>

platform

④：点击净化，刷新当前页面，补全代码

<button>净化</button>
<script>
var btn = document.querySelector('button')
btn.onclick = function() {
  history.go(________)
}
</script>

思路：# history对象的go方法参数为数字，不同的数字大小对应不同的跳转动作
返回相对于当前记录的第n个url n>0，表前进；n<0，表后退；n=0，刷新当前页

0

⑤：div元素的字体大小为________px，补全代码

<style>
  .box {
    font-size: 16px;
  }
</style>
<div class="box">宽度比较</div>
<script>
  var box = document.querySelector('.box')
  if (screen.width < window.innerWidth) {
    box.style.fontSize = '12px'
  }
</script>

screen.width代表屏幕宽度，window.innerWidth代表浏览器窗口宽度，浏览器宽度不可能超过屏幕宽度