JavaScript学习笔记

时间：2016-10-25 19:05

——介绍

1、JavaScript简介
JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。
特点：
      交互性：信息的动态交互
      安全性：不可以直接访问本地硬盘
      跨平台性：只要是可以解析JS的浏览器都可以执行，与平台无关

基于对象：
      提供了很多对象，而已直接使用。
事件驱动：
      HTML做出的网站都是“静态效果”，而JavaScript可以实现“动态”效果。
客户端：
      指浏览器。
JS与Java的区别：
      JS是网景公司开发的一种脚本语言，可以在所有的主流浏览器中运行。
      JS是基于对象的，而Java是面向对象的。
      JS只需要解析就可以执行，而Java需要先编译成字节码文件，再执行。
      JS是一种弱类型语言，而Java是一种强类型语言。

JavaScript语言组成：
      核心：ECMAScript
          ECMA（欧洲计算机协会），JS语法由该组织制定。
      文档对象模型：DOM
          Document Object Model
      浏览器对象模型：BOM
          Browser Object Model

2、JavaScript与HTML结合方式（两种）
第一种：
      <script type="text/javascript" > JS代码 </script>
第二种：使用script标签引入外部js文件。
<script type="text/javascript" src="js文件路径" > </script>
        但是，当引入外部js文件时，script标签内不能再写其他的js代码。

3、JavaScript原始类型和声明变量
基本语法：
      变量、函数、运算符区分大小写。
      变量是弱类型的：（原始类型）

          var a = 10;
          var b = true;
          var c = "hello world";
      五种原始类型：
            string、number、boolean、null、undifined
          null表示对象引用为空。
          undifined表示定义了变量但是没有赋值。
      每行结尾的分号可有可无，建议编写。
      两种类型的注释：
          单行注释：// 注释内容
          多行注释：/* 注释内容 */

      typeof运算符：
          通过typeof()运算符，可以查看变量的类型，typeof(变量名)，所有引用的类型都是object。
      通过instanceof运算符可以解决typeof对象类型判断的问题。
        区分undefined和null：
          变量定义了未初始化或者访问对象不存在的属性，会出现undefined。
          访问的对象不存在时，会出现null。

      全局变量和局部变量：
          全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用
          局部变量：在方法内部定义一个变量，只能在方法内部使用。

4、JavaScript的语句
if、switch、for、while、do-while
switch语句：
      JDK1.7版本之后支持了String类型，而JS中支持所有的数据类型。

5、JavaScript的运算符
JavaScript中不区分整数和小数，所以除法中没有整数，会出现小数。
        alert(123 / 1000 * 1000);，输出结果为123。
字符串与数字相加，是字符串连接，如果是相减，则字符串直接转换成数字再进行相减。
  boolean类型可以进行运算，false是0或者null，非0或非null是true，默认用1显示。

    NaN：
    not a number：非数字。
      属于number类型。
用来表示数值的一种状态，一种不正常的状态。
    一般情况下会在计算出现错误的时候出现。
      判断当前的数据类型是否是NaN的关键字：isNaN()
          如果结果是非数字：true
如果结果是数字：false
==和===的区别：
      ==判断的是值，和类型无关。
      ===既判断值，又判断类型。

6、99乘法表示例
    <script type="text/javascript">

for(var i = 1; i < 10; i++)

{

for(var j = 1; j < i + 1; j++)

{

document.write(j + " * " + i + " = " + (i * j) + "  ");

}

document.write("<br/>");

}

</script>

7、JavaScript数组
三种定义方式：
      var arr = [1, "2", true];
      var arr = new Array(5);
      var arr = new Array(1,2,3);
数组有length属性。
  数组的长度是可变的。
  数组可以存放不同类型的数据。

8、函数
普通函数：
      function method(){ }
      function method2(a, b) { return a + b;}
      参数列表中不需要写var，直接写变量名。

匿名函数：
      var add = function method(a, b) { return a + b; }
      通过add(1, 2);进行调用。

内置对象：（动态函数）
      使用到js中的一个内置对象：Function
      var add = new Function("参数列表", "方法体和返回值");

      var args = "";
      var body = "";
      var add = new Function(args, body);

9、script标签放置的位置
理论上可以放在任意位置。
不过由于HTML解析是由上到下的，所以通常情况下放在</body>标签之后。

10、JS的方法重载


——JavaScript第一天总结
1、什么是JavaScript
2、js和HTML的结合方式
3、js的数据类型
4、js的语句
5、js的运算符
6、js的数组
7、js的函数
8、js的全局变量和局部变量
9、script标签位置
10、js的函数重载

——JavaScript第二天

1、JS的string对象
创建string对象：
      var str = "abc";
