borders, shadows
rounded border
Property name: border-radius
Common values: number + px, percentage (starting from the upper left, clockwise)
perfect circle
The box must be square
border-radius：50%
capsule button
The box is rectangular
border-radius: half the height of the box
overflow
visible default value, the overflow part is visible
hidden The overflow part is hidden
scroll displays scroll bars regardless of whether it overflows or not
auto automatically displays or hides based on whether it overflows or not
The element itself is hidden
visibility: hidden (placeholder hidden)
display:none (hidden without occupying space)
QR code display and hiding
Add display:none; to the QR code;
Then add the mouse move-in state to the button
box a:hover img{
display:block;
}
The overall transparency of the element
Opacity will make the entire element transparent, including the content inside (text, sub-elements, etc.)
sprites
introduce:
Scenario: In the project, multiple small pictures are combined into one large picture, and this picture becomes a sprite.
Advantages: Reduce the number of server sends, reduce server pressure, and improve page loading speed
use:
Create a box and set the size of the box to be the same as the size of the thumbnail
Set the sprite as the background image of the box
Modify background image position
Use PxCook to measure the coordinates of the upper left corner of the small picture, and set the negative value to the background-position of the box: xy
The labels of sprite diagrams all use inline labels (span, b, i...)
Need to be converted into inline elements
Background image style
background-size: width and height; value:
Number+px: simple, convenient and commonly used
Percentage: Percentage of width and height relative to the current box itself
contain: Contain, scale the background image proportionally until it does not exceed the maximum size of the box
cover: Cover, scale the background image in equal proportions until it just fills the entire box without any blank space.
background：color image repeat position/size；
box shadow
Property name: box-shadow
Value:
parameter |
effect |
h-shadow |
Required, horizontal offset. Negative values allowed |
v-shadow |
Required, vertical offset. Negative values allowed |
blur |
optional, fuzziness |
spread |
optional, shadow enlargement |
color |
Optional, shadow color |
inset |
Optional, change shadow to inner shadow |
transition
Function: Let the style of elements slowly change. It is often used with hover to enhance the interactive experience of web pages.
Attribute name: transition
Common values:
parameter |
value |
Transition properties |
all: All properties that can be transitioned are transitioned |
Transition duration |
Number + is (seconds), the specific attribute name is such as: width: only width can be transitioned |
important point:
Transition requirements: only the default state and hover state are different
The transition attribute is added to the element itself that needs to be transitioned.
The transition attribute is set in different states with different effects.
Set the default state, and it will have an effect when the mouse is moved in or removed.
Set the hover state. There will be a transition effect when the mouse moves in, and there will be no transition effect when the mouse moves out.
Skeleton structure tag
Document type declaration, which tells the browser the HTML version of the web page
Web page language
<html lang="en">Identifies the language used by the web page
Function: Search engine classification + browser translation
Common languages: zh-CN Simplified Chinese/en English
Character Encoding
<meta charset="UTF-8">Identifies the character encoding used by the web page</meta>
UTF-8: Unicode
GB2312: 6000+ Chinese characters
GBK:: 20000+ Chinese characters
SEO three major tags
SEO (Search Engine Optimization): search engine optimization
Introduction to JavaScript
Development of language:
-Tape machine: machine language
- Assembly language: symbolic language
-Modern Languages: High Level Languages
origin:
JavaScript was born in 1995. Its emergence is mainly used to handle front-end validation in web pages.
Front-end verification: Check whether the content entered by the user complies with certain rules (length of user name, length of password, format of email address)
JScript introduced by Microsoft, has the same functionality as JavaScript
ECMAScript is a JavaScript standard, so it is generally considered to have the same meaning.
In fact JavaScript means something bigger.
A complete JavaScript implementation should consist of the following three parts:
ECMAScript
DOM (manipulating web pages through js)
BOM (operate the browser through js)
Features of JS
-interpreted language
-Syntax structure similar to C and Java
-Dynamic language
-Prototype-based object-oriented
HBuilder returns to the previous step Ctrl+Z
Undo Return Ctrl+Y
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- JS code needs to be written in the script tag-->
<script type="text/javascript">
//Control the browser to pop up a warning box
// alert("This is a warning box, please pay attention to Gu Wenjing");
// Let the computer output a content in the page (body)
// document.write("Watch me show off my magical powers");
// console.log() outputs a content to the console
// console.log("Guess where I came out?");
alert("This is a warning box, please pay attention to Gu Wenjing");
document.write("Watch me show off my magical powers");
console.log("Guess where I came out?");
// JS compilation order from top to bottom
</script>
</head>
<body>
</body>
</html>
Strictly case sensitive in JS
Every statement in JS ends with a semicolon (if you do not write a semicolon, the browser will automatically add it, but it will consume some system resources, and sometimes, the system will add the wrong semicolon)
JS will ignore multiple spaces and newlines
Literals and variables
Literals: They are all immutable values (literals can be used directly)
Variables: Variables can be used to store literals
Declare variables: Use the var keyword to declare a variable in JS
identifier
-In JS, anything that can be named by us can be called an identifier.
-For example: function names, variable names, and attribute names are all identifiers
-The naming rules are the same as C/java
When the JS underlying layer saves the identifier, the Unicode encoding is actually used.
So in theory, all content contained in utf-8 can be used as identifiers
Chinese can also be used as variable names
type of data
String string
Number value
Boolean Boolean value
Null null value
Undefined Undefined
Object object (reference data type)
String
-- Strings need to be enclosed in quotes in JS
-- Both single and double quotes can be used
var str = “Hello”；
str = "I said: \"The weather is really nice today! \"";
When expressing some special symbols, you can use \ to escape
\" |
" |
\' |
' |
\n |
Indicates line break |
\t |
Tabs |
\\ |
\ |
Number
Includes integers and floating point numbers
var a =123；
var b = “123”；
You can use an operator typeof to check the type of a variable
Syntax: typeof variable
When checking a string, string is returned
When checking a value, it returns number
console.log(typeof b);
Number.MAX_VALUE can be used in JS to represent the maximum value of a number
1.7976931348623157e+308
If the maximum value is exceeded, Infinity (literal, positive infinity) will be returned
NaN is a special number that means Not A Number
Checking for a NaN with typeof also returns number
Number.MIN_VALUE means the minimum value 5e-324 above 0
Boolean
true false
Null
Null check return value is object
undefined
When you declare a variable but do not assign a value to the variable, its value is undefined.
forced type conversion
Convert other data types to String
method one:
--Call the toString() method of the converted data type
--This method will not affect the original variable, it will return the conversion result
--But note: the two values null and undefined do not have toString, and an error will be reported if their methods are called.
a.toString();
Method 2:
--Call the String() function and pass the converted data as a parameter to the function a=String(a);
--For Number and Boolean, the toString() method is actually called; but for null and undefined, toString() will not be called, and it will still be the corresponding type.
将其它数据类型转换为Number
调用Number函数将a转换为Number类型
字符串-->数字
如果是纯数字的字符串，则直接将其转化为数字
如果字符串有非数字的话，则转化为NaN
如果字符串是一个空串或者是一个全是空格的字符串则转化成0
布尔-->数字
true 转成1
false 转成0
null-->数字 0
undefined->数字 NaN
如果对非String使用parseInt（）或parseFloat（）会先将器转化成String然后再操作
a="123.456.789px";
a=parseInt(a);
a=parseFloat(a);
其他进制的数字
在JS中，如果需要表示16进制的数字，则需要以0x开头
如果需要表示8进制的数字，则需要以0开头
如果需要表示2进制的数字，则需要以0b开头
有时浏览器无法判定进制，可以用a=parseInt(a,10)
a是要被转化的数，数字是要转换的进制
JAVA 与 JS
|
JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。 Java（由 Sun 发明）是更复杂的编程语言。 ECMA-262 是 JavaScript 标准的官方名称。 JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。 |
基础语法
非布尔值进行与或运算
---对于非布尔值进行与或运算时，会先将其转化为布尔值，然后再运算，并且返回原值
&&
如果第一个值为true，则必然返回第二个值。
如果第一个值为false，则必然返回第一个值。
||
如果第一个值是true，则直接返回第一个值。
如果第一个值是false，则直接返回第二个值。
赋值运算符
=、+=、-=、*+、/=、%=
关系运算符
如果关系成立则返回true，如果关系不成立则返回false
非数值会先转化为数值，再进行运算
任何值和NaN做任何比较都是false
如果符合两侧的值都是字符串，不会将其转化为数字进行比较。而会分别比较Unicode编码。比较字符编码时，是一位一位进行比较的。如果两位一样，则比较下一位，所以借用他来对英文进行排序。
Unicode编码表
在字符串中使用转义字符输入Unicode编码
\u（四位编码）
console.log("\u1C00");
在网页中使用Unicode编码
&#编码；这里的编码需要的是十进制
☠
相等运算符
用来比较两个值是否相等==
undefined衍生自null，所以两值判断是为true
NaN不和任何值相等，包括他本身。
可以通过isNaN（）函数来判断是不是NaN
===全等，不会自动做类型转换
条件运算符（三元运算符）
条件表达式？语句1：语句2；
如果条件表达式的求值结果是非bool类型，会先将其转化为bool值，true返回第二个，false返回第一个。
运算符的优先级
&&的优先级高
代码块
在JS中使用{ }来为语句进行分组
对象
对象只是带有属性和方法的特殊数据类型。
对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。
对象的分类
内建对象
由ES标准中定义的对象，在任何的ES中都可以实现
比如：Math String Number Boolean Function Object...
宿主对象
由JS的运行环境提供的对象，目前来讲主要由浏览器提供的对象。
比如BOM DOM
自定义对象
由开发人员自己创建的对象
对象的基本操作
创建对象
使用new关键字调用的函数，是构造函数constructor
构造函数是专门用来创建对象的函数
使用typeoof检查一个对象时，会返回object
var obj=new Object ( );
属性
在对象中保存的值称为属性
向对象添加属性
对象.属性名 = 属性值 ；
obj.name="孙悟空";
obj.gender="男"；
obj.age = 18 ;
读取对象中的属性
对象.属性名
如果读取对象中没有该对象，不会报错，而是会返回undefined
修改对象的属性
对象.属性名=新值；
删除对象的属性
delete 对象名.属性值；
对象的属性名不强制要求遵守标识符的规范
如果需要使用特殊的属性名，不能采用.的方式来操作
需要另一种方式： 对象 ["属性名"] = "属性值"
读取时也需要采用这种方式
使用[ ]这种形式去操作属性，更加的灵活
在[ ]中可以直接传递一个变量，这样变量值是多少都会读取那个属性
obj["123"]=789;
obj["nihao "]="你好";
var n= "123";
console.log(obj[n]);
属性值
JS对象的属性值，可以是任意的数据类型
in运算符
通过该运算符可以检查一个对象中是否含有指定的属性
如果有则返回true，没有则返回false
"属性名" in 对象
例：console.log("name".obj);
基本数据类型
字符串（String）
数字(Number)
布尔(Boolean)
空（Null）
未定义（Undefined）
Symbol
注：*Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。*
引用数据类型
对象(Object)
数组(Array)
函数(Function)
正则（RegExp）
日期（Date）
JS中的变量值都保存到栈中
基本数据类型的值直接在栈内存中存储；
值与值之间是独立存在的，修改一个变量不会影响其他的变量
对象是保存堆内存中的，每创建一个新的对象，就会在对内存中开辟一个新的空间。而变量保存的是变量的内存地址（对象的引用）。
当比较两个基本数据类型的值时，比较的是值的大小。
当比较两个引用数据类型时，比较的是对象的内存地址。
对象字面量
var obj={name:"猪八戒"，
age：28，
gender：男}；
属性名和属性值是一组一组的名值对结构，名和值之间使用 :连接，多个名值对之间使用，隔开如果一个属性之后没有其他的属性了，就不要写，
函数
函数也是一个对象
函数中可以封装一些功能（代码），在需要时可以执行这些功能。
创建一个函数对象
可以将要封装的代码一字符串的形式传递给构造函数
var fun = new Function（）；
函数对象（）；
调用函数时，按照顺序执行。
使用函数声明来创建一个函数
function 函数名（[形参1，形参2，...形参n]）{ }
如果return语句后不跟任何值就相当于返回一个undefined
如果不写return，则也返回undefined
实参可以是一个对象，也可以是一个函数
返回值可以是任意的数据类型
立即执行函数
（function (){
alert("我是一个匿名函数~~~");
})();
调用函数后立即被执行，往往只会执行一次。
方法
加. 是 调方法
不加.是 调函数
For/In 循环
JavaScript for/in 语句循环遍历对象的属性：
实例
var person={fname:"Bill", lname:"Gates", age:56};
for (x in person)
{ txt=txt + person[x];
console.log(txt)
}
作用域
作用域是可访问变量的集合（一个变量的作用范围）。
全局作用域
a.全局变量在页面打开时创建，页面关闭后销毁。
b.在 HTML 中, 全局变量是 window 对象，所以window 对 象可以调用函数内的局部变量。
c.直接编写在script标签中的JS代码，都在全局作用域。
d.在全局作用域中，
创建的变量都会作为window对象的属性保存
创建的函数都会作为window对象的方法保存
注意：所有数据变量都属于 window 对象(创建)。
变量的声明提前
使用var关键字声明的变量，会在所有的代码执行之前被声明（但不会被赋值），但是如果声明变量是不使用var关键字，则变量不会被声明提前。
函数的声明提前
使用函数声明形式创建的函数function 函数（）{ }
它会在所有代码执行之前就被创建
函数作用域
a.调用函数时，创建函数作用域，函数执行完毕后销毁
每调用一次就会创建一个新的函数作用域，他们之间相互独立
b.在函数作用域中可以访问到全局变量的作用域
在全局作用域中无法访问到函数作用域的变量
c.变量使用：就近原则。如果找不到，则会报错。
在函数作用域中也有 声明提前的特性
使用var关键字声明的变量，会在函数中所有的代码执行之前被声明。
你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数。局部变量，包括 window 对象可以覆盖全局变量和函数。
this关键字
解析器在调用函数时，每次都会向函数内部传递一个隐含的参数
这个隐藏的参数就是this（请忽略我）