第十五章：Python の Web开发基础 (二) JavaScript与DOM

时间：2021-11-12 03:23:24

本課主題

  • JavaScript 介绍
  • DOM 介绍

JavaScript 介绍

JavaScript 是一门编程语言，它可以让网页动起来的，JavaScript 的变量有两种，一个是局部变量；一个是全区变量。怎么分啦？

a = 123;    // 全区变量

var a = 123;  // 局部变量

新版本 JavaScript 的賦值方式

let targetTempC; //let targetTempC = undefined, you can reassign value to targetTempC

const ROOM_TEMP_C = 12.5 //You cannot reassign the value to const later

let 和 var 的分別

你可以提前定义 var 开头的变量，这叫 hoisting ; 但不可以提前定义 let 开头的变量。let 和 var 的区别在于声明变量后作用域的不同应用。

x; // ReferenceError: x is not defined

let x = 3; // we'll never get here -- the error stops execution

x; // undefined

var x = 3;

x; // 3
function varTest() {

  var x = 1;

  if (true) {

    var x = 2;  // same variable!

    console.log(x);  //

  }

  console.log(x);  //

}

function letTest() {

  let x = 1;

  if (true) {

    let x = 2;  // different variable

    console.log(x);  //

  }

  console.log(x);  //

}

let 和 var 的例子

JavaScript 的数据类型

JavaScript 有六种数据类型:

  1. string
  2. number
  3. boolean
  4. null
  5. undefined
  6. symbol

JavaScript 的数字类型

  1. parseInt: 
    y = "111"
    
"111"

r2 = parseInt(y)
    
111

    parseInt( )

  2. parseFloat

JavaScript 的String 类型

var s1 = 'janice'

s1.length // length: 找字符串的长度: 6

s1.charAt(1) // "a"

s1.indexOf('i') // 3

s1.substring(1,4) // "ani"

s1.slice(0,3) // "jan"

'GooD Day! bad DAY'.toLowerCase() // "good day! bad day"

'GooD Day! bad DAY'.toUpperCase() // "GOOD DAY! BAD DAY"

"3" == 3 // true 两个等号 (==) 对比值是否相等

"3" === 3 // false 三个等号 (===) 对比值和类型是否相等

JavaScript 的数据类型 Array

  1. 创建数组 
    a = []
    
a = [11,22,33,44,55]

    a = [ ]

  2. 在数组尾部追加数据：push(ele) 
    a = [11,22,33,44,55,66]
    
a.push(77,88,99)
    
//

a
    
// [11, 22, 33, 44, 55, 66, 77, 88, 99]

a.push([77,88,99])
    
//

a
    
//[11, 22, 33, 44, 55, 66, 77, 88, 99, Array[3]]

    a.push(ele)例子一

    var numbers = [11,22,33,44,55,66];

numbers[length.numbers] = 77;
    
numbers.push(77,88,99); // pushing the item to the last part of the array
    
numbers.unshift(-22,-11,00); // pushing the item to the first part of the array

    a.push(ele)例子二

  3. 在数最后(尾部)部获取并删取数据：pop( ) 
    var numbers = [11,22,33,44,55,66];
    
var lastValue = numbers.pop() // 调用 pop()会获取数组的最后一个数值

lastValue
    
//

numbers
    
//  [11,22,33,44,55];

    pop( )例子

  4. 在数组头部插入数据：unshift( ) 
    var numbers = [11,22,33,44,55,66];
    
numbers.unshift(-22,-11,00);  // pushing the item to the first part of the array

    unshift( )例子

  5. 在数组头部获取并删取数据：shift( ) 
    var numbers = [11,22,33,44,55,66];
    
var firstValue = numbers.shift();

firstValue
    
//

numbers
    
//  [22,33,44,55,66]

    shift( )例子

  6. 把数组里的元素相加：join e.g. array.join(", ") 
    var months = [
    
    'January',
    
    'February',
    
    'March',
    
    'April',
    
    'May',
    
    'June',
    
    'July',
    
    'August',
    
    'September',
    
    'October',
    
    'November',
    
    'December'
    
];

for (i=0; i < months.length; i += 1){
    
    console.log(months.join(', '));
    
}

    join()例子

