[CSDN]C1训练题解析_第四部分_Web进阶

 主页:写程序的小王叔叔的博客欢迎来访👀

支持:点赞收藏关注

社区:JAVA全栈进阶学习社区欢迎加入

声明本篇文档有C1教程视频中老师照着稿读的内容视频不用看,视频小姐姐的口述快到让你着急(1.5倍速你可能会si~)无可观看价值,我就把读的稿整理出来,边看边学习,不做广告推广      |       文末有惊喜

[CSDN]C1训练题解析 目录

第一部分_计算机通识

第二部分_Web基础

第三部分_JS基础

第四部分_Web进阶


四十一、DOM节点操作(上)💥

DOM(Document Object Model——文档对象模型)是用来处理HTML和XML的跨平台API。它允许运行在浏览器中的代码访问文档节点并与之交互,了解并掌握DOM操作是Web开发中的必经之路。

2、常用节点获取方法和属性

要进行DOM操作,首先要获取到需要操作的节点或节点集合,接下来以下面的示例代码为基础,介绍常用的DOM获取方法和属性。

 (1)获取id名为container的div元素,请补全横线处代码    querySelector      

document.________('div#container')

 (2)获取ul中的第2个li元素,请补全横线处数字       1     

document.querySelectorAll('ul li')[______]

(3)点击确认按钮把当前整行背景色设置为蓝色,请补全横线处代码      parentNode   

<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>

解析:观察元素结构可知,如果想更改当前整行背景色,即修改当前li元素的背景色,li元素是button元素的父节点,这里需要使用DOM属性获取元素父级节点。

(4)获取div内所有p元素和span元素,请补全横线处代码      children    

<div>
	<p></p>
	<p></p>
	<span></span>
	<span></span>
</div>
<script>
	document.querySelector('div').________
</script>

解析:观察元素结构可知,p元素和span元素皆为div元素的子元素,这里需要使用获取选定元素所有子元素的属性

(5)代码如下,需要判断input输入框是否为密码类型,请补全横线处代码     getAttribute('type')  

<input type="password" placeholder="输入密码">
<script>
  var inputType = document.querySelector('input').________
  if (inputType === "password") {
    // 判断密码
  }
</script>

四十二、DOM节点操作(下)💥

 (1)删除类名为disable的元素,补全横线处代码     removeChild     

var disbaleItem = document.querySelector('.disable')
disbaleItem.parentNode.________(disbaleItem)

(2)在ul中的最后一个li元素后添加一个新的li元素,li元素文字内容为input元素的输入值,请补全横线处代码(依次填写答案,使用中文逗号「,」隔开)    B :createElement,appendChild    

<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>

(3)将内容为第一名的元素插入到ol元素内的第一行,请补全横线处代码   afterbegin   

<ol>
    <li>第二名</li>
    <li>第三名</li>
</ol>
<script>
  var ol = document.querySelector('ol')
    ol.insertAdjacentHTML('________', '<li>第一名</li>')
</script>

(4)将内容为第二名的元素插入到ol元素中,成为第二个li元素,请补全横线处代码    beforebegin   

<ol>
    <li>第一名</li>
    <li>第三名</li>
</ol>
<script>
  var item = document.querySelectorAll('li')[1]
  item.insertAdjacentHTML('________', '<li>第二名</li>')
</script>

(5)将不属于国内的城市删除,请选择正确的选项    2   

<ul>
    <li>石家庄</li>
    <li>秦皇岛</li>
    <li>伊拉克</li>
    <li>哈尔滨</li>
</ul>
<script>
  var item = document.querySelectorAll('li')[________]
  item.remove()
</script>

四十三、DOM控制CSS样式

 (1)将div元素背景颜色设置为蓝色,请补全横线处代码    backgroundColor   

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

解析:原背景颜色属性名为background-color,使用style属性更改样式时,如果原CSS属性包含“-”,则需转换命名形式,此处应为修改命名形式后的背景颜色属性名。

(2)将div设置为隐藏,请补全横线处代码    add    

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

(3)将包含disabled类名的按钮设置为禁用,请补全横线处代码   contains     

<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对应的判断类名是否存在。

(4)将span元素文字颜色设置为绿色,请补全横线处代码     loading   

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

(5)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


四十四、节点写入

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

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

(2)使如下代码运行后输出字符串sky,请补全横线处代码    innerText   

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

