JavaScript入门

最新推荐文章于 2021-04-01 18:34:33 发布

a1376871144

最新推荐文章于 2021-04-01 18:34:33 发布

阅读量154

点赞数

分类专栏： html+css+JavaScript

本文链接：https://blog.csdn.net/a1376871144/article/details/88820320

版权

html+css+JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

如何在html文件中插入js

基本格式： <script type="text/javascript"> </script>

外部引用：外部创建js文件直接写js代码，然后在html文件内部直接调用，调用格式：<script src=" js文件名称"></script>

js代码在html书写位置，放在<head>部分： 最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。放在<body>部分： JavaScript代码在网页读取到该语句的时候就会执行。

下面这些代码块都是放在js语句中的， <script type="text/javascript"> </script>

基本输出语句：提示框：alert(" "); 文本输出框document.write(" ");

注释：和java/c/c++一样，单行 // 。多行/** */

变量声明: var 变量名; 变量名区分大小写。变量先声明在赋值，或者声明时赋值；

if...else...：

             if(条件)
             { 条件成立时执行的代码 }
             else
             { 条件不成立时执行的代码 }

声明函数：

           function 函数名()
           {
             函数代码;
           }

常用互动方法

输出： document.write(" ");//输出的内容

警告： alert(" "); //警告

确认消息对话框： confrim(""); //消息对话框可以获得值，进行操作

提问消息对话框：prompt(" "，" ");//第一个提示信息（不可更改），第二个输入信息（可更改）

打开新窗口：window.open(" "," ");//第一个URL，第二个新窗口的参数设置

关闭窗口：首先将打开的新窗口付给已声明的变量，变量名.close(); 关闭

节点（DOM）

将HTML代码分解为DOM节点层次图:

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

通过ID获取元素

document.getElementById(" ");//写入的是id的名称

innerHTML 属性

如果说通过document.getElementById(" ")方法获得了元素，那么就需要使用innerHTML属性，把元素输出，

一般为 var mychar=document.getElementById(" con ");

document.write(mychar.innerHTML);

改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

例：变量名.style.color=" ";

变量名.style.backgroundColor=" ";

变量名.style.width="";

显示和隐藏（display属性）

Object.style.display = value;

value的值有2 none（隐藏） block（显示）

控制类名（className 属性）

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

语法：

object.className = classname

作用:

1.获取元素的class 属性

2. 为网页内的某个元素指定一个css样式来更改该元素的外观

DOM总结：

一、定义"改变颜色"的函数

obj.style.color
obj.style.backgroundColor

二、定义"改变宽高"的函数

obj.style.width
obj.style.height

三、定义"隐藏内容"的函数

obj.style.display="none";

四、定义"显示内容"的函数

obj.style.display="block";

五、定义"取消设置"的函数


使用confirm()确定框，来确认是否取消设置。
如是将以上所有的设置恢复原始值,否则不做操作。

a1376871144

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript入门

如何在html文件中插入js 基本格式： <script type="text/javascript"> </script> 外部引用：外部创建js文件直接写js代码，然后在html文件内部直接调用，...
复制链接

扫一扫