html

1.a Label

<!--use name as a marker-->
<a name="top">top</a>
<!--target:Indicates where the window is opened-->
<p><a href="http://www.baidu.com" target="_top">_top</a></p><br>
<a href="http://www.baidu.com" target="_blank">Open a new individual page</a><br>
<a href="http://www.baidu.com" target="_parent">_parent</a><br>
<a href="http://www.baidu.com" target="_self">_self</a><br>
<!--
Anchor link:
    1.requires an anchor tag
    2.jump to marker
    back to top tab-->
<a href="#top">back to top</a><br>

<!--functional connection
        Email link: mailto
        qq Link: web search qq promote

-->
<a href="mailto:2750317105@qq.com">Click to contact me, email</a><br>
<a target="_blank" href="http://wpa.qq. com/msgrd? v=3&uin=2750317105&site=qq&menu=yes"><img border="0" src=" http://wpa.qq.com/pa?p=2:2750317105:52 "Alt=" QQ conversation "title="qq conversation "/ ></a>

<b>bold</b>
<i>italic</i>
<u>underscore</u>


<br>

<!--paragraph tags-->
<p>Li Jinbiao</p>

<p>Huang Xinyu</p>

<!--horizontal line-->
<hr>

<!--newline-->
<br>
<p>Jin Xinyu</p>

<!--font style-->
<h1>font style</h1>
Bold:<strong>Li Jinbiao</strong><br>
Italic:<em>Li Jinbiao</em>

<br>

<!--space-->
kong &nbsp&nbsp&nbsp&nbsp&nbsp indivual <br>
&ccupssm;

2. List

<!--ordered list-->
<ol>
    <li>Li Jinbiao</li>
    <li>Huang Xinyu</li>
    <li>Jin Xinyu</li>
    <li>handsome</li>
</ol>
<hr>
<!--unordered list-->
    <!--Application: navigation bar, sidebar-->
<ul>
    <li>Li Jinbiao</li>
    <li>Huang Xinyu</li>
    <li>Jin Xinyu</li>
    <li>handsome</li>
</ul>
<!--custom list-->
    <!--dl: Label-->
    <!--dt: list name-->
    <!--dd: List content-->
    <!--Bottom of company website-->
<dl>
    <dt>list name</dt>
    <dd>Li Jinbiao</dd>
    <dd>Huang Xinyu</dd>
    <dd>Jin Xinyu</dd>
</dl>

3. Forms

<!--sheet
    OK: tr
    List: td
	border: outer border width
    -->
<table border="1px">
    <tr>
<!--        colspan across columns-->
        <td colspan="4">1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
<!--        rowspan span-->
        <td rowspan="2">5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
</table>
-------------------------------------------
cellpadding: Distance between text and inner border
<table border="1px" cellpadding="10">
    <thead>
        <th>Name</th>
        <th>age</th>
    </thead>
    <tbody>
        <tr>
            <td>Li Jinbiao</td>
            <td>18</td>
        </tr>
        <tr>
            <td>Huang Xinyu</td>
            <td>18</td>
        </tr>
    </tbody>
</table>

4. Media

<!--audio video-->
<!--
    controls control bar
    autoplay Autoplay-->
<!--<video src="../resources/video/4004-3post ask.mp4" controls autoplay></video>-->
<audio src="../resources/music/Li Jiaxin%20-%20 you know (full version).flac" controls autoplay></audio>

5. Page structure analysis

[External link image transfer failed, the source site may have anti-leech mechanism, it is recommended to save the image and upload it directly (img-9qvVEgpd-1651757973417)(C:\Users751083927\AppData\Roaming\Typora\typora-user-images\ image-20220427125832687.png)]

<header><h2>web page header</h2></header>

<footer>Mark the content of the foot area</footer>

<section>web Separate area in web page</section>

<nav>Navigational Auxiliary Content</nav>

6.iframe inline frame

<!-- iframe:iframe
    src:Referring website address
    w-h:width-high
    name:frame identifier

    -->
<iframe src="http://www.baidu.com" frameborder="0"
        name="mainframe" width="1000px" height="500px"></iframe>

7. Forms

[External link image transfer failed, the source site may have anti-leech mechanism, it is recommended to save the image and upload it directly (img-lWAZPbOY-1651757973418)(C:\Users751083927\AppData\Roaming\Typora\typora-user-images\ image-20220427131745952.png)]

<!--
    Form:
    method:
        get How to submit: we can url See our submissions in, unsafe, efficient
        post: Safer for transferring large files
    name:the name of the form element
    maxlength: How many characters can be written at most
    size: text box length
    value: default initial value
	disabled: disabled, for all input，Can't submit to background
	readonly|: read only,Only for the input box, can be submitted to the background
	hidden: hide
	placeholder:Tips
	required: non-empty judgment
    -->
<!--action The location where the form is submitted, which can be a website or a request processing address-->