JavaScript 的字典

  1. 创建字典：dic = { } 
    a = {'k1':123, 'k2':456}
    
//Object {k1: 123, k2: 456}

    JavaScript创建字典

  2. 获取字典里的值：dic['key'] 
    a = {'k1':123, 'k2':456}
    
// Object {k1: 123, k2: 456}

a['k1']
    
//

    a['k1']

  3. 序列化：把对象变成字符串 JSON.stringify(a); 
    a = {'k1':123, 'k2':456}
    
// Object {k1: 123, k2: 456}

JSON.stringify(a)
    
//"{"k1":123,"k2":456}"

    JavaScript序列化

  4. 反序列化：把字符串变成对象  JSON.parse(b); 
    b = '{"k1":123, "k2":456}';
    
//"{"k1":123, "k2":456}"

JSON.parse(b);
    
//Object {k1: 123, k2: 456}

    JavaScript反序列化

  5. 调用 for-in loop 来获取 JavaScript Object 里的元素 
    var person = {
    
    name: 'Janice',
    
    country: 'HK',
    
    age: 25,
    
    treehouseStudent: true,
    
    skills: ['JavaScript','HTML','CSS','Python']
    
};

for (key in person) {
    
    console.log(key + ': ' +person[key]);
    
};

// results:

/*
    
name: Janice
    
country: HK
    
age: 25
    
treehouseStudent: true
    
skills: JavaScript,HTML,CSS,Python
    
*/

    for-in loop 例子

JavaScript 的转义

  1. encodeURL
  2. encodeComponentURL
  3. decodeURL
  4. decodeComponentURL
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Js-s3</title>

 </head>

 <body>

     <script>

         var url = "https://www.sogou.com/web?query=宋仲基";

         var ret1 = encodeURI(url);

         var ret2 = encodeURIComponent(url);

         console.log(ret1);

         console.log(ret2);

         var u1 = decodeURI(ret1);

         var u2 = decodeURIComponent(ret2);

         console.log(u1);

         console.log(u2);

     </script>

 </body>

 </html>

 <!--s3.html:12 https://www.sogou.com/web?query=%E5%AE%8B%E4%BB%B2%E5%9F%BA-->

 <!--s3.html:13 https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E5%AE%8B%E4%BB%B2%E5%9F%BA-->

 <!--s3.html:17 https://www.sogou.com/web?query=宋仲基-->

 <!--s3.html:18 https://www.sogou.com/web?query=宋仲基-->

JavaScript 转义

其他

  1. eval( )
  2. 时间处理，时间有两种：一种是 UTC; 一种是 GMT; 
    d = new Date()
    
// Sat Nov 26 2016 21:22:59 GMT+0800 (HKT)

d.getFullYear()
    
//

d.getHours()
    
//

d.getUTCDate()
    
//

d.getUTCHours()
    
//

d.setMinutes(d.getMinutes() + 2)
    
//

    JavaScript的时间处理

JavaScript 的条件判断

  1. if-else 
    var answer = prompt('What is the best programming language?');
    
if (answer === 'JavaScript'){
    
  alert('You are correct')
    
} else {
    
  alert('JavaScript is the best language!')
    
}

    if-else statement

  2. switch case
  3. for loop 
    for (var i = 0; i < 10; i++) {
    
   // do something in here
    
}
     <!DOCTYPE html>
    
 <html lang="en">
    
 <head>
    
     <meta charset="UTF-8">
    
     <title>s3</title>
    
 </head>
    
 <body>
    
     <script type="text/javascript">
    
         var li = [11,22,33,44,55];

         // 這是循环它的索引
    
         for(var i = 0; i < li.length; i++){
    
             console.log(i,li[i]);
    
         }

         for(var item in li){
    
             console.log(item,li[item])
    
         }

 //    0 11
    
 //    1 22
    
 //    2 33
    
 //    3 44
    
 //    4 55

         var dic = {'k1':123, 'k2':456};
    
         for(key in dic){
    
             console.log(key, dic[key])
    
         }
    
 //    k1 123
    
 //    k2 456

     </script>
    
 </body>
    
 </html>

    for loop 例子

  4. while loop - 首先查看循环条件，如果符合才会进行循环 
    while ( ) {
    
  // this is the loop
    
}
    function randomNumber(upper){
    
    return Math.floor(Math.random() + upper) + 1;
    
}