方法和属性：
      属性：length，表示字符串的长度。
      （1）与HTML相关的方法
          bold()：使用粗体显示字符串
          fontcolor("颜色")：使用指定颜色显示字符串
          fontsize(size)：使用指定字号显示字符串
          link("URL")：将字符串显示为超链接
          sub()：设置下标
          sup()：设置上标
      （2）与Java相似的方法
          concat(string)：连接字符串
          charAt(index)：返回指定位置的字符串，如果脚标不存在，则返回空字符串
          indexOf(string)：返回字符串所在位置，当字符串不存在时，返回-1
          split(regex)：分隔字符串，返回字符串数组
          replace(string, string)：需要传递两个参数，第一个是原始字符串，第二个是要替换的字符串
          substr(fromindex, count)：从指定位置开始，截取count的字符
          substring(fromindex, endindex)：包含头不包含尾

2、JS的Array对象
创建数组：
      var arr = [1, 2, 3]; 创建一个长度为3的数组，并且赋值为123。
      var arr = new Array(5);    创建一个长度为5的数组。
      var arr = new Array(1, 2, 3); 创建一个长度为3的数组，并且赋值为123。
属性：
      length：数组的长度。
数组的方法：
      concat(array)：连接数组
            连接只是把数组1和数组2作为一个字符串来看待，并不是将数组2添加到数组1中。

      join()：根据一个指定的字符串来分割数组

      push()：向数组末尾添加一个或多个元素，并返回新的长度，也可以添加一个数组。
          需要注意的是，如果push的元素是一个数组，则会把这个数组当成一个元素来看待，例如：
              原数组arr1的值为[1, 2, 3]，此时如果pusharr2=[a, b, c]，则arr1的length的值为4，如果打印arr1[3]，则会将arr2的值全部输出，当arr2数组中元素发生变化时，此时如果再打印arr1，则也会发生变化，可以理解为将arr2的引用放入了arr3中，并不是将arr2数组的全部值复制到arr1中。
      pop()：删除并返回数组中的最后一个元素，如果没有要删除的值，则返回undefined。
      reverse()：颠倒数组中的元素。

3、JS的Date对象
在Java中获取当前时间：
      Date date = new Date();
      在Java中有两种转换方法：
          new SimpleDateFormat().format()和toLocaleString();

JS中如何获取当前时间：
      var date = new Date();

方法：
      toLocaleString()：根据本地时间格式，把Date对象的时间转换为字符串
      getFullYear()：以四位数字返回当前年份
      getMonth()：得到当前月份，需要注意的是，月份的范围是0 ~ 11
      getDate()：得到当前天数，范围是1 ~ 31
      getDay()：返回一周中的某一天，范围是0 ~ 6，从周日开始计算
      getHours()：获取当前小时，范围0 ~ 23
      getMinutes()：获取当前分钟
      getTime()：返回从1970年1月1日至今的毫秒数

  应用场景：
      使用毫秒数处理缓存的效果：
            http://www.baidu.com?毫秒数
          因为每次请求的毫秒数都不相同，所以可以保证每次请求的数据都是新的。

4、JS的Math对象
  Math对象并不像Date和String那样是对象的类，因此并没有构造方法，所以不能创建对象，Math的方法都是静态方法。

属性：
      PI：π，圆周率

方法：
      ceil(number)：向上舍入
      floor(number)：向下舍入
      round(number)：四舍五入
      random()：返回0 ~ 1之间的伪随机数
      max(x, y)：返回x和y中的最大值
      min(x, y)：返回x和y中的最小值

5、JS的全局函数
由于该函数不属于任何对象（类），所以可以直接使用。

eval(string)：可以执行JS代码，也可以进行数学运算。
encodeURI()：对字符进行编码
decodeURI()：对字符进行解码
encodeURIComponent()：对字符进行编码
decodeURIComponent()：对字符进行解码
      以上方法没有本质上的区别，只不过编码字符个数不同
isNaN()：检查某个值是否是数字，返回值为true和false
parseInt()：将一个字符串转换为整数。

关于编解码URI：
      进行URL跳转时可以整体使用encodeURI进行编码。
对字符串进行unicode编码：
      （1）escape不能编码的字符有69个：
          *+_./@_0-9a-zA-Z
      （2）encodeURI不能编码的字符有82个：
          !#$&'()*+-./:;=?@_~0-9a-zA-Z
      （3）encodeURIComponent不能编码的字符有71个：
          !'()*-._~0-9a-zA-Z

6、JS的函数重载
面试：JS中是否存在重载？
      （1）JS中不存在重载。
      （2）但是可以通过其他方法来达到重载的目的。
      （3）在JS中如果方法名相同，会调用最后一个方法。
      （4）参数会保存在arguments数组中。

function add() {

var sum = 0;

for(var i = 0; i < arguments.length; i++)

{

sum += arguments[i];

}

return sum;

}

document.write("<hr/>" + add(1,2));

document.write("<hr/>" + add(1,2,3));

document.write("<hr/>" + add(1,2,3,4));

document.write("<hr/>" + add(1,2,3,4,5));

</script>

