当前位置: 首页 > news >正文

JavaScript(一)

1.JavaScript 基本使用

2.JavaScript简单事件

3.JavaScript修改样式

4.JavaScript数据类型

JavaScript和Java有什么关系

知识点一 JavaScript基本使用 

JS写在哪 

还有一种写在中间的,也就是<head>里面 

JS一些注意事项 

 JS修改元素内容

#JS获取对象<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div class="box" id="box1">你好,世界</div><div class="box">捡起大王</div><input type="text" name="hello" placeholder="在坐的都是弟弟"><script>// 变量Idvar Id = document.getElementById('box1');console.log(Id);Id.innerText = 'hello world';//classvar Class = document.getElementsByClassName('box')[1];console.log(Class);Class.innerText = '捡起大王666';// 标签var None = document.getElementsByTagName('div')[0];console.log(None);//namevar Myname = document.getElementsByName('hello');console.log(Myname)//css选择器//取到直接返回,不会往下取var Select = document.querySelector('.box');console.log(Select);//取全部var Select = document.querySelectorAll('.box');console.log(Select);var Select = document.querySelectorAll('#box1');console.log(Select);</script>
</body>
</html>

 知识点二 JS简单事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 200px;height: 200px;background: purple;}</style>
</head>
<body><div id="box"></div><select name="" id=""><option value="nj">南京</option><option value="sj">苏州</option><option value="cz">常州</option></select><script>/*事件 是指JavaScript 捕获到用户的操作,并作出正确的响应。在事件的数中,有一个关键字this,代表当前触发事件的这个元素事件  用户操作元素  事件=函致鼠标事件:左键单击  onclick左键双击  ondblclick鼠标移入  onmouseover/onmouseenter ***鼠标移出  onmouseout/onnouseleave  ****/var oBox = document.getElementById('box');oBox.onclick = function (){this.innerHTML = '我被点击了'};oBox.ondblclick = function (){this.innerHTML = '我被双击了'};oBox.onmouseover = function (){this.innerHTML = '鼠标移入'this.style.backgroundColor = 'blue'};oBox.onmouseout = function (){this.innerHTML = '鼠标移出'this.style.backgroundColor = 'red'};window.onresize = function (){console.log('我在变化')}var sel = document.querySelector('select');sel.onchange = function (){console.log('下拉选择在变化')}</script>
</body>
</html>

 知识点三 修改样式

修改样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input type="text" id="box1" value="捡起"><div id="box" style="width: 100px;height: 100px;background: red"></div><script>var oBox = document.getElementById('box')// oBox.style.width = '50px';oBox.onclick = function (){// oBox.style.width = '400px';// oBox.style.height = '400px';// oBox.style.background = 'blue'oBox.style.cssText = 'width:400px;height:400px;background:yellow'};oBox.style.marginLeft = '100px';oBox.style['margin-left'] = '50px';oBox.style['width'] = '400px';var a = 'width';var b = '300px';oBox.style['a'] = 'b';var In = document.getElementById('box1').valuealert(In)</script>
</body>
</html>

JS操作标签属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><a href="http://baidu.com" id="box" xy = 'jianqi' target="_blank" class="wrap">去百度</a>
<script>/*js操作元素的标签属性:input 标签 value规范的标签属性:. 符号直接操作 (可读可写)不规范(自定义)的标签属性获取.getAttribute()设置.setAttribute()移除.removeAttribute()注意:所有的 路径 颜色 获取 的结果不一定是你写的内容通过Id获取的元素赋值给变量后,假设修改了Id,这个变量还是表示这个元素自定义标签属性的操作方式,同样可以操作符合规范的属性*/var oA = document.getElementById('box');oA.target = "_self";// oA.href = 'http://vip.com';// alert(oA.id)// alert(oA.className)alert(oA.getAttribute('xy'));oA.setAttribute('xy','fufu');alert(oA.getAttribute('xy'));oA.removeAttribute('xy');alert(oA.getAttribute('xy'));
</script>
</body>
</html>

 知识点四 JavaScript数据类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>// stringconsole.log(typeof'8');// numberconsole.log(typeof 1234.11);// booleanconsole.log(typeof true);// objectconsole.log(typeof [1,2,3,4,5]);console.log(typeof {name:'jianqi'});console.log(typeof []);console.log(typeof null);function f() {}console.log(typeof f);// undefinedvar y;console.log(typeof y);var v = Symbol(1234);console.log(typeof v);</script>
