js初学

最新推荐文章于 2024-04-30 20:32:35 发布
最新推荐文章于 2024-04-30 20:32:35 发布
阅读量251 收藏
点赞数
分类专栏： java初学
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mumatiankong/article/details/52290148
版权

1. 通过ID获取元素

学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
  var mychar= document.getElementById('con');
  document.write("结果:"+mychar); //输出获取的P标签。
</script>
</body>
</html>

语法：

document.getElementById(“id”)；

结果:null或[object HTMLParagraphElement]

 

2.innerHTML 属性

innerHTML 属性用于获取或替换 HTML 元素的内容。

语法:

Object.innerHTML
 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">
  var mychar=  document.getElementById("con");
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML="Hello world";
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>

 

3. 改变 HTML 样式

语法:

Object.style.property=new style;

注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

 

<p id="pcon">Hello World!</p>

<script>   var mychar = document.getElementById("pcon");  

  mychar.style.color="red"; 

  mychar.style.fontSize="20"; 

  mychar.style.backgroundColor ="blue";

</script>

 

4.

显示和隐藏（display属性）

网页中经常会看到显示和隐藏的效果，可通过display属性来设置。

语法：

Object.style.display = value

注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
    <script type="text/javascript">
        function hidetext() 
  { 
  var mychar = document.getElementById("con");
        mychar.style.display = "none";
  } 
  function showtext() 
  { 
  var mychar = document.getElementById("con");
        mychar.style.display = "block";
  }
    </script>
</head>
<body> 
    <h1>JavaScript</h1> 
    <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>
    <form>
       <input type="button" οnclick="hidetext()" value="隐藏内容" />
       <input type="button" οnclick="showtext()" value="显示内容" />
    </form>
</body>
</html>

5.

控制类名（className 属性）

className 属性设置或返回元素的class 属性。

语法：

object.className = classname

 

 

