window对象：
提示框:
计时相关的内置函数：
setTimeout()和clearTimeout()
setinterval()和clearinterval()
location对象：
JS中查找标签（直接查找）：
间接查找标签：
节点操作（对标签的操作）：
标签中对类的操作：
简单的几个案例巩固：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" class="c1"> <button id="d1">开始</button> <button id="d2">结束</button> <script> // 定义一个全局的变量 var t = null; var inputEle = document.getElementsByClassName('c1')[0]; function showTime() { var currentTime = new Date(); inputEle.value = currentTime.toLocaleString() } var d1Ele = document.getElementById('d1'); var d2Ele = document.getElementById('d2'); d1Ele.onclick = function () { if (!t){ // 与 && 或|| 非! t = setInterval(showTime,1000) } }; d2Ele.onclick = function () { clearInterval(t); t = null } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { height: 400px; width: 400px; border-radius: 50%; } .bg_red { background-color: red; } .bg_green { background-color: green; } </style> </head> <body> <div class="c1 bg_red bg_green"> <button id="d1">变色</button> <script> var b1Ele = document.getElementById('d1'); var d1Ele = document.getElementsByTagName('div')[0]; b1Ele.onclick = function () { d1Ele.classList.toggle('bg_green') } </script> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="" id="d1"> <option value="">---请选择---</option> </select> <select name="" id="d2"> <option value="">---请选择---</option> </select> <script> var data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"], "上海": ["静安区","黄浦区"], "深圳": ["南山区","龙岗区"] }; var seEle = document.getElementById('d1'); var se2Ele = document.getElementById('d2'); for (var i in data){ // 创建option标签 var optEle = document.createElement('option'); // 给标签添加内部文本值 optEle.innerText = i; // 给标签设置value属性值 optEle.value = i; // 将创建好的option标签添加到第一个select框中 seEle.appendChild(optEle) } // 给第一个select框绑定change事件 seEle.onchange = function () { // 选择哪一个省value值就是哪一个 var currentPro = seEle.value; var currentCityList = data[currentPro]; // 先清空第二个select框中所有的option标签 se2Ele.innerHTML = ''; var opttEle = document.createElement('option'); opttEle.innerText = '---请选择---'; se2Ele.appendChild(opttEle); // 循环遍历数组 for (let i=0;i<currentCityList.length;i++){ // 动态创建标签 var optEle = document.createElement('option'); optEle.innerText = currentCityList[i]; optEle.value = currentCityList[i]; // 将创建出来的option标签添加到第二个select框中 se2Ele.appendChild(optEle) } } </script> </body> </html>
JQuery简单介绍和标签选择方式：
在Pycharm中设置模板方式：
模态框实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jQuery-3.4.1.js"></script> <style> .cover { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(128,128,128,0.45); z-index: 9; } .modal { position: fixed; top: 50%; left: 50%; height: 200px; width: 400px; background-color: white; z-index: 10; margin-top: -100px; margin-left: -200px; } .hidden { display: none; } </style> </head> <body> <div class="c1"> 我是被压在最下的 </div> <button class="c2">叫人</button> <div class="cover hidden"></div> <div class="modal hidden"> <p>username:<input type="text"></p> <p>password:<input type="text"></p> <button class="cancel">取消</button> </div> <script> var b1Ele = $('.c2')[0]; b1Ele.onclick = function () { // 将纱布和白框的hidden类属性移除 $('.cover').removeClass('hidden'); // xxx.classList.remove('hidden') $('.modal').removeClass('hidden') }; var cancelEle = $('.cancel')[0]; cancelEle.onclick = function () { $('.cover').addClass('hidden'); // xxx.classList.add('hidden') $('.modal').addClass('hidden') } </script> </body> </html>
JQuery中标签查找：
按属性查找：
JQuery中操作CSS样式：