7、JS的BOM对象
Browser Object Model，浏览器对象模型。

有哪些对象：
      navigator：可以获取浏览器的相关信息。
          appName：浏览器名称
            document.write(navigator.appName); //注意navigator要小写

      screen：获取浏览器屏幕的信息，例如宽度、高度、分辨率
      document.write(screen.width); 获取屏幕宽度
            document.write(screen.height); 获取屏幕高度

      location：表示请求URL地址
          href：设置或返回完整的URL地址，需要注意的是，该href默认已经进行encodeURI编码。
              获取请求URL地址：document.write(decodeURI(location.href));
              设置URL地址：location.href="http://www.baidu.com";

      history：请求URL的历史记录
          length：返回浏览器历史列表中的URL数量
          back()：加载history列表中的前一个URL
          forward()：加载history列表中的下一个URL
          go()：加载history列表中的某个具体页面
          创建三个页面：
              （1）创建第一个页面a.html，写一个链接到b.html
              （2）创建b.html，写一个超链接c.html
              （3）创建c.html
                <h1>BBBBBB</h1>

//到上一个页面

function back1()

{

history.back(); //history.go(-1) -1表示到上一个页面

}

//到下一个页面

function forward1()

{

history.forward(); //history.go(1) 1表示到下一个页面

}

</script>

      window：
          window对象是JS层级中的顶层对象。（所有的BOM对象都在window中进行操作）
          window对象代表一个浏览器窗口或一个框架。
            window对象会在<body>或<frameset>出现时自动创建。

          属性：
                opener：返回创建此窗口的窗口的引用。

          方法：
              alert()：在页面弹出一个提示窗口

              confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
                  在弹出的对话框中选中确定，返回true，选中取消，返回false。

              prompt(text, defaultText)：显示可提示用户输入的对话框
                  text：对话框中显示的内容。
                  default：对话框中输入框中默认显示的文本。

              open(url, name, features, replace)：打开一个新的浏览器窗口或查找一个已命名的窗口，一般使用三个参数即可
                  url：打开的新窗口的URL地址
                  name：空字符串即可
                features：窗口特征，比如窗口宽度和高度
                  创建一个按钮，当点击按钮时，打开一个新窗口：
                        <input type="button" value="打开" onclick="open1();" name="">

function open1()

{

window.open("a.html","","width=200,height=200");

}

                        </script>

              close()：关闭当前窗口（浏览器兼容性较差）

              setInterval(code, millisec)：按照指定的周期（以毫秒计）来调用函数或计算表达式

                  参数：
                      code：要调用的函数或要执行的代码
                      millisec：周期性执行或者调用code之间的时间间隔，以毫秒计。1秒 = 1000毫秒
                  setInterval("alert(123)", 3000); 每三秒弹出一个对话框。
                  可以使用这个方法来制作系统时间、定时器等。

              setTimeout(code, millisec)：在指定的毫秒数之后来调用
                  与setInterval的区别是，setTimeout只会执行一次，而setInterval会重复执行。

              clearInterval()：清除setInterval()设置的定时器
                  clearInterval()方法的参数必须是由setInterval()返回的ID值。
              clearTimeout()：清除setTimeout()设置的定时器
                  clearTimeout()方法的参数必须是由setTimeout返回的ID值。

                    <input type="button" value="清除setInterval" onclick="clearI()" name="">

var Iid = window.setInterval("alert(123);", 2000);

var Tid = window.setTimeout("alert(555);", 5000);

function clearI()

{

clearInterval(Iid);

}

function clearT()

{

clearTimeout(Tid);

}

</script>

8、JS的DOM对象
Document Object Model，文档对象模型。
      文档：超文本文档（超文本标记文档），HTML、XML。
      对象：提供了属性和方法。
      模型：使用属性和方法来操作超文本标记型文档。
可以使用JS中DOM里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作。

想要对标记型文档进行操作：
        首先需要对标记型文档中的所有内容都封装成对象。
          需要把HTML中的标签、属性、文本内容都封装成对象。
      然后需要解析标记型文档。

如何使用DOM解析HTML：
      首先会根据HTML的层级结构在内存中分配一个树形结构，然后再通过不同的对象来操作HMTL。

对象：
      Document对象：
          整个HTML文档。
      Element对象：
          标签对象。
      Element -> 属性对象。
      Element -> 文本对象。
      Node节点对象：
          是Element对象的父对象。
          如果在Element对象中找不到想要的方法，可以去Node对象中寻找。

DOM的三个级别：
      （1）将HTML文档封装成对象。
      （2）在以上基础上添加新的功能，例如：对事件和CSS样式的支持。
      （3）支持XML的一些新特性。
