1、什么是 js

JS: JavaScript -> java 脚本语言
JavaScript 是网景(Netscape)公司开发的一种基于客户端浏览器、面向(基于)对象、事件驱动式的网页脚本语言。

JS的特点:

  1. 基于客户端浏览器 : js的运行环境是浏览器,无需下载任何jar和插件,浏览器自带对js运行环境的支持
  2. 面向(基于)对象 : js是面向对象的语言 , 我们开发中对js代码的使用 对象.属性 对象.方法()
  3. 事件驱动式 : js是基于事件实现大多数功能的, 什么叫做事件,事件类似于css中的伪类的概念
  4. 脚本语言 : 脚本语言无需编译,可以直接被解释执行,所以源代码可以直接看到

2、js与用户的交互方式

交互方式:
1.警示框
语法:alert(message)
作用:弹出一个警示框,并给出提示信息

2.对话输入框
语法:result prompt(messsge , value)
message:提示信息
value:输入框的默认值
result:返回值,就是用户在输入框输入的内容

注意:
1) 返回值是字符串,如果需要其他数据类型,需要强制类型转换
3) 函数定义了两个输入参数,但是根据需要传入需要的实参,不用的参数可以不传参

3.控制台输入(打印输出语句)
语法:console.log(msg)
作用:在控制台输出信息(可以是字符串,也可以是其他数据类型,包括对象)
注意:该方法一般用于调试程序

4.页面输出(在浏览器网页上打印)
语法:document.write(markup)
作用:向浏览器页面输出内容
注意:主要用于输出html代码字符串

上面将的交互方式都是函数(方法),在面向对象语言中方法一定属于某个对象,正确的调用方式是对象.方法()

在调用alert()或者prompt()函数的时候没有指定对象,是因为这些函数属于window对象

在js中,window对象方法成员可以省略window 类似于window.alert() --> alert()

3、js的组成

js的内容由3部分组成:

  1. ECMAScript : 语法部分,类似于javaSE数组之前的内容,所以最近规范叫做ES6->ECMAScript 6
  2. DOM : document object model 文档对象模型 , 让我们使用js代码去操作页面元素,实现动态添加,删除,修改,获取页面元素
  3. BOM : 浏览器对象模型 , 让我们使用js代码去操作浏览器,上一页,下一页,修改地址栏直接访问页面,刷新页面等等

4、变量

学习一门语言,首先学习语法
语法中学习顺序: 变量 -> 数据类型 ->运算符 ->流程控制语句 ->对象

变量: 内存中划定一块区域,保存值,值可以变化,用来表示这块内存的量就是变量

