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.parentElement;
- 重新赋值
-
demo.innerText = ‘<input>‘; //将demo div 下的内容变为新内容（字符串） demo.innerHTML=‘<input>‘; //符合HTML的规则时会翻译后显示
- 获取输入框的值（能获取到就能重新赋值）
- demo.value;
- 下拉框
-
var select = document.getElementById(‘s1‘); select.value = ‘北京‘; //重新赋值 select.selectedIndex = 2; //选中的选项为第几个（从0开始）
-
- 样式
- 定位到某个元素的类名，可以对其进行更改（定位到的都可以重新赋值来更改）
- 对元素有多个的，也可以进行增加、删除操作：
var clst = document.getElementById(‘clist‘); clst.classList.remove(‘demo‘); clst.classList.add(‘temp‘);
- 还可以通过 clst.style 获取到 css 的样式，并对其进行修改，例如：clst.style.backgroundColor=‘black‘;
- 创建标签1（用内置功能）
- step 1:定义。
var input = document.getElementById(‘i1‘); input.setAttribute(‘type‘,‘text‘); //为创建的标签增加属性
- step 2:渲染到页面。
create = document.getElementById(‘create‘); create.appendChild(input);
- step 1:定义。
- 创建标签2（用字符串的方式）
var inputStr = ‘<input type="text" value="login">‘; create.insertAdjacentHTML(‘beforeEnd‘,inputStr);
这里的 beforeEnd（子标签后） 还有另外的三种方法，分别是：beforeBegin( 标签前), afterBegin（子标签前）, afterEnd（标签后），表示插入的四个位置。
- 删除属性
- input.lastElementChild.removeAttribute(‘style‘); //style为属性名称
- 划重点的知识点：
- <script> 可以在 <head> 中也可以在 <body> 中，区别是放在 body 中可以先加载页面内容再加载样式，提高用户体验。（因为 html 代码从上到下解析）
2. JS
- JS 变量
- es5：
1 name = ‘abc‘; //默认全局变量 2 function func(){ 3 var name = ‘Lucy‘; //局部变量 4 } - es6：
1 //let 定义的变量没有预解析 2 let num1=1; 3 const nums=2; //常量
预解析是指，在只定义无声明的情况下，变量的默认值为 undefined。没有预解析则代表，只定义无值。
- es5：
- JS 基本数据类型
- 字符串（str = ‘Today is a nice day‘）
- 拼接
//有两种 //1.直接拼接 str+‘,开心‘; //2.使用方法 str.concat(‘啦啦啦‘);
- 根据角标取值：str.charAt(0); 结果：T
- 切片
str.substring(0,3); str.slice(0,3);
切片都是顾头不顾尾，以上结果为“Tod”
- 长度：str.length
- 元素的角标位置：str.indexOf(‘H‘); //要查找的元素存在则返回其下标，不存在则返回-1
- 变更大小写
str.toLowerCase(); //小写 str.toUpperCase(); //大写
- 转为数组
str.split(‘,‘2); //表示以逗号分割，返回的结果保留前2个
用法与 python 相同，不过 js 可以规定返回的个数。
- 拼接
- 数字类型（JS 只有一种数字类型，数字可以带小数点）
- 字符串转数字
var num="18.8"; parseInt(num); //18 parseFloat(num); //18.8
- 数字转字符串
1 num.toString(); 2 //也可以用拼接的方式 3 num+‘‘; //字符串拼接的方法可以使数字变为字符串
- 字符串转数字
- 布尔类型：true 和 false，都是小写
- 数组
- 创建
alist = new Array(1,2,3,4); blist = [1,2,3,4,5];
以上两种方式都可以。
- 长度：list.length
- 增：list.push(5); 在末尾增加
- 删：list.pop(); 获取尾部元素并删除
- 特殊的增和删：
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‘); //改
- 切片：str.slice(1,2)
- 反转：str.reverse()
- 转字符串：str.join(‘-‘); //将数组以该符号连接成字符串；
- 数组拼接：str.concat([‘abc‘]); //如果数组直接相加会变为字符串；
- 重要方法：数组与字符串的相互转化
-
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‘];
- 字符串（str = ‘Today is a nice day‘）
- JS 语法
- 事件
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 不用加。
- for 循环
- 数组、字符串循环的是角标，字典循环的是key，??这里只能通过 dict[key] 取值
-
1 list = ["April","May","June"] 2 for(var i=0; i<list.length; i++){ 3 console.log(i); 4 console.log(list[i]); 5 }以上实现的是循环打印数组的角标和对应内容。
- while 循环
- 匿名函数
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>这种方式的好处是可以不那么明显的将方法直接写在标签内，减少代码的安全隐患。
- 函数（作用域：函数内）：不另举例，以上“事件”中的 test() 即为函数的例子。
- ajax 异步请求（来自 jquery）
- jquery 相当于对 dom 的简单封装，让 dom 变得更加简单
- $ 为使用 jquery 的开始
-
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(){} 是对请求结果的处理，可以根据实际情况具体判断。
- 事件
原文地址：https://www.cnblogs.com/april-aaa/p/11631295.html
时间： 2024-10-30 20:44:11