</body>
</html>

相关文章:

JavaScript(一)

1.JavaScript 基本使用 2.JavaScript简单事件 3.JavaScript修改样式 4.JavaScript数据类型 JavaScript和Java有什么关系 知识点一 JavaScript基本使用 JS写在哪 还有一种写在中间的&#xff0c;也就是<head>里面 JS一些注意事项 JS修改元素内容 #JS获取对象<…...

Day 32 动态规划part01

今天正式开始动态规划! 理论基础 无论大家之前对动态规划学到什么程度,一定要先看 我讲的 动态规划理论基础。 如果没做过动态规划的题目,看我讲的理论基础,会有感觉 是不是简单题想复杂了? 其实并没有,我讲的理论基础内容,在动规章节所有题目都有运用,所以很重要!…...

winform跨线程更新界面

前言&#xff1a; 大家好&#xff0c;我是上位机马工&#xff0c;硕士毕业4年年入40万&#xff0c;目前在一家自动化公司担任软件经理&#xff0c;从事C#上位机软件开发8年以上&#xff01;我们在开发C#程序的时候&#xff0c;有时候需要在非Ui主线程更新界面&#xff0c;为了…...

【合作原创】使用Termux搭建可以使用的生产力环境(二)

前言 上期文章没看的可以先从上期文章开始看起 【合作原创】使用Termux搭建可以使用的生产力环境&#xff08;一&#xff09;-CSDN博客 目前我们已经完成了FinalShell ssh连接手机Termux的功能了&#xff0c;这期我们继续朝我们的目标前进。今天早上有读者进群以为生成环境指…...

微积分复习笔记 Calculus Volume 2 - 3.3 Trigonometric Substitution

3.3 Trigonometric Substitution - Calculus Volume 2 | OpenStax...

vue2+svg+elementui实现花瓣图自定义el-select回显色卡图片

项目需要实现花瓣图&#xff0c;但是改图表在echarts&#xff0c;highCharts等案例中均未出现&#xff0c;有类似的韦恩图&#xff0c;但是和需求有所差距&#xff1b; 为实现该效果&#xff0c;静态图表上采取svg来手动绘制花瓣&#xff1a; 确定中心点&#xff0c;以该点为中…...

记录一次网关异常

记一次网关异常 网关时不时就会出现下面的异常。关键是不知道什么时候就会报错&#xff0c;并且有时候就算什么都不操作&#xff0c;也会导致这个异常。 ERROR org.springframework.scheduling.support.TaskUtils$LoggingErrorHandler - Unexpected error occurred in schedul…...

计算机网络——不同版本的 HTTP 协议

介绍 HTTP&#xff0c;即超文本传输协议&#xff08;HyperText Transfer Protocol&#xff09;&#xff0c;是应用层的一个简单的请求-响应协议&#xff0c;它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。本文将介绍 HTTP 协议各个版本。 HTTP/1.0 HTTP/1…...

使用 LLaMA-Factory 微调

git clone https://github.com/hiyouga/LLaMA-Factory.git cd LLaMA-Factory pip install -e . pip install tf-keras[dataset_info.json](dataset_info.json) 包含了所有可用的数据集。如果您希望使用自定义数据集&#xff0c;请**务必**在 dataset_info.json 文件中添加*数据…...

vue2 虚拟DOM 和 真实DOM (概念、作用、Diff 算法)

虚拟 DOM 和 真实DOM&#xff08;概念、作用、Diff 算法&#xff09; 1.1 概念 真实 DOM&#xff08;Document Object Model&#xff09;&#xff1a;是浏览器中用于表示文档结构的树形结构。 <h2>你好</h2>虚拟DOM&#xff1a;用 JavaScript 对象来模拟真实 DOM…...

