├── 1 ├── 1.3 │ └── 3.1 │ │ └── 1.html └── 1.4 │ └── 2 │ ├── 1.html │ ├── 1.xhtml │ ├── 10.html │ ├── 10.xhtml │ ├── 2.html │ ├── 2.xhtml │ ├── 3.html │ ├── 3.xhtml │ ├── 4.html │ ├── 4.xhtml │ ├── 5.html │ ├── 5.xhtml │ ├── 6.html │ ├── 6.xhtml │ ├── 7.html │ ├── 7.xhtml │ ├── 8.html │ ├── 8.xhtml │ ├── 9.html │ └── 9.xhtml ├── 2 ├── 2.10 │ ├── 2 │ │ └── 1.html │ ├── 3 │ │ └── 1.html │ └── question-1 │ │ └── 1.html ├── 2.11 │ ├── 2 │ │ └── 1.html │ ├── 3 │ │ └── 1.html │ └── question-1 │ │ └── 1.html ├── 2.12 │ └── 2 │ │ ├── 1.html │ │ └── child.html ├── 2.2 │ ├── 1 │ │ └── 1.html │ ├── 2 │ │ └── 1.html │ ├── 3 │ │ ├── 1.html │ │ └── style.css │ ├── 2.3 │ │ └── 1.html │ └── 2.4 │ │ └── 1.html ├── 2.3 │ ├── 1 │ │ ├── 1.html │ │ └── style.css │ ├── 2 │ │ └── 1.html │ ├── 3.1 │ │ └── 1.html │ └── 3.2 │ │ └── 1.html ├── 2.4 │ ├── 1 │ │ └── 1.html │ ├── 2 │ │ └── 1.html │ └── 3 │ │ └── 1.html ├── 2.5 │ ├── 2 │ │ ├── 1.html │ │ ├── 2.html │ │ └── 3.html │ ├── 3 │ │ └── 1.html │ ├── 1.2 │ │ └── 1.html │ ├── 1.3 │ │ └── 1.html │ └── question-1 │ │ └── 1.html ├── 2.6 │ ├── 1 │ │ └── 1.html │ ├── 2 │ │ └── 1.html │ └── 3 │ │ └── 1.html ├── 2.7 │ ├── 1 │ │ └── 1.html │ ├── 2.1 │ │ └── 1.html │ ├── 2.2 │ │ └── 1.html │ ├── 3.1 │ │ └── 1.html │ ├── 3.2 │ │ └── 1.html │ └── question-1 │ │ └── 1.html ├── 2.8 │ ├── 1 │ │ └── 1.html │ ├── 2.1 │ │ └── 1.html │ └── 2.2 │ │ └── 1.html └── 2.9 │ ├── 2 │ ├── 1.html │ ├── action.php │ ├── iframe.html │ ├── upload.php │ └── upload │ │ └── 2018 │ │ └── 01 │ │ └── 31 │ │ ├── 15173852723517.png │ │ └── 15173853531095.png │ ├── 1.1 │ ├── 1.html │ └── iframe.html │ ├── 1.2 │ ├── 1.html │ └── iframe.html │ └── question-1 │ ├── 1.html │ └── iframe.html ├── 3 ├── 3.10 │ ├── 1 │ │ ├── 1.html │ │ └── style.css │ ├── 3 │ │ ├── 1.html │ │ └── style.css │ ├── 4 │ │ ├── 1.html │ │ └── style.css │ ├── 2.1 │ │ ├── 1.html │ │ └── style.css │ └── 2.2 │ │ ├── 1.html │ │ └── style.css ├── 3.2 │ ├── 1 │ │ ├── 1.html │ │ └── style.css │ ├── 3 │ │ ├── 1.html │ │ └── style.css │ └── question-1 │ │ ├── 1.html │ │ └── style.css ├── 3.3 │ ├── 1 │ │ ├── 1.html │ │ └── style.css │ ├── 2 │ │ ├── 1.html │ │ └── style.css │ ├── 3 │ │ ├── 1.html │ │ └── style.css │ ├── 4 │ │ ├── 1.html │ │ └── style.css │ ├── 5 │ │ ├── 1.html │ │ └── style.css │ └── question-1 │ │ ├── 1.html │ │ ├── lake.png │ │ └── style.css ├── 3.4 │ ├── 2.1 │ │ ├── 1.html │ │ └── style.css │ ├── 2.2 │ │ ├── 1.html │ │ └── style.css │ └── 2.3 │ │ ├── 1.html │ │ └── style.css ├── 3.5 │ ├── 2.1 │ │ ├── 1.html │ │ └── style.css │ ├── 2.3 │ │ ├── 1.html │ │ └── style.css │ └── question-3 │ │ ├── 1.html │ │ └── style.css ├── 3.6 │ ├── 1.3 │ │ ├── 1.html │ │ └── style.css │ ├── 2.1 │ │ ├── 1.html │ │ └── style.css │ ├── 2.2 │ │ ├── 1.html │ │ ├── lake.png │ │ └── style.css │ └── 3.2 │ │ ├── 1.html │ │ └── style.css ├── 3.7 │ ├── 2 │ │ ├── 1.html │ │ └── style.css │ ├── 3 │ │ ├── 1.html │ │ └── style.css │ ├── 4 │ │ ├── 1.html │ │ └── style.css │ ├── 5 │ │ ├── 1.html │ │ └── style.css │ └── question-1 │ │ ├── 1.html │ │ └── style.css ├── 3.8 │ ├── 2.3 │ │ ├── 1.html │ │ └── style.css │ ├── 2.6 │ │ ├── 1.html │ │ └── style.css │ ├── 2.7 │ │ ├── 1.html │ │ └── style.css │ ├── 2.8 │ │ ├── 1.html │ │ └── style.css │ └── question-1 │ │ ├── 1.html │ │ └── style.css └── 3.9 │ ├── 3 │ ├── 1.html │ └── style.css │ ├── 5 │ ├── 1.html │ └── style.css │ ├── 1.3 │ ├── 1.html │ └── style.css │ ├── 2.1 │ ├── 1.html │ └── style.css │ ├── 2.2 │ ├── 1.html │ └── style.css │ ├── 4.1 │ ├── 1.html │ └── style.css │ ├── 4.2 │ ├── 1.html │ └── style.css │ └── question-1 │ ├── 1.html │ └── style.css ├── 4 ├── 4.1 │ ├── 2 │ │ ├── 1.html │ │ └── style.css │ ├── 4 │ │ ├── 1.html │ │ └── style.css │ ├── 1.1 │ │ ├── 1.html │ │ └── style.css │ ├── 1.2 │ │ ├── 1.html │ │ └── style.css │ ├── 1.3 │ │ ├── 1.html │ │ └── style.css │ ├── 3.1 │ │ ├── 1.html │ │ └── style.css │ ├── 3.2 │ │ ├── 1.html │ │ └── style.css │ ├── 4.1 │ │ ├── 1.html │ │ └── style.css │ ├── 4.2 │ │ ├── 1.html │ │ └── style.css │ ├── question-1 │ │ ├── 1.html │ │ └── style.css │ └── summary │ │ ├── 1.html │ │ └── style.css ├── 4.2 │ ├── 1 │ │ ├── 1.html │ │ └── style.css │ ├── 2 │ │ ├── 1.html │ │ └── style.css │ ├── 3 │ │ ├── 1.html │ │ └── style.css │ ├── 4 │ │ ├── 1.html │ │ └── style.css │ ├── 5 │ │ ├── 1.html │ │ └── style.css │ ├── 4.1 │ │ ├── 1.html │ │ └── style.css │ └── 4.2 │ │ ├── 1.html │ │ └── style.css ├── 4.3 │ ├── 1 │ │ ├── 1.html │ │ └── style.css │ ├── 2 │ │ ├── 1.html │ │ └── style.css │ ├── 3 │ │ ├── 1.html │ │ └── style.css │ ├── 4 │ │ ├── 1.html │ │ └── style.css │ ├── 5 │ │ ├── 1.html │ │ └── style.css │ ├── 6 │ │ ├── 1.html │ │ └── style.css │ ├── question-1 │ │ ├── 1.html │ │ └── style.css │ └── summary │ │ ├── 1.html │ │ └── style.css ├── 4.4 │ ├── 2 │ │ ├── 1.html │ │ └── style.css │ ├── 3 │ │ ├── 1.html │ │ └── style.css │ ├── 4 │ │ ├── 1.html │ │ └── style.css │ ├── 1.1 │ │ ├── 1.html │ │ └── style.css │ ├── 1.2 │ │ ├── 1.html │ │ └── style.css │ ├── 1.3 │ │ ├── 1.html │ │ └── style.css │ ├── 1.4 │ │ ├── 1.html │ │ └── style.css │ ├── 4.1 │ │ ├── 1.html │ │ └── style.css │ ├── 4.2 │ │ ├── 1.html │ │ └── style.css │ └── question-1 │ │ ├── 1.html │ │ └── style.css ├── 4.5 │ ├── 2 │ │ ├── 1.html │ │ └── style.css │ ├── 1.2 │ │ ├── 1.html │ │ └── style.css │ └── question-1 │ │ ├── 1.html │ │ └── style.css ├── 4.6 │ ├── 2 │ │ ├── 1.html │ │ └── style.css │ ├── 3 │ │ ├── 1.html │ │ └── style.css │ ├── question-1 │ │ ├── 1.html │ │ └── style.css │ └── summary │ │ ├── 1.html │ │ └── style.css ├── 4.7 │ ├── 2 │ │ ├── 1.html │ │ └── style.css │ ├── 5 │ │ ├── 1.html │ │ └── style.css │ ├── 1.1 │ │ ├── 1.html │ │ └── style.css │ ├── 1.2 │ │ ├── 1.html │ │ └── style.css │ ├── 3.1 │ │ ├── 1.html │ │ └── style.css │ ├── 3.2 │ │ ├── 1.html │ │ └── style.css │ ├── 3.3 │ │ ├── 1.html │ │ └── style.css │ ├── 4.1 │ │ ├── 1.html │ │ └── style.css │ ├── 4.2 │ │ ├── 1.html │ │ └── style.css │ └── 4.3 │ │ ├── 1.html │ │ └── style.css ├── 4.8 │ ├── 1.1 │ │ ├── 1.html │ │ └── style.css │ ├── 2.1 │ │ ├── 1.html │ │ └── style.css │ ├── 2.2 │ │ ├── 1.html │ │ └── style.css │ ├── 3.2 │ │ ├── 1.html │ │ └── style.css │ ├── 3.3 │ │ ├── 1.html │ │ └── style.css │ └── 3.4 │ │ ├── 1.html │ │ └── style.css └── 4.9 │ ├── 1.1 │ └── 1.html │ ├── 1.2 │ ├── 1.html │ └── style.css │ ├── 3.3 │ ├── 1.html │ └── style.css │ ├── 3.4 │ ├── 1.html │ └── style.css │ ├── 4.1 │ ├── 1.html │ └── style.css │ ├── 4.2 │ ├── 1.html │ └── style.css │ ├── 4.3 │ ├── 1.html │ └── style.css │ ├── 4.4 │ ├── 1.html │ └── style.css │ ├── 5.1 │ ├── 1.html │ └── style.css │ └── 5.2 │ └── 1.html ├── 5 ├── 5.1 │ ├── 2 │ │ └── 1.html │ └── 3 │ │ ├── 1.html │ │ └── style.css ├── 5.2 │ ├── 1 │ │ ├── 1.html │ │ └── style.css │ ├── 2 │ │ ├── 1.html │ │ └── style.css │ ├── 3 │ │ ├── 1.html │ │ └── style.css │ ├── 4 │ │ ├── 1.html │ │ └── style.css │ ├── 5 │ │ ├── 1.html │ │ └── style.css │ ├── 5.1 │ │ ├── 1.html │ │ └── style.css │ ├── 5.2 │ │ ├── 1.html │ │ └── style.css │ ├── 6.1 │ │ ├── 1.html │ │ └── style.css │ ├── 6.2 │ │ ├── 1.html │ │ └── style.css │ ├── 6.3 │ │ ├── 1.html │ │ └── style.css │ ├── 6.4 │ │ ├── 1.html │ │ └── style.css │ └── question-1 │ │ ├── 1.html │ │ └── style.css ├── 5.3 │ ├── 1 │ │ ├── 1.html │ │ └── style.css │ └── 2 │ │ ├── 1.html │ │ └── style.css ├── 5.4 │ ├── 4 │ │ ├── 1.html │ │ └── style.css │ ├── 1.1 │ │ ├── 1.html │ │ └── style.css │ ├── 1.2 │ │ ├── 1.html │ │ └── style.css │ ├── 2.1 │ │ ├── 1.html │ │ └── style.css │ ├── 2.2 │ │ ├── 1.html │ │ └── style.css │ ├── 2.3 │ │ ├── 1.html │ │ └── style.css │ ├── 3.1 │ │ ├── 1.html │ │ └── style.css │ ├── 3.2 │ │ ├── 1.html │ │ └── style.css │ ├── 3.3 │ │ ├── 1.html │ │ └── style.css │ └── question-1 │ │ ├── 1.html │ │ └── style.css ├── 5.5 │ ├── 1.1 │ │ ├── 1.html │ │ └── style.css │ ├── 1.2 │ │ ├── 1.html │ │ └── style.css │ ├── 1.3 │ │ ├── 1.html │ │ └── style.css │ ├── 1.4 │ │ ├── 1.html │ │ └── style.css │ ├── 2.1 │ │ ├── 1.html │ │ └── style.css │ ├── 2.2 │ │ ├── 1.html │ │ └── style.css │ ├── 2.3 │ │ ├── 1.html │ │ └── style.css │ ├── 2.4 │ │ ├── 1.html │ │ └── style.css │ ├── 2.5 │ │ ├── 1.html │ │ └── style.css │ ├── question-1 │ │ ├── 1.html │ │ └── style.css │ └── summary │ │ ├── 1.html │ │ └── style.css ├── 5.6 │ └── style.scss └── 5.7 │ ├── 1 │ ├── 1.html │ └── style.css │ ├── 2 │ ├── 1.html │ └── style.css │ ├── 3 │ ├── 1.html │ └── style.css │ ├── 4 │ ├── 1.html │ └── style.css │ ├── 5.1 │ ├── 1.html │ └── style.css │ └── 5.2 │ ├── 1.html │ └── style.css ├── 7 ├── 7.1 │ └── 2 │ │ └── 1.html ├── 7.10 │ ├── 1.1 │ │ ├── 1.html │ │ └── default.js │ ├── 1.2 │ │ ├── 1.html │ │ └── default.js │ ├── 2.1 │ │ ├── 1.html │ │ └── default.js │ ├── 2.2 │ │ ├── 1.html │ │ └── default.js │ ├── 2.3 │ │ ├── 1.html │ │ └── default.js │ ├── 3.1 │ │ ├── 1.html │ │ └── default.js │ ├── 3.2 │ │ ├── 1.html │ │ └── default.js │ ├── 3.3 │ │ ├── 1.html │ │ └── default.js │ ├── 3.4 │ │ ├── 1.html │ │ └── default.js │ ├── 3.5 │ │ ├── 1.html │ │ └── default.js │ ├── 3.6 │ │ ├── 1.html │ │ └── default.js │ ├── 3.7 │ │ ├── 1.html │ │ └── default.js │ ├── 3.8 │ │ ├── 1.html │ │ └── default.js │ ├── 4.1 │ │ ├── 1.html │ │ └── default.js │ ├── 4.2 │ │ ├── 1.html │ │ └── default.js │ ├── question-1 │ │ ├── 1.html │ │ └── default.js │ └── question-2 │ │ ├── 1.html │ │ └── default.js ├── 7.11 │ ├── 3 │ │ ├── 1.html │ │ └── default.js │ ├── 4 │ │ ├── 1.html │ │ └── default.js │ ├── 1.2 │ │ ├── 1.html │ │ └── default.js │ ├── 1.3 │ │ ├── 1.html │ │ └── default.js │ ├── 1.4 │ │ ├── 1.html │ │ └── default.js │ ├── 1.5 │ │ ├── 1.html │ │ └── default.js │ ├── 2.1 │ │ ├── 1.html │ │ └── default.js │ ├── 2.2 │ │ ├── 1.html │ │ └── default.js │ ├── 2.3 │ │ ├── 1.html │ │ └── default.js │ ├── 2.4 │ │ ├── 1.html │ │ └── default.js │ ├── 2.5 │ │ ├── 1.html │ │ └── default.js │ ├── 2.6 │ │ ├── 1.html │ │ └── default.js │ ├── 3.1 │ │ ├── 1.html │ │ └── default.js │ ├── 3.2 │ │ ├── 1.html │ │ └── default.js │ ├── 4.1 │ │ ├── 1.html │ │ └── default.js │ ├── 4.2 │ │ ├── 1.html │ │ └── default.js │ ├── 4.3 │ │ ├── 1.html │ │ └── default.js │ ├── question-1 │ │ ├── 1.html │ │ └── default.js │ ├── question-2 │ │ ├── 1.html │ │ └── default.js │ ├── question-3 │ │ ├── 1.html │ │ └── default.js │ └── question-4 │ │ ├── 1.html │ │ └── default.js ├── 7.12 │ ├── 1 │ │ ├── 1.html │ │ └── default.js │ ├── 2 │ │ ├── 1.html │ │ └── default.js │ ├── 3 │ │ ├── 1.html │ │ └── default.js │ ├── 4 │ │ ├── 1.html │ │ └── default.js │ └── question-1 │ │ ├── 1.html │ │ └── default.js ├── 7.13 │ ├── 1 │ │ ├── 1.html │ │ └── default.js │ ├── 2 │ │ ├── 1.html │ │ └── default.js │ ├── 3 │ │ ├── 1.html │ │ └── default.js │ ├── 4 │ │ ├── 1.html │ │ └── default.js │ ├── question-1 │ │ ├── 1.html │ │ └── default.js │ └── summary │ │ ├── 1.html │ │ └── default.js ├── 7.14 │ ├── 2 │ │ ├── 1.html │ │ └── default.js │ ├── 1.1 │ │ ├── 1.html │ │ └── default.js │ ├── 1.2 │ │ ├── 1.html │ │ └── default.js │ └── question-1 │ │ ├── 1.html │ │ └── default.js ├── 7.15 │ ├── 1 │ │ └── demo.js │ └── 2 │ │ └── package.json ├── 7.2 │ ├── 3 │ │ ├── 1.html │ │ └── default.js │ ├── 6.3 │ │ ├── 1.html │ │ └── default.js │ ├── question-2 │ │ ├── 1.html │ │ └── default.js │ └── question-3 │ │ ├── 1.html │ │ └── default.js ├── 7.3 │ ├── 1.1 │ │ ├── 1.html │ │ └── default.js │ ├── 1.2 │ │ ├── 1.html │ │ └── default.js │ ├── 1.4 │ │ ├── 1.html │ │ └── default.js │ ├── 1.5 │ │ ├── 1.html │ │ └── default.js │ ├── 2.1 │ │ ├── 1.html │ │ └── default.js │ ├── question-1 │ │ ├── 1.html │ │ └── default.js │ └── question-2 │ │ ├── 1.html │ │ └── default.js ├── 7.4 │ ├── 1.1 │ │ ├── 1.html │ │ └── default.js │ ├── 1.2 │ │ ├── 1.html │ │ └── default.js │ ├── 1.3 │ │ ├── 1.html │ │ └── default.js │ ├── 1.4 │ │ ├── 1.html │ │ └── default.js │ ├── 1.5 │ │ ├── 1.html │ │ └── default.js │ ├── 2.1 │ │ ├── 1.html │ │ └── default.js │ ├── 2.2 │ │ ├── 1.html │ │ └── default.js │ ├── 2.3 │ │ ├── 1.html │ │ └── default.js │ ├── 3.1 │ │ ├── 1.html │ │ └── default.js │ ├── 3.2 │ │ ├── 1.html │ │ └── default.js │ ├── question-1 │ │ ├── 1.html │ │ └── default.js │ └── question-2 │ │ ├── 1.html │ │ └── default.js ├── 7.5 │ ├── 1 │ │ ├── 1.html │ │ └── default.js │ ├── 2 │ │ ├── 1.html │ │ └── default.js │ └── question-2 │ │ ├── 1.html │ │ └── default.js ├── 7.6 │ ├── 1.1 │ │ ├── 1.html │ │ └── default.js │ ├── 1.2 │ │ ├── 1.html │ │ └── default.js │ ├── 2.1 │ │ ├── 1.html │ │ └── default.js │ ├── 2.2 │ │ ├── 1.html │ │ └── default.js │ ├── 2.3 │ │ ├── 1.html │ │ └── default.js │ ├── 3.1 │ │ ├── 1.html │ │ └── default.js │ ├── 3.2 │ │ ├── 1.html │ │ └── default.js │ ├── 3.3 │ │ ├── 1.html │ │ └── default.js │ ├── 3.4 │ │ ├── 1.html │ │ └── default.js │ ├── 3.5 │ │ ├── 1.html │ │ └── default.js │ ├── 3.6 │ │ ├── 1.html │ │ └── default.js │ ├── 4.1 │ │ ├── 1.html │ │ └── default.js │ ├── 4.2 │ │ ├── 1.html │ │ └── default.js │ ├── 4.3 │ │ ├── 1.html │ │ └── default.js │ ├── question-2 │ │ ├── 1.html │ │ └── default.js │ ├── question-3 │ │ ├── 1.html │ │ └── default.js │ └── summary │ │ ├── 1.html │ │ └── default.js ├── 7.7 │ ├── 1.1 │ │ └── default.json │ ├── 1.2 │ │ └── default.json │ ├── 2.1 │ │ ├── 1.html │ │ └── default.js │ ├── 2.2 │ │ ├── 1.html │ │ └── default.js │ ├── 3.1 │ │ ├── 1.html │ │ └── default.js │ ├── question-1 │ │ ├── 1.html │ │ └── default.js │ └── summary │ │ └── default.json ├── 7.8 │ ├── 2 │ │ ├── 1.html │ │ └── default.js │ ├── 3.1 │ │ ├── 1.html │ │ └── default.js │ ├── 3.2 │ │ ├── 1.html │ │ └── default.js │ ├── 3.3 │ │ ├── 1.html │ │ └── default.js │ ├── 4.1 │ │ ├── 1.html │ │ └── default.js │ ├── 4.2 │ │ ├── 1.html │ │ └── default.js │ ├── 4.3 │ │ ├── 1.html │ │ └── default.js │ ├── question-1 │ │ ├── 1.html │ │ └── default.js │ └── question-2 │ │ ├── 1.html │ │ └── default.js └── 7.9 │ ├── 2.3 │ ├── 1.html │ └── default.js │ ├── 2.4 │ ├── 1.html │ └── default.js │ ├── 2.5 │ ├── 1.html │ └── default.js │ ├── 2.6 │ ├── 1.html │ └── default.js │ ├── 2.7 │ ├── 1.html │ └── default.js │ ├── 2.8 │ ├── 1.html │ └── default.js │ ├── 2.9 │ ├── 1.html │ └── default.js │ ├── 3.1 │ ├── 1.html │ └── default.js │ ├── 3.2 │ ├── 1.html │ └── default.js │ ├── 3.3 │ ├── 1.html │ └── default.js │ ├── 3.4 │ ├── 1.html │ └── default.js │ ├── 4.1 │ ├── 1.html │ └── default.js │ └── 4.2 │ ├── 1.html │ └── default.js ├── 8 ├── 8.1 │ ├── 3 │ │ ├── 1.html │ │ └── default.js │ ├── 1.1 │ │ ├── 1.html │ │ └── default.js │ ├── 1.2 │ │ ├── 1.html │ │ └── default.js │ ├── 1.3 │ │ ├── 1.html │ │ └── default.js │ ├── 2.1 │ │ ├── 1.html │ │ └── default.js │ ├── 2.2 │ │ ├── 1.html │ │ └── default.js │ ├── 4.1 │ │ ├── 1.html │ │ └── default.js │ ├── 4.2 │ │ ├── 1.html │ │ └── default.js │ ├── 4.3 │ │ ├── 1.html │ │ └── default.js │ ├── question-1 │ │ ├── 1.html │ │ └── default.js │ └── question-2 │ │ ├── 1.html │ │ └── default.js ├── 8.2 │ ├── 1 │ │ └── 1.html │ ├── 1.2 │ │ ├── 1.html │ │ └── default.js │ ├── 1.3 │ │ ├── 1.html │ │ └── default.js │ ├── 2.1 │ │ ├── 1.html │ │ └── default.js │ ├── 2.2 │ │ ├── 1.html │ │ └── default.js │ ├── 2.3 │ │ ├── 1.html │ │ └── default.js │ ├── 2.4 │ │ ├── 1.html │ │ └── default.js │ ├── 2.5 │ │ ├── 1.html │ │ └── default.js │ ├── 2.6 │ │ ├── 1.html │ │ └── default.js │ ├── 2.7 │ │ ├── 1.html │ │ └── default.js │ ├── 2.8 │ │ ├── 1.html │ │ └── default.js │ ├── question-1 │ │ ├── 1.html │ │ └── default.js │ ├── question-2 │ │ ├── 1.html │ │ └── default.js │ └── question-3 │ │ ├── 1.html │ │ └── default.js ├── 8.3 │ ├── 1 │ │ ├── 1.html │ │ └── default.js │ ├── 1.2 │ │ ├── 1.html │ │ └── default.js │ ├── 1.3 │ │ ├── 1.html │ │ └── default.js │ ├── 1.4 │ │ ├── 1.html │ │ └── default.js │ ├── 1.5 │ │ ├── 1.html │ │ └── default.js │ ├── 2.1 │ │ ├── 1.html │ │ └── default.js │ ├── 2.2 │ │ ├── 1.html │ │ └── default.js │ ├── 2.3 │ │ ├── 1.html │ │ └── default.js │ ├── 2.4 │ │ ├── 1.html │ │ └── default.js │ ├── 3.1 │ │ ├── 1.html │ │ └── default.js │ ├── 3.2 │ │ ├── 1.html │ │ └── default.js │ └── question-1 │ │ ├── 1.html │ │ └── default.js ├── 8.4 │ ├── 1 │ │ ├── 1.html │ │ └── default.js │ ├── 2 │ │ ├── 1.html │ │ └── default.js │ ├── 3 │ │ ├── 1.html │ │ └── default.js │ ├── 4 │ │ ├── 1.html │ │ └── default.js │ ├── 5 │ │ ├── 1.html │ │ └── default.js │ └── question-1 │ │ ├── 1.html │ │ └── default.js ├── 8.5 │ ├── 3 │ │ ├── 1.html │ │ └── default.js │ ├── 2.1 │ │ ├── 1.html │ │ └── default.js │ ├── 2.2 │ │ ├── 1.html │ │ └── default.js │ ├── 2.3 │ │ ├── 1.html │ │ └── default.js │ ├── 2.4 │ │ ├── 1.html │ │ └── default.js │ ├── 2.5 │ │ ├── 1.html │ │ └── default.js │ ├── 4.1 │ │ ├── 1.html │ │ └── default.js │ ├── 5.1 │ │ ├── 1.html │ │ └── default.js │ ├── 5.2 │ │ ├── 1.html │ │ └── default.js │ ├── question-1 │ │ ├── 1.html │ │ └── default.js │ ├── question-2 │ │ ├── 1.html │ │ └── default.js │ └── summary │ │ ├── 1.html │ │ └── default.js ├── 8.6 │ ├── 3 │ │ ├── 1.html │ │ └── default.js │ ├── 1.1 │ │ ├── 1.html │ │ └── default.js │ ├── 1.2 │ │ ├── 1.html │ │ └── default.js │ ├── 1.3 │ │ ├── 1.html │ │ └── default.js │ ├── 2.1 │ │ ├── 1.html │ │ └── default.js │ ├── 2.2 │ │ ├── 1.html │ │ └── default.js │ ├── 2.3 │ │ ├── 1.html │ │ └── default.js │ ├── 3.1 │ │ ├── 1.html │ │ └── default.js │ ├── 3.3 │ │ ├── 1.html │ │ └── default.js │ ├── 3.4 │ │ ├── 1.html │ │ └── default.js │ ├── 3.5 │ │ ├── 1.html │ │ └── default.js │ ├── 4.1 │ │ ├── 1.html │ │ └── default.js │ ├── 4.2 │ │ ├── 1.html │ │ └── default.js │ └── question-1 │ │ ├── 1.html │ │ └── default.js ├── 8.7 │ ├── 1.1 │ │ ├── 1.html │ │ ├── default.js │ │ └── server.php │ ├── 1.2 │ │ ├── 1.html │ │ ├── default.js │ │ └── server.php │ ├── 1.3 │ │ ├── 1.html │ │ ├── default.js │ │ └── server.php │ ├── 1.4 │ │ ├── 1.html │ │ ├── default.js │ │ └── server.php │ ├── 1.5 │ │ ├── 1.html │ │ ├── default.js │ │ ├── result.xml │ │ └── server.php │ ├── 2.2 │ │ ├── 1.html │ │ ├── default.js │ │ ├── result.xml │ │ └── server.php │ ├── 2.3 │ │ ├── 1.html │ │ ├── default.js │ │ └── server.php │ ├── 2.4 │ │ ├── 1.html │ │ ├── default.js │ │ └── server.php │ ├── 2.5 │ │ ├── 1.html │ │ ├── default.js │ │ └── server.php │ ├── 2.7 │ │ ├── 1.html │ │ ├── default.js │ │ └── server.php │ ├── 3.1 │ │ ├── 1.html │ │ ├── cors.php │ │ └── default.js │ ├── 3.2 │ │ ├── 1.html │ │ ├── default.js │ │ └── jsonp.php │ └── question-1 │ │ ├── 1.html │ │ ├── default.js │ │ └── server.php └── 8.8 │ ├── 1.1 │ ├── 1.html │ └── default.js │ ├── 1.2 │ ├── 1.html │ └── default.js │ ├── 1.3 │ ├── 1.html │ └── default.js │ ├── 2.1 │ ├── 1.html │ └── default.js │ ├── 2.2 │ ├── 1.html │ └── default.js │ ├── 2.3 │ ├── 1.html │ └── default.js │ ├── 2.4 │ ├── 1.html │ └── default.js │ ├── 2.5 │ ├── 1.html │ └── default.js │ ├── 2.6 │ ├── 1.html │ └── default.js │ ├── 2.7 │ ├── 1.html │ └── default.js │ ├── 3.1 │ ├── 1.html │ └── default.js │ ├── 3.2 │ ├── 1.html │ └── default.js │ ├── 3.3 │ ├── 1.html │ └── default.js │ ├── 3.4 │ ├── 1.html │ └── default.js │ ├── 3.6 │ ├── 1.html │ └── default.js │ ├── 4.1 │ ├── 1.html │ └── default.js │ ├── 4.2 │ ├── 1.html │ └── default.js │ ├── 4.3 │ ├── 1.html │ └── default.js │ ├── 5.1 │ ├── 1.html │ ├── default.js │ └── server.php │ ├── 5.2 │ ├── 1.html │ ├── default.js │ └── server.php │ ├── 6.2 │ ├── 1.html │ └── default.js │ └── question-1 │ ├── 1.html │ └── default.js ├── README.md ├── assets ├── audio │ ├── piano.mp3 │ ├── piano.ogg │ └── piano.wav ├── css │ ├── bootstrap.css │ └── style.css ├── font │ ├── iconfont.eot │ ├── iconfont.svg │ ├── iconfont.ttf │ └── iconfont.woff ├── img │ ├── avatar.jpg │ ├── avatar │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ └── 5.png │ ├── lake-small.jpg │ ├── lake.png │ ├── layout-bac.png │ └── page.png ├── js │ ├── bootstrap.js │ ├── jquery-1.8.3.min.js │ ├── jquery-3.2.1.js │ └── jquery.js └── video │ ├── piano.mp4 │ ├── piano.ogv │ ├── piano.vtt │ └── piano.webm └── 思维导图 ├── CSS.png ├── CSS.xmind ├── HTML.png ├── HTML.xmind ├── JavaScript-all.png ├── JavaScript-all.xmind ├── JavaScript.png ├── JavaScript.xmind ├── 网络.png └── 网络.xmind /1/1.4/2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 良好的文档结构 5 | 6 | 7 |