<!--submit data form form
	type Attribute: Controls the style of the input box
	name Attributes: grouped, carrying data key   key: value
	value:The value of the select box when submitting data, the default value of the input box

form The form triggers the operation of submitting data, which must be written in form Inside the form tag, written outside is a normal button
 submit: input submit
     button
-->
<form action="http://localhost:9696">
    username:<input type="text" name="username">
    dense&nbsp code:<input type="password" name="password">
    <input type="radio" name="sex" value="boy">male
    <input type="radio" name="sex" value="girl">Female
    <input type="checkbox" name="hobby" value="sleep">sleep
    <input type="checkbox" name="hobby" value="good">great
    <input type="checkbox" name="hobby" value="love">Love you
    <input type="submit">
</form>



<form action="my first web page.html" method="post">
    
<!--Text input box:<input type="text">-->
    <p>name:<input type="text" name="username" placeholder="please enter"></p>
    <p>password:<input type="password" name="pwd" required></p>

<!--Single box:radio
        value: radio button value
        name:grouping
        checked:selected by default
            -->
    <p>gender:
        <input type="radio" value="male" name="sex" checked>male
        <input type="radio" value="Female" name="sex">Female
    </p>
<!--Checkbox:<input type="checkbox">
        value: value
        name:grouping
-->
    <p>Hobby
        <input type="checkbox" value="sleep" name="hobby">sleep
        <input type="checkbox" value="eat" name="hobby" checked>eat
        <input type="checkbox" value="game" name="hobby">game
        <input type="checkbox" value="chat" name="hobby">chat
    </p>

<!--button-->
    <p>button
        <input type="button" name="btn1" value="click to lengthen">
        <input type="image" src="../resources/images/A-female white.png">
    </p>


<!--drop down box-->
    <p>drop down box
        <select name="list name" id="">
            <option value="china">China</option>
            <option value="Netherlands">Netherlands</option>
            <option value="U.S.">U.S.</option>
            <option value="North Korea">North Korea</option>
        </select>
    </p>

<!--text field-->
    <p>Feedback:
        <textarea name="textarea" cols="30" rows="10">text content</textarea>
    </p>

<!--file field  <input type="file" name="files">
        upload files-->
    <p>
        <input type="file" name="files">
        <input type="button" value="upload" name="upload">
    </p>

<!--E-mail verification-->
    <p>Mail:
        <input type="email" name="email">
    </p>
    
<!--url-->
    <p>url
        <input type="url" name="url">
    </p>
    
<!--number-->
    <p>number
        <input type="number" max="100" min="10" step="1">
    </p>

<!--slider-->
    <p>slider
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>
    
<!--Enhanced mouse usability
             <label for="mark">you click me</label>
             auto lock id="mark" Elements-->
    <p>
        <label for="mark">you click me</label>
        <input type="text" id="mark">
    </p>

<!--search bar-->
    <p>search
        <input type="search" name="search">
    </p>
    
<!--reset: reset-->
    <input type="submit" value="submit">
    <input type="reset" value="reset">

8. Special symbols

space:&nbsp
 Greater than sign:&lt
 Less than sign:&gt
&symbol:&amp

css3

introduce

1. Selector

/*Tag selector*/
h1{
    color: red;
}
/*Class selectors are reusable*/
.h2_x{
    color: green;
}
/*id Selector   Globally unique priority: id > class > label*/
#h3_id{
    color: #f18dfa;
}

2. Hierarchy selector

1. descendant selector

2. child selector

3. adjacent sibling selector

4. Universal selector

/*Class selectors are reusable*/
.h2_x{
    color: green;
}
/*id Selector   Globally unique priority: id > class > label*/
#h3_id{
    color: #f18dfa;
}
/*The p in the descendant selector body always uses this attribute*/
body p{
    background-color: #f18dfa;
}
/*The next generation of the child selector body is the p tag, which is used throughout*/
body>p{
    background-color: green;
}
/*Adjacent sibling selector, sibling, select one next p use this attribute*/
.active + p{
    background-color: cyan;
}
/*Generic selector All p under siblings use this attribute*/
.active ~ p{
    background-color: #0526ff;
}

3. Attribute selector

/*element with id attribute  
    a[id]{} or a[attribute name=attribute value]{}
    *= :is the containing element a[attribute name*=attribute value]{}
    Select the element in href that starts with http: a[href^=http]{}
    Select elements in href that end with com: a[href$=com]{}
*/
a[class *= links]{
    background: chartreuse;
}

4. Beautify web elements

/*restore original state*/
body,a,li{
    margin: 0;
    padding: 0;
    text-decoration: none;
}

4.1. Fonts

/*
font-size:font size
font-family:font
font-weight:font weight
color:font color
*/

4.2 Text

opacity:transparency
text-align:Alignment
text-indent:First line indent
line-height:row height,and the height of the block
text-decoration:underline  :underscore

4.3 Hyperlink pseudo-class + shadow