var counter = 0;
    
while (counter < 5) {
    
    var ranNum = randomNumber(6);
    
    document.write(ranNum + ' ');
    
    counter += 1;

}

    while loop 例子

  5. do while loop - 会先运行至少一次循环条件然后才查看循环条件，如果符合才会进行循环。 
    do {
    
  // code for loop goes here
    
  // it runs AT least one time
    
} while ( )
    var randomNumber = getRandomNumer(10);
    
var guess;
    
var guessCount = 0;
    
var correctGuess = false;

function getRandomNumer(upper){
    
    var num = Math.floor(Math.random() + upper) + 1;
    
    return num;
    
}

do {
    
    guess = prompt('I am thinking of a number between 1 and 10. What is it?');
    
    guessCount += 1;
    
    if (parseInt(guess) === randomNumber) {
    
        correctGuess = true;
    
    }
    
} while (! correctGuess)

document.write('<h1>You guess the number!</h1>')
    
document.write('It took you ' + guessCount + 'tries to guess the correct number ' + randomNumber)

    do while loop 例子

JavaScript 的异常处理

Python 中的主动抛出异常

raise Exception('xxxxx')

JavaScript  中的主动抛出异常

throw new Error('xxxx')

JavaScript 的函数

  1. 普通函数 
    function f1(){
    
    alert(123)
    
};
  2. 匿名函数 
    function exec(func, arg){
    
  func(arg);
    
}

exec((something) => {
    
     console.log(something);
    
}, 'Hello!');
  3. 自执行函数 
    (function(arg){
    
    alert(arg);
    
})(123)

在 JavaScript 的世界没有块级作用域，但是它采用函数作用域，意思就是说如果你定义的变量在同一个函数里，不论里面有多少个块级，这个变量都可以给其他块级引用；但如果在 fun1( )定义了一个变量，在func2( )就不可以被引用了。

function f2(){

    var arg= 111;

    function f3(){

        console.log(arg);

    }

    return f3;

}

ret = f2();

ret();

JavaScript 作用域

JavaScript的作用域在执行之前已经创建，所以如果全区有一个变量和函数里有相同的变量时候，在调用函数时会调用函数里的，而不是全区的变量。在下面的代码例子中：

  1. 第一步：声明了一个全区的 xo = grandfather;
  2. 第二步：在代码还没被执行时作用域已经在内部定义好了，代码是从上往下被内部定义，定义了 xo = undefined
  3. 第三步：当函数被调用时，代码是从本身的函数作用域往前推来调用的。所以时次调用的结果是找到 inner( )的 xo 变量并打印，因为xo 被赋值成 'myself'，所以结果是 'myself'

代码编译时

第十五章：Python の Web开发基础 (二) JavaScript与DOM

代码执行过程
第十五章：Python の Web开发基础 (二) JavaScript与DOM

xo = 'grandfather';

function func() {

    var xo = 'father';

    function inner() {

        console.log(xo)

    }

    xo = 'myself';

    return inner;

}

var ret = func();

ret();

JavaScript作用域例子

JavaScript 有一个特点，可以提前声明变量，它在编译的过程中会在一个函数里找所有的函数，然后提前声明为 undefined

function f1(){

    // xo = undefined

    console.log(xo)

    var xo = 'janice'

}

JavaScript提前声明

  1. 模态对话框 
    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
</head>
    
<body>
    
    <input id='i1' type="text" value="请输入关键字" onfocus="Focus()"; onblur="Blur()"/>
    
    <input id='i2' type="text" />

    <script type="text/javascript">
    
        function Focus(){
    
//            console.log('focus');
    
            var tag = document.getElementById('i1');
    
            var val = tag.value;
    
            if (val == "请输入关键字"){
    
                tag.value = "";
    
            }
    
        }

        function Blur(){
    
            console.log('blur');
    
            var tag = document.getElementById('i1');
    
            var val = tag.value;
    
            if (val.trim().length == 0){
    
                tag.value = "请输入关键字";
    
            }

        }

    </script>
    