GEOBench-VLM:专为地理空间任务设计的视觉-语言模型基准测试数据集

2024-11-29 ,由穆罕默德本扎耶德人工智能大学等机构创建了GEOBench-VLM数据集&#xff0c;目的评估视觉-语言模型&#xff08;VLM&#xff09;在地理空间任务中的表现。该数据集的推出填补了现有基准测试在地理空间应用中的空白&#xff0c;提供了超过10,000个经过人工验证的指…...

说说Elasticsearch查询语句如何提升权重?

大家好&#xff0c;我是锋哥。今天分享关于【说说Elasticsearch查询语句如何提升权重&#xff1f;】面试题。希望对大家有帮助&#xff1b; 说说Elasticsearch查询语句如何提升权重&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 Elasticsearch 中&…...

2-2-18-9 QNX系统架构之文件系统(一)

阅读前言 本文以QNX系统官方的文档英文原版资料为参考&#xff0c;翻译和逐句校对后&#xff0c;对QNX操作系统的相关概念进行了深度整理&#xff0c;旨在帮助想要了解QNX的读者及开发者可以快速阅读&#xff0c;而不必查看晦涩难懂的英文原文&#xff0c;这些文章将会作为一个…...

Unity类银河战士恶魔城学习总结(P156 Audio Settings音频设置)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址&#xff1a;https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了音频的大小设置与保存加载 音频管理器 UI_VolumeSlider.cs 定义了 UI_VolumeSlider 类&#xff0c;用于处理与音频设置相关的…...

springboot vue 会员收银系统 (12)购物车关联服务人员 订单计算提成 开源

前言 完整版演示 http://120.26.95.195/ 开发版演示 http://120.26.95.195:8889/ 在之前的开发进程中&#xff0c;我们完成订单的挂单和取单功能&#xff0c;今天我们完成购物车关联服务人员&#xff0c;用户计算门店服务人员的提成。 1.商品关联服务人员 服务人员可以选择 一…...

P3916 图的遍历(Tarjan缩点和反向建边)

P3916 图的遍历 - 洛谷 | 计算机科学教育新生态 写法一&#xff1a;Tarjan 思路&#xff1a;先运用Tarjan算法得到每个连通块中最大的编号&#xff0c;然后对每个连通块进行缩点重新建图&#xff0c;进行dfs&#xff0c;得到缩点后的连通块能够达到的最大编号。 Code: conste…...

Android13 允许桌面自动旋转

一&#xff09;需求-场景 Android13 实现允许桌面自动旋转 Android13 版本开始后&#xff0c;支持屏幕自动旋转&#xff0c;优化体验和兼容性&#xff0c;适配不同屏幕 主界面可自动旋转 二&#xff09;参考资料 android framework13-launcher3【06手机旋转问题】 Launcher默…...

cocotb value cocotb—基础语法对照篇

