进阶版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

目录
相关文章
|
16天前
|
JavaScript
ES6学习(9)js中的new实现
ES6学习(9)js中的new实现
|
24天前
|
JSON 前端开发 JavaScript
|
8天前
|
存储 JSON JavaScript
学习node.js十三,文件的上传于下载
学习node.js十三,文件的上传于下载
|
22天前
|
JavaScript 前端开发 iOS开发
学习强大的JavaScript一行代码,能够节省你的时间和代码量
这段内容介绍了25个实用的JavaScript一行代码技巧,涵盖复制内容到剪贴板、打乱数组、颜色值转换、计算平均值、检查数字奇偶性、数组去重、对象为空检测、字符串反转、日期计算、首字母大写、生成随机字符串、四舍五入、清除Cookie、检测暗黑模式等,帮助开发者提高效率并简化代码。
17 2
|
24天前
|
JavaScript 前端开发 小程序
基于js开发快速学习鸿蒙基础
【8月更文挑战第26天】
34 1
|
26天前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
44 1
|
29天前
|
存储 JavaScript 前端开发
学习JavaScript 内存机制
【8月更文挑战第23天】学习JavaScript 内存机制
22 3
|
30天前
|
JSON JavaScript 前端开发
JS 和 ES6 补充学习
【8月更文挑战第21天】
31 4
|
1月前
|
JavaScript 前端开发
Javascript学习
Javascript学习
|
1月前
|
JavaScript 算法 前端开发
学习 node.js 六 Markdown 转为 html,zlib
【8月更文挑战第19天】
12 0