</body>
    
</html>

    模态对话框(例子)

  2. 动态对话框 
    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
    <style>
    
        .shade{
    
            position: fixed;
    
            top: 0;
    
            right: 0;
    
            bottom: 0;
    
            left: 0;

            background-color: black;
    
            opacity: 0.6;
    
            z-index: 1000;
    
        }
    
        .model{
    
            height: 200px;
    
            width: 400px;
    
            background-color: white;
    
            position: fixed;

            top: 50%;
    
            left: 50%;
    
            margin-left: -200px;
    
            margin-top: -100px;
    
            z-index: 1001;
    
        }
    
        .hide{
    
            display: none; !important;
    
        }
    
    </style>
    
</head>
    
<body>
    
    <div style="height: 2000px; background-color: palegoldenrod">
    
        <input type="button" value="Press Me" onclick="ShowModel();"/>
    
    </div>
    
    <div id="shade" class="shade hide"></div>
    
    <div id="model" class="model hide">

        <!--<a href="javascript:void(0)" onclick="HideModel();">Cancel</a>-->
    
        <input type="button" value="Cancel" onclick="HideModel();"/>
    
    </div>

    <script>
    
        function ShowModel(){
    
            var t1 = document.getElementById('shade');
    
            var t2 = document.getElementById('model');

            t1.classList.remove('hide');
    
            t2.classList.remove('hide');
    
        }
    
        function HideModel(){
    
            var t1 = document.getElementById('shade');
    
            var t2 = document.getElementById('model');

            t1.classList.add('hide');
    
            t2.classList.add('hide');
    
        }
    
    </script>
    
</body>
    
</html>

    动态对话框(例子)

  3. 选框 
    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>s7</title>
    
</head>
    
<body>
    
    <input type="button" value="全选" onclick="CheckAll()" />
    
    <input type="button" value="取消" onclick="CancelAll()" />
    
    <input type="button" value="反选" onclick="ReverseAll()" />

    <table border="1">
    
        <thead>
    
            <tr>
    
                <th>序号</th>
    
                <th>用户名</th>
    
                <th>密码</th>
    
            </tr>
    
        </thead>
    
        <tbody id="tb">
    
            <tr>
    
                <td><input type="checkbox"/></td>
    
                <td>1</td>
    
                <td>11</td>
    
            </tr>
    
            <tr>
    
                <td><input type="checkbox"/></td>
    
                <td>2</td>
    
                <td>22</td>
    
            </tr>
    
            <tr>
    
                <td><input type="checkbox"/></td>
    
                <td>3</td>
    
                <td>33</td>
    
            </tr>

        </tbody>
    
    </table>

    <script type="text/javascript">
    
        function CheckAll(){
    
            var tb = document.getElementById('tb');
    
            var trs = tb.children;
    
            for(var i=0; i < trs.length; i++){
    
                var current_tr = trs[i];
    
                ck = current_tr.firstElementChild.firstElementChild;
    
                ck.setAttribute('checked','checked');
    
            }
    
        }
    
        function CancelAll(){
    
            var tb = document.getElementById('tb');
    
            var trs = tb.children;
    
            for(var i=0; i < trs.length; i++) {
    
                var current_tr = trs[i];
    
                ck = current_tr.firstElementChild.firstElementChild;
    
                ck.removeAttribute('checked');
    
            }
    
        }
    
        function ReverseAll(){
    
            var tb = document.getElementById('tb');
    
            var trs = tb.children;
    
            for(var i=0; i < trs.length; i++) {
    
                var current_tr = trs[i];
    
                ck = current_tr.firstElementChild.firstElementChild;

                if (ck.checked){
    
                    ck.checked = false;
    
                    ck.removeAttribute('checked');
    
                }else {
    
                    ck.checked = true;
    
                    ck.setAttribute('checked','checked');
    
                }

            }
    
        }
    
    </script>
    
</body>
    
</html>

    选框(例子)

DOM 介绍

第十五章：Python の Web开发基础 (二) JavaScript与DOM

把整个 HTML 弄成一个文档树，然后调用 DOM 来操作，包括新增、删除、更新 HTML中的 Tag

