C1 能力认证——Web进阶
C1 能力认证——Web进阶
DOM节点操作-上
名称 | 描述 |
---|---|
getElementById() |
获取带有指定id的节点 |
getElementsByTagName() |
获取带有指定标签名的节点集合 |
querySelector() |
获取指定选择器或选择器组匹配的第一个节点 |
querySelectorAll() |
获取指定选择器或选择器组匹配的所有节点集合 |
除了函数方法,我们还可以使用属性来获取节点信息,下表介绍了一些获取元素节点信息常用的属性。
名称 | 描述 |
---|---|
innerHTML | 返回元素内包含的所有HTML内容(文本和标签),类型为字符串 |
parentNode | 返回指定节点的父节点 |
children | 返回指定元素的子元素节点集合 |
firstElementChild | 返回指定元素的第一个子元素节点 |
lastElementChild | 返回指定元素的最后一个子元素节点 |
名称 | 描述 |
---|---|
getAttribute() |
返回元素一个指定的属性值 |
直接使用属性名称获取 | 适用于部分属性(如:title ,value ,href ) |
获取id名为container的div元素,请补全横线处代码
document.________('div#container')
queryselector
获取ul中的第2个li元素,请补全横线处数字
document.querySelectorAll('ul li')[________]
1
点击确认按钮把当前整行背景色设置为蓝色,请补全横线处代码
<ul class="box">
<li class="item">
<span>C1认证</span>
<button>确认</button>
</li>
<li class="item">
<span>C4认证</span>
<button>确认</button>
</li>
</ul>
<script>
var btn = document.querySelectorAll('button')
for (var idx = 0; idx < btn.length; idx++) {
btn[idx].addEventListener('click', function() {
this.________.style.backgroundColor = 'blue'
})
}
</script>
parentnode
# 观察元素结构可知,如果想更改当前整行背景色,即修改当前li元素的背景色,li元素是button元素的父节点,这里需要使用DOM属性获取元素父级节点
获取div内所有p元素和span元素,请补全横线处代码
<div>
<p></p>
<p></p>
<span></span>
<span></span>
</div>
<script>
document.querySelector('div').________
</script>
children
# p元素和span元素皆为div元素的子元素,这里需要使用获取选定元素所有子元素的属性
代码如下,需要判断input输入框是否为密码类型,请补全横线处代码
<input type="password" placeholder="输入密码">
<script>
var inputType = document.querySelector('input').________
if (inputType === "password") {
// 判断密码
}
</script>
getAttribute('type')
DOM节点操作-下
DOM修改
名称 | 描述 |
---|---|
innerHTML |
innerHTML 除了获取元素内容,也可通过赋值用于修改元素中内容。如果修改内容中包含html字符串 会被解析成html元素 |
setAttribute(name,value) |
设置指定元素上的某个属性值。如果属性已经存在,则更新该值;否则,使用指定的名称和值添加一个新的属性 |
通过属性名更改属性 | 对元素属性重新赋值可更改对应属性值 |
DOM添加
名称 | 描述 |
---|---|
createElement(tagName) |
创建一个由标签名称tagName 指定的HTML元素 |
appendChild(node) |
将一个节点插入到指定父节点的子节点列表的末尾处 |
insertAdjacentHTML(position, text) |
将指定文本解析为HTML字符串,插入到指定位置(IE不友好) |
DOM删除
名称 | 描述 |
---|---|
removeChild(child) |
删除选定的子节点,需要指定其父元素 |
remove() |
删除选定节点(IE不友好) |
删除类名为disable的元素,补全横线处代码
var disbaleItem = document.querySelector('.disable')
disbaleItem.parentNode.________(disbaleItem)
removechild
在ul中的最后一个li元素后添加一个新的li元素,li元素文字内容为input元素的输入值,请补全横线处代码(依次填写答案,使用中文逗号「,」隔开)
<ul>
<input type="text" value="任务3" />
<li class="item">任务1</li>
<li class="item">任务2</li>
</ul>
<script>
var ul = document.querySelector ('ul')
var val = document.querySelector('input').value
var lastItem = document.________('li')
lastItem.innerHTML = val
ul.________(lastItem)
</script>
creatElement appendchild
# 由题知,添加的为一个新li元素,所以需要创建元素,第一空应使用节点创建方法
# 由于需要在ul的最后一个元素后插入,参数只有一个lastItem代表元素节点,最后一空应为符合要求的节点添加方法
将内容为第一名的元素插入到ol元素内的第一行,请补全横线处代码
<ol>
<li>第二名</li>
<li>第三名</li>
</ol>
<script>
var ol = document.querySelector('ol')
ol.insertAdjacentHTML('________', '<li>第一名</li>')
</script>
afterbegin
将内容为第二名的元素插入到ol元素中,成为第二个li元素,请补全横线处代码
<ol>
<li>第一名</li>
<li>第三名</li>
</ol>
<script>
var item = document.querySelectorAll('li')[1]
item.insertAdjacentHTML('________', '<li>第二名</li>')
</script>
beforebegin
# insertAdjacentHTML方法的第一个参数为插入位置,题目要求要插入元素内的第二行,也就是第三名之前,document.querySelectorAll('li')[1]代表第三个元素,这里填写的参数应表示元素自身的前面
将不属于国内的城市删除,请选择正确的选项
<ul>
<li>石家庄</li>
<li>秦皇岛</li>
<li>伊拉克</li>
<li>哈尔滨</li>
</ul>
<script>
var item = document.querySelectorAll('li')[________]
item.remove()
</script>
2
DOM控制CSS样式
通过style属性控制样式
style属性可以设置或返回元素的内联样式
- 语法:element.style.property = value
- property为CSS属性名,如:color,margin。如果属性名原来包含“-”,则需转换为小驼峰形式,如:backgroundColor,marginLeft
通过classList控制样式
classList属性返回一个元素类属性集合(这里可以简单理解为类名的集合),通过使用classList中的方法可以方便的访问和控制元素类名,达到控制样式的目的
classList常用方法介绍
名称 | 描述 |
---|---|
add(class1, class2, …) |
添加一个或多个类名 |
remove(class1, class2, …) |
移除一个或多个类名 |
replace(oldClass, newClass) |
替换类名 |
contains(class) |
判定类名是否存在,返回布尔值 |
`toggle(class, true | false)` |
将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>
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>
错
# 对于更改同一个元素的同一种样式,style属性的优先级要高于classList
节点写入
名称 | 描述 |
---|---|
innerHTML |
返回元素中的html内容 ,通过赋值,可设置元素中的html内容 |
innerText |
返回元素中的文本内容,通过赋值,可设置元素中的文本内容 |
document.write() |
将html字符串 写入到文档中 |
<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 span')
box.innerHTML = '________'
</script>
<li>第一梯队</li>
代码运行后,页面中所有数字之和是________
<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
事件基础
事件绑定
事件源要与事件绑定后,才能触发对应事件。下面以鼠标点击事件为例,介绍事件的三种绑定方式。
方式一:行内事件属性赋值
<button onclick="alert('行内事件属性赋值')">点击按钮</button>
方式二:事件属性赋值
var btn = document.querySelector('button');
btn.onclick = function() {
alert('事件属性赋值')
}
方式三:事件监听
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
# 绑定事件,通过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
# 通过属性绑定事件,只会执行最后一个,所以执行foo1
代码如下,点击一次按钮,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
# addEventListener为事件监听方法,可以调用多次事件处理程序,所以num执行了两次加法运算
鼠标及键盘事件
鼠标事件
名称 | 描述 |
---|---|
click |
单击鼠标左键触发。焦点在按钮并按了Enter键时,也会触发 |
contextmenu |
右键点击(右键菜单显示前触发) |
dblclick |
双击左键触发 |
mouseenter |
指针移至元素范围内触发一次 |
mouseleave |
指针移出元素范围外触发一次 |
mouseover |
指针移至元素或其子元素内,可能触发多次 |
mouseout |
指针移出元素,或者移至其子元素内,可能触发多次 |
键盘事件
名称 | 描述 |
---|---|
keydown |
按下任意按键,按住可连续触发 |
keypress |
按下按键(包括字母,文字和Enter )触发,按住可连续触发,不能监听一些特殊按键(ALT、CTRL、SHIFT、ESC、方向键等 ) |
keyup |
释放任意按键 |
常用键盘事件属性
使用键盘事件属性可以精确的控制键盘操作,如:回车触发,方向键触发
名称 | 描述 |
---|---|
keyCode |
keyCode 属性返回keypress 事件触发的键的值的字符代码,或者keydown 或keyup 事件的键盘代码。 字符代码 - 表示ASCII 字符的数字 键盘代码 - 表示键盘上真实键的数字 |
charCode |
返回keypress 事件触发时按下的字符键的字符Unicode值,用于keydown 或keyup 时总是返回0 |
key |
返回按键的标识符(字母区分大小写)。keypress ,keyup ,keydown 返回值相同 |
实现点击按钮,弹出“已点击”提示,补全代码
var btn = document.querySelector('button');
btn.addEventListener('________', showPublish);
function showPublish() {
alert('已点击');
}
click
# addEventListener方法第一个参数为事件名称,此处应为对应的点击事件名称
点击按钮,弹框显示对应按钮中文字,补全代码
<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>
14
# mouseenter鼠标移入,mouseleave鼠标移出
补全代码 ,实现在文本框中输入内容时,唐僧先于白龙马输出
<input type="text" />
<script>
var input = document.querySelector('input')
input.addEventListener('________', function() {
console.log('白龙马')
})
input.addEventListener('keypress', function() {
console.log('唐僧')
})
</script>
keyup
# 常用键盘事件执行顺序为:keydown->keypress->keyup
在input输入框中点击回车后,弹出登录成功提示,补全代码
<input type="text">
<script>
var input = document.querySelector('input')
input.addEventListener('keyup', function(event) {
if (event.key=== '________') {
alert('登录成功')
}
})
</script>
enter
# event.key返回按键标识符,此处应为对应的回车键标识符
窗口事件
常用鼠标事件
名称 | 描述 |
---|---|
load |
当整个页面及所有依赖资源(如样式表和图片)都已完成加载时,将触发load事件 |
beforeunload |
window、document 和它们的资源即将卸载时触发。当事件属性 returnValue 被赋值为非空字符串时,会弹出一个对话框,让用户确认是否离开页面(示例如下)。否则,事件被静默处理。一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框 |
resize |
窗口大小改变时触发 |
scroll |
元素内发生滚动时触发 |
实现窗口大小发生变化时,重置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
# 由于代码中的js写在了h1元素上方,所以需要等待页面加载完成才能获取到此元素,此处需使用页面加载完成时触发的事件
浏览器窗口宽度为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>
20
# 浏览器窗口宽度为1000px没有满足if条件,所以不改变
代码如下,最后输出的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>
1
# add方法中,只有获取到box节点时才会对num加1
# box节点在JS代码下方,只有在load事件中的add方法才能获取到box节点,所以最终num只会执行一次相加
BOM window对象
window对象
名称 | 描述 |
---|---|
open() |
打开一个新浏览器窗口 |
alert() |
显示警告框 |
close() |
关闭当前浏览器窗口 |
scrollTo() |
可把内容滑动到指定坐标 |
scrollBy() |
可将内容滑动指定的距离(相对于当前位置) |
innerWidth |
返回窗口的网页显示区域宽度 |
innerHeight |
返回窗口的网页显示区域高度 |
location对象
location对象包含当前url信息,经常用于网址判断,url跳转
名称 | 描述 |
---|---|
href |
返回当前完整网址 |
host |
返回主机名和端口号,通常指完整域名 |
protocol |
返回网址协议 |
port |
返回端口号 |
pathname |
返回网址路径部分 |
search |
返回网址中的?及?后的字符串(查询部分),通常指查询参数 |
hash |
返回网址中的#及#后的字符串,通常指锚点名称 |
assign(url) |
在当前页面打开指定新url(增加浏览记录) |
reload() |
重新加载当前页面 |
replace(url) |
打开新url替换当前页面(替换当前浏览记录) |
history对象
history对象包含用户浏览器的历史记录,但是不可读取,经常用于页面跳转
名称 | 描述 | 示例 |
---|---|---|
back() |
返回历史记录的上一个url | history.back() |
forward() |
返回历史记录的下一个url | history.back() |
go(n) |
返回相对于当前记录的第n个url n>0,表前进;n<0,表后退;n=0,刷新当前页 | history.go(-1) history.go(1) |
navigator对象
navigator对象包含浏览器相关信息,经常用于判断设备类型,浏览器兼容性
名称 | 描述 |
---|---|
platform |
返回操作系统类型 |
userAgent |
返回用户代理头的值 |
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
# 返回顶部需要使用scrollTo方法,scrollTo的两个参数为窗口横坐标和纵坐标位置,此处应为顶部对应的纵坐标大小
判断当前网页是否为http协议,如果是,则在当前页面跳转到https协议的页面,补全代码
<script>
if (location.________ === 'http:') {
window.open('https://newsite.com', 'self')
}
</script>
protocol
# 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
# platform:返回操作系统类型
点击净化,刷新当前页面,补全代码
<button>净化</button>
<script>
var btn = document.querySelector('button')
btn.onclick = function() {
history.go(________)
}
</script>
0
# history对象的go方法参数为数字,不同的数字大小对应不同的跳转动作
# 返回相对于当前记录的第n个url n>0,表前进;n<0,表后退;n=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>
16
# screen.width代表屏幕宽度,window.innerWidth代表浏览器窗口宽度,浏览器宽度不可能超过屏幕宽度
BOM 定时器
定时器方法
方法名 | 定义 | 清除定时器方法 |
---|---|---|
setTimeout() |
指定的毫秒数后调用函数或计算表达式 | clearTimeout() |
setInterval() |
按照指定的周期(毫秒)来调用函数或计算表达式 | clearInterval() |
实现页面等待2.5秒后显示对话框,请补全代码
<script>
setTimeout(showAlert, _____)
function showAlert() {
alert('你的小可爱突然出现')
}
</script>
2500
监听是否点击支付按钮,若点击支付则弹出支付成功提示,请补全代码
<button>支付</button>
<script>
var btn = document.querySelector('button')
var flag = false
btn.onclick = function() {
flag = true
}
________(function() {
if (flag) {
alert('支付成功')
}
}, 1000)
</script>
setInterval
代码如下,div字体大小每隔1秒增加1px,达到20px时,停止增长,请补全代码
<div>字体变大</div>
<script>
var myFontSize = 14
var box = document.querySelector('div')
var timer = setInterval(function() {
if (myFontSize >= 19) {
________(timer)
}
myFontSize++
box.style.fontSize = myFontSize + 'px'
}, 1000)
</script>
clearinterval
# 此处使用了setInterval定时器,为了阻止字体变大,需要使用其对应的清除定时器方法
代码如下,实现点击按钮停止定时器的功能,请补全代码
<h1>0秒</h1>
<button>停止</button>
<script>
var timer = setTimeout(function() {
document.querySelector('h1').innerText = '5秒过去了'
}, 5000);
document.querySelector('button').addEventListener('click', function() {
document.querySelector('h1').innerText = '提前停止'
________(timer)
})
</script>
clearTimeout
代码如下,最后p元素内显示的水果是________
<p class="info">我是什么水果?</p>
<script>
var info = document.querySelector('.info')
var idx = 0
var fruit = ['葡萄', '橘子', '火龙果', '人参果', '猕猴桃']
var t1 = setInterval(function() {
if (idx >= 2) {
clear(idx)
}
idx++
}, 1000)
// 清除定时器,显示水果名称
function clear(idx) {
clearInterval(t1)
info.innerHTML = fruit[idx]
}
</script>
火龙果
# 当判断idx=2时,定时器停止,最终显示fruit数组中索引为2的水果名称
C1 能力认证——Web进阶的更多相关文章
- 攻防世界 web进阶练习 NewsCenter
攻防世界 web进阶练习 NewsCenter 题目是NewsCenter,没有提示信息.打开题目,有一处搜索框,搜索新闻.考虑xss或sql注入,随便输入一个abc,没有任何搜索结果,页面也没有 ...
- 新年上新!极光认证 Web SDK 首版上线
新年伊始,极光开发者服务也抢先为各位开发者朋友带来了"新年大礼包",几款明星产品都悉数有不少更新: 极光认证 Web SDK 版本上线 相信不少小伙伴早已熟知极光认证这款产品,3秒 ...
- CCF计算机软件能力认证试题练习:201912-5 魔数
CCF计算机软件能力认证试题练习:201912-5 魔数 前置知识:BFS,线段树等 \(f(x) = (x\%A)\%B\) 这个函数值的和直接用线段树维护是不太行的(也可能是我不知道),后来想了很 ...
- XCTF攻防世界web进阶练习—mfw
XCTF攻防世界web进阶练习-mfw题目为mfw,没有任何提示.直接打开题目,是一个网站 大概浏览一下其中的内容,看到其中url变化其实只是get的参数的变化查看它的源码,看到有一个?page=fl ...
- 攻防世界web进阶题—unfinish
攻防世界web进阶题-unfinish 1.看一下题目提示SQL 2.打开题目看一下源码,没有问题 3.查一下网站的组成:php+Apache/2.4.7+Ubuntu 4.扫一下目录,扫到一个注册页 ...
- 攻防世界web进阶题—bug
攻防世界web进阶题-bug 1.打开题目看一下源码,没有问题 2.扫一下目录,没有问题 3.查一下网站的组成:php+Apache+Ubuntu 只有登录界面 这里可以可以想到:爆破.万能密码.进行 ...
- Django web 进阶
.路由系统 .模板引擎 simple_tag .Form .Ajax请求 -简单数据 -复杂数据 内容: -作业 model xss.csrf(安全方面的内容) 分页(公共的模块) 内容复习和今日内容 ...
- Java Web进阶——Filter过滤器
一.过滤器的介绍: 在Servlet规范2.3中定义了过滤器,它是一个服务器端的组件,可以截取用户端的请求与响应信息,并且对这些信息进行过滤. Servlet过滤器本身并不生成请求和响应对象,只是提供 ...
- 单点登录--CAS认证--web.xml配置详解
参考网址: https://blog.csdn.net/zhurhyme/article/details/29349543 https://blog.csdn.net/shzy1988/article ...
随机推荐
- 通过js触发onPageView和event事件获取页面信息
注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6814814715022148100/ 承接上一篇文档<js页面触发launch事件编写> pageVi ...
- iframe页面二次登录问题
原文链接:iframe页面二次登录问题 生产问题 问题背景 由于历史原因,公司内部系统有一些页面是基于iframe嵌入的其他系统的页面,之前一直运行正常,最近不知什么原因接连出现访问所有iframe页 ...
- 一键AI着色,黑白老照片画面瞬间鲜活
很多老照片或者电影受时代技术所限制,只能以黑白形式保存:经过编辑后的黑白视频和图片早已丢失彩色原图,这对于保存者来说都十分遗憾.如何能将单一乏味.陈旧斑驳的黑白照片变成鲜活亮丽的彩色照片,从照片中重新 ...
- 《剑指offer》面试题55 - I. 二叉树的深度
问题描述 输入一棵二叉树的根节点,求该树的深度.从根节点到叶节点依次经过的节点(含根.叶节点)形成树的一条路径,最长路径的长度为树的深度. 例如: 给定二叉树 [3,9,20,null,null,15 ...
- javascript的AMD规法--esl与requirejs浅介。
AMD规范,全称是Asynchronous Module Definition,即异步模块加载机制.从它的规范描述页面看,AMD很短也很简单,但它却完整描述了模块的定义,依赖关系,引用关系以及加载机制 ...
- golang中的标准库time
时间类型 time.Time类型表示时间.我们可以通过time.Now()函数获取当前的时间对象,然后获取时间对象的年月日时分秒等信息.示例代码如下: func main() { current := ...
- IoC容器-Bean管理XML方式(注入集合类型属性)
Ico操作Bean管理(xml注入集合属性) 1,注入数组类型属性 2,注入List集合类型属性 3,注入Map集合类型属性 (1)创建类,定义数组.list.map.set类型属性,生成对应set方 ...
- MySQL语句SQL应用
目录 一:sql语句 1.什么是SQL语句? 二:基本SQL语句之库操作 三:基本SQL语句之表操作 1.查看当前所在库名称 2.切换数据库 四:基本SQL语句之记录操作 五:创建表的完整语法 一:s ...
- 带你十天轻松搞定 Go 微服务系列(五)
序言 我们通过一个系列文章跟大家详细展示一个 go-zero 微服务示例,整个系列分十篇文章,目录结构如下: 环境搭建 服务拆分 用户服务 产品服务 订单服务(本文) 支付服务 RPC 服务 Auth ...
- Linux查看CPU历史负载
sar -f /var/log/sa/sa20 -s 02:00:00 -e 06:00:00 | head -n 50 sysstat工具与负载历史回放 很多系统负载过高的时候我们是无法立即获知或者 ...