The birth of the Javascript language is mainly to complete the data verification of the page. So it runs on the client side and needs to run a browser to parse and execute JavaScript code.

JS is a product of Netscape Netscape, which was first named LiveScript; in order to attract more java programmers. Renamed to JavaScript.

JS is weakly typed, Java is strongly typed.

Features:

1. Interactivity (what it can do is the dynamic interaction of information)

2. Security (does not allow direct access to local hard drives)

3. Cross-platform (as long as a browser that can interpret JS can execute it, it has nothing to do with the platform)

2. The combination of JavaScript and html code

2.1. The first way

Just use the script tag to write JavaScript code in the head tag or in the body tag

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// alert 是 JavaScript 语言提供的一个警告框函数。
// 它可以接收任意类型的参数，这个参数就是警告框的提示信息
alert("hello javaScript!");
</script>
</head>
<body>
</body>
</html>

2.2. The second way

Include standalone JavaScript using the script tag

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--现在需要使用 script 引入外部的 js 文件来执行
src 属性专门用来引入 js 文件路径（可以是相对路径，也可以是绝对路径）
script 标签可以用来定义 js 代码，也可以用来引入 js 文件
但是，两个功能二选一使用。不能同时使用两个功能
-->
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript">
alert("国哥现在可以帅了");
</script>
</head>
<body>
</body>
</html>

3. Variables

What are variables? A variable is a name for a memory that can hold some value.

JavaScript variable type:
Numerical type: number
String type: string
Object type: object
Boolean type: boolean
Function type: function

Special values in JavaScript:
undefined Undefined, when all js variables are not assigned initial values, the default value is undefined.
null The full name of the empty value
NaN is: Not a Number. non-numeric. non-numeric value.

The definition variable format in JS:
var variable name;
var variable name = value;

<!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>

3.1. Relational (comparison) operations

Equals: == equals is simply a literal comparison

Equal to: === In addition to comparing literal values, it also compares the data types of two variables

<!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>

3.2. Logical operation

And operation: &&
Or operation: ||
Negative operation: !

In the JavaScript language, all variables can be used as a boolean variable.
0, null, undefined, "" (empty string) are considered to be false;

/*
&& And operation.
There are two cases:
the first one: when the expressions are all true. Returns the value of the last expression.
The second type: when one of the expressions is false. returns the value of the first expression that is false

|| Or operation
The first case: when all the expressions are false, return the value of the last expression
The second case: as long as one of the expressions is true. will return the value of the first expression that is true

And && and operation and || or operation are short-circuited.
Short circuit means that when the && or || operation has a result. The following expression will not be executed
*/

var a = "abc";
var b = true;
var d = false;
var c = null

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/* 在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。
0 、null、 undefined、””(空串) 都认为是 false；*/
// var a = 0;
// if (a) {
// alert("零为真");
// } else {
// alert("零为假");
// }
// 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( d || c ); // null
// alert( c|| d ); //false
// alert( a || c ); //abc
// alert( b || c ); //true
</script>
</head>
<body>
</body>
</html>

4. Array (***** key)

4.1. Array definition method

Definition of array in JS:
format:
var array name = []; // empty array
var array name = [1, 'abc', true]; // define array and assign elements at the same time

<!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 ); // 0
// 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>

5. Function (***** key)

5.1. Two ways of defining functions

The first one, you can use function

The format used is as follows:
function function name (formal parameter list) { function body } In the JavaScript language, how to define a function with a return value? Just use the return statement directly in the function body to return the value! Sample code:


<!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(num1,num2) {
var result = num1 + num2;
return result;
}
alert( sum(100,50) );
</script>
</head>
<body>
</body>
</html>

The format of the second definition of the function is as follows:
the usage format is as follows:
var function name = function (parameter list) { function body}
sample code:

<!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(1,2);
var fun3 = function (num1,num2) {
return num1 + num2;
}
alert( fun3(100,200) );
</script>
</head>
<body>
</body>
</html>