JavaScript Document is a global object representing the HTML and the web page. As with JavaScript, you are interacting with the webpage by changing the document.

  1. Selecting elements on the page 
    const element = document.getElementById('a') // <ul id='a'>111</ul>
    
const elements = document.getElementsByClassName('myClass') //<div class='myClass'>111</div>
    
const element = document.getElemenetsByName('animals') //<input name="animal" type="checkbox" value="Cats">
    
const elements = document.getElementsByTagName('p') // [<p>,<p>,<p>]
    
const element = document.querySelector('li')
    
const elements = document.querySelectorAll('li')
  2. Manipulating elements  
    const toggleList = document.getElementById('toggleList');
    
const listDiv = document.querySelector('.list');

const descriptionInput = document.querySelector('input.description');
    
const descriptionP = document.querySelector('p.description'); //specify the paragraph with the description class
    
const descriptionButton = document.querySelector('button.description');

const addItemInput = document.querySelector('button.addItemInput');
    
const addItemButton = document.querySelector('button.addItemButton');

const removeItemButton = document.querySelector('button.removeItemButton');

toggleList.addEventListener('click', () => {
    
  if (listDiv.style.display == 'none'){
    
  toggleList.textContent = 'Hide List';
    
  listDiv.style.display = 'block';
    
} else {
    
  toggleList.textContent = 'Show List';
    
  listDiv.style.display = 'none';
    
}
    
});

descriptionButton.addEventListener('click', () => {
    
  descriptionP.innerHTML = descriptionInput.value + ':';
    
  descriptionInput.value = '';
    
});

addItemButton.addEventListener('click', () => {
    
  let ul = document.getElementsByTagName('ul')[0];
    
  let li = document.createElement('li');
    
  li.textContent = addItemInput.value;
    
  ul.appendChild(li);
    
});

removeItemButton.addEventListener('click', () => {
    
  let ul = document.getElementsByTagName('ul')[0];
    
  let li = document.querySelector('li:last-child');
    
  ul.removeChild(li);
    
});

    完整例子

    • innerHTML - 获取 HTML 的 tag 中文本+HTML Tag 的内容 
      let ul = document.querySelector('ul')
      
ul.innerHTML

/*
      
"
      
      <li>grapes</li>
      
      <li>amethyst</li>
      
      <li>lavender</li>
      
      <li>plums</li>
      
    "
      
*/

      innerHTML

    • innerText - 获取 HTML 的 tag 中文本的内容 
      <div>这是本文内容</div>
    • value - 获取 HTML 的 tag 中的值
    • textContent － 只获取 HTML tag 中的字符串 
      let ul = document.querySelector('ul')
      
ul.textContent

/*
      
"
      
      grapes
      
      amethyst
      
      lavender
      
      plums
      
    "
      
*/

      textContent

    • input.className
      
input.type = 'checkbox'
      
obj.innerHTML = '<li>apple</li>'
      
obj.textContent = 'apple'
      
obj.style.color = 'red'
      
obj.style.display = 'none'
      
obj.style.display = 'block'
      
obj.style.backgroundColor = 'lightblue'
      
// Element Style properties
      
document.createElement('div')
      
parentElement.appendChild(childElement)
      
parentElement.removeChild(childElement)
  3. Listening for user actions 这个用法是不在 HTML Tag 中加入 event，而是在 JavaScript 中加入监听事件 addEventListener( )  
    EventTarget.addEventListener(type, (event) => {
    
   console.log(event.target);
    
});
    <!DOCTYPE html>
    
<html>
    
  <head>
    
    <title>JavaScript and the DOM</title>
    
    <link rel="stylesheet" href="css/style.css">
    
  </head>
    
  <body>
    
    <h1 id="myHeading">JavaScript and the DOM</h1>
    
    <p>Making a web page interactive</p>
    
    <input type='text' id="myTextInput"/>
    
    <button id="myButton">Change headline color</button>
    
  <script>
    
  const myHeadingBtn = document.getElementById('myHeading');
    
  const myButtonBtn = document.getElementById('myButton');
    
  const myTextInputBtn = document.getElementById('myTextInput');

  myButtonBtn.addEventListener('click', ()=> {
    
    myHeadingBtn.style.color = myTextInputBtn.value;
    
  });
    
  </script>
    
  </body>
    