不合理的嵌套

8 | 9 | -------------------------------------------------------------------------------- /1/1.4/2/1.xhtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 良好的文档结构 5 | 6 | 7 |

不合理的嵌套

8 | 9 | -------------------------------------------------------------------------------- /1/1.4/2/10.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 特殊字符 5 | 6 | 7 |

特殊字符<等需要替换

8 | 9 | -------------------------------------------------------------------------------- /1/1.4/2/10.xhtml: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 特殊字符 5 | 6 | 7 |

特殊字符<等需要替换

8 | 9 | -------------------------------------------------------------------------------- /1/1.4/2/2.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 元素名称和属性得小写 5 | 6 | 7 |
元素必须小写，此处DIV是大写，就不是默认的块级元素
8 |
这里应该换行
9 |
标签必须统一为小写
10 | 11 | -------------------------------------------------------------------------------- /1/1.4/2/2.xhtml: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 元素名称和属性得小写 5 | 6 | 7 |
元素必须小写，此处DIV是大写，就不是默认的块级元素
8 |
这里应该换行
9 |
标签必须统一为小写
10 | 11 | -------------------------------------------------------------------------------- /1/1.4/2/3.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 结束标签 5 | 6 | 7 |

没有结束标签，空元素也没有闭合 8 |
9 | 10 | -------------------------------------------------------------------------------- /1/1.4/2/3.xhtml: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 结束标签 5 | 6 | 7 |

没有结束标签，空元素也没有闭合 8 |
9 | 10 | -------------------------------------------------------------------------------- /1/1.4/2/7.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | name属性 5 | 6 | 7 | 不赞成a元素拥有name属性 8 | 9 | -------------------------------------------------------------------------------- /1/1.4/2/7.xhtml: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | name属性 5 | 6 | 7 | 不赞成a元素拥有name属性 8 | 9 | -------------------------------------------------------------------------------- /1/1.4/2/8.xhtml: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 元素名称 5 | 6 | 7 |

元素名称返回小写

8 | 11 | 12 | -------------------------------------------------------------------------------- /1/1.4/2/9.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 属性值 5 | 6 | 7 |

属性值用引号包裹

8 | 9 | 10 | -------------------------------------------------------------------------------- /1/1.4/2/9.xhtml: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 属性值 5 | 6 | 7 |

属性值用引号包裹

8 | 9 | 10 | -------------------------------------------------------------------------------- /2/2.10/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 2.10-question.1 5 | 6 | 7 | 11 | 12 | -------------------------------------------------------------------------------- /2/2.12/2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 2.12-2 5 | 6 | 7 | 8 | 12 | 13 | -------------------------------------------------------------------------------- /2/2.12/2/child.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 13 | 14 | -------------------------------------------------------------------------------- /2/2.2/1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 2.2-1 5 | 6 | 7 |

Pwstrick

8 | 9 | -------------------------------------------------------------------------------- /2/2.2/2.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 2.2-2.4 5 | 6 | 7 |

文本应该是黑色，如果不是黑色，则当前浏览器不支持属性scoped

8 |
9 | 14 |

文本应该是红色

15 |
16 |

文本应该是黑色，如果不是黑色，则当前浏览器不支持属性scoped

17 | 18 | -------------------------------------------------------------------------------- /2/2.2/2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 2.2-2 5 | 10 | 11 | 12 |

Pwstrick

13 | 14 | -------------------------------------------------------------------------------- /2/2.2/3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 2.2-3 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /2/2.2/3/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /2/2.3/1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 2.3-1 5 | 6 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /2/2.3/1/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/2/2.3/1/style.css -------------------------------------------------------------------------------- /2/2.3/3.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 2.3-3.1 5 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /2/2.3/3.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 2.3-3.2 5 | 6 | 7 | 点击 8 | 点击 9 | 10 | -------------------------------------------------------------------------------- /2/2.4/1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 2.4-1 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /2/2.5/1.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 2.5-1.2 5 | 6 | 7 | 绝对地址 8 | 相对地址 9 | 10 | -------------------------------------------------------------------------------- /2/2.5/1.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 2.5-1.3 5 | 6 | 7 | 返回顶部 8 | 内部定位 9 | 外部定位 10 | 11 | -------------------------------------------------------------------------------- /2/2.6/3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 2.6-3 5 | 6 | 7 |
8 | 9 |
头像照片, 2017/06/18
10 |
11 | 12 | -------------------------------------------------------------------------------- /2/2.7/2.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 2.7-2.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /2/2.7/2.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 2.7-2.2 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /2/2.9/1.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 2.9-1.1 5 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /2/2.9/1.1/iframe.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | iframe内嵌 5 | 6 | 7 |