DHTML：
      动态的HTML，它不是一门语言，是多项技术的综合体的简称。
      包括HTML、CSS、DOM、JavaScript
      这四种语言的职责：
          HTML：负责提供标签，封装数据，这样便于操作数据。
          CSS：负责提供样式，对标签中的数据进行样式定义。
          DOM：负责将标签及其内容解析，封装成对象，对象中具有属性和行为。
          JavaScript负责提供程序设计语言，对页面中的对象进行逻辑操作。

9、Document的对象
每个载入浏览器的HTML文档都会成为Document对象。
常用属性：
      forms[]：返回文档中所有form对象的引用。
      body：提供对<body>元素的直接访问。
常用方法：
      getElementById()：返回对拥有指定id的第一个对象的引用。
      getElementsByName()：返回带有指定名称的对象集合（数组）。
          获取第一个对象：getElementByName("name")[0];
      getElementsByTagName()：返回带有指定表签名的对象集合（数组）。
      write()：向文档写HTML表达式或者JavaScript代码，可以输出变量（值）。

10、弹窗案例
创建一个页面：
      有两个输入项和一个按钮。
      按钮上添加一个点击事件，弹出一个新窗口：open()。
创建弹出页面：
      使用表格，表格的每一行都有一个按钮，还有编号和姓名。
      按钮上有一个事件，将当前的编号和姓名赋值到第一个页面的文本框中。
<html>

<head>

</head>

<body>

编号：<input type="text" id="numid" name=""><br/>

姓名：<input type="text" id="nameid" name=""><br/>

//实现弹出窗口的方法

function open1() {

window.open("select.html", "", "width=300, height=300");

}

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

function s1(num1, name1)

{

var win1 = window.opener;//得到父窗体

win1.document.getElementById("numid").value = num1;

win1.document.getElementById("nameid").value = name1;

window.close();

}

</script>

</body>

</html>

安全问题：
      由于现在访问的是本地文件，谷歌浏览器的安全级别很高，不允许访问本地文件，所以无法执行以上代码，如果在服务器中就不存在以上问题了。

——JavaScript第三天

Node接口的特性和方法：
String nodeName：
      返回节点的名字。
String nodeValue：
      返回节点的值。
Number nodeType：
      返回节点的类型常量值之一。
Document ownerDocument：
      返回只想这个节点所属的文档。
Node firstChild：
      返回指向在childNodes列表中的第一个节点。
Node lastChild：
      返回指向在childNodes列表中的最后一个节点。
NodeList childNodes：
      返回所有子节点的列表。
Node parentNode：
      返回一个给定节点的父节点。
Node previousSibling：
      指向前一个兄弟节点，如果这个节点就是第一个兄弟节点，那么该值为null。
Node nextSibling：
      指向后一个兄弟节点，如果这个节点就是最后一个兄弟节点，那么该值为null。
Boolean hasChildNodes()：
      当childNode包含一个或多个节点时，返回true。
NameNodeMap attributes：
      包含了代表一个元素的特性的Attr对象，仅用于Element节点。
Node appendChild(node)：
      将node节点添加到childNodes的末尾。
Node removeChild(node)：
      从childNodes中删除node节点。
Node replaceChild(newNode, oldNode)：
      将childNodes中的oldNode替换成newNode。
Node insertBefore(newNode, refNode)：
      在childNodes中的refNode之前插入newNode。

=====================================================================
1、在末尾添加节点

<!DOCTYPE html>

<html>

<head>

<title>在末尾添加节点</title>

</head>

<body>

</ul>

</body>

</html>

分析：
      （1）创建<li>标签
              document.createElement("li");
      （2）创建文本
              document.createTextNode("文本内容");
      （3）将文本添加到<li>标签中
              li.appendChild(node);
      （4）将<li>标签添加到<ul>标签中
              ul.appendChild(li);

用到的方法：
      createElemnt()：为指定标签创建一个元素的实例。
      createTextNode()：从指定值中创建文本字符串。
      appendChild(node)：将指定节点添加到节点之后。

<!DOCTYPE html>

<html>

<head>

<title>在末尾添加节点</title>

</head>

<body>

<hr />

</ul>

function add1()

{

//获取ul节点

var ul1 = document.getElementById("ulid");

//创建一个li节点

var li1 = document.createElement("li");

//创建文本

var text1 = document.createTextNode("哈哈");

//将文本添加到li节点中

li1.appendChild(text1);

//将li节点添加到ul节点中

ul1.appendChild(li1);

}

</script>

</body>

</html>

===============================================================================
2、Element对象
      操作Element对象的属性：
          获取属性：getAttrubute(name)
          <input type="text" id="inputid" value="aaaa" name="">

//获取input标签

var input1 = document.getElementById("inputid");

// alert(input1.value);

alert(input1.getAttribute("id")); //可以获取任何属性

</script>

getAttribute()方法的好处是可以获取任何属性，而value只能获取“value”值。

设置属性：setAttribute(name, value)
<input type="button" id="inputid" onclick="click()" value="aaaa" />

alert(document.getElementById("sp").value);

function click()

{

document.getElementById("sp").setAttribute("type","button");

}