a{
    text-decoration: none; /*remove underline*/
    color: chartreuse;
}
a:hover{ /*mouse activation*/
    color: green;
}
a:active{ /*mouse down state*/
    color: cyan;
}
#price{/*text-shadow: shadow color horizontal offset vertical offset shadow radius*/
    text-shadow: #f50000 10px 10px 10px;
}

4.4 List

.nav{
    background: #97979a;
    width: 300px;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
/*ul li*/
/*
list-style:none :remove the origin
          circle: hollow circle
          decimal: number
          square: square
*/
/*ul{*/
/*    background: #97979a;*/
/*}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: green;
}

4.5 Background

div{
    width: 90%;
    height: 700px;
    border: 2px solid red;
    background-image: url("../resources/images/A-female white.png");/*The default is fully tiled*/
    background-size: 100%;
}
.nav1{
    /*background: Color Picture Picture Position Tile Method*/
    background: red url("../resources/images/A-female white.png") 270px 100px no-repeat;
}

4.6 Box Model

margin: outer border

padding: inner border

border: border

margin: 0 auto;  Centered
margin: up down left right

4.7 display and float

/*
block:block element
inline:inline element
inline-block: is a block element, but can be inline, on a single line
float: float left and right
*/
div{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    display: inline-block;
    float: left;
}
span{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    display: inline-block;
}

4.8 Problems found when the parent border collapses

• Increase parent element height

• Add a new div tag to clear the float

• overflow: hidden : increase in parent element

• Parent element adds subclass after

  • #father: after{
    	content:"";
    	display:block;
    	clear:both;
    }
    

clear right:Floating elements are not allowed on the right
clear left: Floating elements are not allowed on the left
clear both: floating elements are not allowed

4.9 Positioning

Relative positioning: offset from the original position

/*relative positioning*/
position: relative;
left: 100px;
right:100px;
......

absolute positioning

/*    absolute positioning*/
    position: absolute;

Fixed positioning

/*    Fixed positioning*/
    position: fixed;

#content{
    width: 200px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;  # prevent overflow
    font-size: 12px;
    line-height: 25px;
    border: 2px #000 solid;
}
img{
    width: 200px;
    height: 200px;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*Relative positioning of parent element*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 200px;
    top: 180px;
}
/*.tipText{*/
/*    color: white;*/
/*}*/
.tipBg{
    background: black;
    /*transparency*/
    opacity: 0.5;
}

4.10 z-index

control level

body{
    margin: 0;
    padding: 0;
}
.shadow{
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);  # color+transparency
    z-index: 88;
}
.mode{
    position: fixed;

    height: 200px;
    width: 200px;
    background-color: aliceblue;
    text-align: center;
    left: 50%;
    margin-left: -100px;
    /*The higher the value, the higher the level*/
    z-index: 100;
}

[External link image transfer failed, the source site may have anti-leech mechanism, it is recommended to save the image and upload it directly (img-rHdQMKd2-1651757973419)(C:\Users751083927\AppData\Roaming\Typora\typora-user-images\ image-20220502202749966.png)]

4.11 Animation

Web search keywords:

• html5 xxx
• Source code house, etc.

js

is one of the most popular scripting languages ​​in the world

Must be proficient in js

1. Quick Start

1.1 Introducing javascript

internal:

<script>
  alert("hello world");
</script>

external:

<script src="js/ljb.js"></script>

1.2 Getting Started with Basic Grammar

[External link image transfer failed, the source site may have anti-leech mechanism, it is recommended to save the image and upload it directly (img-vWmClDPB-1651757973420)(C:\Users751083927\AppData\Roaming\Typora\typora-user-images\ image-20220430161657245.png)]

// 1. Define variable variable type variable name = variable value
var num = 1;
// 2. Condition control
if (2>1 && 2>0){
    alert("true");
}else{
    alert("false");
}
// console.log(num) prints variables in the browser console

1.3 Data Types

Numerical, text, graphics, audio, video. . .

number

js does not distinguish between decimals and integers, Number

123 //integer
123.3 //floating point number
1.123e3 //Scientific notation
-99 //plural
NaN //not a number
Infinity  //means infinite

string

'abc' "abc"

Boolean value

true false

comparison operation

=== is absolutely equal (the same type, the same value, the result is true) (using ===, not using ==)

Notice:

• NaN === NaN This is not the same as all numbers, including itself
• Only by isNaN (NaN) to determine whether the number is NaN

array

var arr=[1,23,3,4,'hello'];

Taking the subscript of the array out of bounds will not report an error, but will be undefined

object

var person{
    name:'ljb',
    age:18
}

//go object value
person.name;

1.4 Strict Check Mode

<script>
  'use strict';  Strict inspection mode, prevention js The randomness of the cause some problems, put in the first line
  let i = 0;  Use local variables as much as possible let
</script>

2. Data Type

2.1 Strings

1. For normal strings, we use single or double quotes to wrap
2. Note the escape character \
3. Writing multi-line strings

