1. JavaScript variables
A variable is a container for storing data, for example x=10, then the value stored in x is 10.
Syntax : var variable name = value.
1.1. Declaration of variables
Assign before declaration
var x; // 声明变量x
alert(x); // undefined 所有声明了但是没有赋值的变量，结果都为undefined
X = 10; // x赋值为10
Assignment at the time of declaration
var x = 'LiuQing';
Declare multiple variables at the same time. Each variable is separated by a comma. It is recommended to write on a new line. When the declaration is not complete, write a comma after it.
var x = 666,
y = false,
z = 'LiuQing';
2. JavaScript identifiers
An identifier is the name of a variable, function, attribute, or parameter of a function.
2.1. Naming rules for identifiers
- It can only consist of numbers, letters, underscores, and $.
- Cannot start with a number.
- Keywords and reserved words cannot be used.
- Semantic, that is, see the name and know the meaning.
- Small camel case naming, such as: userName, passWord.
2. JavaScript gets elements
2.1, JavaScript debugging commands
Commonly used debugging commands are alert() and console.log().
The alert command directly pops up information on the page, and only one data can be displayed at a time, and the next data cannot be displayed until you click OK.
The console.log command prints data on the controller console, and multiple data can be printed at a time without blocking.
var a = 10;
var b = 20;
// 1.一次只能打印一个信息
alert(a,b); // 10
alert(b); // 没有点击确定之前，这个不会显示
// 2.同时打印多个信息
console.log(a,b);
2.2. Operation element content
The element content refers to the content between the start tag and the end tag. A single tag has no content, but there is a special kind of tag, that is, a form tag. The content of the form tag is stored in the attribute value, so the content of the element can be manipulated There are two types of tags, closing tags and form tags.
2.2.1. Manipulate the content of the form element
The value attribute of the form element is used to manipulate the content of the form element.
Grammar :
- Get form element content: form element.value
- Set form element content: form element.value = value
example:
<input type="text" id="ipt">
<script>
// 1.获取标签
var ipt= document.getElementById("ipt");
// 2.获取input的value值
var val = ipt.value;
console.log(val);
// 2.设置input的内容
ipt.value = 54321;
</script>
The information printed for the first time is empty, indicating that the default value is empty
In the above code, the content of the form element is manipulated through the label .value, and the content of other form elements is also operated in the same way.
example:
<textarea cols="30" rows="10" id="text">FAFDA</textarea>
<select id="se">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script>
// 3.textarea操作内容
var text = document.getElementById("text");
text.value = "ujiuye";
console.log(text.value); // ujiuye
// 4.下拉列表操作内容
var se = document.getElementById("se");
se.value = "2";
console.log(se.value); // 2
</script>
2.3. Operate the closed tag content
If the content of the closed tag needs to be set or modified, use the innerHTML and innerText properties of the closed tag.
grammar:
- Get the content of the closed tag: tag.innerHTML, tag.innerText;
- Set the content of the closed tag: tag.innerHTML = 'content value',
- label.innerText = 'content value';
Features :
- It is used to manipulate the content of the closed tag, which will be overwritten, and the ones written later will overwrite the existing ones
- innerHTML can recognize tags, innerText cannot recognize tags
example:
<div id="mes">123</div>
var oP = document.getElementById("mes");
// 1.设置内容值
oP.innerHTML = '这是通过innerHTML设置的文本';
// 2.innerHTML会覆盖原本的内容，如果还想要之前的，之前+现在
oP.innerHTML = oP.innerHTML + '这是通过innerHTML设置的文本';
// 3.innerHTML可以识别标签
oP.innerHTML = "<span>我是一个span</span>";
// 4.innerText ：不能识别标签
oP.innerText = "<span>我是一个span</span>";
In the above code, the content part of the label can be manipulated through the innerHTML and innerText attributes. The difference is that innerHTML can obtain and identify the label, but innerText cannot.
2.4, JavaScript operation element attributes
HTML attributes provide various additional information for HTML elements, which always appear in the form of name-value pairs of "attribute name = attribute value", and attributes are always defined in the start tag of HTML elements.
grammar:
- Get the attribute value of the tag: tag. attribute name
- Set the attribute value of the label: label. attribute name = "attribute value"
Special:
When operating class attributes, you need to use className, label.className = "attribute value"
example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
</head>
<body>
<div id="box" title="LiuQing">张俊卿</div>
<script>
var oDiv = document.getElementById("box");
// 1.获取title属性值
var t = oDiv.title;
console.log(t);
// 2.设置title属性
oDiv.title = "张俊卿";
</script>
</body>
</html>
The attribute operations of all elements are basically label.attribute, but there is a special attribute that is class. class is a reserved word and cannot be used directly. The syntax for manipulating the class attribute of a label is: label.className.
example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
}
.active {
width: 200px;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<div class="box" id="box">LiuQing</div>
<script>
var oDiv = document.getElementById("box");
// 1.获取class
var className = oDiv.className;
console.log(className);
// 2.设置class
oDiv.onclick = function () {
oDiv.className = "active";
}
</script>
</body>
</html>
When the above code clicks on the box, the class name active will be added to the box, that is, the final style of the box becomes 200 in width and height, and the background is pink.
2.5. Dot operator and bracket operator
When manipulating the attributes of elements above, the dot operator is used. In fact, the bracket operator can also be used
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
}
.active {
width: 200px;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<div class="box" id="box" title="mySelfTitle">LiuQing</div>
<script>
var oDiv = document.getElementById("box");
// 1.获取title属性值
var t = oDiv["title"];
console.log(t);
// 2.设置title属性
oDiv["title"] = "LiuQing";
// 3.中括号操作符的正确使用场景
var tit = "title";
console.log(oDiv[tit]); // 当是变量时，就只能使用中括号操作符，不能使用点操作符
</script>
</body>
</html>
When it is a specific attribute name, use the dot operator. When it is a certain variable, use the bracket operator, put the variable inside the brackets
2.6, JavaScript operation element style
The element style is written in the style tag or style attribute, which is used to set the appearance of the element.
grammar:
- Get the element style attribute: element.style.style name
- Set the element style attribute: element.style.style name = "style value"
special:
in js, the font-size attribute in the form of a connector is not allowed, and it needs to be replaced by camelcase
标签.style.fontSize = "样式值"
example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div id="box">LiuQing</div>
<script>
var oDiv = document.getElementById("box");
// 1.设置oDiv宽度为200
oDiv.style.width = "200px";
</script>
</body>
</html>
example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div id="box">LiuQing</div>
<script>
var oDiv = document.getElementById("box");
// 1.操作属性oDiv.style.background = 'red';
oDiv.style.width = '200px';
oDiv.style.fontSize = '20px';
</script>
</body>
</html>
When using js to manipulate css attributes, such as adding width and height, when there are only single words, use the syntax definition directly: label.style.Attribute name = attribute value. When adding an attribute consisting of "two words" like font-size, you need to remove the "-", and the first letter of the second word is capitalized, which conforms to the camel case naming method, that is: tag.style.fontSize='30px
'.
3. JavaScript mouse events
onclick: click event
ondblclick: double-click event
onmouseover: mouse moves into element
onmouseout: mouse leaves element
onmouseenter: mouse moves into element
onmouseleave: mouse leaves element
onmousemove: mouse moves in element onmousedown: mouse
down
onmouseup: mouse up
oncontextmenu: mouse right click menu event .
example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
</head>
<body>
<div id="box">我是box元素</div>
<script>
// 1.onclick ：点击事件
document.getElementById("box").onclick = function () {
console.log("点击了");
}
// 2.onmouseover ：鼠标移入元素
document.getElementById("box").onmouseover = function () {
console.log("鼠标移入元素");
}
</script>
</body>
</html>
