JavaScript操作

最新推荐文章于 2021-09-08 16:51:19 发布
最新推荐文章于 2021-09-08 16:51:19 发布
阅读量168 收藏
点赞数
分类专栏： # JavaScript学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41104353/article/details/79475781
版权

JavaScript：写入HTML输出

<!DOCTYPE html>
<html>

<head>
  <script>
    var number=100;
    document.write('<h1>'+number+'</h1>');
    document.write("<p>This is a paragraph</p>");
  </script>
</head>

<body>

</body>
</html>


注释：我们只能在HTML输出流中使用document.write。如果我们在文档已经完成加载后使用它（比如在函数中），则会覆盖整个文档，比如下例：

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

<button οnclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>

</body>
</html>
点击按钮后，之前的的文本将会消失。


JavaScript：获取用户输入交互

<!DOCTYPE html>
<html>

<head>
  <script>
    var name=prompt("你的名字是：", "")
    document.write("<h1>"+name+"</h1>")
  </script>
</head>

<body>

</body>
</html>





JavaScript：对事件作出反应

<!DOCTYPE html>
<html>
<body>

<p>JavaScript 能够对事件作出反应。比如对按钮的点击：</p>

<button type="button" οnclick="alert('Welcome!')">点击这里</button>

</body>
</html>




JavaScript：改变HTML内容

如果需要从JavaScript访问某个元素，可以使用document.getElementById(id)方法。

<!DOCTYPE html>
<html>
<body>

<p id="demo">JavaScript 能改变 HTML 元素的内容。</p>

<script>
  function myFunction()
  {
     x=document.getElementById("demo");  // 找到元素
     x.innerHTML="Hello JavaScript!";    // 改变内容
   }
</script>

<button type="button" οnclick="myFunction()">点击这里</button>

</body>
</html>

JavaScript 由 web 浏览器来执行。在这种情况下，浏览器将访问 id="demo" 的 HTML 元素，并把它的内容（innerHTML）替换为 "My First JavaScript"。





JavaScript：改变HTML图像

下例会动态的改变HTML <image>的来源（src）

<!DOCTYPE html>
<html>
<head>
  <script>
    function changeImage()
    {
      element=document.getElementById('myimage')
      if (element.src.match("bulbon"))
      {
         element.src="http://www.w3school.com.cn//i/eg_bulboff.gif";
      }
      else
      {
         element.src="http://www.w3school.com.cn//i/eg_bulbon.gif";
      }
    }
  </script>
</head>


<body>

<img id="myimage" οnclick="changeImage()" 

src="http://www.w3school.com.cn/i/eg_bulboff.gif">

<p>点击灯泡来点亮或熄灭这盏灯</p>

</body>
</html>


JavaScript能够改变任意HTML元素的大多数属性，而不仅仅是图片。



JavaScript：改变HTML样式

改变HTML元素的样式，属于改变HTML属性的变种。

<!DOCTYPE html>
<html>
<head>
  <script>
    function myFunction()
    {
       x=document.getElementById("demo") // 找到元素
       x.style.color="#ff0000";          // 改变样式
    }
  </script>
</head>

<body>

<p id="demo">JavaScript 能改变 HTML 元素的样式。</p>

<button type="button" οnclick="myFunction()">点击这里</button>

</body>
</html>




JavaScript：验证输入

JavaScript常用于验证用户的输入

<!DOCTYPE html>
<html>

<head>
  <script>
    function myFunction()
    {
       var x=document.getElementById("demo").value;
       if(x==""||isNaN(x))
       {
	     alert("Not Numeric");
        }
    }
  </script>
</head>


<body>

<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>

<input id="demo" type="text">

<button type="button" οnclick="myFunction()">点击这里</button>

</body>
</html>


