标签：增删改 处理 操作 打印 sele family 标签 成功 false
1. DOM( Document Object Model 文档对象模型)
一个 web 页面的展示，是由 html 标签组合成的一个页面。dom 对象实际就是将 html 标签转换成一个文档对象。
可以通过 dom 对象中 js 提供的方法，找到 html 的各个标签。通过找到标签就可以操作标签使页面动起来。
var demo = document.getElementById(‘id1‘); //定位到单个元素，因为id是唯一的
var eleList = document.getElementsByClass(‘class1‘); //返回的是 list
demo.children; //返回 list，取到所有的子元素
demo.children[1]; //取特定位置的子元素
demo.lastElementChild; //拿到最后一个子元素
demo.nextElementSibling; //下一个
demo.previousElementSibling; //上一个
demo.innerText = ‘<input>‘; //将demo div 下的内容变为新内容（字符串） demo.innerHTML=‘<input>‘; //符合HTML的规则时会翻译后显示
var select = document.getElementById(‘s1‘);
select.value = ‘北京‘; //重新赋值
select.selectedIndex = 2; //选中的选项为第几个（从0开始）
var clst = document.getElementById(‘clist‘);
clst.classList.remove(‘demo‘);
clst.classList.add(‘temp‘);
var input = document.getElementById(‘i1‘);
input.setAttribute(‘type‘,‘text‘); //为创建的标签增加属性
create = document.getElementById(‘create‘);
create.appendChild(input);
var inputStr = ‘<input type="text" value="login">‘; create.insertAdjacentHTML(‘beforeEnd‘,inputStr);
这里的 beforeEnd（子标签后） 还有另外的三种方法，分别是：beforeBegin( 标签前), afterBegin（子标签前）, afterEnd（标签后），表示插入的四个位置。
2. JS
1 name = ‘abc‘; //默认全局变量 2 function func(){ 3 var name = ‘Lucy‘; //局部变量 4 }
1 //let 定义的变量没有预解析 2 let num1=1; 3 const nums=2; //常量
预解析是指，在只定义无声明的情况下，变量的默认值为 undefined。没有预解析则代表，只定义无值。
//有两种
//1.直接拼接
str+‘,开心‘;
//2.使用方法
str.concat(‘啦啦啦‘);
str.substring(0,3);
str.slice(0,3);
切片都是顾头不顾尾，以上结果为“Tod”
str.toLowerCase(); //小写
str.toUpperCase(); //大写
str.split(‘,‘2); //表示以逗号分割，返回的结果保留前2个
用法与 python 相同，不过 js 可以规定返回的个数。
var num="18.8";
parseInt(num); //18
parseFloat(num); //18.8
1 num.toString(); 2 //也可以用拼接的方式 3 num+‘‘; //字符串拼接的方法可以使数字变为字符串
alist = new Array(1,2,3,4);
blist = [1,2,3,4,5];
以上两种方式都可以。
list.shift(); //拿到第一个元素并删除
list.unshift(1); //头部插入
var str=[‘a‘,‘b‘,‘c‘];
//第一个代表起始位置，第二个代表删除个数，第三个代表增加的元素
str.splic(1,0,‘a1‘); //增
str.splic(1,1); //‘b‘被删除
str.splic(1,1,‘000‘); //改
list = [“April”,“May”,“June”];
//数组转字符串
var strList = JSON.stringify(list);
//字符串转数组
jsonList = JSON.parse(strList);
var dict={"name":"april","sex":"female","age":18};
//查
dict[‘name‘];
dict.name;
//删
delete dict[‘name‘];
1 <input type="text" id="input-test" onclick="test()"> 2 3 <script> 4 function test(){ 5 console.log(123); 6 } 7 </script>
点击触发 test() 函数
//if条件判断
var a="123";
var b=123;
if (a==b){
alert(‘=‘);
}else{
alert(‘!‘);
}
1 //switch 2 switch(a){ 3 case ‘a‘: 4 console.log(‘a‘); 5 break; 6 case ‘123‘: 7 console.log(‘123‘); 8 break; 9 default: 10 console.log(‘default‘); 11 }
??记得加 break，default 不用加。
1 list = ["April","May","June"] 2 for(var i=0; i<list.length; i++){ 3 console.log(i); 4 console.log(list[i]); 5 }
以上实现的是循环打印数组的角标和对应内容。
1 <input type="button" id="test-button"> 2 3 <script> 4 var element = document.getElementById(‘test-button‘); 5 element.onclick = function(){ 6 console.log(‘匿名函数‘); 7 } 8 </script>
这种方式的好处是可以不那么明显的将方法直接写在标签内，减少代码的安全隐患。
1 $.ajax{ //向后端发送请求 2 method:‘post‘, 3 url:‘https://www.baidu.com‘, 4 data:data, //此处省略，具体看接口的要求 5 success: function(data){ 6 console.log(data); //data 为接口成功后的返回 7 } 8 }
success:function(){} 是对请求结果的处理，可以根据实际情况具体判断。
标签：增删改 处理 操作 打印 sele family 标签 成功 false
原文地址：https://www.cnblogs.com/april-aaa/p/11631295.html