改变文字颜色

8 | 9 | -------------------------------------------------------------------------------- /2/2.9/1.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 2.9-1.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /2/2.9/1.2/iframe.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | iframe内嵌 5 | 6 | 7 |
8 |
9 | 10 | 11 |
12 |
13 | 14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /2/2.9/2/iframe.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | iframe内嵌 5 | 6 | 7 |

内容

8 | 9 | -------------------------------------------------------------------------------- /2/2.9/2/upload/2018/01/31/15173852723517.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/2/2.9/2/upload/2018/01/31/15173852723517.png -------------------------------------------------------------------------------- /2/2.9/2/upload/2018/01/31/15173853531095.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/2/2.9/2/upload/2018/01/31/15173853531095.png -------------------------------------------------------------------------------- /3/3.10/1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.10-1 5 | 6 | 7 | 8 |

红色

9 | 10 | -------------------------------------------------------------------------------- /3/3.10/1/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | color: red; 3 | /* 等价于 */ 4 | color: RED; 5 | } -------------------------------------------------------------------------------- /3/3.10/2.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.10-2.1 5 | 6 | 7 | 8 |

红色

9 | 10 | -------------------------------------------------------------------------------- /3/3.10/2.1/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | color: #FF0000; 3 | color: #F00; 4 | } -------------------------------------------------------------------------------- /3/3.10/2.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.10-2.2 5 | 6 | 7 | 8 |

红色

9 | 10 | -------------------------------------------------------------------------------- /3/3.10/2.2/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | color: rgb(255, 0, 0); 3 | } 4 | p { 5 | color: rgb(100%, 0%, 0%); 6 | } 7 | p { 8 | color: rgba(255, 0, 0, .5); 9 | } -------------------------------------------------------------------------------- /3/3.10/3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.10-3 5 | 6 | 7 | 8 |

红色

9 | 10 | -------------------------------------------------------------------------------- /3/3.10/3/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | color: hsl(0, 100%, 50%); 3 | } 4 | p { 5 | color: hsla(0, 100%, 50%, .5); 6 | } -------------------------------------------------------------------------------- /3/3.10/4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.10-4 5 | 6 | 7 | 8 |

红色

9 | 10 | -------------------------------------------------------------------------------- /3/3.10/4/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | color: rgb(255, 0, 0); 3 | color: rgb(100%, 0%, 0%); 4 | } 5 | 6 | p { 7 | color: FF6600; 8 | } -------------------------------------------------------------------------------- /3/3.2/1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.2-1 5 | 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /3/3.2/1/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | padding: 10px; 3 | margin: 10px; 4 | border: 1px solid #000; 5 | width: 100px; 6 | } -------------------------------------------------------------------------------- /3/3.2/3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.2-3 5 | 6 | 7 | 8 |
块级元素
9 | 行内元素 10 | 11 | -------------------------------------------------------------------------------- /3/3.2/3/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | padding: 10px; 3 | border: 1px solid #000; 4 | width: 400px; 5 | text-align: center; 6 | } 7 | span { 8 | border: 1px solid #000; 9 | margin: 10px 0; 10 | padding: 10px 0; 11 | width: 300px; 12 | height: 100px; 13 | } -------------------------------------------------------------------------------- /3/3.2/question-1/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | div { 5 | background: #FF6600; 6 | width: 100px; 7 | height: 100px; 8 | } 9 | div div { 10 | background: #FFCC00; 11 | } -------------------------------------------------------------------------------- /3/3.3/1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.3-1 5 | 6 | 7 | 8 |
列表项1
9 |
列表项2
10 |
列表项3
11 | 12 | -------------------------------------------------------------------------------- /3/3.3/1/style.css: -------------------------------------------------------------------------------- 1 | .d-list { 2 | display: list-item; 3 | list-style-position: inside; 4 | list-style-type: circle; 5 | } -------------------------------------------------------------------------------- /3/3.3/3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.3-3 5 | 6 | 7 | 8 |

相邻的兄弟元素是块级元素

9 | 10 | 兄弟元素的第一个行内元素 11 | 12 |

相邻的兄弟元素是块级元素

