进阶版JavaScript学习【第二期】

news2025/1/21 2:56:14

距离上一期更新已经过了好久,非常抱歉。因为自己的一些原因,没有能够及时更新。

博主主页:GUIDM的主页

专栏内容:进阶版JavaScript学习

往期内容:第一期

 给大家安利一个刷题神器:牛客网

JavaScript系列刷题指南:点击此处

结尾放上5题简单的html习题。

常用元素的属性操作

HTML部分:

<button id='nh'>你好</button>
<button id='zgm'>在干嘛</button>
<img src='……' alt=' ' title='你好'>

JavaScript部分:

1、获取元素

var nh=document.getElementById('nh');
var zgm=document.getElementById('zgm');
var img=document.querySelector('img');

2、注册事件(点击按钮显示对应的图片)

nh.onclick=function(){
  img.src='img/nh.jpg';
  img.title='你好';
}

zgm.onclick=function(){
  img.src='img/zgm.jpg';
  img.title='在干嘛';
}

表单元素的属性操作

利用DOM可以操作如下表单元素的属性:

  1. type
  2. value
  3. checked
  4. selected
  5. disabled

HTML部分:

<button>按钮</button>
<input type='text' value='输入内容'>

JavaScript部分:

1、获取元素

var btn=document.querySelector('button');
var input=document.querySelector('input');

2、注册事件