(3)在第一行元素后插入第二行元素,请补全横线处代码     write   

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

(4)将ul中的span元素改为li元素,文字内容不变,请补全横线处代码     innerHTML  

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

(5)代码运行后,页面中所有数字之和是___7_____

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

四十五、事件基础💥

 (1)实现点击按钮,更改按钮内容效果,请补全横线处代码      addEventListener    

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

(2)实现点击按钮,更改按钮内容效果,请补全横线处代码    onclick    

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

(3)实现点击变身按钮,弹出变身台词,请补全横线处代码       rider   

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

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

(4)点击输出数字按钮,最终输出的数字是____111____

<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>

(5)代码如下,点击一次按钮,p元素中显示的数字是____2____

<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>

解析:addEventListener为事件监听方法,可以调用多次事件处理程序,所以num执行了两次加法运算。


四十六、鼠标及键盘事件

 (1)实现点击按钮,弹出“已点击”提示,补全代码     click   

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

(2)点击按钮,弹框显示对应按钮中文字,补全代码    this     

<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>

(3)鼠标移出span元素时,字体大小是___14_____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>

(4)补全代码 ,实现在文本框中输入内容时,唐僧先于白龙马输出   keyup    

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

解析:常用键盘事件执行顺序为:keydown->keypress->keyup

(5)在input输入框中点击回车后,弹出登录成功提示,补全代码      Enter    

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


四十七、窗口事件

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

<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>

解析:由题知,此处需要监听窗口大小的变化,横线处应为对应的窗口大小改变事件名

(2)实现窗口滚动时,类名为top的元素固定在顶部,请补全横线处代码     scroll    

<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>

(3)将h1元素中文字改为“欢迎光临”,请补全横线处代码     load   

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

(4)浏览器窗口宽度为1000px时,p元素的字体大小为____20____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>

(5)代码如下,最后输出的num数字是___1____

<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节点时才会对num1,box节点在JS代码下方,只有在load事件中的add方法才能获取到box节点,所以最终num只会执行一次相加


四十八、BOM window对象💥

 (1)补全代码,完成点击按钮返回顶部的功能     0    

<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>

 (2)判断当前网页是否为http协议,如果是,则在当前页面跳转到https协议的页面,补全代码   protocol 

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

(3)当前操作系统是否为windows,如果是windows则跳转对应下载地址,补全代码   platform   

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

(4)点击净化,刷新当前页面,补全代码      0    

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

(5)div元素的字体大小为____16____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>


四十九、BOM 定时器

 (1)实现页面等待2.5秒后显示对话框,请补全代码    2500   

<script>
  setTimeout(showAlert, _____)

  function showAlert() {
    alert('你的小可爱突然出现')
  }
</script>

解析:setTimeout设置的时间单位为毫秒,1秒 = 1000毫秒

 (2)监听是否点击支付按钮,若点击支付则弹出支付成功提示,请补全代码     setInterval   

<button>支付</button>
<script>
  var btn = document.querySelector('button')
  var flag = false

  btn.onclick = function() {
    flag = true
  }

  ________(function() {
    if (flag) {
      alert('支付成功')
    }
  }, 1000)
</script>

解析:由于用户点击支付按钮的时机不确定,所以需要多次查询用户是否点击(点击后,flag为true),需要使用周期性定时器

(3)代码如下,div字体大小每隔1秒增加1px,达到20px时,停止增长,请补全代码    clearInterval   

<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>

解析:由代码知,此处使用了setInterval定时器,为了阻止字体变大,需要使用其对应的清除定时器方法

(4)代码如下,实现点击按钮停止定时器的功能,请补全代码    clearTimeout   

<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>

(5)代码如下,最后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>

​​​​​​​参考C1能力认证训练题解析 _ 第四部分 _ Web进阶    C1认证学习笔记(第四章)


C1证书粘贴位置💯💯💯

​​​​​​​


 ⚠️注意 ~

💯本期内容就结束了,如果内容有误,麻烦大家评论区指出

如有疑问❓可以在评论区💬或私信💬,尽我最大能力🏃‍♀️帮大家解决👨‍🏫!

如果我的文章有帮助,欢迎打赏✔️鼓励博主🏃,您的鼓励是我分享的动力🏃🏃🏃~

  • 2
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:精致技术 设计师:CSDN官方博客 返回首页
评论

打赏作者

写程序的小王叔叔

感谢!您的打赏是我前进的动力~

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值