function click2()

{

var text = document.getElementById("sp").value;

alert(text);

}

</script>

删除属性：removeAttribute(nmae)方法
removeAttribute()方法不能删除value值。

===============================================================================
3、获取某一节点下的所有节点：childNodes
获取ul下的所有li。
<ul id="ulid1">

</ul>

//获取ul下的所有子元素

var uls = document.getElementById("ulid1");

var list = uls.childNodes;

alert(list.length);

</script>

需要注意的是，在IE浏览器中会alert(3)，而在火狐、谷歌浏览器中会打印alert(7)，因为解析方式不同，火狐会把换行和空格也解析为元素。
所以childNodes属性的兼容性很差。

    在Element对象中查找Element对象：
        在Element对象的范围内，可以用来查找其他节点的唯一有效方法就是getElementsByTagName()方法，而该方法返回的是一个集合。
        var list = uls.getElementsByTagName("li");
        需要注意的是：getElementsByTagName是Document的方法。
===============================================================================
4、Node常用属性：

Node 对象是整个 DOM 的主要数据类型。节点对象代表文档树中的一个单独的节点。节点可以是元素节点、属性节点、文本节点。

Element 对象表示 XML 文档中的元素。元素可包含属性、其他元素或文本。

XML树结构中只有NODE，Element的属性，文本等都是节点。

使用DOM解析HTML的时候，会将HTML中的标签、属性和文本都封装成对象，对应以下三个属性：

    nodeName
        如果节点是元素节点，nodeName返回这个元素的名称。
        如果是属性节点，nodeName返回这个属性的名称。
        如果是文本节点，nodeName返回一个内容为#text的字符串。
    nodeType
        Node.ELEMENT_NODE 元素节点
        Node.ATTRIBUTE_NODE 属性节点
        Node.TEXT_NODE 文本节点
    nodeValue
        如果给定节点是一个属性节点，返回值是这个属性的值。
        如果给定节点是一个文本节点，返回值是这个文本节点的内容。
        如果给定节点是一个元素节点，返回值是null。

<br />

//获取标签对象

var span1 = document.getElementById("spanid");

document.write(span1.nodeType + "<br />"); //1

document.write(span1.nodeName + "<br />"); //SPAN

document.write(span1.nodeValue + "<br />"); //null

//获取属性

var id1 = span1.getAttributeNode("id"); //获取一个节点的属性

document.write(id1.nodeType + "<br />"); //2

document.write(id1.nodeName + "<br />"); //id

document.write(id1.nodeValue + "<br />") //spanid

//获取文本

var text1 = span1.firstChild; //获取第一个节点

document.write(text1.nodeType + "<br />"); //3

document.write(text1.nodeName + "<br />"); //#text

document.write(text1.nodeValue + "<br />"); //哈哈

</script>

总结：
      标签节点对应的值：
          nodeType：1
          nodeName：大写标签名，例如：SPAN
          nodeValue：null
      属性节点对应的值：
          nodeType：2
          nodeName：属性名称
          nodeValue：属性的值
      文本节点对应的值：
          nodeType：3
          nodeName：#text
          nodeValue：文本内容
===============================================================================
5、父节点、子节点和兄弟节点
父节点：parentNode
      parentNode属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。
      document节点没有父节点。
子节点：
      childNodes：获取指定节点的所有子节点集合。
      firstChild：获取指定节点的第一个子节点。
      lastChild：获取指定节点的最后一个子节点。
兄弟节点：
      nextsibling：返回一个给定节点的下一个兄弟节点。
      previousSibling：返回一个给定节点的上一个兄弟节点。

  该操作只是针对标签进行操作，无法操作属性。
===============================================================================
6、操作DOM树
方法：
        appendChild方法：
            将子节点添加到节点末尾。
          类似于剪切粘贴的效果。

<!DOCTYPE html>

<html>

<head>

#div1 {

width:200px;

height: 150px;

border: 1px solid red;

}

#div2 {

width: 250px;

height: 150px;

border: 3px dashed green;

}

</style>

</head>

<body>

</ul>

</div>

function add11()

{

//得到div2

var div2 = document.getElementById("div2");

//获取ul

var ul1 = document.getElementById("ulid1");

//加入元素

div2.appendChild(ul1);

}

</script>

</body>

</html>

------------------------------------------------------------------------------------------------------------------------------
      insertBefore(newNode, oldNode)方法：在某个节点之前插入一个新的节点。
          newNode：要插入的节点。
          oldNode：在谁之前插入，只能通过父节点来添加。
          （1）创建标签
          （2）创建文本
          （3）将文本添加到标签中

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

//在貂蝉之前插入一个唐伯虎

function insert1()