cocotb—基础语法对照篇 import cocotb from cocotb.triggers import Timer from adder_model import adder_model from cocotb.clock import Clock from cocotb.triggers import RisingEdge import randomcocotb.test() async def adder_basic_test(dut):"""Te…...

001-SpringBoot整合日志

SpringBoot整合日志 一、引入依赖二、配置 application.yml三、配置文件 logback.xml四、配置文件 WebConfigurerAdapter五、配置常量文件六、配置拦截器七、效果展示一、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId&…...

【Java基础面试题011】什么是Java中的自动装箱和拆箱?

相关知识补充&#xff1a;《Java从入门到精通(JDK17版)》_尚硅谷电子书.pdf Autism_Btkrsr/Blog_md_to_pdf - 码云 - 开源中国 (gitee.com) 回答重点 自动装箱&#xff1a;Java编译器自动将基本数据类型转换为包装类型 自动拆箱&#xff1a;Java编译器自动将包装类转换为基…...

交互弹窗设计避坑指南:Toast、Dialog、Actionbar和Snackbar的常见错误与优化建议

交互弹窗设计避坑指南&#xff1a;Toast、Dialog、Actionbar和Snackbar的常见错误与优化建议 在移动应用和网页设计中&#xff0c;交互弹窗是用户界面中不可或缺的元素。它们像数字世界中的交通信号灯&#xff0c;引导用户完成各种操作流程。然而&#xff0c;设计不当的弹窗不仅…...

2026年第13周最热门的开源项目(Github)

本期榜单展示了与人工智能、编程助手和代理技术相关的多个项目。以下是对榜单的一些分析和观察&#xff1a; 综合观察 主流语言&#xff1a; 榜单中出现了多种编程语言&#xff0c;主要包括&#xff1a;TypeScript、Python和JavaScript&#xff0c;反映出TypeScript在开发现代…...

手把手教你理解机器人阻抗控制:阻尼-弹簧-质量模型详解

机器人阻抗控制实战&#xff1a;从阻尼-弹簧-质量模型到智能柔顺操作 当机械臂需要完成插拔USB接口这样的精细操作时&#xff0c;纯位置控制的局限性立刻显现——哪怕0.1毫米的误差都可能导致接口损坏。这正是阻抗控制技术大显身手的场景&#xff1a;通过模拟弹簧的柔顺特性&am…...

OpenClaw自动化测试:百川2-13B-4bits量化版验证Python脚本正确性

OpenClaw自动化测试&#xff1a;百川2-13B-4bits量化版验证Python脚本正确性 1. 为什么需要AI辅助代码测试&#xff1f; 作为长期与Python打交道的开发者&#xff0c;我经常面临一个经典困境&#xff1a;在快速迭代功能时&#xff0c;测试用例的编写往往成为瓶颈。传统方案要…...

全栈开发者工具链:OpenClaw+Qwen3.5-9B-AWQ-4bit辅助前端调试

全栈开发者工具链&#xff1a;OpenClawQwen3.5-9B-AWQ-4bit辅助前端调试 1. 为什么需要AI辅助前端调试 作为全栈开发者&#xff0c;我经常陷入这样的困境&#xff1a;当页面渲染出现异常时&#xff0c;需要在控制台日志、网络请求和DOM树之间反复切换排查。传统调试流程至少包…...

别再说AI懂你了!先搞清楚AI中的Context到底是什么(上篇)

你有没有遇到过这种情况——跟ChatGPT聊了五句话&#xff0c;第四句你说了“那个方案不行”&#xff0c;第五句它问“哪个方案&#xff1f;”。或者你让AI写一篇关于“苹果”的文章&#xff0c;它给你写了一整页水果种植技术&#xff0c;而你想说的是苹果公司。这就是AI中的Con…...

人到中年,生日收到这三条短信,我读了很久

手机屏幕亮了一下。 我拿起来&#xff0c;以为是工作消息&#xff0c;结果是中国工商银行的短信&#xff1a; 紧接着&#xff0c;第二条进来了——中国联通&#xff1a; 第三条&#xff0c;是母校辽工大发来的&#xff1a; 我看着这三条短信&#xff0c;愣了很久。 没有酒局的邀…...

Skills 系统——让 AI 秒变专家

1. 技能的本质&#xff1a;提示词工程 在 nanobot 中&#xff0c;一个技能就是一个文件夹&#xff0c;核心是里面的 SKILL.md。 nanobot内置的skills放在project_path/nanobot/skills目录下&#xff0c;用户自定义的skills放在workspace/.nanobot/skills目录下 以 weather 技…...

MTKClient技术内幕:从硬件交互到场景落地的深度探索

MTKClient技术内幕&#xff1a;从硬件交互到场景落地的深度探索 【免费下载链接】mtkclient MTK reverse engineering and flash tool 项目地址: https://gitcode.com/gh_mirrors/mt/mtkclient 一、技术原理解析&#xff1a;MTKClient如何与硬件对话 MTKClient的核心能…...

微服务七大核心组件详解:搞懂架构运行底层逻辑

从实战视角拆解微服务架构的"五脏六腑"&#xff0c;掌握每个组件的设计哲学与落地细节一、为什么需要这七大组件&#xff1f; 微服务架构的本质是分布式系统的工程化实践。当单体应用拆分为数十个甚至上百个独立服务后&#xff0c;我们面临的核心挑战&#xff1a;挑战…...