mumatiankong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 入门(简单易懂) 看这一篇就够了
2301_77638787的博客
08-06 9405
尽量帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易。但大道至简，知易行难，需要大家之后不断练习。
JS入门基础知识
weixin_53136302的博客
07-26 2573
核心（ECMAScript）：描述了该语言的语法和基本对象。 文档对象模型（DOM）：描述处理网页内容的方法和接口。 浏览器对象模型（BOM）：描述与浏览器进行交互的方法和接口。
JS从入门到精通
最新发布
p6448777的博客
04-30 381
/在其他浏览器中可以使用getComputedStyle()这个方法来获取当前的样式，这个方法是window方法可以直接使用需要有两个参数第一个，需获取样式的元素。如果两个对象一样，但是地址不同，也是会返回false的。值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。//常用节点:文档节点(HTML文档)、元素节点(HTML标签)、属性节点(元素的属性)、文本节点(HTML中的文本内容)
JavaScript入门
微风洋洋的博客
02-10 9027
JavaScript入门秘籍，欲练此功，关注有功
javascript基础入门教程,javascript零基础入门
阿发狗伪原创
10-24 503
一门客户端脚本语言，运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎，不需要编译，直接就可以被浏览器解析执行了python for语句用法。//局部变量 用let定义let 变量名 = 值;//全局变量 用var定义var 变量名 = 值;//常量定义 constconst 常量名 = 值;//整数类型var a=3;// Boolean类型var b=true;// 定义小数类型 小数和整数类型统称为number类型。
javascript基础入门教程,javascript基本语句
阿发狗伪原创
10-26 113
浏览器分为渲染引擎和JS引擎）（1）渲染引擎：用来解析HTML和CSS，俗称内核。（2）JS引擎：又称JS解释器，用来读取网页中的JavaScript代码，对其处理后运行。注：浏览器本身不会执行JavaScript代码，而是通过内置的js引擎来执行JS代码。JS引擎执行代码时会逐行解释每一句源码（转化为机器语言），然后由计算机去执行。通俗：变量是用来存放数据的容器，我们通过变量名获取数据，甚至可以改变数据；白话：变量就是一个用来装东西的百变盒子。在计算机中，不同数据类型所占空间不同。
走出JavaScript初学困境—js初学
10-30
利用空闲几天把《JavaScript权威指南》安静的读了一篇。真是一本好书呀！呵呵，这句话见的太多了。好在什么地方呢？听我慢慢道来。
javascript初学者常用技巧
10-25
总的来说，理解JavaScript的存放位置、遵循正确的格式规范以及掌握基本的事件处理是JavaScript初学者必备的基础技能。通过不断地实践和学习，可以逐步提高编程能力，为构建更复杂的网页交互功能打下坚实基础。
js初学者入门
06-10
JavaScript（简称JS）是一种轻量级的解释性编程语言，常用于网页和网络应用开发。本文将根据提供的文件内容，深入讲解JS初学者需要掌握的基础知识。 首先，了解JS在HTML中的插入方式。`<script>`标签可以放置在HTML...
新手入门JavaScript看这篇就够了~
技术专家
04-20 1285
新手入门JavaScript看这篇就够了~
JS基础入门（一）
qq_54054566的博客
03-09 185
JavaScript 作用: 负责给页面添加动态效果. 语言特点: 属于弱类型语言: java: String name = “tom”; int age=18; name=30; 报错 javascript: let name=“tom”; let age=18; name=30; 不会报错 属于脚本语言,不需要编译直接解析执行. 基于面向对象 安全性强: JS语言只能访问浏览器内部的数据,浏览器以外的程序或磁...
javaScript快速入门(仅需一天)
King的博客
04-03 3732
/
JavaScript从入门到精通（全）
码农研究僧的博客
07-22 2万+
目录前言1. 入门案例2. 语法2.1 变量2.2 函数 前言 运行在浏览器的脚本语言（目标程序以文本格式打开） 用于网页和用户之间的交互，比如提交的时候，进行用户名是否为空的判断 Java运行在JVM当中，JavaScript运行在浏览器的内存当中 完整的javascript由语言基础,BOM,DOM组成 1. 入门案例 script标签javascript代码必须放在script标签中 用户点击以下按钮，弹出消息框 html中嵌入javascript有三种方式 第一种方式： 事件句柄=“js代码
JS入门必备基础知识（适合小白）
a_l_f_的博客
07-17 1万+
JS入门必备基础知识（适合小白）一、JS是什么？1、JS简介2、JS的组成部分3、JS的基本特点4、JS的特性5、JS与HTML、CSS的对比二、JS的用法1、JS的引入方法1）head中的 JavaScript 函数2）body中的 JavaScript 函数3）外部的 JavaScript2、JS的基本语法3、JS中的变量1）变量名2）变量值3）全局变量与局部变量4、数据类型1）基本数据类型2）引用数据类型3） JS的数据类型转换4）typeof 操作符5、JS代码在执行时分两个阶段1）预编译2）代码执
JavaScript 入门（上）
热门推荐
wuyxinu的博客
12-21 10万+
目录 一、JavaScript简介 二、JavaScript的特点 1、动态改变页面内容 2、动态改变网页的外观 3、验证表单数据 4、响应事件 三、内容 1、JavaScript简介 一、JavaScript是什么？ 二、JavaScript编辑工具 三、JavaScript在HTML的引用方式 四、JavaScript和Java的关系 五、训练题 2、JavaScr...
JS快速入门教程
weixin_48708731的博客
06-08 3096
JavaScript 和 Java 的对比 JavaScript Java 面向对象。不区分对象类型。通过原型机制继承，任何对象的属性和方法均可以被动态添加。 基于类系统。分为类和实例，通过类层级的定义实现继承。不能动态增加对象或类的属性或方法。 变量类型不需要提前声明(动态类型)。 变量类型必须提前声明(静态类型)。 不能直接自动写入硬盘。 ...
JS入门基本教程（适合没编程基础新手）
hewei0241的专栏
11-12 3万+
将JavaScript 插入网页的方法 使用标签在网页中插入Javascript代码。 插入JavaScript 与在网页中插入CSS的方式相似。使用下面的代码可以在网页中插入JavaScript：     ... 其中的...就是代码的内容。JavaScript的插入位置不同，效果也会有所不同，还可以像CSS一样，将JavaScript保存成一个外部文件，这些
js入门之路-初级
csdnlirui的博客
03-14 1404
一、js三种书写方式 1.下面两个等价-点击显示弹窗 <input type="button" value="hello" onclick="window.alert('hello world')"/> <input type="button" value="hello" onclick="alert('hello world')"/> 2.直接显示弹窗 <script type="text/javascript"> wind...
JS快速入门
qq_52655865的博客
08-11 818
学会使用在DOM对象对文件进行检索：document.querySelector(.....)//只找到符合条件的第一个元素（页面中第一次出现该选择器的标签），document.selectorAll(....)//检索全部符合条件的元素。3，JS中数据有类型，但变量没有类型（所有的数据都会被看作成对象类型，所以没有类型），用java的视角，JS的变量就是 Object a = 1；JS中，使用new关键字，则返回的是一个已定义的对象，如果不加new ，对象是函数的返回值。...
JavaScript菜鸟学习教程仅限初学者摸爬学习
12-09
"JavaScript菜鸟学习教程，适合初学者入门，涵盖JavaScript基础知识，不涉及动态网页相关高级技术，如动态定位、动画和特定浏览器差异。教程结构兼顾参考与教学，建议有一定HTML基础的读者学习，可作为进阶学习的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值