js的学习笔记——预备篇

Javascript 评论

        本篇文章会介绍之前学习Javascript时的一些笔记，苦于不知道可以写些啥有营养的东西。昨晚就忽然想到最近的Javascript这么火爆，于是乎就把以前学习的Javascript的笔记再整理一遍到自己这个“处女”博客吧~哈哈哈~

一、预备知识：

1. 在HTML文本中嵌入Javascript的方式一共有三种：

  1. 内部引用
  2. 内联引用
  3. 外部引用
  • 但是，我们用的最多的是外部引用这种方式，如下代码所示：
1
<script type="text/javascript" src="path/to/your_code.js"></script>
  • 上述代码可以放在html页面内的任何位置，具体要放在哪里，视具体情况而定了……

2. 注释：

  • 关于JS的注释方法，我一直是使用C++风格的注释方法，即：//这是一行注释，可能是用久了就成为习惯了吧，哈哈哈，不过另外值得注意的是，如果是使用“WebStorm”的话，尽量使用快捷键，我记得单行注释的快捷键是：Ctrl + /，要是用到多行注释的时候就可以输入/**然后键入回车即可。

3. 变量：

  1. 定义变量要使用关键字：var，语法：var 变量名
  2. 命名规则：
  3. 变量名必须使用字母、下划线或者美元符号开始；
  4. 可以使用任意多个英文字母、数字、下划线或美元符号；
  5. 不能使用JS关键字和JS保留字。
  6. 注意：
- 变量要先声明，再赋值
- 变量可以重复赋值；
- 在JS中区分大小写；
- 变量可以不声明，直接使用，但是不推荐，不规范；

4. 语句

  • 这里常用到的语句无非就是这几种：
    1. 赋值语句；
    2. 判断语句；
    3. 循环语句；
    4. 选择语句。

5. 函数

  1. 定义的方法：
1
2
3
4
5
6
7
//**
* 函数的参数可以有任意多个
* 函数可以有返回值
**/
function fun1(arg1, arg2){
    //your code
}
  1. 函数的调用：
  2. 放在<head>标签之间，会自动运行
  3. 使用标签<input type="button" value="点击" onclick="函数名">

二、JS常用的互动方法

1. 内容输出（document.write）

  • document.write可用于直接想HTML输出流写内容。
    1. 输出内容直接用“双引号”括起来，直接输出引号内的内容。
    2. 通过变量输出内容：
    • eg: document.write(mystr);
    1. 输出多项内容，内容之间用"+"号连接
    • eg: document.write(mystr+"Hello");
    1. 输出HTML标签
    • eg: document.write(mystr+"<br>");

2. alert消息提示窗

  • alert(str)

3. 确认（confirm消息对话框）

  • 作用：用于允许用户做选择的动作；
  • 语法：confirm(str);；
  • 参数说明：
**str**在消息对话框中要显示的文本
返回值Boolean值

4. 提问（prompt消息对话框）

  • **作用：**通常用于询问一些需要用户交互的信息。弹出消息对话框（包含一个确定按钮，取消按钮与一个文本输入框）
  • 语法：prompt(str1,str2);
  • 参数说明：
**str1**要显示在消息对话框的文本，不可修改；
**str2**文本框中的内容，可修改
- **返回值：** 1. 点击确定按钮，文本款的内容将作为函数返回值； 2. 点击取消按钮，返回`null`;

5. 打开新窗口（window.open）

  • 作用：open()方法可以查找一个已经存在或者新建的浏览器窗口；
  • 语法：window.open([URL],[窗口名称],[参数字符串])；；
  • 参数说明：
    • URL:可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档；
    • 窗口名称：可选参数,被打开窗口的名称。
      1. 该名称由字母、数字、下划线字符组成；
      2. _top,_blank,_self具有特殊意义的名称；
      • _top：框架网页中在上不窗口中显示目标网页；
      • _blank：在新窗口中显示目标网页；
      • _self：在当前窗口显示目标网页。
      1. 相同name的窗口只能创建一个，要想创建多个窗口，则name不能相同。
      2. name不能包含空格
    • 参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
    • 参数表：
    参数值说明
    topnumber窗口顶部离开屏幕顶部的像素数
    leftnumber窗口左端离开屏幕左端的像素数
    widthnumber窗口的宽度
    heightnumber窗口的高度
    menubaryes,no窗口有没有菜单
    toolbaryes,no窗口有没有工具条
    scrollyes,no窗口有没有滚动条
    statusyes,no窗口有没有状态栏

6. 关闭窗口（window.close）

  • **作用：**关闭窗口；
  • 语法：
1
2
window.close();//关闭当前窗口
<窗口对象>.close();//关闭指定窗口
eg:关闭新建的窗口：

1
2
var mywin = window.open('http://imooc.com');
mywin.close();

三、DOM操作

  • 介绍：
    • 文档对象模型（DOM）定义访问和处理HTML文档的标准方法。
    • HTML文档可以说有节点构成的集合。

1. 三种常见的DOM节点：

  1. 元素节点：<html>,<body>,<p>等，即标签；
  2. **文本节点：**向用户展示的内容，如<li>...</li>中的JavaScript
  3. **属性节点：**元素属性，如<a>标签的链接属性。

2. 通过ID获取元素

  • 语法：document.getElementById("id");
    • 获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。

3. innerHTML属性

  • 语法：object.innerHTML;
  • **作用：**innerHTML属性用于获取或替换HTML元素的内容
    1. Object是获取的元素对象，如通过document.getElementById("ID");获取的元素；
    2. innerHTML区分大小写
      eg：
    1
    2
    3
    4
    var mycon = document.getElementById("con");
    document.write("......"+mycon.innerHTML+"<br>");
    mycon.innerHTML="New text!";
    document.write("..."+mycon.innerHTML+"<br>");

4. 改变HTML样式：

  • HTML DOM允许Javascript改变HTML元素的样式
  • 语法：object.style.properly=new style;
  • **注意：**Object是获取的元素对象，如通过getElementById("ID");获取的元素。
  • 基本属性表(property)：
属性描述
backgroundColor设置元素背景颜色
height设置元素的高度
width设置元素的宽度
color设置文本的颜色
font在一行设置所有字体的属性
fontFamily设置元素的字体系列
fontSize设置元素的字体大小

5. 显示和隐藏(display属性)

  • 网页中经常会看到显示和隐藏的效果，可以通过display属性来设置
  • 语法：Object.style.display=value;
  • 注意：
    • Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
    • value的取值：
    值描述
    none此元素不会被显示（即隐藏）
    block此元素显示为块级元素（即显示）

6. 控制类名（className属性）

  • className属性设置或返回元素的class属性
  • 语法：Object.className=classname;
  • 作用：
    1. 获取元素的class属性；
    2. 为网页的某个元素指定一个CSS样式来更改元素的外观。

希川Engineer

格物致知。