btn.onclick=function(){
input.value='被点击了';
btn.disabled=true;
//this.disabled=true;
//this指向的是事件函数的调用者(btn)

样式属性操作

1、element.style(样式较少或功能简单的时候使用)

行内样式操作:JS中修改的样式会添加到行内样式中,JS的行内样式权重高。

HTML部分:

<div></div>

CSS部分:

div{
width:200px;
height:200px;
background-color:pink;
}

JavaScript部分:

1、获取元素

var div=document.querySelector('div');

2、注册事件

element.style里面的属性采用驼峰命名法。

div.onclick=function(){
 this.style.background='purple';
 this.style.width='250px';
}

2、element.className

类名样式:直接更改元素名,会覆盖原先的类名。

HTML和CSS都和上面的一样,在div里面加一个class=‘ ’

JavaScript部分:

1、获取元素

var test=document.querySelector('div');

2、注册事件

test.onclick=function(){
 this.className='change';
}
//当前元素的类名改为了change但要在CSS中写好想要的样式

牛客网刷题-HTML5题

请依次写出以下类型的输入框。

1. 类型为密码,默认值为"nowcoder"
2. 类型为复选框,且状态为已勾选

b426a5f5c39247bbb92a270c18b3e2c9.png

 

请写出具有表格标题为"nowcoder"的2行3列表格结构。

88e81bb0e25e49fd97b0586458609637.png

请写出具有标题属性和代替文本属性的图片标签。

f40861d288bb4544b16307a1fc7e7f6b.png

 

请写出可以在新窗口打开文档的a标签。

58a8a1fdf39142c4b0b21a262f94fe0e.png

 

请写出列表项为"nowcoder"且列表项内容也为"nowcoder"的自定义列表。

ed372c1298c84285830196365d8b5c67.png

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408635.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue使用Element-UI实现分页效果

前言 分页在展示数据列表的场景肯定是非常多的。 一般的项目开发中&#xff0c;数据量特别大&#xff0c;一般都是后端接口直接处理分页返回&#xff0c;前端直接调用即可。 但是前端也是可以不需要借助后端&#xff0c;自己也是可以处理分页的。今天我这个后端开发就站在前…

H5画布 canvas(一)canvas简介、绘制圆形/矩形、案例饼状图绘制

目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例&#xff1a;在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 6. 绘制矩形 rect 7. 绘制圆形 arc 8. 案例&#xff1a;根据一组数据绘制饼状图 1. canvas 简介 canvas 是HTML5 提供的一…

【蓝桥杯Web】大一小白参与蓝桥杯模拟赛二期web组体会

目录 前言 一、相关比赛介绍 1.ACM国际大学生程序设计竞赛 2.蓝桥杯 3.GPLT团队程序设计天梯赛 4.leetcode周赛和双周赛 5.PAT 二、蓝桥杯 1.应该参加蓝桥杯吗&#xff1f; 2.如何进行蓝桥杯的准备 三.蓝桥杯模拟赛二期web组真题 1.凭空消失的TA&#xff08;简单&a…

node-sass安装失败解决方法,终有一款适合我们

项目中常常遇到node-sass安装失败&#xff0c;动不动就是报各种错误。以前我一次也没有失败过&#xff0c;自从系统重装我的天呀&#xff0c;node-sass就没有成功过&#xff0c;我能做的node卸载&#xff0c;sass重装各种版&#xff0c;以及换了淘宝镜像和用了vpn都安装失败。我…

Vue--Router--解决多路由复用同一组件页面不刷新问题

原文网址&#xff1a;Vue--Router--解决多路由复用同一组件页面不刷新问题_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍如何解决Vue的多路由复用同一组件页面不刷新问题。 多路由复用同一组件的场景 多路由使用同一组件 比如&#xff1a;添加博客&#xff08;path为&…

H5如何实现唤起APP

前言 写过hybrid的同学&#xff0c;想必都会遇到这样的需求&#xff0c;如果用户安装了自己的APP&#xff0c;就打开APP或跳转到APP内某个页面&#xff0c;如果没安装则引导用户到对应页面或应用商店下载。这里就涉及到了H5与Native之间的交互&#xff0c;为什么H5能够唤起APP…

【简陋Web应用3】实现人脸比对

文章目录&#x1f349; 前情提要&#x1f337; 效果演示&#x1f95d; 实现过程1. utils.py2. compare.html3. forms.py4. insightface_api.py5. app.py&#x1f345; 记录1. Bugs1.1 cv2.imshow()报错1.2 insightface人脸检测标注框错乱(&#x1f4a2;)2. 杂记&#x1f33e; 小…

给el-table-column添加指定列的点击事件该怎么做

嗨害嗨&#xff0c;我又来了奥。大家在工作中用组件吗&#xff1f;elementUI应该都用过吧&#xff0c; element是一套UI组件库,是由国内饿了么团队开发的。它提供了丰富的PC组件,有效地降低了使用者的开发难度。 如果工作中遇到了表格&#xff0c;我们经常会用el-table组件来写…

微信小程序 slot插槽基本使用

文章目录前言一、基本插槽二、具名插槽三、样式:hoststyleIsolation可控化样式隔离externalClasses外部样式类使用页面/父组件的样式总结前言 小程序中, 如果插槽有必要拿到父组件的数据来展示, 直接父传子即可, 和Vue一样的思路 一、基本插槽 参考Vue的基本插槽, 两者的使用…

初入微前端---qiankun学习这一篇就够了,并在vite中使用qiankun

目录 原因 Why Not iframe&#xff1f; qiankun 使用qiankun部署项目 在子路由的页面去暴露根元素 Create-react-app 子应用 在vite中使用qiankun 方法一&#xff08;不太推荐&#xff09;&#xff1a; 方法二&#xff08;推荐&#xff09;&#xff1a; 安装插件 修…

vue2双向数据绑定基本原理

vue2的双向数据绑定(又称响应式)原理&#xff0c;是通过数据劫持结合发布订阅模式的方式来实现的&#xff0c;通过Object.defineProperty()来劫持各个属性的setter&#xff0c;getter&#xff0c;在数据变动时发布消息给订阅者&#xff0c;触发相应的监听回调来渲染视图。也就是…

vue3+vite项目,安装依赖运行报错“failed to load config from xxx,TypeError: vite.createFilter is not a function”

问题 今天从GitHub上拉下来了一个vue3vite项目&#xff0c;之前就是安装依赖就可以运行了&#xff0c;但是今天一直报错&#xff0c;显示TypeError: vite.createFilter is not a function 错误原因 vite版本与安装的依赖版本不匹配 近期vite3发布&#xff0c;但我们使用的…

node-sass版本不兼容问题(已解决)

node-sass版本不兼容问题&#xff08;已解决&#xff09; 估计很多小伙伴都遇到node-sass版本不兼容的问题&#xff0c;今天分享给大家如何定位问题&#xff0c;怎样去查找并兼容自己项目中的nod-sass版本&#xff01; 文章目录node-sass版本不兼容问题&#xff08;已解决&…

JavaScript之Ajax-axios表单提交

目录 一.表单概念 二.表单提交 三.FormData语法 四.头像上传模板 五.请求体类型 六.图书管理(增删改查) 七.axios语法优化写法 优化1: axios全局配置 优化2: 默认的method 优化3: axios的快捷方法 一.表单概念 form标签&#xff08;表单&#xff09;是用来收集用户…

JavaWeb《一》概念、服务器部署及servlet

&#x1f34e;道阻且长&#xff0c;行则将至。&#x1f353; 本文是javaweb的第一篇&#xff0c;首先介绍了javaweb&#xff0c;然后进行了一个简单的web服务器部署&#xff0c;把我的一个网页发布到了云端&#xff0c;且叫他小Sa&#xff0c;目前啥也没有&#xff0c;之后会使…

vue3插槽、具名插槽、作用域插槽-足够入门了!

vue3 插槽 前言 这篇文章介绍vue组件的插槽&#xff01;包括&#xff1a;插槽概念&#xff0c;具名插槽&#xff0c;作用域插槽等等&#xff0c;看完不会你打我。哈哈哈&#xff0c;开玩笑的&#xff0c;不多说&#xff0c;上刺刀&#xff01;&#xff01; 1. 概念 插槽&…

给饿了么Radio 单选框添加点击事件(vue2)

前言 最近有一个这样的需求&#xff0c;当点击不合格时打开一个弹窗进行不合格数据的录入。问题点在于当你想对不合格数据进行修改时&#xff0c;点击不合格是没有反应的&#xff1b;因为Radio 单选框只提供了一个change 事件 解决 这里说明一下&#xff0c;项目是vue2的项目…

Vue 全套教程(一),入门 Vue 必知必会

Vue(一) 文章目录Vue(一)一、Vue简介1. 介绍2. 特点二、HelloWorld三、v-bind指令四、v-model指令五、el与data的两种写法5.1 el的两种写法5.2 data的两种写法六、MVVM模型七、Object.defineProperty方法八、数据代理8.1 数据代理概念8.2 Vue中的数据代理九、事件处理9.1 基本使…

【前端】Vue+Element UI案例:通用后台管理系统-导航栏

文章目录目标代码0.数据1.其他准备2.结构3.动态显示数据4.主题&#xff1a;背景色&#xff0c;点击悬停效果5.去除padding6.去除下拉框7.标题8.路由跳转总代码组件CommonAside.vue文件结构参考参考视频&#xff1a; VUE项目&#xff0c;VUE项目实战&#xff0c;vue后台管理系统…

Vue父传子详细教程

本文父组件&#xff1a;shopping.vue 子组件&#xff1a;shoplist.vue 1.父组件引入子组件 1.1.引入组件 import shoplist from ../shoplist.vue 1.2.注册组件 components: { shoplist } 1.3.使用组件 <shoplist></shoplist> 2.父组件定…