Note: Functions allow overloading in Java. But the overloading of functions in JS will directly overwrite the last definition

5.2. The arguments of the function are invisible parameters (only in the function function)

It is a variable that does not need to be defined in the function function, but can be directly used to obtain all parameters. We call it an invisible parameter.
Invisible parameters are especially like java-based variable-length parameters.
public void fun( Object ... args );
the variable length parameter other is an array.

Then the invisible parameters in js are the same as the variable length parameters in java. Operates like an array.

Sample code:

<!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,"ad",true);
// 需求：要求 编写 一个函数。用于计算所有参数相加的和并返回
function sum(num1,num2) {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
if (typeof(arguments[i]) == "number") {
result += arguments[i];
}
}
return result;
}
alert( sum(1,2,3,4,"abc",5,6,7,8,9) );
</script>
</head>
<body>
</body>
</html>

6. Custom objects in JS (extended content)

A custom object of the form Object

Object definition:
var variable name = new Object(); // object instance (empty object)
variable name. attribute name = value; // define a property
variable name. function name = function(){} // define a function

Object access:
variable name. attribute/function name();

Sample code:

<!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();
obj.name = "华仔";
obj.age = 18;
obj.fun = function () {
alert("姓名：" + this.name + " , 年龄：" + this.age);
}
// 对象的访问：
// 变量名.属性 / 函数名();
// alert( obj.age );
obj.fun();
</script>
</head>
<body>
</body>
</html>

Custom objects in {} curly braces

Object definition: var variable name = { // empty object

Attribute name: value, // define an attribute

Attribute name: value, // define an attribute

Function name: function(){} // define a function

};

Object access: variable name.attribute/function name();

Sample code:

<!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>

7. Events in js

What is an event? Events are responses to computer input devices interacting with the page. We call them events.

Commonly used events:
onload Loading completion event: After the page is loaded, it is often used to initialize the page js code.
onclick Click event: It is often used to respond to button clicks.
onblur focus loss event: It is commonly used to verify whether the input content is legal after the input box loses focus.
onchange Content change event: It is often used to operate after the content of the drop-down list and input box changes.
onsubmit Form submission event: It is often used to verify whether all form items are legal before the form is submitted.

Event registration is divided into static registration and dynamic registration:
what is event registration (binding)?
In fact, it tells the browser what operation codes to execute after the event is responded to, which is called event registration or event binding.

Static registration event: through the event attribute of the html tag, it is directly assigned to the code after the event response. This method is called static registration.

Dynamic registration event: refers to get the dom object of the label through the js code first, and then assign the code after the event response through the dom object. event name = function(){}, which is called dynamic registration.
Basic steps of dynamic registration:
1. Obtain label object
2. Label object.Event name = fucntion(){}

onload loading complete event

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