{

1、首先获取到貂蝉节点 id = li13

2、创建li

3、创建文本唐伯虎

4、将文本添加到li中

5、获取ul

6、将li添加到ul中

//1、获取貂蝉节点

var li13 = document.getElementById("li13");

//2、创建li节点

var li15 = document.createElement("li");

//3、创建文本

var text = document.createTextNode("唐伯虎");

//4、将文本添加到li中

li15.appendChild(text);

//5、获取ul标签

var ul21 = document.getElementById("ul21");

//6、只能通过父节点来添加节点

ul21.insertBefore(li15,li13);

}

</script>

</body>

</html>

------------------------------------------------------------------------------------------------------------------------------
removeChild(node)方法：删除节点。

自己不能删除自己，必须通过父节点来删除该节点。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

//删除杨玉环

function remove1()

{

1、获取到杨玉环标签

2、获取父节点ul

3、执行删除（通过父节点来删除）

//1、获取li标签

var li24 = document.getElementById("li24");

//2、获取父节点（1）通过id获取（2）通过parentNode属性获取

var ul31 = document.getElementById("ul31");

//通过父节点删除

ul31.removeChild(li24);

}

</script>

</body>

</html>

------------------------------------------------------------------------------------------------------------------------------
      replaceChild(newNode, oldNode)方法：替换节点。
          newNode：新的节点。
          oldNode：旧的节点。
          不能自己替换自己，需要使用父节点来完成替换操作。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

//将杨玉环替换成唐伯虎

function replace1()

{

1、获取到li34

2、创建要替换的li标签

3、创建文本

4、将文本添加到li标签中

5、获取ul父节点

6、使用replaceNode方法替换节点

var li34 = document.getElementById("li34");

var li = document.createElement("li");

var text = document.createTextNode("唐伯虎");

li.appendChild(text);

var ul = document.getElementById("ul41");

ul.replaceChild(li,li34);

}

</script>

</body>

</html>

------------------------------------------------------------------------------------------------------------------------------
cloneNode(boolean)：复制节点。
boolean：是否复制子节点。

<!DOCTYPE html>

<html>

<head>

#di2{

width: 200px;

height: 200px;

border: 3px dashed blue;

float: left;

}

#di1{

width: 200px;

height: 200px;

border: 1px solid red;

}

</style>

</head>

<body>

</ul>

</div>

</div>

function clone1()

{

//将ul列表复制到另外一个div中

1、获取到ul

2、执行复制方法 cloneNode方法，参数为true

3、把复制之后的内容放到div中

获取div，然后使用appendChild(剪切粘贴)

//1、获取ul标签

var ul = document.getElementById("ul41");

//2、获取要复制的div

var div2 = document.getElementById("di2");

//3、赋值ul

var ul2 = ul.cloneNode(true);

div2.appendChild(ul2);

}

</script>

</body>

</html>

------------------------------------------------------------------------------------------------------------------------------
操作DOM总结：
      获取节点：
          getElementById()：通过节点的ID属性，查找对应节点。
          getElementsByName()：通过节点的name属性，查找对应节点。
          getElementsByTagName()：通过节点名称，查找对应节点。
      插入节点：必须通过父节点插入
          appendChild()：在末尾添加，相当于剪切粘贴。
          insertBefore()：在某个节点之前插入。
      替换节点：
          replaceChild()：必须通过父节点替换
      删除节点：
          removeChild()：必须通过父节点删除。
===============================================================================
7、innerHTML属性

几乎所有浏览器都支持该属性，但不是DOM标准的组成部分。

  innerHTML属性可以用来读 / 写某给定元素里的HTML内容：
      获取文本的内容。
      向标签中设置内容（可以是HTML代码）。

innerHTML属性多与div或span标签配合使用。

<html>

<head>

#did{

width: 200px;

height: 200px;

border: 1px solid red;

}

</style>

</head>

<body>

</div>

//获取span标签

var span1 = document.getElementById("sid");

alert(span1.innerHTML);

//向div中设置内容<h1>AAAA</h1>

//获取div

var div = document.getElementById("did");

div.innerHTML = "<h1>AAAA</h1>";

</script>

</body>

</html>

===============================================================================
8、案例：动态显示时间
得到当前时间：
      var date = new Date();
      var d = date.toLocaleString();
设置定时代码：
      setInterval();
将时间显示到页面上：
      每一秒向页面中写入一次时间，使用innerHTML属性。

<!DOCTYPE html>

<html>

<head>

<title>动态显示时间</title>

</head>

<body>

// function fun(){

var date = new Date();

var p = document.getElementById("p1");

var code = "document.getElementById('p1').innerHTML = new Date().toLocaleString()";

window.setInterval(code, 1000);

// }

// window.setInterval(fun(), 1000);

</script>

</body>

</html>

===============================================================================
9、案例：全选练习
使用复选框中的checked属性判断是否选中：
      checked == true：选中
      checked == false：未选中
创建一个页面：
      复选框和按钮：
          四个复选框。
          全选、清除、反选按钮。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

//全选

