JS入门学习笔记

目录

         一、准备知识

1.变量

2.函数

二、常用互动方法

1.输出内容 document.write

2.警告 alert消息对话框

3.确认 confirm消息对话框

4.提问 prompt消息对话框

5.打开新窗口 window.open

6.关闭窗口 window.close

三、认识DOM

---

一、准备知识

1.变量

定义变量

var 变量名

变量命名规则：

1.变量必须使用字母、下划线(_)或者美元符($)开始。

2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。

3.不能使用JavaScript关键词与JavaScript保留字。

2.函数

定义函数

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

二、常用互动方法

1.输出内容 document.write

四种：用""括起、通过变量、输出多项用"+"连接、输出HTML标签（便签用""括起来）

2.警告 alert消息对话框

3.确认 confirm消息对话框

弹出对话框包括两个按钮（确定和取消）

语法

confirm(str)//str:在消息对话框中要显示的文本；返回值：Boolean值

4.提问 prompt消息对话框

确定按钮+取消按钮+文本框

语法：

prompt(str1,str2);//str1:在消息对话框中的内容，不可更改 str2：文本框中的内容，可以修改
//点击确定按钮：返回文本框中内容；取消按钮：返回null

5.打开新窗口 window.open

语法：

window.open([URL],[窗口名称],[参数字符串])
/*URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
    1.该名称由字母、数字和下划线字符组成。
    2."_top"、"_blank"、"_self"具有特殊意义的名称。
       _blank：在新窗口显示目标网页
       _self：在当前窗口显示目标网页
       _top：框架网页中在上部窗口中显示目标网页
    3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
   4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。*/

参数表

 示例

6.关闭窗口 window.close

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

或

<窗口对象>.close();//关闭指定的窗口

三、认识DOM

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

1.通过ID获取元素

语法：document.getElementById("id")

2.innerHTML属性

语法：Object.innerHTML

//注意书写：innerHTML区分大小写

3.改变HTML样式

Object.style.property=new style;
//e.g.:mychar.style.color="red";

基本属性表

属性	描述
backgroundColor	设置元素的背景颜色
height	设置元素的高度
width	设置元素的宽度
color	设置文本的颜色
font	在一行设置所有的文体属性
fontFamily	设置元素的字体系列
fontSize	设置元素的字体大小

*该表只是一小部分，其他样式也可以通过该方法修改

4.显示和隐藏（display属性）

Object.style.display=value//value取值：none(此元素被隐藏）block(此元素被显示为块级元素）

5.控制类名（className属性）

object.className=classname