标签：自定义 otto 内容 移除 nts radio ide pytho set
HTML、CSS只能写出静态效果，JS可以制作动态效果
JavaScript是编程语言，DOM和BOM是两个模块，利用JavaScript语言再结合DOM、BOM模块可以让我们的页面出现动态的效果。
引入方式：
Script代码块，只能在当前页面使用。<script type="text/javascript"> // 内部编写JavaScript代码 </script>独立js文件，可以被多个引入之后使用。
<script type="text/javascript" src="JavaScript文件路径"></script>
推荐把css在header引入，js代码放在body标签的底部,这样先加载页面文字和样式，体验较好。
js中单行注释用 // ；多行注释用 /* */
局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。
常见数据类型
数字（Number）：JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。
// 声明
var page = 111;
var age = Number(18);
var a1 = 1,a2 = 2, a3 = 3;
// 转换
parseInt("1.2"); // 将某值转换成数字，不成功则NaN
parseFloat("1.2"); // 将某值转换成浮点数，不成功则NaN
/*
NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。
*/
字符串(String)
声明
var name = "wupeiqi";
var name = String("wupeiqi");
var age_str = String(18);
// 常用方法
var name = "wupeiqi";
var value = names[0] // 索引
var value = name.length // 获取字符串长度
var value = name.trim() // 去除空白
var value = name.charAt(index) // 根据索引获取字符
var value = name.substring(start,end) // 根据索引获取子序列
布尔类型（Boolean）
var status = true;
var status = false;
/*
在js中进行比较时，需要注意：
== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且
*/
数组（Array）
//声明
var names = [‘a‘, ‘b‘, ‘c‘]
var names = Array(‘anna‘, ‘nana‘)
// 常见方法
names[0] // 索引
names.push(ele) // 尾部追加元素
var ele = names.obj.pop() // 尾部移除一个元素
names.unshift(ele) // 头部插入元素
var ele = obj.shift() // 头部移除一个元素
names.splice(index,0,ele) // 在指定索引位置插入元素
names.splice(index,1,ele) // 指定索引位置替换元素
names.splice(index,1) // 指定位置删除元素
names.slice(start,end) // 切片
names.reverse() // 原数组反转
names.join(sep) // 将数组元素连接起来以构建一个字符串
names.concat(val,..) // 连接数组
names.sort() // 对原数组进行排序
字典（对象Object）
// 声明
info = {
name:‘安娜‘,
"age":18
}
// 常用方法
var val = info[‘name‘] // 获取
info[‘age‘] = 20 // 修改
info[‘gender‘] = ‘male‘ // 新增
delete info[‘age‘] // 删除
其他（null、undefine）
null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”，相当于Python的None。
undefined是一个特殊值，表示变量声明但未定义。
var name;
console.log(typeof(name));
条件
if,else，用于判断。
var age = 18;
if(age <18){
}else if(age>=18 and 1 == 1){
}else if(age>=30){
}else{
}
switch,case，用于判断等于某些值。
var num = 18;
switch(num){
case 10:
console.log(‘未成年‘);
break;
case 18:
console.log(‘成年‘);
break;
case 35:
console.log(‘油腻老男人‘);
break;
case 100:
console.log(‘....‘);
break;
default:
console.log(‘太大了‘);
}
循环语句
for(var i in [‘国产‘,‘日韩‘,‘欧美‘])，默认生成索引，适用于：字符串、元组、字典。
for(var i=0;i<10;i++)，自定义索引并设置增加步长，适用于：字符串、元组。（字典索引非有序）
异常处理
在JavaScript的异常处理中有两个注意事项：
try {
//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
var name = ‘‘
}
catch (e) {
// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}
函数
JavaScript中的函数可以简单概括为以下三类：
- 普通函数：
function func(arg){ return arg + 1; }
- 匿名函数
function (arg){ return arg + 1; } // 一般用于当做参数使用，例如：设置定时器 setInterval(function(){},1000)
- 自执行函数，自动触发执行。
(function(arg){ console.log(arg); })(‘anna‘)
json 序列化（将对象和字符串之间进行转换。）
JSON.stringify(object) ，序列化JSON.parse(str)，反序列化网络中数据传输本质上是基于字符串进行，如果想要把一个js的对象通过网络发送到某个网站，就需要对对象进行序列化然后发送。
文档对象模型（Document Object Model，DOM）是一种用于HTML编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。更直白一点讲：DOM相当于是一个模块，提供了关于HTML文档中对标签进行操作的功能，JavaScript结合DOM可以对HTML中的标签进行操作。
DOM对象：https://www.runoob.com/jsref/dom-obj-document.html
选择器
- 直接查找
document.getElementById(arg) // 根据ID获取一个标签对象 document.getElementsByClassName(arg) // 根据class属性获取标签对象集合 document.getElementsByName(arg) // 根据name属性值获取标签对象集合 document.getElementsByTagName(arg) // 根据标签名获取标签对象集合
- 间接查找
var tag = document.getElementById(arg); tag.parentElement // 找当前标签对象的父标签对象 tag.children // 找当前标签对象的所有子标签对象 tag.firstElementChild // 找当前标签对象的第一个子标签对象 tag.lastElementChild // 找当前标签对象最后一个子标签对象 tag.nextElementtSibling // 找当前标签对象下一个兄弟标签对象 tag.previousElementSibling // 找当前标签对象上一个兄弟标签对象
DOM 元素对象
DOM元素属性和方法：https://www.runoob.com/jsref/dom-obj-all.html
element.appendChild()为元素添加一个新的子元素element.removeChild()删除一个子元素element.replaceChild()替换一个子元素element.remove()删除这个元素nodelist.length返回节点列表的节点数目。（元素之间的空格是文本，文本是节点）如删除表格一行数据：
<td> <input type="button" value="删除" onclick="deleteRow(this);"> </td> <script> //删除表格中当前行的数据 function deleteRow(self) { var rowTr = self.parentElement.parentElement; rowTr.remove(); } </script>文本操作
对标签内部文本进行操作时，可以通过 innerText 和 innerHTML来进行。
- innerText
标签对象.innerText，读取标签内容（仅文本）。标签对象.innerText="an"，修改标签内容（仅文本）。- innerHTML
标签对象.innerHTML，读取标签内容（含标签）。标签对象.innerText="<a href=‘#‘>an</a>"，修改标签内容（标签、文本）。属性对象
值操作针对与用户交互相关的标签，其中内部使用value属性进行操作。
input,textarea,select
单选框radio复选框checkbox，通过value可以取值。但在应用时常常是以选择形式出现，所以在使用过程中还会去判断他是否已被选中。
扩展：标签对象.checked可以对选中状态进行读取和设置。var radios = document.getElementsByName(‘gender‘); for (var i = 0; i < radios.length; i++) { if (radios[i].value === "male") { radios[i].checked = true; } }class 属性操作
DOM中主要提供了三个帮助我们操作class属性值的功能：
标签对象.className，class属性对应的值直接操作。标签对象.classList.remove(cls)，class属性对应值删除某个样式。标签对象.classList.add(cls)，class属性中添加样式。模态对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .container{ width: 980px; margin: 0 auto; } .header{ height: 48px; background-color: #499ef3; } .shade{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: black; opacity: 0.7; } .login{ width: 400px; height: 300px; background-color: white; border: 1px solid #dddddd; position: fixed; top: 60px; left: 50%; margin-left: -200px; } .hide{ display: none; } </style> </head> <body> <div class="header"> <div style="float: right;margin: 10px;"> <a onclick="showDialog();" style="padding: 5px 10px;background-color: goldenrod;color: white;">登录</a> </div> </div> <div class="body"> <div class="container" style="text-align: center"> <img src="https://w.wallhaven.cc/full/ox/wallhaven-ox83gp.jpg" alt=""> </div> </div> <!--遮罩层--> <div id="shade" class="shade hide"></div> <!--登录框--> <div id="login" class="login hide"> <h2 style="text-align: center">用户登录</h2> <a onclick="hideDialog();" style="padding: 5px 10px;background-color: cornflowerblue;color: white;">关闭</a> </div> <script type="text/javascript"> function showDialog() { document.getElementById(‘shade‘).classList.remove(‘hide‘); document.getElementById(‘login‘).classList.remove(‘hide‘); } function hideDialog() { document.getElementById(‘shade‘).classList.add(‘hide‘); document.getElementById(‘login‘).classList.add(‘hide‘); } </script> </body> </html>style 样式操作
如果想要对样式操作的粒度更细一些，可以使用style样式操作，他比class属性对样式的操作粒度更细。
document.getElementById(‘header‘).style.backgroundColor = ‘green‘;点赞+1效果
function doFavor(self) { var plusTag = document.createElement(‘span‘); var fontSize = 10; var marginLeft = 10; var marginTop = 10; var opacity = 1; plusTag.innerText = "+1"; plusTag.style.color = ‘green‘; plusTag.style.position = ‘absolute‘; plusTag.style.fontSize = fontSize + ‘px‘; plusTag.style.marginLeft = marginLeft + ‘px‘; plusTag.style.marginTop = marginTop + ‘px‘; plusTag.style.opacity = opacity; self.appendChild(plusTag); var interval = setInterval(function() { fontSize += 5; marginLeft += 5; marginTop -= 5; opacity -= 0.2; plusTag.style.fontSize = fontSize + ‘px‘; plusTag.style.marginLeft = marginLeft + ‘px‘; plusTag.style.marginTop = marginTop + ‘px‘; plusTag.style.opacity = opacity; if (opacity <= 0) { self.removeChild(plusTag); clearInterval(interval); } }, 100) }
DOM属性对象（element.attributes[0]）
在 HTML DOM (Document Object Model) 中, 所有的都是 节点：
- 文档是文档节点
- 所有 HTML 元素是元素节点
- 所有 HTML 属性都是属性节点
- 插入到 HTML 元素中的文本为文本节点
- 注释是注释节点
//获取属性值 document.getElementsByTagName("button")[0].attributes[0].value; //改变属性值 var h=document.getElementsByTagName("H1")[0]; h.getAttributeNode("style").value="color:green";
事件
DOM中可以为标签设置事件，给指定标签绑定事件之后，只要对应事件被处罚，就会执行对应代码。常见事件有：
- onclick，单击时触发事件
- ondblclick，双击触发事件
- onchange，内容修改时触发事件
- onfocus，获取焦点时触发事件
- onblur，失去焦点触发事件
其他事件：https://www.runoob.com/jsref/dom-obj-event.html
左侧菜单点击切换:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> body { margin: 0; } .header { height: 48px; background-color: #499ef3; } .body .menu { position: fixed; top: 48px; left: 0; bottom: 0; width: 220px; border-right: 1px solid #dddddd; overflow: scroll; } .body .content { position: fixed; top: 48px; right: 0; bottom: 0; left: 225px; /* 超出范围的话，出现滚轮 */ overflow: scroll; } .body .menu .title { padding: 8px; border-bottom: 1px solid #dddddd; background-color: #5f4687; color: white; } .body .menu .child { border-bottom: 1px solid #dddddd; } .body .menu .child a { display: block; padding: 5px 10px; color: black; text-decoration: none; } .body .menu .child a:hover { background-color: #dddddd; } .hide { display: none; } </style> </head> <body> <div class="header"></div> <div class="body"> <div class="menu"> <div class="item"> <div class="title" onclick="showMenu(this);">国产</div> <div class="child"> <a href="#">少年的你</a> <a href="#">我不是药神</a> <a href="#">我和我的祖国</a> </div> </div> <div class="item"> <div class="title" onclick="showMenu(this);">欧美</div> <div class="child hide "> <a href="#">战争之王</a> <a href="#">华尔街之狼</a> <a href="#">聚焦</a> </div> </div> </div> <div class="content"></div> </div> <script type="text/javascript"> function showMenu(self) { var childList = document.getElementsByClassName(‘child‘); for (var i = 0; i < childList.length; i++) { childList[i].classList.add(‘hide‘); } self.nextElementSibling.classList.remove(‘hide‘); } </script> </body> </html>搜索关键字：
function getFocus(self) { self.className = ‘black‘; if (self.value === ‘请输入关键字‘ || self.value.trim().length === 0) { self.value = ‘‘; } } function leave(self) { if (self.value.length === 0) { self.value = ‘请输入关键字‘; self.className = ‘gray‘; } else { self.className = ‘black‘; } }
BOM（Browser Object Model）是指浏览器对象模型，通过他，可以操作浏览器相关的功能。更直白一点讲：BOM相当于是一个模块，提供了关于浏览器操作的功能。
提示框
alert，提示框。confirm，确认框（有确认，取消）。浏览器URL
location.href，获取当前浏览器URL。location.href = "url"，设置URL，即：重定向。location.reload()，重新加载，即：刷新页面。定时器
setInterval(function(){},1000)，创建多次定时器。（1000为1秒）clearInterval(定时器对象)，删除多次定时器。setTimeout(function(){},1000)，创建单次定时器。clearTimeout(定时器对象)，删除单次定时器。其他BOM：https://www.runoob.com/jsref/obj-window.html
标签：自定义 otto 内容 移除 nts radio ide pytho set
原文地址：https://www.cnblogs.com/Neroi/p/12727134.html