function selAll(){

1、获取要操作的复选框

使用document.getElementsByName()方法获取

2、返回的是数组

checked属性可以判断复选框是否被选中

checked = true或者false。

遍历数组，将checked全部设置为true。

//获取全部复选框

var arr = document.getElementsByName("sel");

//遍历数组，得到每一个复选框

for (var i = 0; i < arr.length; i++)

{

//得到每一个复选框

var sel = arr[i];

//设为选中

sel.checked = true;

}

fun();

}

//全不选

function selNo(){

1、获取要操作的复选框

2、返回的是数组，遍历数组

3、设置复选框属性 checked = false

//得到要操作的复选框

var arr = document.getElementsByName("sel");

//遍历数组，得到每一个复选框

for (var i = 0; i < arr.length; i++)

{

var sel = arr[i];

sel.checked = false;

}

fun();

}

//反选

function selOther(){

1、获取要操作的复选框

2、返回的是数组，遍历数组

3、得到每一个复选框

4、判断复选框状态

if(sel.checked == true)

5、设为相反值

//得到全部复选框

var arr = document.getElementsByName("sel");

//遍历数组

for (var i = 0; i < arr.length; i++)

{

var sel = arr[i];

//判断当前复选框状态

if(sel.checked == true)

{

sel.checked = false;

}

else

{

sel.checked = true;

}

fun();

}

//实现全选和全不选

function selAllNo(){

1、得到全选复选框

document.getElementById()

2、判断复选框是否选中

if条件

3、如果是选中，则选中全部复选框

4、如果未选中，则全不选所有复选框

//得到复选框

var cAll = document.getElementById("c");

//判断复选框是否选中

if(cAll.checked)

{

selAll();

}

else

{

selNo();

}

fun();

}

//判断如果四个选项都选中，则全选框也选中

function fun()

{

var arr = document.getElementsByName("sel");

for(var i = 0; i < arr.length; i++)

{

if(!arr[i].checked)

{

document.getElementById("c").checked = false;

return;

}

else
{

document.getElementById("c").checked = true;

}

}
}

</script>

</body>

</html>

===============================================================================

10、案例：下拉列表左右选择
下拉选择框：
      <select>
          <option> 111 </option>
          <option> 222 </option>
      </select>

创建一个页面：
      两个下拉选择框：设置multiple属性
      四个按钮，添加点击事件。

选中添加到右边：
      （1）获取左边select中的option
              getElementsByTagName();返回的是数组。
              遍历数组，得到每一个option。
      （2）判断option是否被选中。
              selected = true;被选中
              selected = false;未选中
      （3）如果选中，把被选中的option添加到右边去。
      （4）得到右边的select
      （5）添加选中的option
          appendChild()方法，需要注意的是，该方法类似于剪切，所以数组长度会一直变化。

<!DOCTYPE html>

<html>

<head>

<title>下拉列表左右选择</title>

#sel1 {

width: 200px;

height: 200px;

float: left;

}

#sel2 {

width: 200px;

height: 200px;

}

#d1 {

width: 100px;

float: left;

margin-left: 40px;

margin-right: 40px;

margin-top: 20px;

}

input {

margin: 10px;

}

</style>

</head>

<body>

</select>

</div>

</select>

var left = document.getElementById("sel1");

var right = document.getElementById("sel2");

//获取左边option集合

function getLeft(){

return document.getElementById("sel1").getElementsByTagName("option");

}

//获取右边option集合

function getRight(){

return document.getElementById("sel2").getElementsByTagName("option");

}

//将节点添加到右边option集合

function toRight(node1){

right.appendChild(node1);

}

//将节点添加到左边option集合

function toLeft(node1){

left.appendChild(node1);

}

//实现选中添加到右边