</html>

    addEventListener 例子

  4. Checking the sibling of the node 
    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title></title>
    
</head>
    
<body>
    
    <div>
    
        <ul>
    
            <li id='a'>apple</li>
    
            <li id='b'>banana</li>
    
            <li id='w'>waterlemon</li>
    
            <li id='l'>lemon</li>
    
            <li id='g'>grapes</li>
    
        </ul>
    
    </div>
    
</body>
    
</html>

    html example code

    • 第一步、首先找出它的 id

      waterlemon = document.getElementById('w')
      
//這里获取了 <li id='w'>waterlemon</li> 数据

      document.getElementById('w')

    • 第二步、可以找这里 id=w 的父亲 Node: 
      ul = waterlemon.parentNode
      
// 调用 parentNode 取了 ＜li></li> 的HTML父亲, 即 <ul></ul>

ul2 = waterlemon.parentElement

      parent

    • 第三步、可以找这个父亲 Node 的儿子 Node: 
      ul.childNodes
      
// 调用 childNodes 取了 <div></di> 的HTML儿子和一些text, 即下面一系列的 ＜li></li>

ul.children
      
//只获取 ul 的HTML 儿子

      child

    • 第四步、找父亲 Node 的第一个儿子 
      ul.firstChild
      
ul.firstElementChild
      
//获取第一个 ul 的HTML 儿子, e.g. <li id='a'>apple</li>

      firstChild

    • 第五步、找父亲 Node 的最后一个儿子 
      ul.lastChild
      
ul.lastElementChild //获取第一个 ul 的HTML 儿子, e.g. <li id='g'>grapes</li>

      lastChild

    • 第六步、找儿子 Node 的前一个兄弟(大哥) Node 
      waterlemon.nextSibling
      
waterlemon.nextElementSibling // 获取 waterlemon 的下一个 HTML 的同级兄弟, e.g. <li id='l'>lemon</li>

      nextSibling

    • 第七步、找儿子 Node 的后一个兄弟(弟弟) Node 
      waterlemon.previousSibling
      
waterlemon.previousElementSibling // 获取 waterlemon 的上一个 HTML 的同级兄弟, e.g. <li id='b'>banana</li>

      previousSibling

操作内容

  1. 创建标签
    • 字符串的形式
    • 对象的形式
  2. 操作标签 
    p1 = document.getElementById('p1')

var tag1 = "<a>beforeEnd</a>"
    
var tag2 = "<a>beforeBegin</a>"
    
var tag3 = "<a>afterEnd</a>"
    
var tag4 = "<a>afterBegin</a>"

p1.insertAdjacentText("beforeEnd",tag1)
    
p1.insertAdjacentText("beforeBegin",tag2)
    
p1.insertAdjacentText("afterEnd",tag3)
    
p1.insertAdjacentText("afterBegin",tag4)

<a>111</a> //beforeBegin
    
<div id="p1">
    
    <a>111</a> //afterBegin
    
    <p>hhh</p>
    
    <a>111</a> //beforeEnd
    
</div>
    
<a>111</a> //afterEnd

    操作标签

tags = document.getElementsByTagName('div')

//[div.c1.c2.c3]

tags[0]

//<div class="c1 c2 c3">123</div>

tags[0].className

//"c1 c2 c3"

tags[0].classList

//["c1", "c2", "c3"]

tags[0].classList.add('c4')

tags

//[div.c1.c2.c3.c4]

tags[0].classList.remove('c4')

tags

//[div.c1.c2.c3]

案例实战

  1. 小案例一：搜索框 
    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>S3</title>
    
</head>
    
<body>
    
    <input id='i1' type="text" value="请输入关键字" onfocus="Focus()"; onblur="Blur()"/>
    
    <input id='i2' type="text" />

    <script type="text/javascript">
    
        function Focus(){
    
            console.log('focus');
    
            var tag = document.getElementById('i1');
    
            var val = tag.value;
    
            if (val == "请输入关键字"){
    
                tag.value = "";
    
            }
    
        }

        function Blur(){
    
            console.log('blur');
    
            var tag = document.getElementById('i1');
    
            var val = tag.value;
    
            if (val.trim().length == 0){
    
                tag.value = "请输入关键字";
    
            }

        }

    </script>
    