var msg = 
    `
    Li Jinbiao
    Huang Xinyu
    Jin Xinyu
    ` //Multi-line characters, above the tab key

1. template string

//template string
let name = 'Li Jinbiao';
let age = 18;
let mg = `name is: ${name},age is: ${age}`
alert(mg)

1. mutability of strings >> immutability
2. case conversion

//Note that this is a method, not a property
student.toUpperCase()
student.toLowerCase()

1. student.indexOf('f') >>return character subscript
2. substring

student.substring(1)  //Truncate from the first string to the last
student.substring(1,3)  //Intercept [1,3)

2.2 Arrays

Array can contain any data type

var arr = [1,2,3,4];

1. length

arr.length

Note: Add assignment to arr.length, the size of the array will change, and if the assignment is too small, the element will be lost

1. indexOf(), index by element subscript

indexOf(2)  //From the beginning
2

The "1" of the string and the number 1 are different

1. slice() intercepts part of Array and returns a new array, similar to substring

2. push(), pop() tail

push: push to the end
pop: Pop the element at the end

1. unshift(), shift() head

unshift(): pressed into the head
shift(): Element that pops up the header

1. sort sort()

arr.sout()

1. Element flip reverse()

arr.reverse()

1. concat()

splicing
arr1 = arr.concat([7,8])  //Returns a new array with the original array unchanged
[1,2,3,4,7,8]

1. connector join

arr.join('-')
1-2-3-4

1. Multidimensional Arrays

and java similar

Array: Store data (how to store, how to fetch, and methods can be implemented by yourself!)

2.3 Objects

several key-value pairs

var object name={
    attribute name: attribute value,
    attribute name: attribute value,
    attribute name: attribute value
}
//Define a person object with three properties
var person={
    name: 'Li Jinbiao',
    age: 18,
    email: '2777500@qq.com'
}

Objects in js are marked with curly brackets, and attributes are described in key-value pairs, separated by ',', and the last one is not added with ','

1. Object assignment

person.name='Li Jinbiao'

2. Using a non-existent object property will not report undefined

3. Dynamically delete attributes, delete object attributes through delete

delete person.name
true
person

4. Dynamically add, directly add a value to the new attribute

person.name = 'Li Jinbiao'

5. Determine whether the attribute value is in this object xxx in xxx

'age' in person
true
//inherit
'toSring' in person
true

6. Determine whether a property is in hasOwnProperty() owned by the object itself

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

2.4 Process Control

if judgment

var age = 14;
if (age > 18){
    alert('heihei')
}
else{
    alert('baby')
}

while (age < 1){
    age -= 1;
}
for (let i = 0; i < age; i++) {
    alert(i);
}

2.5 map and set

Map

var map = new Map([['Li Jinbiao',123],['Huang Xinyu', 456], ['Jin Xinyu', 789]]);
var name = map.get('Li Jinbiao');//get value
map.set('admin', 123456);//Add or modify
map.delete('admin');//delete value
console.log(name);

Set: an unordered, non-repeating collection

var set = new Set([3,1,12,3,3,3,4,4]); //deduplication
set.add(5);//add value
set.delete(1);//delete value
set.has(1); //contains an element

2.6 iterator

iterate over the array

//Iterate through for of/ for in subscripts
var arr = [1,2,3,4,5];
for(var x of arr){
    console.log(x);
}

Traverse the Map

var map = new Map([['Li Jinbiao',123],['Huang Xinyu', 456], ['Jin Xinyu', 789]]);
for(let x of map){
    console.log(x);
}

Traverse Set

var set = new Set([3,1,12,3,3,3,4,4]);
for(let x of set){
    console.log(x);
}

3. Function

3.1 Defining functions

Definition method one

absolute value function

