进阶版JavaScript学习【第二期】

简介: 进阶版JavaScript学习

常用元素的属性操作

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. 类型为复选框,且状态为已勾选

image.png

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

image.png

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

image.png

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

image.png

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

image.png

目录
相关文章
|
3月前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
74 5
|
3月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
45 2
|
3月前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
70 1
|
4月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
78 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
4月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
52 2
|
4月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
32 2
|
4月前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
59 1
|
4月前
|
JavaScript
js学习--抽奖
js学习--抽奖
33 1
|
4月前
|
JavaScript
js学习--隔行换色
js学习--隔行换色
40 1
|
4月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
91 0

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    49
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57