</body>
    
</html>

    搜索框

  2. 小案例二：多选反选取消 
    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>s7</title>
    
</head>
    
<body>
    
    <!--<div id="p1">-->
    
        <!--<p>hhh</p>-->
    
    <!--</div>-->
    
    <input type="button" value="全选" onclick="CheckAll()" />
    
    <input type="button" value="取消" onclick="CancelAll()" />
    
    <input type="button" value="反选" onclick="ReverseAll()" />

    <table border="1">
    
        <thead>
    
            <tr>
    
                <th>序号</th>
    
                <th>用户名</th>
    
                <th>密码</th>
    
            </tr>
    
        </thead>
    
        <tbody id="tb">
    
            <tr>
    
                <td><input type="checkbox"/></td>
    
                <td>1</td>
    
                <td>11</td>
    
            </tr>
    
            <tr>
    
                <td><input type="checkbox"/></td>
    
                <td>2</td>
    
                <td>22</td>
    
            </tr>
    
            <tr>
    
                <td><input type="checkbox"/></td>
    
                <td>3</td>
    
                <td>33</td>
    
            </tr>

        </tbody>
    
    </table>

    <script type="text/javascript">
    
        function CheckAll(){
    
            var tb = document.getElementById('tb');
    
            var trs = tb.children;
    
            for(var i=0; i < trs.length; i++){
    
                var current_tr = trs[i];
    
                ck = current_tr.firstElementChild.firstElementChild;
    
                ck.checked = true;
    
            }
    
        }
    
        function CancelAll(){
    
            var tb = document.getElementById('tb');
    
            var trs = tb.children;
    
            for(var i=0; i < trs.length; i++) {
    
                var current_tr = trs[i];
    
                ck = current_tr.firstElementChild.firstElementChild;
    
                ck.checked = false;
    
            }
    
        }
    
        function ReverseAll(){
    
            var tb = document.getElementById('tb');
    
            var trs = tb.children;
    
            for(var i=0; i < trs.length; i++) {
    
                var current_tr = trs[i];
    
                ck = current_tr.firstElementChild.firstElementChild;

                if (ck.checked){
    
                    ck.checked = false;
    
                }else {
    
                    ck.checked = true;
    
                }

            }
    
        }
    
    </script>
    
</body>
    
</html>

    多选反选取消

  3. 小案例三：点赞功能 
    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
    <style>
    
        .item{
    
            padding: 50px;
    
            position: relative;
    
        }
    
        .item span{
    
            position: absolute;
    
            top: 49px;
    
            left: 71px;
    
            opacity: 1;
    
            font-size: 18px;
    
            color: green;
    
        }
    
    </style>
    
</head>
    
<body>
    
    <div class="item">
    
        <a onclick="Favor(this);">赞1</a>
    
    </div>
    
    <div class="item">
    
        <a onclick="Favor(this);">赞2</a>
    
    </div>
    
    <div class="item">
    
        <a onclick="Favor(this);">赞3</a>
    
    </div>
    
    <div class="item">
    
        <a onclick="Favor(this);">赞4</a>
    
    </div>
    
    <script type="text/javascript">
    
        function Favor(ths){
    
//            console.log(ths.parentElement);

            var top = 49;
    
            var left = 71;
    
            var op = 1;
    
            var fontSize = 18;

            var tag = document.createElement('span');
    
            tag.innerText = "+1";
    
            tag.style.position = "absolute";
    
            tag.style.top = top + "px";
    
            tag.style.left = left + "px";
    
            tag.style.opacity = op ;
    
            tag.style.fontSize = fontSize + "px";
    
            ths.parentElement.appendChild(tag);

            var interval = setInterval(function () {
    
                top -= 10;
    
                left += 10;
    
                fontSize += 5;
    
                op -= 0.1;

                tag.style.top = top + "px";
    
                tag.style.left = left + "px";
    
                tag.style.opacity = op;
    
                tag.style.fontSize = fontSize + "px";

                if (op <= 0.2){
    
                    clearInterval(interval);
    
                    ths.parentElement.removeChild(tag);
    
                }

            }, 50)
    
        }

    </script>
    