4.1、JavaScript 的变量类型

  • 数值类型: number
    (包含了java中的整数以及浮点数) 此类型用来表示整数和浮点数(小数)值。
    比如: 数字 10、10.01、100 、 -100 等等都是
    注意: 数值型除了常见的值之外还有一个特殊的值:NaN
  • 字符串类型: string
    (字符串和字符) 此类型用来表示字符串。字符串可以由单引号(')或双引号(")表示
  • 对象类型: object
  • 布尔类型: boolean
  • 函数类型: function

判断数据类型的方式: typeof 运算符

4.2、JavaScript 里特殊的值

 undefined    未定义,所有js变量未赋于初始值的时候,默认值都是undefinednull         空值NAN          全称是:Not a Number。 非数字。非数值。

4.3、JS中定义变量格式

语法:
1. java 声明变量 : 数据类型 变量名 = 初始化值;
2.js 声明变量: var 变量名 = 初始化值;

注意:

  1. 变量可以声明的时候直接进行初始化,也可以先只声明,在使用前进行初始化
  2. 如果变量没有初始化,可以访问值,值是undefined(undefined:只声明没有初始化的状态)
  3. js是弱类型语言,变量声明的时候无需指定数据类型,但是赋值的时候可以指定不同数据类型的值
    原因: java声明变量的时候必须指定数据类型,js声明变量的时候,所有数据类型的内存大小都是2个字节
  4. 变量声明的时候没有指定数据类型,变量的数据类型一直在变化,所以数据类型就是最后一次赋值,值的类型

总结: java中变量一旦声明,值可以变化但是数据类型不可变,js中变量值和数据类型都是可变的

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  var i;  // alert(i); //undefined  i=12;  // typeof()是JavaScript语言提供的一个函数  // 它可以取变量的数据类型返回  // alert(typeof(i));  //number  i="abc";  // alert(typeof (i));  //string  var a = 12;  var b ="abc";  alert(a*b);  //NAN 非数字。非数值。  </script>
</head>
<body>
</body>
</html>

5、关系(比较)运算

等于: == 等于是简单的做字面值的比较
全等于: === 除了做字面值的比较之外,还会比较两个变量的数据类型

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  var a = "12";  var b = 12;  alert(a==b); // true  alert(a===b); // false  </script>
</head>
<body>
</body>
</html>

6、逻辑运算

且运算: &&
或运算: ||
取反运算: !

在JavaScript 语言中,所有的变量,都可以作为一个boolean类型的变量去使用。
0、null、undefined、""(空串)都认为是false;

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  var a = 0;  if (a){  alert("0为真")  }else {  alert("0为假")  }  var b = null;  if (b){  alert("null为真")  }else {  alert("null为假")  }  var c = undefined;  if (c){  alert("undefined为真")  }else {  alert("undefined为假")  }   var d = "";  if (d){  alert("空串为真")  }else {  alert("空串为假")  }  //以上结果全部为假 /*  && 且运算。  有两种情况:  第一种:当表达式全为真的时候。返回最后一个表达式的值。        第二种:当表达式中,有一个为假的时候。返回第一个为假的表达式的值  */  var a = "abc";  var b = true;  var d = false;  var c = null;  alert(a && b) // true  alert(b && a) // true  alert(a && d) // false  alert(a && c) // null  alert(a && d && c) //false  /*  || 或运算  第一种情况:当表达式全为假时,返回最后一个表达式的值        第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值  */        alert(d || c) // null  alert(c || d) //false  alert(a || c) // abc  </script>
</head>
<body>
</body>
</html>

7、数组(重点)

7.1、数组定义方式

JS 中 数组的定义
格式:
var 数组名 = [] // 空数组
var 数组名 = [1,‘abc’,true]; // 定义数组同时赋值元素

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  var arr = [true,1]; // 定义一个空数组  // alert(arr.length) // 0  arr[0] = 12;  // alert(arr[0]) //12  // alert(arr.length) // 1  //JavaScript中的数组,只要我们通过数组下标赋值,那么最大的下标值,就会自动的给数组做扩容操作。  arr[2] = "abc";  alert(arr.length) // 3  // alert(arr[1]) // undefined  for (var i = 0;i<arr.length;i++){  // 数组的遍历  alert(arr[i])  }  </script>
</head>
<body>
</body>
</html>

8、函数(重点)

8.1、函数的两种定义方式

  1. 第一种,可以使用function关键字来定义函数
使用的格式:function  函数名(形参列表){函数体}

在JavaScript 语言中,如何定义带有返回值的函数?
只需要在函数体内直接使用 return 语句返回值即可

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  //定义一个无参函数  function fun(){  alert("无参函数fun()被调用了")  }        //函数调用,才会执行  fun()  //定义一个有参函数  function fun2(a,b){  alert("有参函数fun2()被调用了"+"a="+a+" b="+b)  }        fun2(12,"abc")  //带有返回值的函数  function sum(sum1,sum2){  var result = sum1+sum2;  return result;  }  alert(sum(130,20))  </script>
</head>
<body>
</body>
</html>
  1. 第二种定义方式
使用格式:
var  函数名  =  function(形参列表){函数体
}
<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  var fun = function (){  alert("无参函数")  }        fun()  var fun2 = function (a,b){  alert("有参函数a"+a+" b="+b)  }        fun2(200,300)  var sum = function (sum1,sum2){  return sum1+sum2;  }  alert(sum(160,200))  </script>
</head>
<body>  </body>
</html>

注:在Java中函数允许重载。但是在JS中函数的重载会直接覆盖掉上一次的定义

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  function fun() {  alert("无参函数fun()")  }  function fun(a, b) {  alert("有参函数fun(a,b)")  }        fun()  </script>
</head>
<body>
</body>
</html>

8.2、函数的 arguments 隐形参数(只在function函数内)

隐形参数:就是在function函数中不需要定义,但却可以直接用来获取所有参数的变量。

隐形参数特别像 java基础的可变长参数一样。
public void fun(Object …args);
可变长参数其实是一个数组

js中的隐性参数也跟 java的可变长参数一样,操作类似数组。

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  function fun(a) {  alert(arguments.length)  // 可看参数个数  alert(arguments[0])  alert(arguments[1])  alert(arguments[2])  alert("a="+a)  for (var i=0;i<arguments.length;i++){  alert(arguments[i]);  }  alert("无参函数fun()")  }        // fun(1, "abc", true)  //需求: 要求 编写 一个函数,用于计算所有参数相加的和并返回  function sum(num1,num2){  var result = 0;  for (var i=0;i<arguments.length;i++){  result += arguments[i];  }  return result;  }  alert(sum(1,2,3,"abc",4,5,6,7,8));  </script>
</head>
<body>
</body>
</html>

9、数值转换字符串

浏览器接收的数据和发送的数据都是字符串,所以经常需要将字符串转数值,数值转字符串

9.1、数值转字符串的实现方式:

  1. 隐式转换
    使用运算符进行隐式转换

  2. 显示转换
    使用String()构造函数进行显示转换

9.2、字符串转数值

  1. 隐式转换
    使用运算符进行隐式转换

  2. 显示转换
    使用Number()构造函数进行显示转换

以下值转换布尔 结果为
false、undefined 、null、0、 “” false
true、 1、 “somestring” true

其他数据类型转换为布尔:

  1. !!运算符进行隐式转换
  2. 使用Boolean()构造方法进行显式转换

10、JS 中的自定义对象(扩展内容)

10.1、Object 形式的自定义对象

对象的定义:
var 变量名= new Object(); // 对象实例(空对象)
变量名.属性名= 值; // 定义一个属性
变量名.函数名= function(){} // 定义一个函数

对象的访问:
变量名.属性/ 函数名();

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  /*  对象的定义:  var 变量名= new Object(); // 对象实例(空对象)  变量名.属性名 = 值; // 定义一个属性  变量名.函数名 = function(){} // 定义一个函数  */        var obj = new Object();  alert(typeof (obj))  obj.name="张三";  obj.age=18;  obj.fun=function (){  alert("姓名:"+this.name+"年龄:"+this.age)  }  /*  对象的访问:  变量名.属性 函数名();  */     alert(obj.name)   obj.fun();  </script>
</head>
<body>
</body>
</html>

10.2、花括号形式的自定义对象

对象的定义:
var 变量名 = { // 空对象
属性值: 值 //定义一个对象
属性值: 值 //定义一个对象
函数名: function //定义一个函数
};

对象的访问:
变量名.属性/ 函数名();

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  /*  对象的定义:  var 变量名 = {        // 空对象  属性值: 值        //定义一个对象  属性值: 值        //定义一个对象  函数名:  function      //定义一个函数  };        */        var obj = {  name: "李四",  age: 18,  fun: function (){  alert("姓名:"+this.name+" 年龄:"+this.age)  }  }  /*  对象的访问:  变量名.属性/ 函数名();  */        alert(obj.name)  obj.fun();  </script>
</head>
<body>
</body>
</html>

11、js 中的事件

11.1、什么是事件?

事件是电脑设备与页面进行交互的响应,称之为事件

常用的事件:
onload 加载完成事件: 页面加载完成之后,常用于做页面 js 代码初始化操作
onclick 单击事件: 常用于按钮的点击响应操作
onblur 失去焦点事件: 常用于输入框失去焦点后验证其输入内容是否合法
onchange 内容发生改变事件: 常用于下拉输入框失去焦点后验证其输入内容是否合法
onsubmit 表单提交事件: 常用于表单提交前,验证所有表单项是否合法

事件的注册分为静态注册和动态注册两种:

什么是事件的注册(绑定)?
就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定。

静态注册事件:
通过html 标签的事件属性直接赋于事件响应后的代码,这种方式我们叫静态注册。

动态注册事件:
是指先通过js 代码得到标签的dom 对象,然后再通过dom 对象.事件名= function(){} 这种形式赋于事件响应后的代码,叫动态注册。

动态注册基本步骤:
1、获取标签对象
2、标签对象.事件名= fucntion(){}

11.2、onload 加载完成事件

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  function onloadFun(){  //onload事件的方法  alert('静态注册onload事件,所有代码')  }       // onload事件动态方法,固定写法  window.onload = function (){  alert("动态注册的onload事件")  }    </script>
</head>
<!--静态注册onload事件  onload事件是浏览器解析完页面之后就会自动触发的事件  <body οnlοad="onloadFun()">-->
<body>
</body>
</html>

11.4、onclik 单击事件

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  function onloadFun(){  alert("静态注册onclick");  }  //动态注册onclick事件  window.onload =function (){  // 1.获取标签对象  /*  * document 是JavaScript语言提供的一个对象(文档)  * get           获取  * Element       元素(就是标签)  * By            通过...   由.. 经..  * Id            id属性  *           * getElementById 通过id属性获取标签对象  **/            var btnObj = document.getElementById("btn01");  // alert(btnObj)  // 2.通过标签对象.事件名 = function (){}            btnObj.onclick = function (){  alert("动态注册的onclick事件")  }  }  </script>
</head>
<body>
<!--静态注册onclick事件-->
<button onclick="onloadFun()">按钮1</button>
<button id="btn01">按钮2</button>
</body>
</html>

11.5、onblur 失去焦点事件

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  //静态注册失去焦点事件  function onblurFun(){  console.log("静态注册失去焦点事件")  }        //动态注册 onblur事件  window.onblur = function (){  //1.获取标签对象  var passOjb = document.getElementById("password")  //2.标签对象.事件名 = function(){}            passOjb.onblur = function (){  console.log("动态注册 onblur事件")  }  }  </script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun()"><br />
密码:<input id="password" type="password">
</body>
</html>

11.6、onchange 内容发生改变事件

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  function onchangeFun() {  alert("女神已经改变")  }  window.onload = function () {  //1.获取标签对象  var selObj = document.getElementById("sel")  //2.标签对象.事件名 = function(){}            selObj.onchange = function () {  alert("男神已经改变")  }  }  </script>
</head>
<body>
请选择你心中的女神:
<!--静态注册 onchange事件-->
<select onchange="onchangeFun()">  <option>--女神--</option>  <option>芳芳</option>  <option>佳佳</option>  <option>红红</option>
</select>
<br />
请选择你心中的男神:
<!--动态注册 onchange事件-->
<select id="sel">  <option>--男神--</option>  <option>德华</option>  <option>华仔</option>  <option>富城</option>
</select>
</body>
</html>

11.7、onsubmit 表单提交事件

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  //静态注册表单提交  function onsubmitFun(){  // 要验证所有表单项是否合法,如果有一个不合法就阻止表单提交  alert("静态注册表单提交---发现不合法")  return false;  }  //动态注册表单提交  window.onload = function (){  //1.获取标签对象  var formo1Obj= document.getElementById("form01")  //2.标签对象.事件名 = function(){}            formo1Obj.onsubmit= function (){  alert("静态注册表单提交---发现不合法")  return false;  }  }  </script>
</head>
<body>
<!--return false 可以组织表单提交-->
<!--静态注册时 return不能少-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">  <input type="submit" value="静态注册"/>
</form>  <form action="http://localhost:8080" id="form01">  <input type="submit" value="动态注册"/>
</form>
</body>
</html>

12、正则表达式

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  //表示要求字符串中,是否包含字母  // var patt = new RegExp("e");  // var patt = /e/;  //也是正则表达式  //表示要求字符串中,是否包含字母a或b或c  // var patt = /[abc]/;        //表示要求字符串中,是否包含小写字母  // var patt = /[a-z]/;  //表示要求字符串中,是否包含大写写字母  // var patt = /[A-Z]/;  //表示要求字符串中,是否包含任意数字  // var patt = /[0-9]/;  //表示要求字符串中,是否包含数字、字母、下划线  // var patt = /\w/;  //表示要求字符串中,是否包含至少一个a  // var patt = /a+/;        //表示要求 字符串中是否 包含 零个 或 多个a  // var patt = /a*/;        //表示要求 字符串中是否包含一个或零个a  // var patt = /a?/;        //表示要求 字符串是否包含连续三个a  // var patt = /a{3}/        //表示要求 字符串是否包含 至少3个连续的a,最多5个连续的a  // var patt = /a{3,5}/        //表示要求 字符串是否包含 至少3个连续的a  // var patt = /a{3,}/        //表示要求 字符串必须以a结尾  // var patt = /a$/;  //表示要求 字符串必须以a开头  // var patt = /^a/;  //表示要求字符串,从头到尾都必须完全匹配  // var patt = /^a{3,5}$/;  var patt = /^\w{5,12}$/ ;  var str = "xhg168";  alert(patt.test(str))  // 问题:var patt = /a{3,5}/; 最大值什么时候有用?// 表示要求字符串,从头到尾都必须完全匹配  // var patt = /^a{3,5}$/;  </script>
</head>
<body>
</body>
</html>

13、DOM 模型

DOM 全称是Document Object Model 文档对象模型
大白话,就是把文档中的标签,属性,文本,转换成为对象来管理。

13.1、Document 对象(重点)

13.2、Document 对象的理解:

第一点:Document 它管理了所有的HTML 文档内容。
第二点:document 它是一种树结构的文档,有层级关系。
第三点:它让我们把所有的标签都对象化。
第四点:我们可以通过document 访问所有的标签对象。

什么是对象化??

举例:
有一个人有年龄:18 岁,性别:女,名字:张某某
我们要把这个人的信息对象化怎么办!

Class Person {  private int age;  private String sex;  private String name;
}

那么html 标签要对象化怎么办?

<body>
<div id="div01">div01</div>
</body>

模拟对象化,相当于:

class Dom{  private String id; // id 属性  private String tagName; //表示标签名  private Dom parentNode; //父亲  private List<Dom> children; // 孩子结点  private String innerHTML; // 起始标签和结束标签中间的内容  }

13.3、Document 对象中的方法介绍(重点)

document.getElementById(elementId)
通过标签的id 属性查找标签dom 对象,elementId 是标签的id 属性值

document.getElementsByName(elementName)
通过标签的name 属性查找标签dom 对象,elementName 标签的name 属性值

document.getElementsByTagName(tagname)
通过标签名查找标签dom 对象。tagname 是标签名

document.createElement( tagName)
方法,通过给定的标签名,创建一个标签对象。tagName 是要创建的标签名

注意:
document 对象的三个查询方法,如果有id属性,如果有id 属性,优先使用getElementById 方法来进行查询
如果没有id 属性,则优先使用getElementsByName 方法来进行查询
如果id 属性和name 属性都没有最后再按标签名查getElementsByTagName
以上三个方法,一定要在页面加载完成之后执行,才能查询到标签对象。

1. document.getElementById 方法代码

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  /*  * 需求:当用户点击了较验按钮,要获取输出框中的内容。然后验证其是否合法。* 验证的规则是:必须由字母,数字。下划线组成。并且长度是5 到12 位。  * */        function onclickFun() {  //1.当我们要操作一个标签的时候,一定要先获取这个标签对象。  var usernameObj = document.getElementById("username");  // [object HTMLInputElement]  它就是Dom对象  var userText = usernameObj.value;  // 如何验证字符串,符合某个规则,需要使用正则表达式技术  var patt = /^\w{5,12}$/;  var usernameSpanObj = document.getElementById("usernameSpan");  // innerHTML 表示起始标签和结束标签中的内容  // innerHTML 这个属性可读,可写  // usernameSpanObj.innerText = "hello";  /*            * test()方法用于测试某个字符串,是不是匹配我的规则,  * 匹配就返回true。不匹配就返回false.  * */            if (patt.test(userText)) {  // alert("用户名合法!")  // usernameSpanObj.innerHtml = "用户名合法!";  usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";  } else {  // alert("用户名不合法!")  // usernameSpanObj.innerHtml = "用户名不合法!";  usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";  }  }  </script>
</head>  <body>
用户名:<input type="text" id="username" value="xhg">
<span style="color: red" id="usernameSpan">用户名不合法</span>  <button onclick="onclickFun()">校验</button>
</body>
</html>

2. document.getElementsByName 方法代码

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  //全选  function checkAll() {  // 让所有复选框都选中  // document.getElementsByName();是根据指定的name 属性查询返回多个标签对象集合  // 这个集合的操作跟数组一样  // 集合中每个元素都是dom 对象  // 这个集合中的元素顺序是他们在html 页面中从上到下的顺序  var hobbies = document.getElementsByName("hobby");  // checked 表示复选框的选中状态。如果选中是true,不选中是false  // checked 这个属性可读,可写  for (var i = 0; i < hobbies.length; i++) {  hobbies[i].checked = true;  }  }  //全不选  function checkNo() {  var hobbies = document.getElementsByName("hobby");  // checked 表示复选框的选中状态。如果选中是true,不选中是false  // checked 这个属性可读,可写  for (var i = 0; i < hobbies.length; i++) {  hobbies[i].checked = false;  }  }  //反选  function checkReverse() {  var hobbies = document.getElementsByName("hobby");  for (var i = 0; i < hobbies.length; i++) {  hobbies[i].checked = !hobbies[i].checked;  // if (hobbies[i].length) {  //     hobbies[i].checked = false;                // } else {                //     hobbies[i].checked = true;                // }           }  }  </script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp" checked="checked">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>

3. document.getElementsByTagName 方法代码

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  //全选  function checkAll() {  // document.getElementsByTagName("input");// 是按照指定标签名来进行查询并返回集合// 这个集合的操作跟数组一样// 集合中都是dom 对象// 集合中元素顺序是他们在html 页面中从上到下的顺序。var inputs = document.getElementsByTagName("input")  for (var i = 0; i < inputs.length; i++) {  inputs[i].checked= true;  }  }  </script>
</head>
<body>
兴趣爱好:
<input type="checkbox" value="cpp" checked="checked">C++
<input type="checkbox" value="java">Java
<input type="checkbox" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
</body>
</html>

4. document.createElement 方法代码

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">  window.onload = function (){  //使用js代码来创建html标签,并显示在页面上  //标签的内容是:<div>哈哈												

JavaScript基础笔记总结相关推荐

  1. JavaScript基础笔记集合(转)

    JavaScript基础笔记集合 JavaScript基础笔记集合   js简介 js是脚本语言.浏览器是逐行的读取代码,而传统编程会在执行前进行编译   js存放的位置 html脚本必须放在< ...

  2. JavaScript基础笔记

    今日内容 1. JavaScript基础 JavaScript: * 概念: 一门客户端脚本语言* 运行在客户端浏览器中的.每一个浏览器都有JavaScript的解析引擎* 脚本语言:不需要编译,直接 ...

  3. JavaScript 基础笔记,不会翻一番,值得收藏

    文章目录 JavaScript 基础 1.`javascript` 简介 2.第一个`javascript`程序 3.`js`代码编写的位置 4.`js`基本语法 5.字面量和变量 6.标识符 7.数 ...

  4. 2020-web前端-JavaScript基础笔记

    ==================================================================================================== ...

  5. 【JavaScript基础笔记】模块化、立即执行函数应用、闭包应用

    模块化:为了提高JS代码的长期可读性,易维护性,将JS代码根据其对应的功能块区分成不同的JS文件,并将其包裹在立即执行函数内,从而使其中的变量设定为局部变量,不会造成不同模块的变量污染. 立即执行函数 ...

  6. Javascript 基础笔记

    #2014.2.12 function关键字: 在codecademy做Javascript,了解到对象可以有两种方式来定义,但是后来又出现了: function Cat(age, color) {t ...

  7. JavaScript基础笔记2

    6.数组 6.1 创建数组 6.1.1 数组的创建方式 1. 利用 new 创建数组 var 数组名 = new Array() : var arr = new Array(); // 创建一个新的空 ...

  8. 雀雀JavaScript基础Note2

    JavaScript基础Note2 2018年4月20日星期五 系统函数 parseInt 字符串转整形 parseFloat 字符串转浮点型 isNaN 检查是否非数字 示例: <script ...

  9. JavaScript学习笔记02【基础——对象(Function、Array、Date、Math)】

    w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...

最新文章

  1. Python案例:使用BeautifuSoup4的爬虫
  2. java if (name!=null name!=),命名不规范,lombok泪两行!
  3. VTK:绘制带有rgb的单元格颜色用法实战
  4. openwrt 运行程序时提示缺少libstdc++.so.6
  5. Docker swarm集群搭建教程
  6. SANGFOR SCSA——网络基础(下)
  7. LOLCC换肤盒子官网网站源码
  8. stm32flash取数据_STM32学习笔记:读写内部Flash(介绍+附代码)
  9. 【人工智能】归结演绎推理
  10. AIDL 方法参数的in out inout前缀作用
  11. Python爬虫分析,全国结婚率连续5年下降,这届年轻人,为什么不敢结婚?
  12. 当今计算机的排名,目前电脑处理器排行榜(2020处理器性能排名对比)
  13. 影视搜索播放PHP源码_可对接资源网
  14. HCIE Datacom考试-MAC 地址基础及漂移技术汇总!
  15. 用正则表达式制作单线程小说网站小说下载器
  16. 树莓派3B和3B+的串口使用(附图)
  17. python金融量化风险_利用 Python 进行量化投资分析 - 利率及风险资产的超额收益...
  18. 【openMV or openCV】
  19. 印象笔记、为知笔记、有道云笔记使用比较
  20. SCL 和 SDA 是 I2C 总线上的两个信号线。 c++ 模拟数据

热门文章

  1. 网络 计算机 用户名 密码忘了,电脑上的宽带链接忘记用户名只记得密码怎么办?...
  2. 数据结构(严蔚敏老师c语言第2版)
  3. 【设计模式】策略模式VS状态模式
  4. java reportserver_Java报表工具Finereport使用小心得
  5. xp如何添加桌面计算机回收站,xp桌面没有回收站,xp桌面回收站图标不见了怎么办...
  6. IDEA14--SVN安装的使用心得
  7. 绑定手机号 根据 互联网用户账号名称管理规定
  8. Spring与XFire
  9. SAP SD 分析信用控制管理
  10. 论文参考文献的引用,以及检查和查看