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       indivual <br> ⩐
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  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:  Greater than sign:< Less than sign:> &symbol:&
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
-
descendant selector
-
child selector
-
adjacent sibling selector
-
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
- For normal strings, we use single or double quotes to wrap
- Note the escape character \
- Writing multi-line strings
var msg = ` Li Jinbiao Huang Xinyu Jin Xinyu ` //Multi-line characters, above the tab key
- template string
//template string let name = 'Li Jinbiao'; let age = 18; let mg = `name is: ${name},age is: ${age}` alert(mg)
- mutability of strings >> immutability
- case conversion
//Note that this is a method, not a property student.toUpperCase() student.toLowerCase()
- student.indexOf('f') >>return character subscript
- 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];
- 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
- indexOf(), index by element subscript
indexOf(2) //From the beginning 2
The "1" of the string and the number 1 are different
-
slice() intercepts part of Array and returns a new array, similar to substring
-
push(), pop() tail
push: push to the end pop: Pop the element at the end
- unshift(), shift() head
unshift(): pressed into the head shift(): Element that pops up the header
- sort sort()
arr.sout()
- Element flip reverse()
arr.reverse()
- concat()
splicing arr1 = arr.concat([7,8]) //Returns a new array with the original array unchanged [1,2,3,4,7,8]
- connector join
arr.join('-') 1-2-3-4
- 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
-
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();
-
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:
- text box test
- drop-down box select
- radio button
- checkbox checkbox
- hidden field hidden
- 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">
'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')