</body>
    
</html>

    点赞功能

  4. 小案例四：返回顶部 
    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>s11</title>
    
    <style>
    
        .back{
    
            position: fixed;
    
            right: 20px;
    
            bottom: 20px;
    
            color: red;
    
        }
    
        .hide{
    
            display: none;
    
        }
    
    </style>
    
</head>
    
<body onscroll="BodyScroll();">
    
    <div style="height: 2000px; background-color: #dddddd; overflow: auto"></div>
    
    <div id='back' class="back hide" onclick="BackTop();">返回顶部</div>
    
    <script type="text/javascript">
    
        function BackTop(){
    
            document.body.scrollTop = 0;
    
        }
    
        function BodyScroll(){
    
            var s = document.body.scrollTop;
    
            var t = document.getElementById('back');
    
            if (s >= 100){
    
                t.classList.remove('hide')
    
            } else {
    
                t.classList.add('hide')
    
            }
    
        }
    
    </script>
    
</body>
    
</html>

    返回顶部

  5. 小案例五：通过 JavaScript 在提交数据 
     <!DOCTYPE html>
    
 <html lang="en">
    
 <head>
    
     <meta charset="UTF-8">
    
     <title></title>
    
 </head>
    
 <body>
    
     <form id="f1">
    
         <input id='i1' type="text"/>
    
         <input type="submit", value="提交" />
    
         <a onclick="Submit()";>提交</a>
    
     </form>

     <script type="text/javascript">
    
         function Submit(){
    
             var form = document.getElementById('f1');
    
             form.submit();
    
         }
    
     </script>
    
 </body>
    
 </html>

    通过 JavaScript 在提交数据例子

  6. 小案例六：判断 form 是吾可以提交 onclick="return SubmitForm(); 
     <!DOCTYPE html>
    
 <html lang="en">
    
 <head>
    
     <meta charset="UTF-8">
    
     <title>s16</title>
    
 </head>
    
 <body>
    
     <form action="http://www.baidu.com">
    
         <input id="username" type="text"/>
    
         <input type="submit" value="提交" onclick="return SubmitForm();"/>
    
     </form>
    
     <script>
    
         function SubmitForm() {
    
             var user = document.getElementById('username');
    
             if (user.value.length > 0) {
    
                 //可以提交
    
                 return true;
    
             } else {
    
                 //不可以提交和提示错误
    
                 alert('用户名输入不能为空');
    
                 return false;
    
             }
    
         }
    
     </script>
    
 </body>
    
 </html>

    判断 form 是吾可以提交例子

DOM 事件

绑定事件，把一些 HTML Tag，比如 <button>, <input> 绑定以下事件

  1. onfocus，当mouse 点击时进行操作 
    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>S3</title>
    
</head>
    
<body>
    
    <input id='i1' type="text" value="请输入关键字" onfocus="Focus()"; onblur="Blur()"/>
    
    <input id='i2' type="text" />

    <script type="text/javascript">
    
        function Focus(){
    
            console.log('focus');
    
            var tag = document.getElementById('i1');
    
            var val = tag.value;
    
            if (val == "请输入关键字"){
    
                tag.value = "";
    
            }
    
        }

        function Blur(){
    
            console.log('blur');
    
            var tag = document.getElementById('i1');
    
            var val = tag.value;
    
            if (val.trim().length == 0){
    
                tag.value = "请输入关键字";
    
            }

        }

    </script>
    
</body>
    
</html>

    onfocus 例子

  2. onclick，点击的时进行操作
  3. ondbclick
  4. onblur，当mouse 离开时进行操作
  5. onchange，当有改变时进行操作
onkeydown

onkeyup

onkeypress

onload

onmousedown

onmouseover

onmouseout

onmousemove

onmouseup

onrest

onresize

onselect

onsubmit

onunload

onload

其他 DOM-event

全区绑定事件

window.onkeydown = function(event){

    console.log(event)

}

參考資料

银角大王：Python开发【第十一篇】：JavaScript | Python开发【第十二篇】：DOM

金角大王：

其他：jQuery 中文文档 | 事件

相关文章