onclick click event

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
alert("静态注册 onclick 事件");
}
// 动态注册 onclick 事件
window.onload = function () {
// 1 获取标签对象
/*
* document 是 JavaScript 语言提供的一个对象（文档）<br/>
* 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="onclickFun();">按钮 1</button>
<button id="btn01">按钮 2</button>
</body>
</html>

onblur lose focus event

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 静态注册失去焦点事件
function onblurFun() {
// console 是控制台对象，是由 JavaScript 语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用
// log() 是打印的方法
console.log("静态注册失去焦点事件");
}
// 动态注册 onblur 事件
window.onload = function () {
//1 获取标签对象
var passwordObj = document.getElementById("password");
// alert(passwordObj);
//2 通过标签对象.事件名 = function(){};
passwordObj.onblur = function () {
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input id="password" type="text" ><br/>
</body>
</html>

onchange content change event

<!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("sel01");
// alert( selObj );
//2 通过标签对象.事件名 = function(){}
selObj.onchange = function () {
alert("男神已经改变了");
}
}
</script>
</head>
<body>
请选择你心中的女神：
<!--静态注册 onchange 事件-->
<select onchange="onchangeFun();">
<option>--女神--</option>
<option>芳芳</option>
<option>佳佳</option>
<option>娘娘</option>
</select>
请选择你心中的男神：
<select id="sel01">
<option>--男神--</option>
<option>国哥</option>
<option>华仔</option>
<option>富城</option>
</select>
</body>
</html>

onsubmit form submission event

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" >
// 静态注册表单提交事务
function onsubmitFun(){
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("静态注册表单提交事件----发现不合法");
return flase;
}
window.onload = function () {
//1 获取标签对象
var formObj = document.getElementById("form01");
//2 通过标签对象.事件名 = function(){}
formObj.onsubmit = function () {
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("动态注册表单提交事件----发现不合法");
return false;
}
}
</script>
</head>
<body>
<!--return false 可以阻止 表单提交 -->
<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>

8. DOM model

The full name of DOM is Document Object Model Document Object Model

In the vernacular, it is to convert the tags, attributes, and text in the document into objects for management.

So how do they convert labels, attributes, and text into objects for management. That's the point we're going to learn right away.

8.1, Document object (***** key)

Document object understanding:

The first point: Document It manages all HTML document content.

The second point: document It is a tree-structured document. There is a hierarchical relationship.

Third point: it lets us objectify all tags

The fourth point: we can access all label objects through document

What is objectification? ?
Our basic class has already learned object-oriented. What is objectification?
Example:
There is a person with age: 18 years old, gender: female, name: Zhang XX
What should we do if we want to objectify this person's information!

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; // 起始标签和结束标签中间的内容
}

8.2. Introduction to the methods in the Document object (***** key)

document.getElementById(elementId)
finds the tag dom object through the tag's id attribute, and elementId is the tag's id attribute value

document.getElementsByName(elementName)
finds the tag dom object through the name attribute of the tag, and the name attribute value of the elementName tag

document.getElementsByTagName(tagname)
Find the tag dom object by tag name. tagname is the tag name

The document.createElement(tagName)
method creates a tag object with the given tag name. tagName is the tag name to create

Note:
For the three query methods of the document object, if there is an id attribute, the getElementById method is preferred for querying.
If there is no id attribute, the getElementsByName method is preferred for querying.
If neither the id attribute nor the name attribute exists, then getElementsByTagName is checked by tag name
The above three methods must be executed after the page is loaded to query the label object.

Sample code of getElementById method:

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

getElementsByName method sample code

<!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].checked) {
// 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>

getElementsByTagName method sample code

<!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>

CreateElement method sample code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
// 现在需要我们使用 js 代码来创建 html 标签，并显示在页面上
// 标签的内容就是：<div>国哥，我爱你</div>
var divObj = document.createElement("div"); // 在内存中 <div></div>
var textNodeObj = document.createTextNode("国哥，我爱你"); // 有一个文本节点对象 #国哥，我
爱你
divObj.appendChild(textNodeObj); // <div>国哥，我爱你</div>
// divObj.innerHTML = "国哥，我爱你"; // <div>国哥，我爱你</div>,但，还只是在内存中
// 添加子元素
document.body.appendChild(divObj);
}
</script>
</head>
<body>
</body>
</html>

8.3 Common attributes and methods of nodes

A node is a tag object
Method: Call the getElementsByTagName() method
through a specific element node to obtain the specified tag name of the current node. The appendChild( oChildNode ) method can add a child node. oChildNode is the child node to be added. Attributes: childNodes attribute, Get the firstChild attribute of all child nodes of the current node , get the lastChild attribute of the first child node of the current node , get the parentNode attribute of the last child node of the current node , get the nextSibling attribute of the parent node of the current node , and get the previousSibling of the next node of the current node Attribute, to obtain the className of the previous node of the current node. Used to obtain or set the class attribute value of the label innerHTML attribute, which means to get/set the content in the start tag and end tag. innerText attribute, which means to get/set the start tag and end tag the text of

Exercise: 05. DOM query exercise

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom 查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function(){
//1.查找#bj 节点
document.getElementById("btn01").onclick = function () {
var bjObj = document.getElementById("bj");
alert(bjObj.innerHTML);
}
//2.查找所有 li 节点
var btn02Ele = document.getElementById("btn02");
btn02Ele.onclick = function(){
var lis = document.getElementsByTagName("li");
alert(lis.length)
};
//3.查找 name=gender 的所有节点
var btn03Ele = document.getElementById("btn03");
btn03Ele.onclick = function(){
var genders = document.getElementsByName("gender");
alert(genders.length)
};
//4.查找#city 下所有 li 节点
var btn04Ele = document.getElementById("btn04");
btn04Ele.onclick = function(){
//1 获取 id 为 city 的节点
//2 通过 city 节点.getElementsByTagName 按标签名查子节点
var lis = document.getElementById("city").getElementsByTagName("li");
alert(lis.length)
};
//5.返回#city 的所有子节点
var btn05Ele = document.getElementById("btn05");
btn05Ele.onclick = function(){
//1 获取 id 为 city 的节点
//2 通过 city 获取所有子节点
alert(document.getElementById("city").childNodes.length);
};
//6.返回#phone 的第一个子节点
var btn06Ele = document.getElementById("btn06");
btn06Ele.onclick = function(){
// 查询 id 为 phone 的节点
alert( document.getElementById("phone").firstChild.innerHTML );
};
//7.返回#bj 的父节点
var btn07Ele = document.getElementById("btn07");
btn07Ele.onclick = function(){
//1 查询 id 为 bj 的节点
var bjObj = document.getElementById("bj");
//2 bj 节点获取父节点
alert( bjObj.parentNode.innerHTML );
};
//8.返回#android 的前一个兄弟节点
var btn08Ele = document.getElementById("btn08");
btn08Ele.onclick = function(){
// 获取 id 为 android 的节点
// 通过 android 节点获取前面兄弟节点
alert( document.getElementById("android").previousSibling.innerHTML );
};
//9.读取#username 的 value 属性值
var btn09Ele = document.getElementById("btn09");
btn09Ele.onclick = function(){
alert(document.getElementById("username").value);
};
//10.设置#username 的 value 属性值
var btn10Ele = document.getElementById("btn10");
btn10Ele.onclick = function(){
document.getElementById("username").value = "国哥你真牛逼";
};
//11.返回#bj 的文本值
var btn11Ele = document.getElementById("btn11");
btn11Ele.onclick = function(){
alert(document.getElementById("city").innerHTML);
// alert(document.getElementById("city").innerText);
};
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj 节点</button></div>
<div><button id="btn02">查找所有 li 节点</button></div>
<div><button id="btn03">查找 name=gender 的所有节点</button></div>
<div><button id="btn04">查找#city 下所有 li 节点</button></div>
<div><button id="btn05">返回#city 的所有子节点</button></div>
<div><button id="btn06">返回#phone 的第一个子节点</button></div>
<div><button id="btn07">返回#bj 的父节点</button></div>
<div><button id="btn08">返回#android 的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username 的 value 属性值</button></div>
<div><button id="btn10">设置#username 的 value 属性值</button></div>
<div><button id="btn11">返回#bj 的文本值</button></div>
</div>
</body>
</html>

JavaWeb—JavaScript

1. Introduction to JavaScript

2. The combination of JavaScript and html code

2.1. The first way

2.2. The second way

3. Variables

3.1. Relational (comparison) operations

3.2. Logical operation

4. Array (***** key)

4.1. Array definition method

5. Function (***** key)

5.1. Two ways of defining functions

5.2. The arguments of the function are invisible parameters (only in the function function)

6. Custom objects in JS (extended content)

7. Events in js

8. DOM model

8.1, Document object (***** key)

8.2. Introduction to the methods in the Document object (***** key)

8.3 Common attributes and methods of nodes

Guess you like