13 | 14 | -------------------------------------------------------------------------------- /3/3.3/3/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/3/3.3/3/style.css -------------------------------------------------------------------------------- /3/3.3/4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.3-4 5 | 6 | 7 | 8 |
9 | 行内块元素 10 | 行内块元素 11 | 行内块元素 12 |
13 | 14 | -------------------------------------------------------------------------------- /3/3.3/4/style.css: -------------------------------------------------------------------------------- 1 | .d-inline-block { 2 | display: inline-block; 3 | border: 1px solid #000; 4 | letter-spacing: 0; 5 | } -------------------------------------------------------------------------------- /3/3.3/5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.3-5 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /3/3.3/5/style.css: -------------------------------------------------------------------------------- 1 | .flex { 2 | display: -webkit-box; 3 | display: -webkit-flex; 4 | display: -ms-flexbox; 5 | display: flex; 6 | } -------------------------------------------------------------------------------- /3/3.3/question-1/lake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/3/3.3/question-1/lake.png -------------------------------------------------------------------------------- /3/3.3/question-1/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/3/3.3/question-1/style.css -------------------------------------------------------------------------------- /3/3.4/2.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.4-2.3 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /3/3.5/2.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.5-2.1 5 | 6 | 7 | 8 |
9 | 13 |
14 | 15 | -------------------------------------------------------------------------------- /3/3.5/2.1/style.css: -------------------------------------------------------------------------------- 1 | ul, li { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | .bfc li { 7 | color: red; 8 | } 9 | 10 | .bfc > ul {} -------------------------------------------------------------------------------- /3/3.5/2.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.5-2.3 5 | 6 | 7 | 8 |
9 |
与bfc是相邻关系
10 |
与bfc是兄弟关系
11 | 12 | -------------------------------------------------------------------------------- /3/3.5/2.3/style.css: -------------------------------------------------------------------------------- 1 | ul, li { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | /* 兄弟选择器 */ 8 | .bfc ~ div { 9 | color: blue; 10 | } 11 | /* 相邻选择器 */ 12 | .bfc + div { 13 | color: red; 14 | } 15 | -------------------------------------------------------------------------------- /3/3.5/question-3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.5-question.3 5 | 6 | 7 | 8 |
9 | 第一个span元素 10 |

第一个p元素

11 |

第二个p元素

12 |
13 | 14 | -------------------------------------------------------------------------------- /3/3.5/question-3/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/3/3.5/question-3/style.css -------------------------------------------------------------------------------- /3/3.6/2.1/style.css: -------------------------------------------------------------------------------- 1 | ul, li { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | input[type="date"] { 7 | position: relative; 8 | } 9 | input[type="date"]::before { 10 | content: attr(placeholder); 11 | color: #bbb; 12 | position: absolute; 13 | left: 5px; 14 | top: 0; 15 | } 16 | 17 | -------------------------------------------------------------------------------- /3/3.6/2.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.6-2.2 5 | 6 | 7 | 8 |
外部资源
9 | 10 | -------------------------------------------------------------------------------- /3/3.6/2.2/lake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/3/3.6/2.2/lake.png -------------------------------------------------------------------------------- /3/3.6/2.2/style.css: -------------------------------------------------------------------------------- 1 | div::before { 2 | content: url(lake.png); 3 | } -------------------------------------------------------------------------------- /3/3.6/3.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.6-3.2 5 | 6 | 7 | 8 |

这个位置有尖括号

9 | 10 | -------------------------------------------------------------------------------- /3/3.6/3.2/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | quotes: "<" ">"; 3 | } 4 | p::before { 5 | content: open-quote; 6 | } 7 | p::after { 8 | content: close-quote; 9 | } -------------------------------------------------------------------------------- /3/3.7/2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.7-2 5 | 6 | 7 | 8 |

文字颜色

9 | 10 | -------------------------------------------------------------------------------- /3/3.7/2/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | color: #FFCC00 !important; 3 | } 4 | p { 5 | color: #FF6600; 6 | } -------------------------------------------------------------------------------- /3/3.7/3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.7-3 5 | 6 | 7 | 8 |
9 |

文字颜色

10 |
11 | 12 | -------------------------------------------------------------------------------- /3/3.7/3/style.css: -------------------------------------------------------------------------------- 1 | .bfc p { 2 | color: #FFCC00; 3 | } 4 | #bfc p { 5 | color: #FF6600; 6 | } 7 | 8 | -------------------------------------------------------------------------------- /3/3.7/4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.7-4 5 | 6 | 7 | 8 |
9 |

文字颜色

10 |
11 | 12 | -------------------------------------------------------------------------------- /3/3.7/4/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | line-height: 1.4; 3 | color: #333; 4 | } 5 | * { 6 | color: #FFCC00; 7 | } 8 | div { 9 | color: #FF6600; 10 | } 11 | div { 12 | padding: 10px; 13 | } 14 | div p { 15 | padding: inherit; 16 | } -------------------------------------------------------------------------------- /3/3.7/5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.7-5 5 | 6 | 7 | 8 |
9 |

文字颜色

10 |
11 | 12 | -------------------------------------------------------------------------------- /3/3.7/5/style.css: -------------------------------------------------------------------------------- 1 | .bfc p { 2 | color: #FFCC00; 3 | } 4 | .ovh p { 5 | color: #FF6600; 6 | } 7 | 8 | -------------------------------------------------------------------------------- /3/3.7/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.7-question.1 5 | 6 | 7 | 8 | 链接 9 | 10 | -------------------------------------------------------------------------------- /3/3.7/question-1/style.css: -------------------------------------------------------------------------------- 1 | a:link { 2 | color: blue; 3 | } 4 | a:visited { 5 | color: red; 6 | } 7 | a:hover { 8 | color: green; 9 | } 10 | a:active { 11 | color: yellow; 12 | } -------------------------------------------------------------------------------- /3/3.8/2.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.8-2.3 5 | 6 | 7 | 8 |

9 | 字体大小设置为一半 10 |

11 | 12 | -------------------------------------------------------------------------------- /3/3.8/2.3/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-size: 32px; 3 | } 4 | p span { 5 | font-size: 1ex; 6 | } -------------------------------------------------------------------------------- /3/3.8/2.6/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.8-2.6 5 | 6 | 7 | 8 |

9 |

0000000000

10 | 11 | -------------------------------------------------------------------------------- /3/3.8/2.6/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | .ch-font { 5 | width: 10ch; 6 | height: 20px; 7 | background: #FF6600; 8 | } -------------------------------------------------------------------------------- /3/3.8/2.7/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.8-2.7 5 | 6 | 7 | 8 |
9 |
10 |
11 | 12 | -------------------------------------------------------------------------------- /3/3.8/2.7/style.css: -------------------------------------------------------------------------------- 1 | section { 2 | margin: 6px; 3 | background: #FF6600; 4 | } 5 | section div { 6 | width: 50vw; 7 | height: 50vh; 8 | background: #FFCC00; 9 | } -------------------------------------------------------------------------------- /3/3.8/2.8/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.8-2.8 5 | 6 | 7 | 8 |
9 |
10 |
11 | 12 | -------------------------------------------------------------------------------- /3/3.8/2.8/style.css: -------------------------------------------------------------------------------- 1 | section { 2 | margin: 6px; 3 | background: #FF6600; 4 | } 5 | section div { 6 | width: 10vmax; 7 | height: 10vmin; 8 | background: #FFCC00; 9 | } -------------------------------------------------------------------------------- /3/3.8/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.8-question.1 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /3/3.8/question-1/style.css: -------------------------------------------------------------------------------- 1 | section { 2 | border: 1px solid #000; 3 | overflow: hidden; 4 | } 5 | div { 6 | background: #FF6600; 7 | height: 100px; 8 | border: 1px solid #FFCC00; 9 | float: left; 10 | } 11 | div { 12 | width: calc(50% - 2px); 13 | } -------------------------------------------------------------------------------- /3/3.9/1.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.9-1.3 5 | 6 | 7 | 8 |
9 |

10 |
11 | 12 | -------------------------------------------------------------------------------- /3/3.9/1.3/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | border: 1px solid #000; 3 | } 4 | div p { 5 | background: #FF6600; 6 | width: 30px; 7 | height: 30px; 8 | margin: 0; 9 | } 10 | div { 11 | width: 200px; 12 | height: 100px; 13 | position: relative; 14 | } 15 | div p { 16 | position: absolute; 17 | left: 50%; 18 | top: 50%; 19 | } -------------------------------------------------------------------------------- /3/3.9/2.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.9-2.1 5 | 6 | 7 | 8 |
9 |

10 |
11 | 12 | -------------------------------------------------------------------------------- /3/3.9/2.1/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | border: 1px solid #000; 3 | } 4 | div > p { 5 | background: #FF6600; 6 | width: 30px; 7 | height: 30px; 8 | margin: 0; 9 | } 10 | div { 11 | width: 200px; 12 | height: 100px; 13 | } 14 | div > p { 15 | height: 50%; 16 | } -------------------------------------------------------------------------------- /3/3.9/2.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.9-2.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /3/3.9/2.2/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | background: #FF6600; 4 | } 5 | -------------------------------------------------------------------------------- /3/3.9/3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.9-3 5 | 6 | 7 | 8 |
9 |

10 |
11 | 12 | -------------------------------------------------------------------------------- /3/3.9/3/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | border: 1px solid #000; 3 | } 4 | div > p { 5 | background: #FF6600; 6 | width: 30px; 7 | height: 30px; 8 | margin: 0; 9 | } 10 | div { 11 | width: 200px; 12 | height: 100px; 13 | } 14 | div > p { 15 | margin: 10%; 16 | padding: 10%; 17 | } -------------------------------------------------------------------------------- /3/3.9/4.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.9-4.1 5 | 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /3/3.9/4.1/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | width: 200px; 3 | height: 100px; 4 | border: 1px solid #000; 5 | /* border-radius: 50%; */ 6 | border-radius: 100px / 50px; 7 | } -------------------------------------------------------------------------------- /3/3.9/4.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.9-4.2 5 | 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /3/3.9/4.2/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | background: #000; 3 | box-sizing: border-box; 4 | width: 200px; 5 | height: 100px; 6 | padding: 10px; 7 | transform: translate(50%, 50%); 8 | } -------------------------------------------------------------------------------- /3/3.9/5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.9-5 5 | 6 | 7 | 8 |
9 |

设置字体

10 |
11 | 12 | -------------------------------------------------------------------------------- /3/3.9/5/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | font-size: 36px; 3 | } 4 | div > p { 5 | font-size: 50%; 6 | } -------------------------------------------------------------------------------- /3/3.9/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 3.9-question.1 5 | 6 | 7 | 8 |
9 |

设置字体

10 |
11 | 12 | -------------------------------------------------------------------------------- /3/3.9/question-1/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | font-size: 18px; 3 | line-height: 14px; 4 | } 5 | div p { 6 | line-height: 50%; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /4/4.1/1.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.1-1.2 5 | 6 | 7 | 8 |
9 |

浮动元素之前的内容

10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /4/4.1/1.2/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | div { 5 | margin-bottom: 20px; 6 | } 7 | div { 8 | width: 50px; 9 | height: 50px; 10 | background: #FFCC00; 11 | } 12 | section { 13 | width: 200px; 14 | height: 150px; 15 | border: 1px solid #000; 16 | padding: 10px; 17 | box-sizing: border-box; 18 | } 19 | -------------------------------------------------------------------------------- /4/4.1/1.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.1-1.3 5 | 6 | 7 | 8 |
9 |
10 |
11 | 12 | -------------------------------------------------------------------------------- /4/4.1/1.3/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | div { 5 | margin-bottom: 20px; 6 | } 7 | div { 8 | width: 80px; 9 | height: 80px; 10 | background: #FFCC00; 11 | } 12 | section { 13 | width: 200px; 14 | height: 50px; 15 | border: 1px solid #000; 16 | padding: 10px; 17 | } 18 | -------------------------------------------------------------------------------- /4/4.1/3.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.1-3.1 5 | 6 | 7 | 8 |
9 |
10 |
11 | 12 | -------------------------------------------------------------------------------- /4/4.1/3.1/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | div { 5 | margin-bottom: 20px; 6 | } 7 | div { 8 | width: 80px; 9 | height: 80px; 10 | background: #FFCC00; 11 | } 12 | section { 13 | width: 200px; 14 | height: 100px; 15 | border: 1px solid #000; 16 | padding: 10px; 17 | margin-top: 50px; 18 | } 19 | -------------------------------------------------------------------------------- /4/4.1/3.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.1-3.2 5 | 6 | 7 | 8 |
9 |
10 | 行内与浮动 11 |
12 |
13 |
14 |

块级与浮动

15 |
16 | 17 | -------------------------------------------------------------------------------- /4/4.1/4.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.1-4.1 5 | 6 | 7 | 8 |
9 |
10 |
11 | 12 | -------------------------------------------------------------------------------- /4/4.1/4.1/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | section { 5 | width: 200px; 6 | padding: 10px; 7 | border: 1px solid #000; 8 | margin-bottom: 20px; 9 | } 10 | div { 11 | width: 50px; 12 | height: 50px; 13 | background: #FFCC00; 14 | } 15 | -------------------------------------------------------------------------------- /4/4.1/4.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.1-4.2 5 | 6 | 7 | 8 |
9 |
10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /4/4.1/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.1-question.1 5 | 6 | 7 | 8 |
9 |
10 |

已设置上外边距

11 |
12 | 13 | -------------------------------------------------------------------------------- /4/4.1/summary/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.1-summary 5 | 6 | 7 | 8 |
9 |
10 |

浮动环绕浮动环绕浮动环绕浮动环绕浮动环绕浮动环绕浮动环绕浮动环绕浮动环绕浮动环绕浮动环绕浮动环绕浮动环绕浮动环绕

11 |
12 | 13 | -------------------------------------------------------------------------------- /4/4.1/summary/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | section { 5 | overflow: hidden; 6 | width: 200px; 7 | height: 150px; 8 | border: 1px solid #000; 9 | } 10 | div { 11 | width: 100px; 12 | height: 100px; 13 | background: #FFCC00; 14 | float: left; 15 | } -------------------------------------------------------------------------------- /4/4.2/1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.2-1 5 | 6 | 7 | 8 |
9 | 改变相对定位的位置，改变 10 | 11 | 相对定位的位置 12 | ，改变相对定位的位置。 13 |
14 | 15 | -------------------------------------------------------------------------------- /4/4.2/2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.2-2 5 | 6 | 7 | 8 |
9 | 改变绝对定位的位置，改变 10 | 绝对定位的位置 11 | ，改变绝对定位的位置。 12 |
13 | 14 | -------------------------------------------------------------------------------- /4/4.2/2/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | div { 5 | margin-bottom: 20px; 6 | width: 200px; 7 | height: 100px; 8 | border: 1px solid #000; 9 | position: relative; 10 | } 11 | span { 12 | position: absolute; 13 | top: 10px; 14 | left: 20px; 15 | width: 70px; 16 | height: 50px; 17 | background: #CCC; 18 | } -------------------------------------------------------------------------------- /4/4.2/3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.2-3 5 | 6 | 7 | 8 |
9 | 改变固定定位的位置，改变 10 | 固定定位的位置 11 | ，改变固定定位的位置。 12 |
13 | 14 | -------------------------------------------------------------------------------- /4/4.2/4.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.2-4.1 5 | 6 | 7 | 8 |
9 | 改变绝对定位的位置，改变 10 | 绝对定位的位置 11 | ，改变绝对定位的位置。 12 |
13 | 14 | -------------------------------------------------------------------------------- /4/4.2/4.1/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | div { 5 | margin: 50px; 6 | width: 200px; 7 | height: 100px; 8 | border: 1px solid #000; 9 | position: relative; 10 | } 11 | span { 12 | margin-top: 10px; 13 | position: absolute; 14 | top: 10px; 15 | left: -20px; 16 | width: 70px; 17 | height: 50px; 18 | background: #CCC; 19 | } -------------------------------------------------------------------------------- /4/4.2/4.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.2-4.2 5 | 6 | 7 | 8 |
9 | 改变绝对定位的位置，改变 10 | 绝对定位的位置 11 | ，改变绝对定位的位置。 12 |
13 | 14 | -------------------------------------------------------------------------------- /4/4.2/4.2/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | div { 5 | margin: 50px; 6 | width: 200px; 7 | height: 100px; 8 | border: 1px solid #000; 9 | position: relative; 10 | } 11 | span { 12 | position: absolute; 13 | top: 10px; 14 | bottom: 10px; 15 | left: 20px; 16 | right: 20px; 17 | background: #CCC; 18 | } -------------------------------------------------------------------------------- /4/4.2/4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.2-4 5 | 6 | 7 | 8 |
9 | 改变绝对定位的位置，改变 10 | 绝对定位的位置 11 | ，改变绝对定位的位置。 12 |
13 | 14 | -------------------------------------------------------------------------------- /4/4.2/4/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | div { 5 | margin-bottom: 20px; 6 | width: 200px; 7 | height: 100px; 8 | border: 1px solid #000; 9 | position: relative; 10 | } 11 | span { 12 | margin-top: 10px; 13 | position: absolute; 14 | top: 10px; 15 | left: 20px; 16 | width: 70px; 17 | height: 50px; 18 | background: #CCC; 19 | } -------------------------------------------------------------------------------- /4/4.2/5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.2-5 5 | 6 | 7 | 8 |
9 | 改变绝对定位的位置，改变 10 | 灰色背景的位置 ，改变 11 |

黄色背景的位置

。 12 |
13 | 14 | -------------------------------------------------------------------------------- /4/4.3/2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.3-2 5 | 6 | 7 | 8 |
9 |

thin

10 |

medium

11 |

thick

12 |
13 | 14 | -------------------------------------------------------------------------------- /4/4.3/2/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | p { 5 | margin-bottom: 10px; 6 | width: 100px; 7 | text-align: center; 8 | display: inline-block; 9 | padding: 5px; 10 | } 11 | .border-thin { 12 | border: thin solid; 13 | } 14 | .border-medium { 15 | border: medium solid; 16 | } 17 | .border-thick { 18 | border: thick solid; 19 | } -------------------------------------------------------------------------------- /4/4.3/4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.3-4 5 | 6 | 7 | 8 |
9 |
10 |
11 | 12 | -------------------------------------------------------------------------------- /4/4.3/5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.3-5 5 | 6 | 7 | 8 |
9 |
10 | 11 | -------------------------------------------------------------------------------- /4/4.3/5/style.css: -------------------------------------------------------------------------------- 1 | .border { 2 | margin: 50px 20px; 3 | width: 100px; 4 | height: 50px; 5 | border: 5px solid #000; 6 | box-shadow: 0 0 0 5px #CCC, 7 | 0 0 0 10px #FC0, 8 | 0 0 0 5px #F00 inset; 9 | } 10 | .border-radius { 11 | border-radius: 10px; 12 | } -------------------------------------------------------------------------------- /4/4.3/6/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.3-6 5 | 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /4/4.3/6/style.css: -------------------------------------------------------------------------------- 1 | .border { 2 | margin: 50px 20px; 3 | width: 100px; 4 | height: 50px; 5 | border: 5px solid #000; 6 | outline: 5px solid #FC0; 7 | border-radius: 10px; 8 | } -------------------------------------------------------------------------------- /4/4.3/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.3-question.1 5 | 6 | 7 | 8 |
border:none
9 |
border:0
10 | 11 | -------------------------------------------------------------------------------- /4/4.3/question-1/style.css: -------------------------------------------------------------------------------- 1 | .border-none { 2 | width: 200px; 3 | padding: 25px 0; 4 | color: #FF6600; 5 | border: none; 6 | border-style: solid; 7 | text-align: center; 8 | margin: 20px; 9 | } 10 | .border-zero { 11 | width: 200px; 12 | padding: 25px 0; 13 | margin: 20px; 14 | border: 0; 15 | text-align: center; 16 | } -------------------------------------------------------------------------------- /4/4.3/summary/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.3-summary 5 | 6 | 7 | 8 |
9 |

左边框

10 |

上边框

11 |

下边框

12 |

右边框

13 |
14 | 15 | -------------------------------------------------------------------------------- /4/4.4/1.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.4-1.1 5 | 6 | 7 | 8 |

内容裁剪内容裁剪内容裁剪内容裁剪

9 | 10 | -------------------------------------------------------------------------------- /4/4.4/1.1/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | p { 5 | width: 100px; 6 | height: 50px; 7 | border: 1px solid; 8 | margin-bottom: 30px; 9 | } 10 | -------------------------------------------------------------------------------- /4/4.4/1.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.4-1.2 5 | 6 | 7 | 8 |

内容裁剪内容裁剪内容裁剪内容裁剪

9 | 10 | -------------------------------------------------------------------------------- /4/4.4/1.2/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | p { 5 | width: 100px; 6 | height: 50px; 7 | border: 1px solid; 8 | margin-bottom: 30px; 9 | } 10 | .overflow-hidden { 11 | overflow: hidden; 12 | border-radius: 10px; 13 | } -------------------------------------------------------------------------------- /4/4.4/1.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.4-1.3 5 | 6 | 7 | 8 |

内容裁剪内容裁剪内容裁剪内容裁剪内容裁剪内容裁剪内容裁剪内容裁剪

9 | 10 | -------------------------------------------------------------------------------- /4/4.4/1.3/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | p { 5 | width: 100px; 6 | height: 50px; 7 | border: 1px solid; 8 | margin-bottom: 30px; 9 | } 10 | .overflow-scroll { 11 | height: 80px; 12 | /*overflow: scroll;*/ 13 | overflow-y: scroll; 14 | } -------------------------------------------------------------------------------- /4/4.4/1.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.4-1.4 5 | 6 | 7 | 8 |

内容裁剪内容裁剪内容裁剪内容裁剪内容裁剪内容裁剪内容裁剪内容裁剪

9 | 10 | -------------------------------------------------------------------------------- /4/4.4/1.4/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | p { 5 | width: 100px; 6 | height: 50px; 7 | border: 1px solid; 8 | margin-bottom: 30px; 9 | } 10 | .overflow-scroll { 11 | height: 80px; 12 | overflow: auto; 13 | } -------------------------------------------------------------------------------- /4/4.4/4.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.4-4.1 5 | 6 | 7 | 8 |

链接地址https://www.pwstrick.com/2017/08/30/index.html

9 | 10 | -------------------------------------------------------------------------------- /4/4.4/4.1/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | p { 6 | width: 150px; 7 | border: 1px solid #CCC; 8 | margin-bottom: 10px; 9 | } 10 | .word-wrap { 11 | word-wrap: break-word; 12 | } -------------------------------------------------------------------------------- /4/4.4/4.2/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | p { 6 | width: 150px; 7 | border: 1px solid #CCC; 8 | margin: 30px; 9 | } 10 | .word-break-break { 11 | word-break: break-all; 12 | } 13 | .word-break-keep { 14 | word-break: keep-all; 15 | } -------------------------------------------------------------------------------- /4/4.4/4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.4-4 5 | 6 | 7 | 8 |

https://www.pwstrick.com/2017/08/30/index.html

9 | 10 | -------------------------------------------------------------------------------- /4/4.4/4/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | p { 6 | width: 150px; 7 | border: 1px solid #CCC; 8 | margin-bottom: 10px; 9 | } 10 | -------------------------------------------------------------------------------- /4/4.4/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.4-question.1 5 | 6 | 7 | 8 |

clip 在内容区域的极限处截断文本

9 |

ellipsis 在内容区域的极限处截断文本

10 |

<string> 在内容区域的极限处截断文本

11 | 12 | -------------------------------------------------------------------------------- /4/4.6/2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.6-2 5 | 6 | 7 | 8 |
9 | 备注： 10 | 11 | My name is pwstrtick 12 |
13 | 14 | -------------------------------------------------------------------------------- /4/4.6/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.6-question.1 5 | 6 | 7 | 8 |

9 | My name is pwstrtick 10 |

11 |

12 | My name is pwstrtick 13 |

14 | 15 | -------------------------------------------------------------------------------- /4/4.6/summary/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.6-summary 5 | 6 | 7 | 8 |

9 | 备注：My name is pwstrtick 10 |

11 | 12 | -------------------------------------------------------------------------------- /4/4.6/summary/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | p { 5 | margin-bottom: 10px; 6 | } 7 | -------------------------------------------------------------------------------- /4/4.7/3.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.7-3.1 5 | 6 | 7 | 8 |
9 |

scroll
（默认值）

10 |
11 | 12 | -------------------------------------------------------------------------------- /4/4.7/3.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.7-3.2 5 | 6 | 7 | 8 |
9 |

local

10 |
11 | 12 | -------------------------------------------------------------------------------- /4/4.7/3.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.7-3.3 5 | 6 | 7 | 8 |
9 |

fixed

10 |
11 | 12 | -------------------------------------------------------------------------------- /4/4.7/4.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.7-4.1 5 | 6 | 7 | 8 |
9 |

关键字

10 |
11 | 12 | -------------------------------------------------------------------------------- /4/4.7/4.1/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | div { 5 | width: 100px; 6 | height: 100px; 7 | padding: 25px; 8 | background: url(../../../assets/img/lake.png) no-repeat; 9 | text-align: center; 10 | border: 1px solid #000; 11 | background-position: right top; 12 | } 13 | div p { 14 | margin-top: 40%; 15 | color: #FFF; 16 | } 17 | -------------------------------------------------------------------------------- /4/4.7/4.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.7-4.2 5 | 6 | 7 | 8 |
9 |

长度

10 |
11 | 12 | -------------------------------------------------------------------------------- /4/4.7/4.2/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | div { 5 | width: 100px; 6 | height: 100px; 7 | padding: 25px; 8 | background: url(../../../assets/img/lake.png) no-repeat; 9 | text-align: center; 10 | border: 1px solid #000; 11 | background-position: 10px 20px; 12 | } 13 | div p { 14 | margin-top: 40%; 15 | color: #FFF; 16 | } 17 | -------------------------------------------------------------------------------- /4/4.7/4.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.7-4.3 5 | 6 | 7 | 8 |
9 |

长度

10 |
11 | 12 | -------------------------------------------------------------------------------- /4/4.7/4.3/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | div { 5 | width: 100px; 6 | height: 100px; 7 | padding: 25px; 8 | background: url(../../../assets/img/lake.png) no-repeat; 9 | text-align: center; 10 | border: 1px solid #000; 11 | background-position: 60% 20%; 12 | } 13 | div p { 14 | margin-top: 40%; 15 | color: #FFF; 16 | } 17 | -------------------------------------------------------------------------------- /4/4.7/5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.7-5 5 | 6 | 7 | 8 |
9 |

background

10 |
11 | 12 | -------------------------------------------------------------------------------- /4/4.8/2.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.8-2.1 5 | 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /4/4.8/2.1/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | .transition { 5 | width: 100px; 6 | height: 100px; 7 | background: #FC0; 8 | padding: 10px; 9 | transition: transform 500ms ease-out 1s, 10 | background 500ms ease-out; 11 | margin: 50px; 12 | } 13 | .transition:hover { 14 | transform: rotate(30deg); 15 | } -------------------------------------------------------------------------------- /4/4.8/3.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.8-3.2 5 | 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /4/4.9/1.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.9-1.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /4/4.9/1.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.9-1.2 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /4/4.9/1.2/style.css: -------------------------------------------------------------------------------- 1 | @media all and (max-width:600px) { 2 | /* 样式 */ 3 | } 4 | -------------------------------------------------------------------------------- /4/4.9/3.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.9-3.3 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /4/4.9/3.3/style.css: -------------------------------------------------------------------------------- 1 | @media print and (min-resolution:326dpi) { 2 | } -------------------------------------------------------------------------------- /4/4.9/3.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.9-3.4 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /4/4.9/3.4/style.css: -------------------------------------------------------------------------------- 1 | @media only screen and (-webkit-min-device-pixel-ratio:2), 2 | only screen and (min-device-pixel-ratio:2) { 3 | } -------------------------------------------------------------------------------- /4/4.9/4.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.9-4.1 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /4/4.9/4.1/style.css: -------------------------------------------------------------------------------- 1 | @media tv,screen and (max-width:600px) { 2 | } 3 | /* 相当于下面的两条媒体查询 */ 4 | @media tv { 5 | } 6 | @media screen and (max-width:600px) { 7 | } -------------------------------------------------------------------------------- /4/4.9/4.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.9-4.2 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /4/4.9/4.2/style.css: -------------------------------------------------------------------------------- 1 | @media screen and (max-width:600px) and (orientation:landscape) { 2 | } -------------------------------------------------------------------------------- /4/4.9/4.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.9-4.3 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /4/4.9/4.3/style.css: -------------------------------------------------------------------------------- 1 | @media only screen and (max-width:600px) { 2 | } 3 | 4 | -------------------------------------------------------------------------------- /4/4.9/4.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.9-4.4 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /4/4.9/4.4/style.css: -------------------------------------------------------------------------------- 1 | @media not screen and (max-width:600px) { 2 | } -------------------------------------------------------------------------------- /4/4.9/5.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.9-5.1 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /4/4.9/5.1/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/4/4.9/5.1/style.css -------------------------------------------------------------------------------- /4/4.9/5.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 4.9-5.2 5 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /5/5.1/2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.1-2 5 | 6 | 7 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /5/5.1/3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.1-3 5 | 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /5/5.1/3/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | width: 20px !important; 3 | width: 10px; 4 | } 5 | 6 | div { 7 | width: 20px !important; 8 | } 9 | div { 10 | width: 10px; 11 | } -------------------------------------------------------------------------------- /5/5.2/3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.2-3 5 | 6 | 7 | 8 |
9 |
left
10 |
right
11 |
12 | 13 | -------------------------------------------------------------------------------- /5/5.2/4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.2-4 5 | 6 | 7 | 8 |
9 |
left
10 |
right
11 |
12 | 13 | -------------------------------------------------------------------------------- /5/5.2/5.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.2-5.1 5 | 6 | 7 | 8 |
9 |

这是一个标题

10 | 报纸排版和杂志排版报纸排版和杂志排版报纸排版和杂志排版报纸排版和杂志排版报纸排版和杂志排版 11 |
12 | 13 | -------------------------------------------------------------------------------- /5/5.2/5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.2-5 5 | 6 | 7 | 8 |
9 | 报纸排版和杂志排版报纸排版和杂志排版报纸排版和杂志排版报纸排版和杂志排版报纸排版和杂志排版 10 |
11 | 12 | -------------------------------------------------------------------------------- /5/5.2/5/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | margin: 20px; 3 | } 4 | .column-origin { 5 | column-count: 3; 6 | column-gap: 5px; 7 | border: 2px solid #000; 8 | width: 200px; 9 | margin-bottom: 20px; 10 | overflow: hidden; 11 | padding: 5px; 12 | text-align: center; 13 | } -------------------------------------------------------------------------------- /5/5.2/6.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.2-6.1 5 | 6 | 7 | 8 |
9 |
左右两边的高度将自适应一直相等。
10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /5/5.2/6.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.2-6.2 5 | 6 | 7 | 8 |
9 |
左右两边的高度将自适应一直相等。
10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /5/5.3/1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.3-1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /5/5.3/1/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } -------------------------------------------------------------------------------- /5/5.3/2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.3-2 5 | 6 | 7 | 8 |
9 | 链接到主页 10 | 链接到列表 11 | 链接到详情 12 |
13 | 14 | -------------------------------------------------------------------------------- /5/5.4/3.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.4-3.2 5 | 6 | 7 | 8 |
9 |
1
10 |
2
11 |
3
12 |
13 | 14 | -------------------------------------------------------------------------------- /5/5.4/3.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.4-3.3 5 | 6 | 7 | 8 |
9 |
1
10 |
2
11 |
3
12 |
13 | 14 | -------------------------------------------------------------------------------- /5/5.5/1.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.5-1.2 5 | 6 | 7 | 8 |
9 | 10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /5/5.5/1.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.5-1.3 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 | 15 | -------------------------------------------------------------------------------- /5/5.5/1.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.5-1.4 5 | 6 | 7 | 8 |
9 |
10 |
11 | 12 | -------------------------------------------------------------------------------- /5/5.5/2.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.5-2.2 5 | 6 | 7 | 8 |
9 |

垂直居中

10 |
11 | 12 | -------------------------------------------------------------------------------- /5/5.5/2.2/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin: 0; 3 | } 4 | div { 5 | width: 200px; 6 | border: 2px solid #000; 7 | margin: 50px; 8 | position: relative; 9 | } 10 | .center-padding { 11 | padding: 50px 0; 12 | } -------------------------------------------------------------------------------- /5/5.5/2.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.5-2.3 5 | 6 | 7 | 8 |
9 | 10 |

垂直居中

11 |
12 | 13 | -------------------------------------------------------------------------------- /5/5.5/2.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.5-2.4 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 | 15 | -------------------------------------------------------------------------------- /5/5.5/2.5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.5-2.5 5 | 6 | 7 | 8 |
9 |
10 |
11 | 12 | -------------------------------------------------------------------------------- /5/5.5/summary/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5.5-summary 5 | 6 | 7 | 8 |
9 | 文本内容 10 |
11 | 12 | -------------------------------------------------------------------------------- /5/5.5/summary/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | width: 200px; 3 | border: 2px solid #000; 4 | margin: 50px; 5 | } 6 | .center-tc { 7 | text-align: center; 8 | padding: 5px; 9 | } 10 | -------------------------------------------------------------------------------- /5/5.7/2/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | border: 2px solid #000; 3 | display: inline-block; 4 | padding: 10px; 5 | margin: 50px; 6 | } -------------------------------------------------------------------------------- /5/5.7/4/style.css: -------------------------------------------------------------------------------- 1 | table { 2 | margin: 50px; 3 | } 4 | -------------------------------------------------------------------------------- /5/5.7/5.1/style.css: -------------------------------------------------------------------------------- 1 | section { 2 | margin: 50px; 3 | padding: 50px; 4 | } 5 | section input { 6 | margin-bottom: 10px; 7 | } -------------------------------------------------------------------------------- /5/5.7/5.2/style.css: -------------------------------------------------------------------------------- 1 | .form-container { 2 | width: 300px; 3 | } 4 | fieldset { 5 | border: 1px solid #000; 6 | padding: 10px; 7 | margin: 50px; 8 | } 9 | legend { 10 | margin: 0; 11 | width: auto; 12 | border: 0; 13 | } 14 | -------------------------------------------------------------------------------- /7/7.1/2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 标题 4 | 5 | 6 |

节点

7 | 8 | -------------------------------------------------------------------------------- /7/7.10/1.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.10-1.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/1.1/default.js: -------------------------------------------------------------------------------- 1 | var result1 = new Array(); 2 | var result2 = new Array(10); 3 | // var result2 = new Array(-1); 4 | var result3 = new Array(1, 2, 3); 5 | console.log(result1); 6 | console.log(result2); 7 | console.log(result3); 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/1.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.10-1.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/1.2/default.js: -------------------------------------------------------------------------------- 1 | var item = 1; 2 | var arr1 = [1, 2, 3]; //稠密数组 3 | var arr2 = [1, item + 1]; //元素是表达式 4 | var arr3 = [1, , 3]; //稀疏数组 5 | console.log(arr1); 6 | console.log(arr2); 7 | console.log(arr3); 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/2.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.10-2.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/2.1/default.js: -------------------------------------------------------------------------------- 1 | var arr = [1, 2, 3, 4, 5], 2 | index = 0; 3 | console.log(arr[0]); //1 4 | console.log(arr[index + 2]); //3 5 | console.log(arr[10]); //undefined 6 | -------------------------------------------------------------------------------- /7/7.10/2.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.10-2.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/2.2/default.js: -------------------------------------------------------------------------------- 1 | var arr = [1, 2, 3, 4, 5], 2 | index = 0; 3 | arr[3] = "strick"; 4 | arr[index + 4] = [6, 7]; 5 | 6 | arr["pw"] = "strick"; 7 | arr[-1] = "strick"; 8 | arr["3.14"] = "strick"; 9 | arr[10] = "strick"; 10 | console.log(arr); -------------------------------------------------------------------------------- /7/7.10/2.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.10-2.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/2.3/default.js: -------------------------------------------------------------------------------- 1 | var arr = [1, 2, 3, 4, 5]; 2 | arr.length = 3; //[1, 2, 3] 3 | arr.length = 0; //[] 清空数组 4 | 5 | var arr = [1, 2, 3, 4, 5]; 6 | console.log(2 in arr); //true 7 | delete arr[2]; //[1, 2, , 4, 5] 8 | console.log(arr); 9 | console.log(2 in arr); //false 10 | console.log(3 in arr); //true -------------------------------------------------------------------------------- /7/7.10/3.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.10-3.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/3.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.10-3.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/3.2/default.js: -------------------------------------------------------------------------------- 1 | var arr = ["p", "w", "s"], 2 | result; 3 | result = arr.push("t", "r"); 4 | console.log(result); //5 5 | console.log(arr); //["p", "w", "s", "t", "r"] 6 | 7 | result = arr.pop(); 8 | console.log(result); //"r" 9 | console.log(arr); //["p", "w", "s", "t"] -------------------------------------------------------------------------------- /7/7.10/3.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.10-3.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/3.3/default.js: -------------------------------------------------------------------------------- 1 | var arr = ["w", "s", "t", "r"], 2 | result; 3 | result = arr.shift(); 4 | console.log(result); //"w" 5 | console.log(arr); //["s", "t", "r"] 6 | 7 | result = arr.unshift("p", "w"); 8 | console.log(result); //5 9 | console.log(arr); //["p", "w", "s", "t", "r"] -------------------------------------------------------------------------------- /7/7.10/3.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.10-3.4 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/3.5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.10-3.5 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/3.6/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.10-3.6 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/3.6/default.js: -------------------------------------------------------------------------------- 1 | var arr = [1, 2, 3, 4, 5, 6]; 2 | console.log(arr.indexOf(3)); //2 3 | console.log(arr.indexOf(3, 3)); //-1 4 | console.log(arr.indexOf(3, -3)); //-1 5 | console.log(arr.lastIndexOf(3)); //2 6 | console.log(arr.lastIndexOf(3, 3)); //2 7 | console.log(arr.lastIndexOf(3, -3)); //2 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/3.7/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.10-3.7 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/3.7/default.js: -------------------------------------------------------------------------------- 1 | var arr = [1, 2, 3, 4, 5], result; 2 | result = arr.reduce(function(accumulator, current, index, array) { 3 | return accumulator + current; 4 | }); 5 | console.log(result); //15 -------------------------------------------------------------------------------- /7/7.10/3.8/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.10-3.8 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/4.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.10-4.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/4.1/default.js: -------------------------------------------------------------------------------- 1 | var arr = { 0: 1, 1: 2, 2: 3, length: 3 }, 2 | ArrayProto = Array.prototype; 3 | var result1 = ArrayProto.join.call(arr, "."); //1.2.3 4 | console.log(result1); 5 | //使用简写的字面量形式 6 | var result2 = [].slice.call(arr); //[1, 2, 3] 7 | console.log(result2); -------------------------------------------------------------------------------- /7/7.10/4.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.10-4.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/4.2/default.js: -------------------------------------------------------------------------------- 1 | var str = "12345"; 2 | str[0]; //1 3 | str[1]; //2 4 | str.length; //5 5 | str.push(6); //抛出异常 -------------------------------------------------------------------------------- /7/7.10/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.10-question.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/question-2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.10-question.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.10/question-2/default.js: -------------------------------------------------------------------------------- 1 | var result = Array(51).join("1").split("").map(function(value, index) { 2 | return index; 3 | }); 4 | console.log(result); -------------------------------------------------------------------------------- /7/7.11/1.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-1.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/1.2/default.js: -------------------------------------------------------------------------------- 1 | // function func1() { 2 | // age = 28; //全局变量 3 | // } 4 | // function func2() { 5 | // "use strict"; //严格模式 6 | // age = 28; //Uncaught ReferenceError 7 | // } 8 | // func2(); -------------------------------------------------------------------------------- /7/7.11/1.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-1.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/1.3/default.js: -------------------------------------------------------------------------------- 1 | name = "strick"; //全局变量 2 | function func() { 3 | var name = "freedom"; //局部变量 4 | console.log(name); //"freedom" 5 | } 6 | func(); 7 | console.log(name); //"strick" -------------------------------------------------------------------------------- /7/7.11/1.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-1.4 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/1.5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-1.5 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/1.5/default.js: -------------------------------------------------------------------------------- 1 | name = "strick"; //全局变量 2 | function func1() { 3 | function func2() { 4 | console.log(name); //"strick" 5 | } 6 | func2(); 7 | } 8 | func1(); -------------------------------------------------------------------------------- /7/7.11/2.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-2.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/2.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-2.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/2.2/default.js: -------------------------------------------------------------------------------- 1 | function func() { 2 | //能在函数声明之前调用 3 | name1(); 4 | function name1() {} 5 | //不能在函数表达式之前调用 6 | console.log(typeof name2); //"undefined" 7 | var name2 = function() {}; 8 | } 9 | func(); -------------------------------------------------------------------------------- /7/7.11/2.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-2.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/2.3/default.js: -------------------------------------------------------------------------------- 1 | function func() {} 2 | var obj = { 3 | func: function() {} 4 | }; 5 | func(); //普通函数 6 | obj.func(); //对象方法 7 | new func(); //构造函数 8 | func.call(obj); //间接调用 -------------------------------------------------------------------------------- /7/7.11/2.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-2.4 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/2.5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-2.5 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/2.5/default.js: -------------------------------------------------------------------------------- 1 | function func(name) { 2 | return name; 3 | } 4 | function func(name, age) { 5 | return age; 6 | } 7 | func("strick", 28); //28 -------------------------------------------------------------------------------- /7/7.11/2.6/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-2.6 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/3.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-3.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/3.1/default.js: -------------------------------------------------------------------------------- 1 | function func() { 2 | //私有变量 3 | var name; 4 | //设置私有变量 5 | this.setName = function(value) { 6 | name = value; 7 | }; 8 | //访问私有变量 9 | this.getName = function() { 10 | return name; 11 | }; 12 | } 13 | var obj = new func(); 14 | obj.setName("strick"); 15 | console.log(obj.getName()); //strick -------------------------------------------------------------------------------- /7/7.11/3.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-3.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/3.2/default.js: -------------------------------------------------------------------------------- 1 | var count = 0; 2 | setTimeout(function() { 3 | count++; //1 4 | }, 0); -------------------------------------------------------------------------------- /7/7.11/3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/3/default.js: -------------------------------------------------------------------------------- 1 | var name = "strick"; 2 | function outer() { 3 | var name = "freedom"; 4 | function inner() { 5 | return name; 6 | } 7 | return inner; 8 | } 9 | var func = outer(), 10 | result = func(); 11 | console.log(result); //"freedom" -------------------------------------------------------------------------------- /7/7.11/4.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-4.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/4.1/default.js: -------------------------------------------------------------------------------- 1 | function func(fn) { 2 | return function() { 3 | fn.apply(this, arguments); 4 | }; 5 | } -------------------------------------------------------------------------------- /7/7.11/4.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-4.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/4.2/default.js: -------------------------------------------------------------------------------- 1 | function func(name) { 2 | return function(age) { 3 | return { name: name, age: age }; 4 | }; 5 | } 6 | var result = func("strick")(28); //{name: "strick", age: 28} 7 | console.log(result); -------------------------------------------------------------------------------- /7/7.11/4.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-4.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-4 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/4/default.js: -------------------------------------------------------------------------------- 1 | var arr = [4, 1, 5, 2, 3]; 2 | arr = arr.sort(function(a, b) { 3 | return a > b; 4 | }).filter(function(value, index, array) { 5 | return value > 2; 6 | }); 7 | console.log(arr); //[3, 4, 5] -------------------------------------------------------------------------------- /7/7.11/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-question.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/question-1/default.js: -------------------------------------------------------------------------------- 1 | // var func = new Function("a", "b", "return a+b;"); 2 | // //相当于下面的函数表达式 3 | // var func = function(a, b) { 4 | // return a + b; 5 | // }; 6 | 7 | var name = "freedom"; 8 | function func() { 9 | var name = "strick"; 10 | return new Function("return name;"); 11 | } 12 | var result = func()(); //"freedom" 13 | console.log(result); -------------------------------------------------------------------------------- /7/7.11/question-2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-question.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/question-2/default.js: -------------------------------------------------------------------------------- 1 | var name = "strick"; 2 | function func1() { 3 | console.log(name); 4 | } 5 | function func2() { 6 | var name = "freedom"; 7 | function inner() { 8 | func1(); 9 | } 10 | inner(); 11 | } 12 | func2(); -------------------------------------------------------------------------------- /7/7.11/question-3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-question.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/question-3/default.js: -------------------------------------------------------------------------------- 1 | var age = 30; 2 | function func() { 3 | if (!age) { 4 | var age = 28; 5 | } 6 | console.log(age); 7 | } 8 | func(); -------------------------------------------------------------------------------- /7/7.11/question-4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.11-question.4 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.11/question-4/default.js: -------------------------------------------------------------------------------- 1 | function palindrome(str) { 2 | if (str.length <= 1) return true; 3 | //首字符和末字符做匹配 4 | if (str[0] != str[str.length - 1]) return false; 5 | //将去除首尾字符的字符串传入函数自身中 6 | return palindrome(str.substr(1, str.length - 2)); 7 | } 8 | 9 | console.log(palindrome("aabaa")); 10 | console.log(palindrome("aabcc")); -------------------------------------------------------------------------------- /7/7.12/1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.12-1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.12/1/default.js: -------------------------------------------------------------------------------- 1 | function func1() { 2 | console.log(this); //window 3 | } 4 | func1(); 5 | function func2() { 6 | "use strict"; 7 | console.log(this); //undefined 8 | } 9 | func2(); -------------------------------------------------------------------------------- /7/7.12/2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.12-2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.12/2/default.js: -------------------------------------------------------------------------------- 1 | var obj = { 2 | name: "strick", 3 | getName: function() { 4 | console.log(this.name); //"strick" 5 | } 6 | }; 7 | obj.getName(); -------------------------------------------------------------------------------- /7/7.12/3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.12-3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.12/4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.12-4 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.12/4/default.js: -------------------------------------------------------------------------------- 1 | var name = "freedom"; 2 | function func() { 3 | this.name = "strick"; 4 | this.getName = function() { 5 | return this.name; 6 | }; 7 | } 8 | var obj = new func(); 9 | var result = obj.getName(); //"strick" 10 | console.log(result); -------------------------------------------------------------------------------- /7/7.12/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.12-question.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.13/1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.13-1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.13/1/default.js: -------------------------------------------------------------------------------- 1 | // for(var i=0; i<3; i++) {} 2 | // console.log(i); //3 3 | 4 | (function() { 5 | for (var i = 0; i < 3; i++) {} 6 | })(); 7 | //console.log(i); //抛出未定义的异常 -------------------------------------------------------------------------------- /7/7.13/2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.13-2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.13/2/default.js: -------------------------------------------------------------------------------- 1 | for (var i = 0; i < 3; i++) { 2 | setTimeout(function() { 3 | console.log(i); 4 | }, 0); 5 | } 6 | 7 | for (var i = 0; i < 3; i++) { 8 | (function(n) { 9 | setTimeout(function() { 10 | console.log(n); 11 | }, 0); 12 | })(i); 13 | } -------------------------------------------------------------------------------- /7/7.13/3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.13-3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.13/3/default.js: -------------------------------------------------------------------------------- 1 | (function(global) { 2 | //... 3 | })(window); 4 | 5 | function func() { 6 | var undefined = true; 7 | console.log(undefined); //true 8 | //省略使用undefined的代码 9 | } 10 | func(); 11 | 12 | (function(undefined) { 13 | //... 14 | })(); -------------------------------------------------------------------------------- /7/7.13/4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.13-4 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.13/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.13-question.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.13/question-1/default.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var a = b = 5; 3 | })(); 4 | console.log(b); -------------------------------------------------------------------------------- /7/7.13/summary/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.13-summary 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.13/summary/default.js: -------------------------------------------------------------------------------- 1 | (function() {})(); 2 | (function() {}()); -------------------------------------------------------------------------------- /7/7.14/1.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.14-1.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.14/1.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.14-1.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.14/2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.14-2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.14/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.14-question.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.14/question-1/default.js: -------------------------------------------------------------------------------- 1 | function child() {} 2 | function ancestor() {} 3 | child.prototype = ancestor; //原型指向构造函数 4 | var obj = new child(); 5 | console.log(ancestor.isPrototypeOf(obj)); //true 6 | console.log(obj instanceof ancestor); //false 7 | -------------------------------------------------------------------------------- /7/7.15/1/demo.js: -------------------------------------------------------------------------------- 1 | console.log("Hello Node.js"); -------------------------------------------------------------------------------- /7/7.15/2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web", 3 | "version": "1.0.0", 4 | "description": "test", 5 | "main": "gulpfile.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "pwstrick", 10 | "license": "ISC", 11 | "dependencies": { 12 | "jquery": "^3.2.1" 13 | } 14 | } -------------------------------------------------------------------------------- /7/7.2/3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.2-3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.2/3/default.js: -------------------------------------------------------------------------------- 1 | console.log(typeof undefined);//"undefined" 2 | console.log(typeof null);//"object" 3 | console.log(typeof true);//"boolean" 4 | console.log(typeof 1);//"number" 5 | console.log(typeof "xyz");//"string" 6 | console.log(typeof {});//"object" -------------------------------------------------------------------------------- /7/7.2/6.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.2-6.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.2/6.3/default.js: -------------------------------------------------------------------------------- 1 | var sum = 300; 2 | current: while (sum < 310) { 3 | sum++; 4 | console.log(sum); 5 | for (; sum < 305; sum++) { 6 | if (sum == 303) { 7 | continue current; 8 | } 9 | } 10 | } -------------------------------------------------------------------------------- /7/7.2/question-2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.2-question.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.2/question-2/default.js: -------------------------------------------------------------------------------- 1 | function sum(x) { 2 | return x; 3 | } 4 | var x=1, y=2; 5 | var total = sum 6 | (x+y) 7 | //console.log(total); 8 | //相当于 9 | var total = sum(x+y); 10 | //console.log(total); -------------------------------------------------------------------------------- /7/7.2/question-3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.2-question.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.2/question-3/default.js: -------------------------------------------------------------------------------- 1 | "use strict";//脚本文件第一行 2 | function sum(x) { 3 | "use strict";//函数内第一行 4 | return x; 5 | } 6 | sum(10); 7 | -------------------------------------------------------------------------------- /7/7.3/1.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.3-1.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.3/1.1/default.js: -------------------------------------------------------------------------------- 1 | var num10 = 10; //十进制 2 | var num8 = 012; //八进制 3 | var num16 = 0xA; //十六进制 -------------------------------------------------------------------------------- /7/7.3/1.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.3-1.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.3/1.2/default.js: -------------------------------------------------------------------------------- 1 | var float1 = 1.0; 2 | var float2 = 1.; //省略小数部分的0 3 | var float3 = 0.1; 4 | var float4 = .1; //省略整数部分的0 5 | 6 | 1.25e5 //相当于125000 7 | 1.25e-5 //相当于0.0000125 8 | 9 | console.log(0.1 + 0.2);//0.30000000000000004 -------------------------------------------------------------------------------- /7/7.3/1.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.3-1.4 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.3/1.5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.3-1.5 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.3/1.5/default.js: -------------------------------------------------------------------------------- 1 | console.log("xyz" - 1); //NaN 2 | console.log(0 / 0); //NaN 3 | 4 | console.log("isNaN()"); 5 | console.log(isNaN(NaN)); //true 6 | console.log(isNaN(1)); //false 7 | console.log(isNaN("xyz")); //true -------------------------------------------------------------------------------- /7/7.3/2.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.3-2.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.3/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.3-question.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.3/question-1/default.js: -------------------------------------------------------------------------------- 1 | //console.log(3.toFixed(2));//无效语法 2 | console.log(3..toFixed(2));//3.00 3 | //console.log(3.1..toFixed(2));//无效语法 4 | console.log(3 .toFixed(2));//3.00 5 | console.log(3.1465.toFixed(2));//3.15 -------------------------------------------------------------------------------- /7/7.3/question-2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.3-question.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.3/question-2/default.js: -------------------------------------------------------------------------------- 1 | var result = "pwstrick".split("").reverse().join(""); 2 | console.log(result);//"kcirtswp" 3 | -------------------------------------------------------------------------------- /7/7.4/1.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.4-1.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.4/1.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.4-1.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.4/1.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.4-1.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.4/1.3/default.js: -------------------------------------------------------------------------------- 1 | console.log(parseFloat("01.25.1")); //1.25 2 | console.log(parseFloat("1e+2")); //100 3 | console.log(parseFloat("0xA")); //0 4 | -------------------------------------------------------------------------------- /7/7.4/1.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.4-1.4 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.4/1.4/default.js: -------------------------------------------------------------------------------- 1 | console.log(~null); //-1 2 | console.log(~undefined); //-1 3 | console.log(~"pw"); //-1 4 | console.log(~{}); //-1 5 | console.log(1.25); //-2 6 | 7 | if ("pwstrick".indexOf("str") == -1) { 8 | //没有找到匹配 9 | } 10 | if (!~"pwstrick".indexOf("str")) { 11 | //没有找到匹配 12 | } -------------------------------------------------------------------------------- /7/7.4/1.5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.4-1.5 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.4/1.5/default.js: -------------------------------------------------------------------------------- 1 | console.log(1 + true); //2 2 | console.log(1 + "1"); //"11" 3 | console.log(1 + null); //1 4 | console.log(1 + undefined); //NaN 5 | console.log(1 + {}); //"1[object Object]" -------------------------------------------------------------------------------- /7/7.4/2.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.4-2.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.4/2.1/default.js: -------------------------------------------------------------------------------- 1 | console.log(true.toString()); //"true" 2 | console.log(1.2.toString()); //"1.2" 3 | console.log((10).toString(16)); //"a" 4 | console.log({}.toString()); //"[object Object]" -------------------------------------------------------------------------------- /7/7.4/2.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.4-2.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.4/2.2/default.js: -------------------------------------------------------------------------------- 1 | console.log(String(true)); //"true" 2 | console.log(String(1.2)); //"1.2" 3 | console.log(String({})); //"[object Object]" 4 | console.log(String(null)); //"null" 5 | console.log(String(undefined)); //"undefined" -------------------------------------------------------------------------------- /7/7.4/2.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.4-2.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.4/2.3/default.js: -------------------------------------------------------------------------------- 1 | console.log("" + true); //"true" 2 | console.log("" + 1.2); //"1.2" 3 | console.log("" + {}); //"[object Object]" 4 | console.log("" + null); //"null" 5 | console.log("" + undefined); //"undefined" -------------------------------------------------------------------------------- /7/7.4/3.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.4-3.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.4/3.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.4-3.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.4/3.2/default.js: -------------------------------------------------------------------------------- 1 | console.log(true + false); //1 2 | console.log(true + 1.2); //2.2 3 | console.log(true + {}); //"true[object Object]" 4 | console.log(true + null); //1 5 | console.log(true + undefined); //NaN 6 | 7 | -------------------------------------------------------------------------------- /7/7.4/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.4-question.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.4/question-1/default.js: -------------------------------------------------------------------------------- 1 | var a = {}, 2 | b = { name: "ping" }, 3 | c = { name: "wen" }; 4 | a[b] = 10; 5 | a[c] = 20; 6 | console.log(a[b]); -------------------------------------------------------------------------------- /7/7.4/question-2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.4-question.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.4/question-2/default.js: -------------------------------------------------------------------------------- 1 | console.log(!{}[true]); //true 2 | console.log(+[1, 2]); //NaN 3 | console.log([] == 0); //true 4 | console.log([] == false); //true 5 | console.log([] == ![]); //true 6 | console.log([] + {}); //"[object Object]" 7 | {} + []; //0 用console.log()输出的结果为"[object Object]" 8 | -------------------------------------------------------------------------------- /7/7.5/1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.5-1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.5/1/default.js: -------------------------------------------------------------------------------- 1 | number1 = 1; //全局变量 2 | function sum() { 3 | number2 = 2; //全局变量 4 | } -------------------------------------------------------------------------------- /7/7.5/2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.5-2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.5/question-2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.5-question.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.6/1.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.6-1.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.6/1.1/default.js: -------------------------------------------------------------------------------- 1 | Object(); //空对象 2 | new Object(); //空对象 3 | new Object(null); //空对象 4 | new Object(undefined); //空对象 5 | Object(1); //Number对象 6 | new Object(1); //Number对象 -------------------------------------------------------------------------------- /7/7.6/1.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.6-1.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.6/1.2/default.js: -------------------------------------------------------------------------------- 1 | var obj1 = {}; //空对象 2 | var obj2 = {name: "strick", age: 28}; //多个属性 3 | 4 | //传递大量参数 5 | //function func(attr1, attr2, ..., attrn) { 6 | //... 7 | //} 8 | //传递对象字面量 9 | function func(obj) { 10 | //... 11 | } -------------------------------------------------------------------------------- /7/7.6/2.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.6-2.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.6/2.1/default.js: -------------------------------------------------------------------------------- 1 | console.log(Object.prototype); //无原型 2 | console.log(Array.prototype); //继承了Object.prototype的原型 -------------------------------------------------------------------------------- /7/7.6/2.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.6-2.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.6/2.2/default.js: -------------------------------------------------------------------------------- 1 | function chain1() { 2 | //第一个对象 3 | } 4 | function chain2() { 5 | //第二个对象 6 | } 7 | chain2.prototype = { 8 | name: "strick" 9 | }; 10 | //第一个对象关联第二个对象 11 | chain1.prototype = chain2.prototype; 12 | var chain = new chain1(); 13 | console.log(chain.name); //"strick" -------------------------------------------------------------------------------- /7/7.6/2.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.6-2.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.6/2.3/default.js: -------------------------------------------------------------------------------- 1 | console.log(Array.prototype.isPrototypeOf([1, 2])); //true 2 | console.log(Object.prototype.isPrototypeOf(Function.prototype)); //true 3 | var obj1 = {}; 4 | console.log(Object.getPrototypeOf(obj1)); //Object.prototype 5 | var obj2 = Object.create(obj1); 6 | console.log(Object.getPrototypeOf(obj2)); //{} -------------------------------------------------------------------------------- /7/7.6/3.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.6-3.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.6/3.1/default.js: -------------------------------------------------------------------------------- 1 | var obj = { name: "strick", 姓名: "平文" }; 2 | obj.name; //用标识符表示的属性名 3 | obj.姓名; //用中文表示的属性名 4 | //obj.name is; //抛出语法异常 5 | 6 | 7 | obj["name is"]; //用字符串表示的属性名 8 | for (var i = 0; i < 5; i++) { 9 | obj["name" + i]; //用表达式表示的属性名 10 | } 11 | 12 | obj.age; //undefined 13 | //null.age; //抛出无法读取属性的异常 14 | //undefined.age; //抛出无法读取属性的异常 -------------------------------------------------------------------------------- /7/7.6/3.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.6-3.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.6/3.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.6-3.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.6/3.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.6-3.4 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.6/3.5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.6-3.5 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.6/3.6/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.6-3.6 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.6/3.6/default.js: -------------------------------------------------------------------------------- 1 | var obj1 = { name: "strick" }; 2 | var obj2 = Object.create(obj1); 3 | obj2.age = { digit: 28 }; //属性值为对象 4 | var obj3 = obj2.age; 5 | //删除自有属性 6 | delete obj2.age; 7 | console.log(obj2.age); //undefined 8 | //属性值中的属性并没有被删除 9 | console.log(obj3.digit); //28 10 | //删除继承属性 11 | delete obj2.name; 12 | console.log(obj2.name); //"strick" -------------------------------------------------------------------------------- /7/7.6/4.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.6-4.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.6/4.1/default.js: -------------------------------------------------------------------------------- 1 | var obj1 = { age: 28 }; 2 | obj2 = Object.create(obj1); 3 | //将对象设为不可扩展 4 | Object.preventExtensions(obj2); 5 | //设置自有属性 6 | obj2.name = "strick"; 7 | console.log(obj2.name); //undefined 8 | //设置继承属性 9 | obj1.school = "university"; 10 | console.log(obj2.school); //"university" 11 | //判断对象是否可扩展 12 | console.log(Object.isExtensible(obj2)); //false -------------------------------------------------------------------------------- /7/7.6/4.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.6-4.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.6/4.2/default.js: -------------------------------------------------------------------------------- 1 | var obj = { age: 28 }; 2 | Object.seal(obj); 3 | //删除自有属性 4 | delete obj.age; 5 | console.log(obj.age); //28 6 | console.log(Object.getOwnPropertyDescriptor(obj, "age")); //{configurable: false} 7 | //判断对象是否封闭 8 | console.log(Object.isSealed(obj)); //true -------------------------------------------------------------------------------- /7/7.6/4.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.6-4.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.6/question-2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.6-question.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.6/question-2/default.js: -------------------------------------------------------------------------------- 1 | var obj1 = { 2 | names: [] 3 | }; 4 | var obj2 = obj1.names; 5 | obj2.push("strick"); 6 | console.log(obj1.names); -------------------------------------------------------------------------------- /7/7.6/question-3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.6-question.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.6/summary/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.6-summary 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.6/summary/default.js: -------------------------------------------------------------------------------- 1 | var obj1 = { name: "strick" }, 2 | obj2 = obj1; 3 | obj2.name = "pingwen"; 4 | console.log(obj1); //{name: "pingwen"} 5 | console.log(obj2); //{name: "pingwen"} -------------------------------------------------------------------------------- /7/7.7/1.1/default.json: -------------------------------------------------------------------------------- 1 | { 2 | name: "pingwen", //属性名缺少双引号 3 | "age": 28, //多了一个逗号 4 | } -------------------------------------------------------------------------------- /7/7.7/1.2/default.json: -------------------------------------------------------------------------------- 1 | { 2 | "age": Infinity, //原始值 3 | "name": function() { //函数 4 | return "pingwen"; 5 | }, 6 | "error": new Error("错误"),//对象实例 7 | "regex": /\d/ //正则表达式 8 | } 9 | { 10 | "age": 010, 11 | "height": 1., 12 | "weight": .1 13 | } 14 | { 15 | "name": 'pingwen', 16 | "school": "normal \n university" 17 | } -------------------------------------------------------------------------------- /7/7.7/2.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.7-2.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.7/2.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.7-2.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.7/2.2/default.js: -------------------------------------------------------------------------------- 1 | var json = { 2 | "birthday": { 3 | "toJSON": function() { 4 | return "2017-01-01"; 5 | } 6 | }, 7 | "date": new Date() 8 | }; 9 | var result = JSON.stringify(json, function(key, value) { 10 | if (value == "2017-01-01") 11 | return "2010-11-21"; 12 | return value; 13 | }); 14 | console.log(result); -------------------------------------------------------------------------------- /7/7.7/3.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.7-3.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.7/3.1/default.js: -------------------------------------------------------------------------------- 1 | var jsonStr = '{"name":"pingwen","age":28,"colors":["red","yellow","blue"]}'; 2 | var result = JSON.parse(jsonStr, function(key, value) { 3 | if (key == "age") 4 | return undefined; 5 | return value; 6 | }); 7 | console.log(result); -------------------------------------------------------------------------------- /7/7.7/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.7-question.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.7/question-1/default.js: -------------------------------------------------------------------------------- 1 | function deepCopy(obj) { 2 | return JSON.parse(JSON.stringify(obj)); 3 | } -------------------------------------------------------------------------------- /7/7.7/summary/default.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pingwen", 3 | "age": 28, 4 | "colors": ["red", "yellow", "blue"] 5 | } -------------------------------------------------------------------------------- /7/7.8/2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.8-2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.8/2/default.js: -------------------------------------------------------------------------------- 1 | var date1 = new Date(1484881865000); 2 | var date2 = new Date("2017/01/20 11:11:05"); 3 | var date3 = new Date(2017, 0, 20, 11, 11, 5); 4 | console.log(date1); 5 | console.log(date2); 6 | console.log(date3); -------------------------------------------------------------------------------- /7/7.8/3.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.8-3.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.8/3.1/default.js: -------------------------------------------------------------------------------- 1 | Date.now(); 2 | //老方法 3 | var date = new Date(); 4 | +date; 5 | date.getTime(); 6 | date.valueOf(); 7 | 8 | var date1 = new Date(); 9 | var date2 = new Date(); 10 | if (date1 > date2) { 11 | //... 12 | } else if (date1 < date2) { 13 | //... 14 | } -------------------------------------------------------------------------------- /7/7.8/3.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.8-3.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.8/3.2/default.js: -------------------------------------------------------------------------------- 1 | var date = new Date(); 2 | console.log(Date.parse(date)); //1484881865000 3 | console.log(Date.parse(date.toString())); //1484881865000 4 | console.log(Date.parse(date.toUTCString())); //1484881865000 5 | console.log(Date.parse(date.toISOString())); //1484881865008 -------------------------------------------------------------------------------- /7/7.8/3.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.8-3.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.8/3.3/default.js: -------------------------------------------------------------------------------- 1 | //Fri Jan 20 2017 11:11:05 GMT+0800 (中国标准时间) 2 | var date1 = new Date(2017, 0, 20, 11, 11, 5); 3 | console.log(date1); 4 | //Fri Jan 20 2017 19:11:05 GMT+0800 (中国标准时间) 5 | var date2 = new Date(Date.UTC(2017, 0, 20, 11, 11, 5)); 6 | console.log(date2); 7 | -------------------------------------------------------------------------------- /7/7.8/4.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.8-4.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.8/4.1/default.js: -------------------------------------------------------------------------------- 1 | var date = new Date(); 2 | console.log(date.toString()); 3 | console.log(date.toDateString()); 4 | console.log(date.toTimeString()); 5 | -------------------------------------------------------------------------------- /7/7.8/4.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.8-4.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.8/4.2/default.js: -------------------------------------------------------------------------------- 1 | var date = new Date(); 2 | console.log(date.toLocaleString()); 3 | console.log(date.toLocaleDateString()); 4 | console.log(date.toLocaleTimeString()); 5 | -------------------------------------------------------------------------------- /7/7.8/4.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.8-4.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.8/4.3/default.js: -------------------------------------------------------------------------------- 1 | var date = new Date(); 2 | console.log(date.toUTCString()); 3 | console.log(date.toISOString()); 4 | console.log(date.toJSON()); 5 | -------------------------------------------------------------------------------- /7/7.8/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.8-question.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.8/question-1/default.js: -------------------------------------------------------------------------------- 1 | function isLeapYear(year) { 2 | return new Date(year, 2, 0).getDate() == 29; 3 | } -------------------------------------------------------------------------------- /7/7.8/question-2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.8-question.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.8/question-2/default.js: -------------------------------------------------------------------------------- 1 | function dateInterval(start, end) { 2 | var diff = Math.abs(start - end), //取绝对值 3 | days = Math.ceil(diff / 1000 / 60 / 60 / 24); //向上取整 4 | return days; 5 | } 6 | -------------------------------------------------------------------------------- /7/7.9/2.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.9-2.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.9/2.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.9-2.4 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.9/2.4/default.js: -------------------------------------------------------------------------------- 1 | var pattern = /\d|[a-z]/; 2 | console.log(pattern.test(123)); 3 | console.log(pattern.test("abc")); -------------------------------------------------------------------------------- /7/7.9/2.5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.9-2.5 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.9/2.5/default.js: -------------------------------------------------------------------------------- 1 | var pattern1 = /pw(strick)?/; //分组 2 | var pattern2 = /pw(strick)?\1/; //引用 3 | console.log(pattern1.test("pw")); 4 | console.log(pattern1.test("pwstrick")); 5 | console.log(pattern2.test("pw")); 6 | console.log(pattern2.test("pwstrick")); 7 | console.log(pattern2.test("pwstrickstrick")); -------------------------------------------------------------------------------- /7/7.9/2.6/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.9-2.6 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.9/2.6/default.js: -------------------------------------------------------------------------------- 1 | var pattern = /(?:pw)(strick)\1/; 2 | console.log("pwstrickstrick".match(pattern)); 3 | -------------------------------------------------------------------------------- /7/7.9/2.7/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.9-2.7 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.9/2.7/default.js: -------------------------------------------------------------------------------- 1 | var pattern = /pw\b/; 2 | console.log(pattern.test("pw1")); 3 | console.log(pattern.test("pw_")); 4 | console.log(pattern.test("pwstrick")); 5 | console.log(pattern.test("pw strick")); -------------------------------------------------------------------------------- /7/7.9/2.8/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.9-2.8 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.9/2.9/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.9-2.9 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.9/2.9/default.js: -------------------------------------------------------------------------------- 1 | //匹配数字之后是单词的字符串 2 | console.log(/\d+(?=\w)/.test("123pw")); //true 3 | 4 | //匹配数字之后非单词的字符串 5 | console.log(/\d+(?!\w)/.test("123pw")); //false 6 | -------------------------------------------------------------------------------- /7/7.9/3.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.9-3.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.9/3.1/default.js: -------------------------------------------------------------------------------- 1 | var pattern = /\d/; 2 | console.log("pw123".search(pattern)); //2 3 | 4 | -------------------------------------------------------------------------------- /7/7.9/3.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.9-3.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.9/3.2/default.js: -------------------------------------------------------------------------------- 1 | var pattern1 = /\d/; 2 | var result1 = "pw123".replace(pattern1, "0"); //pw023 3 | console.log(result1); 4 | 5 | var pattern2 = /\d/g; 6 | var result2 = "pw123".replace(pattern2, "0"); //pw000 7 | console.log(result2); 8 | 9 | var str = "p12w"; 10 | var result3 = str.replace(/(\d)(\d)/, "($1)($2)"); //p(1)(2)w 11 | console.log(result3); -------------------------------------------------------------------------------- /7/7.9/3.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.9-3.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.9/3.3/default.js: -------------------------------------------------------------------------------- 1 | var str = "p12w34"; 2 | //["12", "34"] 3 | var result1 = str.match(/\d+/g); 4 | console.log(result1); 5 | 6 | //["12", index: 1, input: "p12w34"] 7 | var result2 = str.match(/\d+/); 8 | console.log(result2); 9 | 10 | //["12", "1", "2", index: 1, input: "p12w34"] 11 | var result3 = str.match(/(\d)(\d)/); 12 | console.log(result3); 13 | -------------------------------------------------------------------------------- /7/7.9/3.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.9-3.4 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.9/3.4/default.js: -------------------------------------------------------------------------------- 1 | var str = "p12w34s"; 2 | var result1 = str.split(/\d+/); //["p", "w", "s"] 3 | console.log(result1); 4 | var result2 = str.split(/\d+/, 2); //["p", "w"] 5 | console.log(result2); 6 | var result3 = str.split(/(\d+)/); //["p", "12", "w", "34", "s"] 7 | console.log(result3); -------------------------------------------------------------------------------- /7/7.9/4.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.9-4.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /7/7.9/4.1/default.js: -------------------------------------------------------------------------------- 1 | var str = "pw1", 2 | pattern1 = /\d/, 3 | pattern2 = /\d/g; 4 | console.log(pattern1.test(str)); //true 5 | console.log(pattern2.test(str)); //true 6 | console.log(pattern2.test(str)); //false 7 | 8 | -------------------------------------------------------------------------------- /7/7.9/4.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 7.9-4.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.1/1.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.1-1.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.1/1.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.1-1.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.1/1.2/default.js: -------------------------------------------------------------------------------- 1 | //alert("信息提示"); 2 | 3 | //if (confirm("您确定要删除吗？")) { 4 | // //... 5 | //} 6 | 7 | //prompt("请输入您的年龄", "28"); 8 | 9 | //alert("信息\n提示"); -------------------------------------------------------------------------------- /8/8.1/1.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.1-1.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.1/1.3/default.js: -------------------------------------------------------------------------------- 1 | window.onerror = function(message, source, row, column, error) { 2 | alert(message); 3 | }; -------------------------------------------------------------------------------- /8/8.1/2.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.1-2.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.1/2.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.1-2.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.1/2.2/default.js: -------------------------------------------------------------------------------- 1 | // location.assign('index.html'); 2 | // location.replace('index.html'); 3 | // location = "http://www.pwstrick.com"; 4 | // location.href = "http://www.pwstrick.com"; 5 | // location.host = "www.pwstrick.com"; 6 | // location.hash = "#strick"; -------------------------------------------------------------------------------- /8/8.1/3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.1-3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.1/3/default.js: -------------------------------------------------------------------------------- 1 | if (element.addEventListener) { 2 | //使用W3C标准的浏览器（Firefox、Chrome等） 3 | } else if (element.attachEvent) { 4 | //使用IE浏览器 5 | } -------------------------------------------------------------------------------- /8/8.1/4.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.1-4.1 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.1/4.1/default.js: -------------------------------------------------------------------------------- 1 | var btn = document.getElementById("btn"); 2 | btn.onclick = function() { 3 | location.hash = "#freedom"; 4 | console.log(history.length); //3 5 | }; 6 | console.log(history.length); //2 7 | //location.hash = "#strick"; 8 | //console.log(history.length); //3 -------------------------------------------------------------------------------- /8/8.1/4.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.1-4.2 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.1/4.2/default.js: -------------------------------------------------------------------------------- 1 | history.forward(); 2 | //相当于 3 | history.go(1); 4 | 5 | history.back(); 6 | //相当于 7 | history.go(-1); -------------------------------------------------------------------------------- /8/8.1/4.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.1-4.3 5 | 6 | 7 | 1 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /8/8.1/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.1-question.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.1/question-1/default.js: -------------------------------------------------------------------------------- 1 | //console.log(age); 2 | console.log(window.age); //undefined -------------------------------------------------------------------------------- /8/8.1/question-2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.1-question.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.1/question-2/default.js: -------------------------------------------------------------------------------- 1 | console.log(screen.width +"×"+ screen.height); 2 | 3 | var ratio = window.devicePixelRatio; 4 | console.log(screen.width * ratio + "×" + screen.height * ratio); -------------------------------------------------------------------------------- /8/8.2/1.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.2-1.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.2/1.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.2-1.3 5 | 6 | 7 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /8/8.2/1.3/default.js: -------------------------------------------------------------------------------- 1 | var list = document.getElementById("list"), 2 | children = list.children; //返回HTMLCollection对象 3 | console.log(children[0]); //第一个子元素 4 | console.log(children.first); //id或name为first的子元素 5 | console.log(children.second); //id或name为second的子元素 -------------------------------------------------------------------------------- /8/8.2/1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 模版 4 | 5 | 6 |
标题
7 |

正文

8 | 9 | -------------------------------------------------------------------------------- /8/8.2/2.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.2-2.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.2/2.1/default.js: -------------------------------------------------------------------------------- 1 | document.createElement("div"); 2 | //相当于 3 | document.createElement("DIV"); -------------------------------------------------------------------------------- /8/8.2/2.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.2-2.2 5 | 6 | 7 |
8 |
1
9 |
2
10 |
3
11 |
12 |
13 | name 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /8/8.2/2.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.2-2.3 5 | 6 | 7 |
8 | name 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /8/8.2/2.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.2-2.4 5 | 6 | 7 |
8 | name 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /8/8.2/2.4/default.js: -------------------------------------------------------------------------------- 1 | var container = document.getElementById("container") 2 | //删除第一个子节点 3 | container.removeChild(container.firstElementChild); 4 | 5 | container.innerHTML = ""; //删除所有子节点 6 | container.outerHTML = ""; //删除元素 -------------------------------------------------------------------------------- /8/8.2/2.5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.2-2.5 5 | 6 | 7 |
8 |
1
9 |
2
10 |
3
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /8/8.2/2.5/default.js: -------------------------------------------------------------------------------- 1 | var dl = document.getElementById("container") 2 | var dd = document.createElement("dd"); 3 | dd.innerHTML = 4; 4 | dl.replaceChild(dd, dl.firstElementChild); -------------------------------------------------------------------------------- /8/8.2/2.6/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.2-2.6 5 | 6 | 7 |
8 |
1
9 |
2
10 |
3
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /8/8.2/2.6/default.js: -------------------------------------------------------------------------------- 1 | var container = document.getElementById("container") 2 | var shallow = container.cloneNode(), 3 | deep = container.cloneNode(true); 4 | console.log(shallow); //无后代节点 5 | console.log(deep); //有后代节点 -------------------------------------------------------------------------------- /8/8.2/2.8/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.2-2.8 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.2/2.8/default.js: -------------------------------------------------------------------------------- 1 | function matches(element, selector) { 2 | var matchesSelector = 3 | element.webkitMatchesSelector || 4 | element.mozMatchesSelector || 5 | element.oMatchesSelector || 6 | element.matchesSelector; 7 | return matchesSelector.call(element, selector); 8 | } -------------------------------------------------------------------------------- /8/8.2/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.2-question.1 5 | 6 | 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.2/question-2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.2-question.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.2/question-2/default.js: -------------------------------------------------------------------------------- 1 | var fragment = document.createDocumentFragment(), 2 | p; 3 | for (var i = 0; i < 10; i++) { 4 | p = document.createElement("p"); 5 | p.innerHTML = i; 6 | p.style.width = "100px"; 7 | fragment.appendChild(p); 8 | } 9 | document.body.appendChild(fragment); -------------------------------------------------------------------------------- /8/8.2/question-3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.2-question.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.2/question-3/default.js: -------------------------------------------------------------------------------- 1 | function loadScript(src, fn) { 2 | var script = document.createElement("script"); 3 | script.src = src; 4 | document.body.appendChild(script); 5 | script.onload = function() { 6 | fn.call(this); 7 | }; 8 | } 9 | loadScript("demo.js", function() { 10 | console.log("onload"); 11 | }); -------------------------------------------------------------------------------- /8/8.3/1.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.3-1.2 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.3/1.2/default.js: -------------------------------------------------------------------------------- 1 | var txt = document.getElementById("txt"); 2 | // txt.className = "ui-border"; 3 | // console.log(txt.className); //"ui-border" 4 | 5 | txt.setAttribute("class", "ui-border"); 6 | txt.getAttribute("class"); //"ui-border" -------------------------------------------------------------------------------- /8/8.3/1.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.3-1.3 5 | 6 | 7 | 8 | 跳转 9 | 10 | 11 | -------------------------------------------------------------------------------- /8/8.3/1.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.3-1.4 5 | 6 | 7 | 8 | 跳转 9 | 10 | 11 | -------------------------------------------------------------------------------- /8/8.3/1.5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.3-1.5 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.3/1.5/default.js: -------------------------------------------------------------------------------- 1 | var custom = document.getElementById("custom"); 2 | //{ name:"strick", age:"28" } 3 | console.log(custom.dataset); -------------------------------------------------------------------------------- /8/8.3/1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.3-1 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.3/1/default.js: -------------------------------------------------------------------------------- 1 | var txt = document.getElementById("txt"); 2 | console.log(txt.id); //"txt" 3 | console.log(txt.type); //"text" 4 | console.log(txt.maxLength); //10 5 | console.log(txt.style); //CSSStyleDeclaration对象 6 | -------------------------------------------------------------------------------- /8/8.3/2.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.3-2.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.3/2.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.3-2.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.3/2.2/default.js: -------------------------------------------------------------------------------- 1 | console.log(window.pageXOffset); 2 | console.log(window.pageYOffset); 3 | 4 | var XOffset = document.documentElement.scrollLeft || document.body.scrollLeft; 5 | var YOffset = document.documentElement.scrollTop || document.body.scrollTop; 6 | 7 | document.documentElement.scrollWidth; 8 | document.documentElement.scrollHeight; 9 | -------------------------------------------------------------------------------- /8/8.3/2.4/default.js: -------------------------------------------------------------------------------- 1 | var scroll = document.getElementById("sizeScroll"); 2 | console.log(scroll.scrollWidth); //220 3 | console.log(scroll.scrollHeight); //240 4 | 5 | -------------------------------------------------------------------------------- /8/8.3/3.1/default.js: -------------------------------------------------------------------------------- 1 | var scroll = document.getElementById("sizeScroll"), 2 | rect = scroll.getBoundingClientRect(); 3 | //{ bottom:1130, left:8, right:230, top:1008, width:222, height:122 } 4 | console.log(rect); 5 | -------------------------------------------------------------------------------- /8/8.3/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.3-question.1 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.3/question-1/default.js: -------------------------------------------------------------------------------- 1 | var btn = document.getElementById("btn"); 2 | //属性方式 3 | btn.disabled = true; 4 | //特性方式 5 | btn.setAttribute("disabled", true); -------------------------------------------------------------------------------- /8/8.4/1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.4-1 5 | 6 | 7 |
8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /8/8.4/2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.4-2 5 | 6 | 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.4/2/default.js: -------------------------------------------------------------------------------- 1 | var info = document.getElementById("info"); 2 | console.log(info.style["font-size"]); //"16px" 3 | console.log(info.style["width"]); //"10%" 4 | console.log(info.style.fontSize); //"16px" 5 | console.log(info.style.width); //"10%" 6 | console.log(info.style.cssFloat); //"right" -------------------------------------------------------------------------------- /8/8.4/3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.4-3 5 | 6 | 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.4/3/default.js: -------------------------------------------------------------------------------- 1 | var info = document.getElementById("info"); 2 | info.style.height = "50px"; 3 | info.style.zIndex = "10"; 4 | 5 | //info.style.cssText = "height:50px;z-index:10"; 6 | info.setAttribute("style", "height:50px;z-index:10"); -------------------------------------------------------------------------------- /8/8.4/4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.4-4 5 | 6 | 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.4/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.4-question.1 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.4/question-1/default.js: -------------------------------------------------------------------------------- 1 | var btn = document.getElementById("btn"); 2 | var btn = document.getElementById("btn"); 3 | btn.style.display = "none"; 4 | btn.style["visibility"] = "hidden"; 5 | btn.style.cssText = "position:absolute;left:-9999px"; -------------------------------------------------------------------------------- /8/8.5/2.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.5-2.1 5 | 6 | 7 | 8 |
9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /8/8.5/2.2/default.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/8/8.5/2.2/default.js -------------------------------------------------------------------------------- /8/8.5/2.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.5-2.3 5 | 6 | 7 | 8 |
9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /8/8.5/2.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.5-2.4 5 | 6 | 7 | 8 |
9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /8/8.5/2.4/default.js: -------------------------------------------------------------------------------- 1 | var btn = document.getElementById("btn"); 2 | btn.attachEvent("onclick", function() { 3 | console.log(window.event); 4 | }); 5 | 6 | var submit = document.getElementById("btnSubmit"); 7 | submit.attachEvent("onclick", function() { 8 | window.event.returnValue = false; 9 | }); -------------------------------------------------------------------------------- /8/8.5/2.5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.5-2.5 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.5/2.5/default.js: -------------------------------------------------------------------------------- 1 | var btn = document.getElementById("order"); 2 | btn.onclick = function() { 3 | console.log("onclick1"); 4 | }; 5 | btn.addEventListener("click", function() { 6 | console.log("onclick3"); 7 | }, false); -------------------------------------------------------------------------------- /8/8.5/3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.5-3 5 | 6 | 7 |
8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /8/8.5/4.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.5-4.1 5 | 6 | 7 |
8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /8/8.5/5.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.5-5.1 5 | 6 | 7 |
8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /8/8.5/5.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.5-5.2 5 | 6 | 7 |
8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /8/8.5/5.2/default.js: -------------------------------------------------------------------------------- 1 | var btn = document.getElementById("btnCustom"), 2 | type = "onclick"; 3 | var event = document.createEventObject(); 4 | event.view = window; 5 | event.bubbles = true; 6 | //注册自定义事件 7 | btn.attachEvent(type, function() { 8 | console.log("自定义"); 9 | }); 10 | //触发事件 11 | btn.fireEvent(type, event); -------------------------------------------------------------------------------- /8/8.5/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.5-question.1 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.5/question-2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.5-question.2 5 | 6 | 7 |
8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /8/8.5/question-2/default.js: -------------------------------------------------------------------------------- 1 | var container = document.getElementById("delegation"); 2 | container.addEventListener("click", function(event) { 3 | console.log(event.target); 4 | }, false); -------------------------------------------------------------------------------- /8/8.5/summary/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.5-summary 5 | 6 | 7 | 首页 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.5/summary/default.js: -------------------------------------------------------------------------------- 1 | var link = document.getElementById("redirect"); 2 | link.addEventListener("click", function(event) { 3 | this.className = "ui-btn"; 4 | event.preventDefault(); 5 | }, false); -------------------------------------------------------------------------------- /8/8.6/1.1/default.js: -------------------------------------------------------------------------------- 1 | var form = document.getElementById("register"); 2 | form.addEventListener("submit", function() { 3 | console.log("onsubmit"); 4 | }, false); 5 | var btn = document.getElementById("btn"); 6 | btn.addEventListener("click", function() { 7 | form.submit(); 8 | }, false); -------------------------------------------------------------------------------- /8/8.6/1.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.6-1.2 5 | 6 | 7 |
8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /8/8.6/1.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.6-1.3 5 | 6 | 7 |
8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /8/8.6/1.3/default.js: -------------------------------------------------------------------------------- 1 | var txt = document.getElementById("txt"), 2 | login = document.getElementById("login"); 3 | txt.disabled = false; 4 | txt.value = "freedom"; 5 | txt.name = "pwd"; 6 | txt.type = "password"; 7 | console.log(txt.form == login); //true -------------------------------------------------------------------------------- /8/8.6/2.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.6-2.1 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /8/8.6/2.1/default.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/8/8.6/2.1/default.js -------------------------------------------------------------------------------- /8/8.6/2.2/default.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/8/8.6/2.2/default.js -------------------------------------------------------------------------------- /8/8.6/2.3/default.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/8/8.6/2.3/default.js -------------------------------------------------------------------------------- /8/8.6/3.1/default.js: -------------------------------------------------------------------------------- 1 | var names = document.getElementById("names"); 2 | console.log(names.value); -------------------------------------------------------------------------------- /8/8.6/3.4/default.js: -------------------------------------------------------------------------------- 1 | var names = document.getElementById("names"); 2 | //DOM方法 3 | var option1 = document.createElement("option"); 4 | option1.value = 5; 5 | option1.text = "star"; 6 | names.appendChild(option1); 7 | //元素方法 8 | var option2 = new Option("star", 5); 9 | names.add(option2); -------------------------------------------------------------------------------- /8/8.6/3.5/default.js: -------------------------------------------------------------------------------- 1 | var names = document.getElementById("names"); 2 | // names.options.length = 4; 3 | // names.options.length = 0; 4 | 5 | //names.removeChild(names.firstElementChild); 6 | 7 | //names.remove(0); 8 | 9 | names.options[0] = null; -------------------------------------------------------------------------------- /8/8.6/3/default.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/8/8.6/3/default.js -------------------------------------------------------------------------------- /8/8.6/4.1/default.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/8/8.6/4.1/default.js -------------------------------------------------------------------------------- /8/8.6/4.2/default.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/8/8.6/4.2/default.js -------------------------------------------------------------------------------- /8/8.6/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.6-question.1 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.7/1.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.7-1.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.7/1.1/default.js: -------------------------------------------------------------------------------- 1 | var xhr = new XMLHttpRequest(); -------------------------------------------------------------------------------- /8/8.7/1.1/server.php: -------------------------------------------------------------------------------- 1 | 200, 4 | 'msg' => '操作成功', 5 | 'data' => [ 6 | 'prev' => '2016-09', 7 | 'next' => '2016-11', 8 | ] 9 | ]; 10 | echo json_encode($json); 11 | -------------------------------------------------------------------------------- /8/8.7/1.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.7-1.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.7/1.2/default.js: -------------------------------------------------------------------------------- 1 | var xhr = new XMLHttpRequest(); 2 | xhr.open("post", "server.php", true); -------------------------------------------------------------------------------- /8/8.7/1.2/server.php: -------------------------------------------------------------------------------- 1 | 200, 4 | 'msg' => '操作成功', 5 | 'data' => [ 6 | 'prev' => '2016-09', 7 | 'next' => '2016-11', 8 | ] 9 | ]; 10 | echo json_encode($json); 11 | -------------------------------------------------------------------------------- /8/8.7/1.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.7-1.3 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.7/1.3/default.js: -------------------------------------------------------------------------------- 1 | var xhr = new XMLHttpRequest(); 2 | xhr.open("post", "server.php", true); 3 | xhr.setRequestHeader("Content-Type", "application/x-www-form-urlcoded"); -------------------------------------------------------------------------------- /8/8.7/1.3/server.php: -------------------------------------------------------------------------------- 1 | 200, 4 | 'msg' => '操作成功', 5 | 'data' => [ 6 | 'prev' => '2016-09', 7 | 'next' => '2016-11', 8 | ] 9 | ]; 10 | echo json_encode($json); 11 | -------------------------------------------------------------------------------- /8/8.7/1.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.7-1.4 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.7/1.4/default.js: -------------------------------------------------------------------------------- 1 | var xhr = new XMLHttpRequest(); 2 | xhr.open("get", "server.php?id=1&status=1"); 3 | xhr.send(null); -------------------------------------------------------------------------------- /8/8.7/1.4/server.php: -------------------------------------------------------------------------------- 1 | 200, 4 | 'msg' => '操作成功', 5 | 'data' => [ 6 | 'prev' => '2016-09', 7 | 'next' => '2016-11', 8 | ] 9 | ]; 10 | echo json_encode($json); 11 | -------------------------------------------------------------------------------- /8/8.7/1.5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.7-1.5 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.7/1.5/result.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 200 4 | 5 | 2016-11 6 | 2016-09 7 | 8 | 操作成功 9 | -------------------------------------------------------------------------------- /8/8.7/1.5/server.php: -------------------------------------------------------------------------------- 1 | 200, 4 | 'msg' => '操作成功', 5 | 'data' => [ 6 | 'prev' => '2016-09', 7 | 'next' => '2016-11', 8 | ] 9 | ]; 10 | echo json_encode($json); 11 | -------------------------------------------------------------------------------- /8/8.7/2.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.7-2.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.7/2.2/default.js: -------------------------------------------------------------------------------- 1 | var xhr = new XMLHttpRequest(); 2 | xhr.open("post", "server.php"); 3 | xhr.overrideMimeType("application/xml"); 4 | xhr.send(null); -------------------------------------------------------------------------------- /8/8.7/2.2/result.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 200 4 | 5 | 2016-11 6 | 2016-09 7 | 8 | 操作成功 9 | -------------------------------------------------------------------------------- /8/8.7/2.2/server.php: -------------------------------------------------------------------------------- 1 | 200, 4 | 'msg' => '操作成功', 5 | 'data' => [ 6 | 'prev' => '2016-09', 7 | 'next' => '2016-11', 8 | ] 9 | ]; 10 | echo json_encode($json); 11 | -------------------------------------------------------------------------------- /8/8.7/2.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.7-2.3 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.7/2.3/default.js: -------------------------------------------------------------------------------- 1 | var input = document.getElementById("upload"); 2 | input.addEventListener("change", function() { 3 | var file = this.files[0]; 4 | var xhr = new XMLHttpRequest(); 5 | xhr.open("post", "server.php"); 6 | xhr.send(file); 7 | }, false); -------------------------------------------------------------------------------- /8/8.7/2.3/server.php: -------------------------------------------------------------------------------- 1 | 200, 4 | 'msg' => '操作成功', 5 | 'data' => [ 6 | 'prev' => '2016-09', 7 | 'next' => '2016-11', 8 | ] 9 | ]; 10 | echo json_encode($json); 11 | -------------------------------------------------------------------------------- /8/8.7/2.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.7-2.4 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.7/2.4/server.php: -------------------------------------------------------------------------------- 1 | 200, 4 | 'msg' => '操作成功', 5 | 'data' => [ 6 | 'prev' => '2016-09', 7 | 'next' => '2016-11', 8 | ] 9 | ]; 10 | echo json_encode($json); 11 | -------------------------------------------------------------------------------- /8/8.7/2.5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.7-2.5 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.7/2.5/server.php: -------------------------------------------------------------------------------- 1 | 200, 5 | 'msg' => '操作成功', 6 | 'data' => [ 7 | 'prev' => '2016-09', 8 | 'next' => '2016-11', 9 | ] 10 | ]; 11 | echo json_encode($json); 12 | -------------------------------------------------------------------------------- /8/8.7/2.7/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.7-2.7 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.7/2.7/server.php: -------------------------------------------------------------------------------- 1 | 200, 4 | 'msg' => '操作成功', 5 | 'data' => [ 6 | 'prev' => '2016-09', 7 | 'next' => '2016-11', 8 | ] 9 | ]; 10 | echo json_encode($json); 11 | -------------------------------------------------------------------------------- /8/8.7/3.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.7-3.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.7/3.1/default.js: -------------------------------------------------------------------------------- 1 | var xhr = new XMLHttpRequest(); 2 | xhr.open("post", "http://ad_html.net/ajax/cors.php"); 3 | xhr.withCredentials = true; 4 | xhr.send(null); -------------------------------------------------------------------------------- /8/8.7/3.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.7-3.2 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.7/3.2/default.js: -------------------------------------------------------------------------------- 1 | function handle() { 2 | console.log("回调函数"); 3 | } 4 | var script = document.createElement("script"); 5 | script.src = "jsonp.php?jsonp=handle"; //传递回调函数的名称 6 | document.body.appendChild(script); 7 | 8 | var img = new Image(); 9 | img.src = "http://www.pwstrick.com/b.gif?cc=0&ck=1&cl=24"; -------------------------------------------------------------------------------- /8/8.7/3.2/jsonp.php: -------------------------------------------------------------------------------- 1 | 200, 5 | 'msg' => '操作成功', 6 | 'data' => [ 7 | 'prev' => '2016-09', 8 | 'next' => '2016-11', 9 | ] 10 | ]; 11 | echo $func.'('.json_encode($json).')'; 12 | -------------------------------------------------------------------------------- /8/8.7/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.7-question.1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /8/8.7/question-1/server.php: -------------------------------------------------------------------------------- 1 | 200, 4 | 'msg' => '操作成功', 5 | 'data' => [ 6 | 'prev' => '2016-09', 7 | 'next' => '2016-11', 8 | ] 9 | ]; 10 | echo json_encode($json); 11 | -------------------------------------------------------------------------------- /8/8.8/1.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.8-1.1 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /8/8.8/1.1/default.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/8/8.8/1.1/default.js -------------------------------------------------------------------------------- /8/8.8/1.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.8-1.2 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.8/1.2/default.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/8/8.8/1.2/default.js -------------------------------------------------------------------------------- /8/8.8/1.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.8-1.3 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.8/1.3/default.js: -------------------------------------------------------------------------------- 1 | $("#btn").parent().addClass("container").html(); -------------------------------------------------------------------------------- /8/8.8/2.1/default.js: -------------------------------------------------------------------------------- 1 | var result = $(":button:eq(1)") 2 | .closest("ul") 3 | .nextUntil(":radio") 4 | .filter(function(index) { 5 | return $(this).is(":text"); 6 | }); 7 | console.log(result); -------------------------------------------------------------------------------- /8/8.8/2.2/default.js: -------------------------------------------------------------------------------- 1 | $("#target").append("

插入的内容

"); 2 | $("

插入的内容

").appendTo("#target"); 3 | 4 | $(".inner").wrap("
"); 5 | $(".inner").wrapAll("
"); 6 | $(".inner").wrapInner("
"); -------------------------------------------------------------------------------- /8/8.8/2.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.8-2.3 5 | 6 | 7 |
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /8/8.8/2.3/default.js: -------------------------------------------------------------------------------- 1 | //$("#target").replaceWith("

替换的内容

"); 2 | $("

替换的内容

").replaceAll("#target"); -------------------------------------------------------------------------------- /8/8.8/2.4/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.8-2.4 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /8/8.8/2.4/default.js: -------------------------------------------------------------------------------- 1 | var result = $(":text") 2 | .each(function(index, element) { 3 | $(this).val("input"); 4 | }) 5 | .map(function(index, element) { 6 | return $(element).val(); 7 | }) 8 | .get(); 9 | console.log(result); -------------------------------------------------------------------------------- /8/8.8/2.5/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.8-2.5 5 | 6 | 7 |
8 |
9 | 10 |
11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /8/8.8/2.5/default.js: -------------------------------------------------------------------------------- 1 | $("[name=btnCopy]").on("click", function() { 2 | console.log("复制"); 3 | }); 4 | 5 | //$(".copy").clone(true, false).appendTo("body"); 6 | 7 | $(".copy").clone(true, true).appendTo("body"); -------------------------------------------------------------------------------- /8/8.8/2.6/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.8-2.6 5 | 6 | 7 |
8 |
删除的内容
9 |
删除的内容
10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /8/8.8/2.6/default.js: -------------------------------------------------------------------------------- 1 | //$("#remove").remove(); 2 | $("#remove").empty(); -------------------------------------------------------------------------------- /8/8.8/2.7/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.8-2.7 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /8/8.8/2.7/default.js: -------------------------------------------------------------------------------- 1 | var result = $("input").is(":radio");; 2 | console.log(result); -------------------------------------------------------------------------------- /8/8.8/3.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.8-3.1 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /8/8.8/3.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.8-3.2 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /8/8.8/3.2/default.js: -------------------------------------------------------------------------------- 1 | var $label = $("#label"); 2 | console.log($label.data("request")); 3 | 4 | $label.data("name", "strick"); 5 | $label.removeData("name"); -------------------------------------------------------------------------------- /8/8.8/3.3/default.js: -------------------------------------------------------------------------------- 1 | var $form = $("#form"); 2 | //获取 3 | console.log($form.find("select").val()); //"3" 4 | console.log($form.find(":text").val()); //"strick" 5 | //设置 6 | $form.find("select").val("1"); 7 | $form.find(":text").val("freedom"); 8 | 9 | 10 | console.log($form.find(":radio:checked").val()); //"2" -------------------------------------------------------------------------------- /8/8.8/3.4/default.js: -------------------------------------------------------------------------------- 1 | var $container = $("#container"); 2 | console.log($container.width()); //100 3 | console.log($container.height()); //100 4 | console.log($container.innerWidth()); //120 5 | console.log($container.innerHeight()); //120 6 | console.log($container.outerWidth()); //122 7 | console.log($container.outerHeight()); //122 -------------------------------------------------------------------------------- /8/8.8/3.6/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.8-3.6 5 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /8/8.8/3.6/default.js: -------------------------------------------------------------------------------- 1 | var $container = $("#container"); 2 | console.log($container.css("font-size")); 3 | console.log($container.css("fontSize")); 4 | 5 | $container.addClass("warning"); 6 | $container.removeClass("warning"); -------------------------------------------------------------------------------- /8/8.8/4.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.8-4.1 5 | 6 | 7 |
8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /8/8.8/4.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.8-4.2 5 | 6 | 7 |
8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /8/8.8/4.2/default.js: -------------------------------------------------------------------------------- 1 | var $btn = $("#btnEvent"); 2 | $btn.click(function(event, name, age) { 3 | console.log(name); //"strick" 4 | console.log(age); //28 5 | }); 6 | $btn.trigger("click", ["strick", 28]); -------------------------------------------------------------------------------- /8/8.8/4.3/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.8-4.3 5 | 6 | 7 |
8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /8/8.8/4.3/default.js: -------------------------------------------------------------------------------- 1 | var $btn = $("#btnEvent"); 2 | $btn.on("custom", function(event) { 3 | console.log("自定义事件"); 4 | }); 5 | $btn.trigger("custom"); -------------------------------------------------------------------------------- /8/8.8/5.1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.8-5.1 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.8/5.1/default.js: -------------------------------------------------------------------------------- 1 | $.ajax("server.php", { 2 | dataType: "json", 3 | success: function(data) { 4 | console.log(data); 5 | } 6 | }); -------------------------------------------------------------------------------- /8/8.8/5.1/server.php: -------------------------------------------------------------------------------- 1 | 200, 4 | 'msg' => '操作成功', 5 | 'data' => [ 6 | 'prev' => '2016-09', 7 | 'next' => '2016-11', 8 | ] 9 | ]; 10 | echo json_encode($json); 11 | -------------------------------------------------------------------------------- /8/8.8/5.2/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.8-5.2 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.8/5.2/default.js: -------------------------------------------------------------------------------- 1 | $.ajax("server.php") 2 | .done(function() { console.log("success"); }) 3 | .fail(function() { console.log("error"); }) 4 | .always(function() { console.log("complete"); }) 5 | .then( 6 | function() { console.log("success"); }, 7 | function() { console.log("error"); } 8 | ); -------------------------------------------------------------------------------- /8/8.8/5.2/server.php: -------------------------------------------------------------------------------- 1 | 200, 4 | 'msg' => '操作成功', 5 | 'data' => [ 6 | 'prev' => '2016-09', 7 | 'next' => '2016-11', 8 | ] 9 | ]; 10 | echo json_encode($json); 11 | -------------------------------------------------------------------------------- /8/8.8/question-1/1.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 8.8-question.1 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /8/8.8/question-1/default.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | $.fn.customPlugin = function() { 3 | }; 4 | })(jQuery); 5 | //调用插件 6 | $("#container").customPlugin(); -------------------------------------------------------------------------------- /assets/audio/piano.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/audio/piano.mp3 -------------------------------------------------------------------------------- /assets/audio/piano.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/audio/piano.ogg -------------------------------------------------------------------------------- /assets/audio/piano.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/audio/piano.wav -------------------------------------------------------------------------------- /assets/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/font/iconfont.eot -------------------------------------------------------------------------------- /assets/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/font/iconfont.ttf -------------------------------------------------------------------------------- /assets/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/font/iconfont.woff -------------------------------------------------------------------------------- /assets/img/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/img/avatar.jpg -------------------------------------------------------------------------------- /assets/img/avatar/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/img/avatar/1.png -------------------------------------------------------------------------------- /assets/img/avatar/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/img/avatar/2.png -------------------------------------------------------------------------------- /assets/img/avatar/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/img/avatar/3.png -------------------------------------------------------------------------------- /assets/img/avatar/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/img/avatar/4.png -------------------------------------------------------------------------------- /assets/img/avatar/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/img/avatar/5.png -------------------------------------------------------------------------------- /assets/img/lake-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/img/lake-small.jpg -------------------------------------------------------------------------------- /assets/img/lake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/img/lake.png -------------------------------------------------------------------------------- /assets/img/layout-bac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/img/layout-bac.png -------------------------------------------------------------------------------- /assets/img/page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/img/page.png -------------------------------------------------------------------------------- /assets/video/piano.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/video/piano.mp4 -------------------------------------------------------------------------------- /assets/video/piano.ogv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/video/piano.ogv -------------------------------------------------------------------------------- /assets/video/piano.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/assets/video/piano.webm -------------------------------------------------------------------------------- /思维导图/CSS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/思维导图/CSS.png -------------------------------------------------------------------------------- /思维导图/CSS.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/思维导图/CSS.xmind -------------------------------------------------------------------------------- /思维导图/HTML.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/思维导图/HTML.png -------------------------------------------------------------------------------- /思维导图/HTML.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/思维导图/HTML.xmind -------------------------------------------------------------------------------- /思维导图/JavaScript-all.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/思维导图/JavaScript-all.png -------------------------------------------------------------------------------- /思维导图/JavaScript-all.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/思维导图/JavaScript-all.xmind -------------------------------------------------------------------------------- /思维导图/JavaScript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/思维导图/JavaScript.png -------------------------------------------------------------------------------- /思维导图/JavaScript.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/思维导图/JavaScript.xmind -------------------------------------------------------------------------------- /思维导图/网络.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/思维导图/网络.png -------------------------------------------------------------------------------- /思维导图/网络.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pwstrick/FrondEndInterviewCode/bf94d485861150c328a0a2256e784dcfea8cfe8d/思维导图/网络.xmind --------------------------------------------------------------------------------