JS入门总结

来源：互联网发布：linux get命令 ftp 编辑：程序博客网时间：2024/06/06 01:20

一、什么是JavaScript

JavaScript是给HTML网页实现动态效果的一种脚本语言。

二、如何在网页中插入js

1、在<body>或者<head>代码块中加入<script type="text/JavaScript">js代码</script>。

2、在<head>中加入<script scr="文件名"></script>可以引入js外部文件。

因加载顺序不同，若js代码要用来页面初始化，则一定要插在<head>中。

三、变量

语法：var 变量名

1、变量必须使用字母、下划线(_)或者美元符($)开始。
2、然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
3、不能使用JavaScript关键词与JavaScript保留字。
4、变量需要先声明再使用。

三、语句与符号

1、判断语句：if(条件).....else()

2、输出语句：document.write("内容");

一句语句的结束通常用英文分号结尾

四、函数

函数是完成特定功能的一组语句

语法：function 函数名(){功能代码;}

五、输出内容

1、输出语句：document.write("内容");

如果要输出多项的值，用“+”连接起来。

输出HTML符号标签，使用""括起来。

输出空格：

①通常需要输出很多空格的时候，直接在输出语句里打空格，浏览器只能显示一个空格，因此用HTML标签" "输出空格。

②在document.write()中加入css样式：document.write("<span style='white-space:pre;'>"+"1 2 3 "+"</span>");浏览器便会保留空格。

六、弹出对话框

1、警告消息对话框

语法：alert(字符串或变量);

包含一个确定按钮。

2、确认对话框

语法：confirm(str);

str:在消息框中要显示的文本

包含一个确定，一个取消按钮

返回值：boolean值

确定：返回true

取消：返回false

eg：

var ms=confirm("你是女士吗？");

if(ms==true){

document.write("你是女士！");}

else{

document.write("你是男士！");}

3、提问对话框

语法：prompt(str1,str2)

str1:要显示在消息对话框中的文本，不可以修改。

str2:文本框中的内容，可以修改。

包含一个确定，一个取消按钮和文本输入框

点击确定，返回文本框内容

点击取消，返回null

4、打开新窗口

语法：window.open([url],[窗口名称],[参数字符串])

url:窗口中要显示的网址或路径，若为空值，那么窗口不显示任何文档。

_blank:在新窗口显示目标网页。

_self:在当前窗口显示目标网页。

_top:框架网页中在上部窗口中显示目标网页。

关闭窗口：window.close();(关闭本窗口)

<窗口对象>.close();(关闭目标窗口)

七、DOM

1、认识DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

HTML文档可以说由节点构成的集合，三种常见的DOM节点:
①元素节点：<html>、<body>、<p>等都是元素节点，即标签。
② 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
③属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

2、通过id获取元素

语法：document.getElementById("id")

获取的元素是对象，要调用要通过其方法或属性

3、innerHTML属性：用于获取或改变某个对象的值

语法：对象.innerHTML

eg:改变某个对象的内容

var mychar=document.getElementById("对象名");

mychar.innerHTML="改变后的值";

4、改变HTML样式

语法：对象.style.property=new style

基本属性：

backgroundColor 设置背景元素颜色

height 设置元素高度

width 设置元素宽度

color 设置元素颜色

font 在一行设置所有字体属性

fontfamily 设置元素的字体系列

fontSize 设置字体大小

eg：

var mychar=document.getElementById("con");

mychar.style.color="red";

5、显示和隐藏

语法：对象.style.display=value

value取值

none 不会被显示

block 会被显示

eg：

document.getElementById("con").style.display="none";

此时元素con不会在浏览器中显示

6、控制类名

语法：对象.className=classname

①获取元素的class 属性
②为网页内的某个元素指定一个css样式来更改该元素的外观

0 0