在到处之间找我
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript的操作进阶
weixin_45611586的博客
09-09 267
JavaScript对事件、css的操作。运用JavaScript创建代码对性能进行优化的两种常见场景的解决方案。
十八、javascript的初识、javascript的简单操作
qq_52426181的博客
12-17 484
javascript初识 1.二阶段知识点简介 ECMAScript+DOM+BOM 15天 项目阶段 4天 jQuery 5天 阶段考核 1天 2.二阶段知识点 和 一阶段 的 差别 html css js html：页面的结构层 只有结构 样式并不好看 css：页面的样式层 可以对页面进行修饰，美化页面，但是没有行为 javascript：页面的行为层 可以给页面添加行为 让页面可以呼应用户的操作 3.知识点重要性分类 了解：听说过。 熟悉：比较重要，要求大家能做到理解概念的含义。 熟练应
w3school_JavaScript参考手册（api）
10-10
w3school_JavaScript参考手册，非扫描版，基本上囊括了所有的js内置函数和属性。内置对应的w3school上面函数用法连接
w3school javascript教程：JS基础
sunk的专栏
12-07 1373
javascript简介 javascript这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript
JavaScript知识整理（一）——W3school
小缘同学的博客
09-08 2374
一、JavaScript简介 1.1 JavaScript能做什么 getElementByid()是多个JavaScript HTML方法之一。 可以使用该方法来"查找"id为"demo"的HTML元素，并把元素内容(innerHTML)更改为"Study JavaScript"。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScrip..
JS基础-w3school
bacon_2016的博客
04-23 208
1.JS教程：实现、输出、语句、注释、数据类型、对象、函数、运算符、比较、if...else、switch、for、while、break、错误、验证 　　输出：document.write('<h2>2</h2>'); 　　　　注： 如果在文档已完成加载后执行document.write()，整个HTML页面将被覆盖（将document.write()放在函...
[W3School]JavaScript教程学习
weixin_30588675的博客
01-05 206
JavaScript 简介 JavaScript 是世界上最流行的编程语言。这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript 是脚本语言。 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 ...
javascript操作元素的常见方法小结
10-16
本文将结合实例，对JavaScript操作页面元素的常见方法进行小结。 首先，获取页面元素是进行其它操作的前提。document 对象提供了几个常用的方法来获取页面元素。例如，`getElementById` 方法可以获取页面上具有唯一...
纯JavaScript操作DOM节点
05-22
纯JavaScript操作DOM节点，通过动态JS创建元素标签，自定义元素的个数，并显示序号和对应的正则表达式验证和图片类型大小验证，，在前端用户姓名和性别多选框的取值已拿到，最后把后面的if else代码放开就可以了，...
JavaScript操作Cookie详解
10-24
主要介绍了JavaScript操作Cookie详解,本文讲解了什么是Cookie、Cookie基础知识、Cookie常见问题、cookie 有两种清除方式、Cookie基础用法、Cookie高级用法等内容,需要的朋友可以参考下
w3school-JS
01-23
Web开发中经常用到的CHM帮助文档.包含HTML,CSS,JS,及相关框架文档
JavaScript操作Oracle数据库示例
10-24
知识点一：JavaScript操作Oracle数据库的方法 在本文中，作者通过使用ActiveXObject实现访问Oracle数据库，这提供了一种JavaScript直接与数据库交互的方式。这种方法不需要通过AJAX调用服务器端代码（如C#或JAVA），...
第4节 JavaScript操作符.rar
03-02
第4节 JavaScript操作符.rar第4节 JavaScript操作符.rar第4节 JavaScript操作符.rar第4节 JavaScript操作符.rar第4节 JavaScript操作符.rar第4节 JavaScript操作符.rar第4节 JavaScript操作符.rar第4节 JavaScript...
w3school之JavaScript
future_fan
11-22 530
1. 向未声明的 JavaScript 变量来分配值 如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。 这条语句： carname="Volvo"; 将声明一个全局变量 carname，即使它在函数内执行。 2. JavaScript 数组 下面的代码创建名为 cars 的数组： var cars=new Array();
W3School JavaScript教程日记
Var-al 的博客
04-22 887
自学W3School JavaScript教程日记 一、字符串方法 1.所有字符串方法都会返回新字符串。它们不会修改原始字符串。 正式地说：字符串是不可变的：字符串不能更改，只能替换。 ①　length 属性返回字符串的长度： ②　indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引： ③　search() 方...
w3school JavaScript笔记3 ——JavaScript 对象
若耶溪
02-16 187
教程地址：http://www.w3school.com.cn/js/js_objects.aspJavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。通过 JavaScript，您能够定义并创建自己的对象。创建新对象有两种不同的方法：定义并创建对象的实例使用函数来定义对象，然后创建新的对象实例创建直接的实例这个例子创建了对象的一个新...
JavaScript 学习（从 w3school学习）(一)
huanhuan8944172的专栏
03-06 195
1. 写入HTML输出 document.write(" ") 2. 对事件做出反应 如: onClick="alert('str')" 3. 改变HTML内容 X=document.getElementById("id"); x.innerHTML="Hello javascript"; 4. 改变HTML图像 5. 改变HTML样式 x...
vasp6.3.2安装包
最新发布
08-19
VASP（Vienna Ab-initio Simulation Package）是一个用于电子结构计算和量子力学-分子动力学模拟的软件包，由维也纳大学的Hafner小组开发。 它基于密度泛函理论（DFT）和赝势平面波基组，广泛应用于材料模拟和计算物质科学研究领域。VASP能够处理周期性和非周期性体系，包括金属、半导体、分子、晶体、掺杂体系、复合材料、纳米材料等，提供精确的电子性质预测和理化性质分析。由于其高效的大规模并行计算能力，VASP在国际上享有很高的声誉，是第一性原理计算领域最权威的软件之一。每年，以VASP作为科研工具发表的论文数量众多，包括在顶级科学期刊上发表的研究成果。物理与电子科学学院等多名教师使用VASP进行科研工作，并取得了多项研究成果。‌
JavaScript操作Cookie：获取与设置
该资源是一份关于JavaScript操作Cookie的PPT教程，主要涵盖了JavaScript的基础知识以及如何获取和设置Cookie。教程分为四章，包括JavaScript简介、基本语法、对象以及在浏览器中的使用。JavaScript是一种轻量级的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值