function abs(x)
{
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

Once the execution reaches return, it means the end of the function, and the result is returned;

If return is not executed, the function will return the result after the function is executed, and the result is undefined

Definition 2

var abs = function(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

function(x){…} This is an anonymous function, but the result can be assigned to abs, and the function can be called through

Mode 1 and Mode 2 are equivalent

call function

abs(10);

Parameter problem: you can pass any function, or you can pass no parameters

var abs = function (x) {
    //Throwing exceptions manually
    if (typeof x !== 'number'){
        throw 'not a number';
    }
    if (x >= 0){
        return x;
    }else{
        return -x;
    }
}

arguments

arguments is a keyword that js gives away for free

On behalf of, all the parameters passed in are an array!

var abs = function (x) {
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
    if (x >= 0){
        return x;
    }else{
        return -x;
    }
}

Problem: arguments contains all parameters, we sometimes want to use redundant parameters for additional operations, we need to exclude existing parameters~

rest

Get parameters other than those already defined

var abs = function (x,y, ...rest) {
    console.log('x->'+x);
    console.log('y->'+y);
    console.log(rest);//return array
}

rest parameters can only be written in the back and must be marked with ...

3.2 Scope of variables

• In js, var definition variables are actually scoped

• Assuming it is declared in the function body, it cannot be used outside the function

• If two functions use the same variable name, just redefine

• Inner functions can access outer members, but not vice versa

• The function search variable starts from itself. The function starts from inside and outside. Assuming that there is a variable with the same name inside the function, the function will use the internal variable to shield the external variable.

• Variables should be placed in the function header

• global variable

global object window

'use strict'
var x = 'xxx';
alert(x)
alert(window.x)

var old_alert = window.alert;

window.alert = function (){
    
};
//Found that alert() failed
window.alert(123);

//recover
window.alert = old_alert;
window.alert(456);

js actually has only one global scope, any variable (function can also be regarded as a variable), if it is not found in the scope of the function, it will look out, if it is not found in the scope, an error RefrenceError will be reported

specification

//unique global variable
var ljb = {};

//define global variables
ljb.name = 'Li Jinbiao';
ljb.add = function (a, b){
    return a + b;
}

local scope let

for (let i = 0; i < 10; i++) {
    
}

i cannot be used outside the for loop

It is recommended to use let to define local variables

constant const

const pi = 3.14; // read only

3.3 Methods

var ljb = {
    name: 'Li Jinbiao',
    birth: 2000,
    age: function (){
        //This year - year of birth
        var now = new Date().getFullYear();
        alert(now - this.birth);
    }
}
//Attributes
ljb.name;
//The method must add ()
ljb.age();

apply

function  getAge(){
    //This year - year of birth
    var now = new Date().getFullYear();
    return now - this.birth;
}
var ljb = {
    name: 'Li Jinbiao',
    birth: 2000,
    age: getAge()
}
getAge.apply(ljb,[]); //this. points to ljb, the parameter is empty

4 Internal objects

standard object

4.1 Date

var now = new Date();
now.getFullYear();//year
now.getMonth();//Month 0~11 represents the month
now.getDate();//day
now.getDay();//Day of the week
now.getHours();//Time
now.getMinutes();//Minute
now.getSeconds();//Second

now.toLocalString();//2022/5/3 15:36:15 pm local time

now.getTime(); //Timestamp Universal Universal 1970 1.1 0:00:00

4.2 json

is a lightweight data interchange format

Everything is an object in js, and any type supported by js can be represented by json;

Format:

• Objects use {}
• Arrays use []
• All key-value pairs use key:value

//Convert dictionary to json object
var j = JSON.stringify(ljb);
alert(j);
//json parsing, the parameter is a json string
var obj = JSON.parse('{"name":"Li Jinbiao","age":18}');

4.3 Ajax

• Native js writing, xhr asynchronous request
• jQuery encapsulated method $("#name").ajax("")
• axios request

4.4 Regular RegExp

//General spelling
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); //Can only be English letters, numbers and _, and the first letter is an English letter, length 6-12
var s = 'hello';
reg1.test(s);
false
//Simplified spelling
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
reg2.test(s);
false

//-------g means global------------
s.match(/o/g); //find all get o
s.search(/h/g); //Find the content position in the string that matches the regular expression, and return the index position of the first matched element. The effect is the same with or without g.
s.split(/o/g); //Cut according to the regular expression to get a new value, the original data remains unchanged
s.replace(/o/g, "s");  //Replace the string according to the regular global match
s.replace(/o/gi, "s"); //Replace the string according to the regular pattern Global match, case insensitive

4.5 Math() Object

Math.abs(x); return absolute value
Math.exp(x); return e index of
Math.floor(x); The decimal part is directly rounded off
Math.log(x);  Returns the natural logarithm of a number (base is e)
Math.max(x,y);  
Math.min(x,y);
Math.pow(x,y);
Math.random();  return 0~1 random number between
Math.round(x);  round the number to the nearest number
Math.sin(x);
Math.sqrt(x);  Returns the square root of a number
Math.tan(x);

5 Object Oriented

var ljb = {
    name: 'Li Jinbiao',
    birth: 2000,
    age: function (){
        //This year - year of birth
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}
var hxy = {
    name: 'Huang Xinyu'
}
//prototype object
hxy.__proto__ = ljb;

5.1 class inheritance

class keyword

1. Define a class, property, method

   //define a class of students
   class Student{
       constructor(name) { //Construction method
           this.name = name;
       }
       //method
       hello(){
           alert('hello method');
       }
   }
   var ljb = new Student('Li Jinbiao');
   ljb.hello();
   

2. inherit

   //define a class of students
   class Student{
       constructor(name) {
           this.name = name;
       }
       //method
       hello(){
           alert('hello method');
       }
   }
   
   class xiaoStudent extends Student{
       constructor(name, grade) {
           super(name);
           this.grade = grade;
       }
       mygrade(){
           alert('Huang Xinyu');
       }
   }
   
   var ljb = new Student('Li Jinbiao');
   var hxy = new xiaoStudent('Huang Xinyu', 450);
   

6 Manipulating BOM objects (emphasis)

BOM: Browser Object Model

6...1 window.Navigator

(Not recommended for use)

Navigator: Encapsulates browser information

Most of the time, we won't use the navigator object because it will be modified by someone!

It is not recommended to use these properties to judge and write code

6.2 screen

screen.width
1536
screen.height
864

6.3 location (important)

location represents the URL information of the current page

location.host: host
location.href: connect
location.protocol: protocol
location.reload: f reload() //refresh page
//set new address
location.assign('https://www.baidu.com');

6.4 document

document represents the current page, HTML, DOM document tree

document.title
'Baidu, you will know'
document.title='Li Jinbiao'
'Li Jinbiao'

6.5 Get a specific document tree node

<dl id="app">
    <dt>name</dt>
    <dd>Li Jinbiao</dd>
    <dd>Huang Xinyu</dd>
    <dd>Jin Xinyu</dd>
</dl>

js middle:
var dl = document.getElementById('app');

6.6 Get cookie s

document.cookie
''

6.7 Hijacking cookie s

www.taobao.com (login to Taobao, Tmall will also automatically log in)

<script src="aa.js"> </script>
//Malicious people: get your cookie and upload it to its server

Server side can set cookie s: httpOnly (read only)

6.8 history

Represents browser records

history.back(); //back
history.forward(); //go ahead

6.9 Tooltip

prompt('How much are you going to charge?', 'Li Jinbiao');

[External link image transfer failed, the source site may have anti-leech mechanism, it is recommended to save the image and upload it directly (img-0QJvARtG-1651757973421)(C:\Users751083927\AppData\Roaming\Typora\typora-user-images\ image-20220503204715515.png)]

6.10 Timer related (relatively important)

//concept
var t = setTimeout('JS statement', millisecond); //Most of the first parameter js statement is to write a function, otherwise the general js statement will be executed here, first encapsulate it with a function, the return value t is actually an id value (the browser automatically assigns it to you)
------------------------------------------
var a = setTimeout(function (){confirm("are you sure")}, 3000); //Execute function after 3 seconds
clearTimeout(a)  //Execute within 3 seconds, stop executing the function
-------------------------------------------
var a = setInterval(function (){confirm("are you sure")}, 3000);  //Execute every 3 seconds
clearInterval(a)//clear timer

7. DOM (emphasis)

• Update: Update DOM nodes
• Traverse DOM nodes: get DOM nodes
• delete: delete a DOM node
• add: add a new node

Document Object Model

• Document node (document object): represents the entire document
• Element node (element object): represents an element (label)
• Text node (text object): represents the text in the element (label)
• Attribute node (attribute object): represents an attribute, and elements (tags) have attributes
• Comments are comment nodes (comment objects)
• js can create dynamic HTML through DOM
• js can change all HTML attributes in the page
• js can change all HTML elements in the page
• js can change all css styles in the page
• js is able to react to all events in the page (mouse click events, mouse move events, etc.)

7.1 Find tags

direct lookup

//Corresponding css selector

var btn  = document.getElementsByClassName('btn'); //Obtained according to the class attribute (multiple elements can be obtained, so an array is returned)
var btn1  = document.getElementById('d1'); // Get a tag by ID 
var btn2  = document.getElementsByTagName(a);  //Get the label collection according to the label name, return an array Get the a label

Indirect lookup

var btn  = document.getElementsByClassName('btn');
var j1 = btn.parentElement;  //parent node label element
var j2 = btn.children;  //All word tags
var j3 = btn.firstElementChild;  //first word tag element
var j4 = btn.lastElementChild;  //last word tag element
var j5 = btn.nextSibling;  //next sibling tag element
var j6 = btn.previousSibling;  //previous sibling tag element

7.2 Updating DOM Nodes

dl.innerText;  //get value
dl.innerText = 'Li Jinbiao';  //Modify the value
dl.style.xxx = xxx;  //change style

7.3 Deleting DOM nodes

Steps: Get the parent node first, then delete yourself through the parent node

<div class="cl1">
    <p id="p1">Li Jinbiao</p>
    <h1>Huang Xinyu</h1>
</div>
----------------------------------------
var p1 = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(father.children[0])

7.4 Inserting Nodes

We have obtained a DOM node. Assuming that the DOM node is empty, we can add an element through innerHTML, but this DOM node already has an element, so we can't do it! will cover

Append:

var d1 = document.getElementById('d1');
d1.appendChild(js);  //Append js node

Create labels

var dd = document.getElementById('dd');

var newp = document.createElement('p'); //create a p tag
newp.id = 'newp';
newp.innerText = 'talent';
dd.appendChild(newp);
----------------------------
//Create a label node
var myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');

7.5 Text manipulation

d1.innerText = "<a href='www.baidu.com'>Baidu</a>";
d1.innerHTML = "<a href='www.baidu.com'>Baidu</a>";  //Able to identify tags

7.6 Attribute operation

d1.setAttribute('age', 18);
d1.removeAttribute('age');

7.7 Operation of class

var d = document.getElementById('oo');
d.classList;//Get all the values ​​of the class attribute of this tag
d.classList.add('xx2'); //add class value
d.classList,remove('xx2');  //delete the class value
d.classList.contains('xx2');  //Determine if there is an xx2class attribute. Returns true if there is, otherwise false
d.classList.toggle('xx2'); //If there is, delete class xx2, if not, add it 

7.8 Events

onclick  //Event handler called when the user clicks on an object
ondblclick  # Event handler called when the user double-clicks an event


================================================
onfocus  # element gets focus
onblur  //# Element loses focus Application scenario: used for form validation, when the user leaves an input box, the representative has finished inputting, we can verify him
************************************************
//onfocus event to get the cursor
var inp = document.getElementById('username');
inp.onfocus = function (){
    var d = document.getElementById('d1');
    d.style.backgroundColor = 'pink';
}
//Lost cursor trigger time
inp.onblur = function (){
    var d = document.getElementById('d1');
    d.style.backgroundColor = 'green';
}
************************************************
================================================   
    
onchange  # The content of the field is changed Scenario: Usually used for form elements, triggered when the content of the element is changed. (select linkage)
*************************************************
<select name="select" id="select">
    <option value="ljb">Li Jinbiao</option>
    <option value="jxy">Jin Xinyu</option>
    <option value="hxy">Huang Xinyu</option>
</select>
------------------------------------------------
//onchange event
var s = document.getElementById('select');
s.onchange = function (){
    //this.options: get all labels this.selectedIndex: get the selected label
    console.log(this.options[this.selectedIndex].innerText+'looks great');
}

//The onchange input event gets the content in the text box in real time
inp.onchange = function (){
    console.log(this.value);
}
*************************************************    
================================================    
    
onkeydown  //# A keyboard button is pressed Application scenario: When the user presses the Enter button in the last input box, the form is submitted
onkeypress  # A keyboard key is pressed and released
onkeyup  # A keyboard key was released
onload  # A page or an image finishes loading
onmousedown  #mouse button is pressed
onmousemove  # the mouse is moved
onmouseout  # The mouse leaves an element
onmouseover  # Move the mouse over an element

onselect  # Occurs when text in a textbox is selected

method one

<div class="c1" id="d1" onclick="f1();">
    <p>Li Jinbiao</p>
</div>
---------------------------------
function f1(){
    var d = document.getElementById('d1');
    d.style.backgroundColor = 'yellow';
}

Method 2

Popularity

<div class="c1" id="d1">
    <p>Li Jinbiao</p>
</div>
-----------------------------------------
var d = document.getElementById('d1');
d.onclick = function (){
    d.style.backgroundColor = 'yellow';
}

way three

//this represents the current tag
<div class="c1" id="d1" onclick="f1(this);">
    <p>Li Jinbiao</p>
</div>
---------------------------
function f1(this){
	this.style.backgroundColor = 'yellow';
}

8 Action form (validation)

What is the form:

1. text box test
2. drop-down box select
3. radio button
4. checkbox checkbox
5. hidden field hidden
6. password box password

Get submitted information encrypted

//Introduce md5 encryption algorithm
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>


<!--
Form binding submit event
onsubmit = Bind a function that submits detection, true， false
 To return this result to the form, use onsubmit take over
onsubmit="return f1()"  //return false prevents submission, true agrees to submission
-->
<!--<form action="#" method="post" onsubmit="return f1()">-->
<form action="#" method="post">
    <p>
        username: <input type="text" name="username" id="username" required>
    </p>
    <p>password:
<!--        hide commits-->
        <input type="password" id="input-password" required>
        <input type="hidden" id="md5-password" name="password">
    </p>

<!--    bind event-->
    <button onclick="f1()">submit</button>
</form>

---------------------------------------------------
// var input_text = document.getElementById('username');
// // get the value of the input box
// input_text.value;
// //Modify the value of the input box
// input_text.value = '123';

// var boy = document.getElementById('boy');
// var girl = document.getElementById('girl');
// //For fixed values ​​such as radio buttons and multi-select boxes, .value can only get the current value
// console.log(boy.checked); //Check whether the return result is true
// console.log(girl.checked); //View the return result

function f1(){
    var name = document.getElementById('username');
    var pswd = document.getElementById('input-password');
    var md5_pswd = document.getElementById('md5-password');
    md5_pswd.value = md5(pswd.value);

    return false;
}

9 jQuery

jQuery library: there are a lot of js functions in it

jQuery objects and DOM objects

jQuery The found tag is the object called---jQuery object
 Native js The object found is called---DOM object
DOM object can only be used dom object methods
jQuery Objects too, cannot be used dom object methods

convert
jQuery object turn dom object -- jQuery object[0]  Example: $('#id1')[0];
dom object turn jQuery object -- $(dom object);

Get jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
formula: $(selector).action()
-->
<a href="" id="test-jquery">click me</a>

</body>
<script type="text/javascript" src="lib/jquery-3.6.0.js"></script>
<script type="text/javascript" src="js/ljb.js"></script>
</html>

-------------------------------------------------------
'use strict'

//selectors are css selectors
$('#test-jquery').click(function (){
    alert('hello jquery');
});

9.1 jQuery selectors

9.1.1 Basic selectors

id Selector
$('#d1')

class Selector
$('.c1')

Tag selector
$('label name')---$('div')

The selector may find multiple tags, which will be placed in the array, but still jQuery object, which can be used directly jQuery The method means that all the tags found are set uniformly. If you want to set a certain tag in all the selected tags individually, you can find it through the index value. The tag obtained through the index value is a dom object,

9.1.2 Basic Filters

<ul>
    <li>Li Jinbiao</li>
    <li>Jin Xinyu</li>
    <li id="d3">Huang Xinyu</li>
    <li>silly bear</li>
    <li id="d5">big handsome pot</li>
    <li>talent</li>
</ul>


:first  -- Example: $('li:first')
:last
:eq(index value) -- Example: $('li:eq[2]')  Negative numbers are supported
:odd  -- find all odd numbers
:even -- find all even numbers
:gt(index) -- Matches all elements greater than the given index value
:lt(index) -- Matches all elements less than the given index value
:not(element selector) -- remove all satisfaction not conditional label
:has(element selector) -- Selects all tags that contain one or more tags within them (referring to descendant elements)

9.1.3 Attribute selectors

$('[title]')
$('[title=xx]')

//Mostly used for input tags
$('input[type=xx]')

9.1.4 Form Filters

:text
:checkbox
:password
:file
:radio
:submit
:reset
:button

$(':enabled')  //usable
$(':checked')  // selected label
$(':selected')  // Drop-down box selected label

9.2 Events

//When the page is loaded, respond to the event
$(function (){
    $('#d1').mousemove(function (e){
        $('#dd').text('x:'+e.pageX+'y:'+e.pageY);
    });
});

$('#d1').mouseup(function (e){
    $('#dd').text('Li Jinbiao');
});

9.3 Filter methods

Down:
$('#d1').next(); find the next sibling tag
$('#d1').nextAll(); find all sibling tags below
$('#d1').nextUntil('#dd3'); until a tag with id dd3 is found
 superior:
$('#d1').prev();
$('#d1').prevAll();
$('#d1').prevUntil('d0');
Father element:
$('#d1').parent()
$('#d1').parents()
$('#d1').parentsUntil('body')

a charset="UTF-8">

Title click me

'use strict'

// selector is the selector of css
$('#test-jquery').click(function (){
alert('hello jquery');
});

### 9.1 jQuery selectors

#### 9.1.1 Basic selectors

```js
id Selector
$('#d1')

class Selector
$('.c1')

Tag selector
$('label name')---$('div')

The selector may find multiple tags, which will be placed in the array, but still jQuery object, which can be used directly jQuery The method means that all the tags found are set uniformly. If you want to set a certain tag in all the selected tags individually, you can find it through the index value. The tag obtained through the index value is a dom object,

9.1.2 Basic Filters

<ul>
    <li>Li Jinbiao</li>
    <li>Jin Xinyu</li>
    <li id="d3">Huang Xinyu</li>
    <li>silly bear</li>
    <li id="d5">big handsome pot</li>
    <li>talent</li>
</ul>


:first  -- Example: $('li:first')
:last
:eq(index value) -- Example: $('li:eq[2]')  Negative numbers are supported
:odd  -- find all odd numbers
:even -- find all even numbers
:gt(index) -- Matches all elements greater than the given index value
:lt(index) -- Matches all elements less than the given index value
:not(element selector) -- remove all satisfaction not conditional label
:has(element selector) -- Selects all tags that contain one or more tags within them (referring to descendant elements)

9.1.3 Attribute selectors

$('[title]')
$('[title=xx]')

//Mostly used for input tags
$('input[type=xx]')

9.1.4 Form Filters

:text
:checkbox
:password
:file
:radio
:submit
:reset
:button

$(':enabled')  //usable
$(':checked')  // selected label
$(':selected')  // Drop-down box selected label

9.2 Events

//When the page is loaded, respond to the event
$(function (){
    $('#d1').mousemove(function (e){
        $('#dd').text('x:'+e.pageX+'y:'+e.pageY);
    });
});

$('#d1').mouseup(function (e){
    $('#dd').text('Li Jinbiao');
});

9.3 Filter methods

Down:
$('#d1').next(); find the next sibling tag
$('#d1').nextAll(); find all sibling tags below
$('#d1').nextUntil('#dd3'); until a tag with id dd3 is found
 superior:
$('#d1').prev();
$('#d1').prevAll();
$('#d1').prevUntil('d0');
Father element:
$('#d1').parent()
$('#d1').parents()
$('#d1').parentsUntil('body')