function selToRight(){

1、获取select1里面的option

getElementsByTagName()

2、判断是否被选中

属性selected为true表示被选中

如果是false则表示未选中。

3、如果被选中，则将被选中的节点添加到右边

4、得到select2

5、添加选择的部分

appendChild(node)

//获取左边option集合

var arr = getLeft();

for (var i = 0; i < arr.length; i++){

if(arr[i].selected)

{

toRight(arr[i]);

i--;

}

//全部添加到右边

function allToRight(){

1、获取左边select中的option对象

2、返回数组，遍历数组

3、得到每一个option对象

4、得到右边的select

5、添加option

appendChild()

var arr = getLeft();

for (var i = 0; i <= arr.length; )

{

toRight(arr[0]);

}

//选中添加到左边

function selToLeft(){

var arr = getRight();

for (var i = 0; i < arr.length; i++)

{

if(arr[i].selected)

{

toLeft(arr[i]);

i--;

}

//全部添加到左边

function allToLeft(){

var arr = getRight();

for (var i = 0; i <= arr.length;)

{

toLeft(arr[0]);

}

</script>

</body>

</html>

===============================================================================
11、案例：省市联动
创建一个页面，有两个下拉框。
在第一个下拉框中添加：onchange()事件
onchange"change(this.value)"：this.value表示当前option的value值。

1、首先创建一个二维数组来保存数据。
2、二维数组中的每个元素是国家名称，国家名称后面的元素是所属国家的城市。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</select>

</select>

//创建数组来存储城市

var country = new Array(4);

country[0] = ["中国", "江苏", "北京", "广州", "上海"];

country[1] = ["美国", "华盛顿", "芝加哥", "底特律"];

country[2] = ["德国", "柏林", "慕尼黑", "法兰克福"];

country[3] = ["日本", "东京", "北海道", "大阪", "神户"];

country[4] = [0, "--请选择--"];

var province = document.getElementById("province");

function change(value)

{

1、遍历二维数组

2、得到的元素也是一个数组

3、拿到数组中的第一个值和传递的值进行比较

4、如果两个值相同，就获取第一个值后面的元素

5、添加到第二个select中

得到province节点

6、使用appendChild方法进行添加

创建option

创建文本

设置value

进行添加

//1、遍历二维数组

for (var i = 0; i < country.length; i++)

{

//得到二维数组中的每一个数组

var arr = country[i];

//得到遍历后数组中的第一个值

var city = arr[0];

//判断传递的值和参数是否相同

if (city == value)

{

//删除原option

clear();

//得到第一个值后面的元素

//遍历arr数组

for(var j = 1; j < arr.length; j++)

{

//得到城市的名称

var val = arr[j];

//添加到province中

var option = document.createElement("option");

var text = document.createTextNode(val);

option.appendChild(text);

province.appendChild(option);

}

由于每次都要向province中添加option，所以需要先清空之前的option值

function clear()

{

var option = province.getElementsByTagName("option");

for(var i = 0; i < option.length; )

{

province.removeChild(option[i]);

}

</script>

</body>

</html>

===============================================================================
12、案例：动态生成表格
创建一个页面：两个输入框和一个按钮。

/*
      1、得到输入的行和列的值
      2、生成表格
          外循环 -- 行
          内循环 -- 列
      3、显示到页面
          把表格的代码设置到div中
          使用innerHTML属性
    */

<!DOCTYPE html>

<html>

<head>

table {

border: 1px solid red;

}

td {

border: 1px solid blue;

width: 20px;

height: 20px;

}

</style>

</head>

行：<input type="text" size="10" id="rows1" name="rows2" />

列：<input type="text" size="10" id="cols1" name="cols2">

function create()

{

var rows = document.getElementById("rows1").value;

var cols = document.getElementById("cols1").value;

var s = "<table>"

for (var r = 1; r <= rows; r++)

{

s += "<tr>"

for (var c = 1; c <= cols; c++)

{

s += "<td></td>";

}

s += "</tr>";

}

s += "</table>"

document.getElementById("b").innerHTML = s;

}

</script>

</body>

</html>

===============================================================================

13、总结
（1）在末尾添加节点：
          * 创建标签createElement方法
          * 创建文本createTextNode方法
          * 把文本添加到标签下面appendChild方法
（2）元素对象
          获取标签的子标签：document.getElementsByTagName()
（3）Node对象
          属性：nodeType、nodeName、nodeValue
（4）操作DOM树
          父节点：parentNode（重点记住）
          appendChild()
              添加到末尾
              剪切粘贴的效果
          insertBefore(newNode, oldNode)
              通过父节点添加
          removeChild(node)
              通过父节点删除
          replaceChild(newNode, oldNode)
              通过父节点替换
（5）innerHTML属性（*****）
          获取文本内容
          向标签设置内容（可以设置HTML代码）
（6）动态显示时间
          定时器：setInterval()
          在指定时间内重复执行JS代码
（7）全选练习
          属性：checked
          checked == true表示复选框被选中，checked == false表示复选框未选中。
（8）下拉列表左右选择
          属性：multiple
              让下拉列表中的内容全部显示。
          selected == true：option被选中。
          selected == false：option未选中。
（9）省市联动
          二维数组：数组中嵌套数组
          事件：onchange()
          参数：this.value，当前option的value值。
（10）动态生成表格
          属性：innerHTML
          使用变量保存html代码
          tab += "</table>";

——JavaScript第四天

1、表单提交方式
（1）使用submit提交
          <form>
              ......
              <input type="submit" />
        </form>
（2）使用button提交
      function form1()

{

//获取form

var form1 = document.getElementById("form1");

//设置action

form1.action = "html01.html";

//提交form表单

form1.submit();

            }
    （3）使用超链接提交
        <a href="html01.html?username=aa张三">使用超链接提交</a>

2、常用方法
onclick()：鼠标点击事件
onchange()：改变事件
onfocus()：获得焦点
onblur()：失去焦点

posted @ 2017-02-07 17:38 WWWYC 阅读(573) 评论(0) 编辑收藏举报

WWWYC

JavaScript学习笔记

公告