js使用基础总结（简单封装，事件，foreach 原生js写法）

1.forEach的灵活使用

【注意】数组专用的-----遍历函数方法相当于for循环

语法结构

arr.forEach(function(obj,index){
obj---数组中的具体数据，可以是基本数据类型，也可以是获取的标签
index---数据或标签的索引})

2.switch的使用

【注意】

1.判断相当于是===的判断（精确值的判断）

2.判断机制是循环的底层，所以要使用break结尾

    let num = "2"switch (num) {case 1:alert('ok')break;case 2:alert('ook')break;default:alert('nook')break;}
//结果是nook

3.回调函数和普通函数

1.运动框架----当前的函数执行完运动后，再执行的操作

 box.onmouseout = function () {startMove(this,{"height":"20px"},500,"bounceOut",function(){startMove(box,{"width":"100px"},500,"bounceOut")})

2.普通函数---自定义函数---内置函数

4.拼接和原生js生成的区别

拼接的内容永远是字符串---通过innerHTML添加到标签中，多次添加相当于替代

<!-- 拼接 -->
<ul class="text">
</ul>
<script>// 获取标签let text=document.querySelector('.text')let str="<li>"str+=`${"好好学习"}`str+="</li>"// 传输内容text.innerHTML=str
</script>

自动生成的标签是一个字符串---通过object对象---通过appendChild()添加，多次添加相等于累加

<!-- js原生 -->
<ul class="text"></ul><script>let  arr=[11,22,33,44]let text=document.querySelector('.text')arr.forEach(function(obj,index) {//生成标签let li=document.createElement('li')// 生成文字li.innerHTML=obj// 把生成和装载完毕的li添加到ul中text.appendChild(li)});
</script>

5.遍历数据结构中的判断需求

 <ul class="list girl"></ul><ul class="list boy"></ul><script>let list = document.querySelector(".list")let dataArray = [{ name: "aaa", age: 12, sex: "男" },{ name: "bbb", age: 6, sex: "女" },{ name: "ccc", age: 24, sex: "男" },{ name: "ddd", age: 78, sex: "男" },{ name: "eee", age: 40, sex: "女" },{ name: "fff", age: 50, sex: "男" },{ name: "ggg", age: 3, sex: "女" },]// // 遍历显示所有人的名字到list的li中let girl = document.querySelector(".girl")let boy = document.querySelector(".boy")// dataArray.forEach(function (obj, index) {//     let li = document.createElement("li")//     li.innerHTML = `姓名：${obj.name} 年龄 ${obj.age}`//     list.appendChild(li)// })// 遍历显示所有女生的名字到list的li中dataArray.forEach(function (obj,index) {if (obj.sex == "女") {let li = document.createElement("li")li.innerHTML = `姓名：${obj.name} 年龄 ${obj.age}`list.appendChild(li)}})dataArray.forEach(function (obj, index) {if (obj.sex == "男") {let li = document.createElement("li")li.innerHTML = `姓名：${obj.name} 年龄 ${obj.age}`boy.appendChild(li)}if (obj.sex == "女") {let li = document.createElement("li")li.innerHTML = `姓名：${obj.name} 年龄 ${obj.age}`girl.appendChild(li)}})</script>

6.封装公用函数的概念

原理：封装让代码写起来更简单

// 封装一个专门获取标签多个的方法
function getElAll(tagName) {return document.querySelectorAll(tagName)
}
// 使用方法
let nu(自己定义的变量)=getElAll()
// 封装一个专门获取标签单个的方法
function getEl(tagName) {return document.querySelector(tagName)
}
// 使用方法
let num(自己定义的变量)=getEl()
// 封装一个大家都可以使用的选项卡函数
function checkTab(allTitle, allList, titleClassName, listClassName, num = 0) {if (num == 0) {for (let a = 0; a < allTitle.length; a++) {allTitle[a].onclick = function () {for (let b = 0; b < allTitle.length; b++) {allTitle[b].classList.remove(titleClassName)allList[b].classList.remove(listClassName)}this.classList.add(titleClassName)allList[a].classList.add(listClassName)}}} else {for (let a = 0; a < allTitle.length; a++) {allTitle[a].onmouseover = function () {for (let b = 0; b < allTitle.length; b++) {allTitle[b].classList.remove(titleClassName)allList[b].classList.remove(listClassName)}this.classList.add(titleClassName)allList[a].classList.add(listClassName)}}}}
// 使用方法// 获取标签名let titleLists = getElAll(".loginTitle .titleList")let listBoxs = getElAll(".loginBar .listBox")   checkTab(titleLists(获取的标签),listBoxs,"active"(要使用的类名),"show",num=0(可以不写默认为0))

7.js原生标签掌握的和一些属性方法

createElemet()----生成
classList.add()---添加类名
setAttribute(属性名，属性值)----添加属性
getAttribute(属性名)----获取属性
innerHTML----添加文本
父级标签.appendChild(子级标签)

写法如下：

// 窗口列表的数据let listDataArr = [{ img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },{ img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },{ img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },{ img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },//   获取标签let realList = document.querySelector(".main_realList")for (let a = 0; a < listDataArr.length; a++) {// 生成lilet li = document.createElement("li")// 如果isSpecial 的值为true 就要添加企业专用// 生成divlet div = document.createElement("div")if (listDataArr[a].isSpecial == true) {// 添加类名div.classList.add("main_comIcon")// 添加文字内容div.innerHTML = "企业专用"} else {// 添加类名div.classList.add("main_comIcon1")}// li 添加div为子级li.appendChild(div)// 生成imglet img = document.createElement("img")// 给img添加路径img.src = "./imgs/"+listDataArr[a].img// 生成图片盒子let imgBox = document.createElement("div")// 添加类名imgBox.classList.add("main_imgBox")// 添加imgimgBox.appendChild(img)// 把生成的imgBox添加到li做子级li.appendChild(imgBox)// 生成文字内容let p1 = document.createElement("p")// 添加类名p1.classList.add("main_content")p1.classList.add("fs12")p1.classList.add("c181")// 给p1添加内容p1.innerHTML = listDataArr[a].name// 把生成的p1添加到li做子级li.appendChild(p1)// 生成价格let p2 = document.createElement("p")// 添加类名 如果是免费---green 否则 ---redif (listDataArr[a].price == "免费") {p2.classList.add("main_price","green")// p2.classList.add("green")} else {p2.classList.add("main_price","red")// p2.classList.add("red")}// p2添加价格p2.innerHTML = listDataArr[a].price// 把生成好的p2添加到li中li.appendChild(p2)// 生成装按钮的盒子divlet btn = document.createElement("div")// 添加类名btn.classList.add("main_btn")// 生成按钮let button = document.createElement("button")// 添加按钮文字button.innerHTML = "申请数据"// 把生成的按钮添加到装它的div盒子中btn.appendChild(button)// 把按钮盒子装入li中li.appendChild(btn)console.log(li);// 把生成和装载完毕的li添加到ul中realList.appendChild(li)}

获取浏览器的宽高
console.log(document.documentElement.clientHeight);
console.log(document.documentElement.clientWidth);

窗口大小变化监听事件
window.onresize = function () {

console.log(document.documentElement.clientHeight);
console.log(document.documentElement.clientWidth);

}

给页面做蒙层

 <style>/* 蒙层盒子 */.mogoriya {background: rgba(0, 0, 0, .3);position: fixed;top: 0;left: 0;/* display: none; */}</style><div class="mogoriya"></div><script>// 蒙层的设置let mogoriya =document.querySelector(".mogoriya")// console.log(mogoriya);mogoriya.style.width = document.documentElement.clientWidth + "px"mogoriya.style.height = document.documentElement.clientHeight + "px"// 窗口大小变化监听事件window.onresize = function () {// 把改变以后的窗口大小设置给蒙层mogoriya.style.width = document.documentElement.clientWidth + "px"mogoriya.style.height = document.documentElement.clientHeight + "px"}</script>

监听事件
元素.addEventListener("事件名",function () {

})

//获取标签
let close = getEl(".closed span")
//监听事件close.addEventListener("click",function () {mogoriya.style.display = "none"})

click---点击
mouseover---鼠标移入
mouseout----鼠标移出
scroll----监听滚动条
resize----监听窗口大小变化
blur------失焦事件
change----输入改变事件

8.基本报错

XX is not defined----变量没定义
XX is not a function---不是一个函数
ERR_FILE_NOT_FOUND----图片路径错误
Cannot set properties of undefined (setting 'onclick') --- 标签没找到

js使用基础总结（简单封装，事件，foreach 原生js写法）相关推荐

jQuery学习（四）— jQuery的ready事件和原生JS的load事件的区别
jQuery学习(四)- jQuery的ready事件和原生JS的load事件的区别 jQuery的ready事件和原生JS的load事件的区别: 页面中可以有多个ready事件,而load事件会出现 ...
jQuery动态绑定事件或者原生js动态绑定事件
说一个这周写前后端交互时遇到的一个印象深刻的问题--动态绑定事件. 一.jQuery 一般我们给节点绑定事件使用的都是这样的形式 $("#btns").click(function ...
最简单的方式使用原生 js 发送 http 请求
使用场景检查接口可用性主要用于在没有引入 jQuery 等工具的页面上需要验证一些 api 能否调得通的时候,可以快速调出浏览器调试界面发请求. 这在判断是否存在跨域问题的场景下,特别好用. 验证 ...
js动画与html动画效果,九种原生js动画效果
在做页面中,多数情况下都会遇到页面上做动画效果,我们大部分做动画的时候都是使用框架来做(比如jquery),这里我介绍下如何让通过原生的js来实现像框架一样的动画效果! 1.匀速动画效果说明:匀速动画 ...
JavaScript: 最简单的事件代理（JS Event Proxy）原理代码
打开 http://jsbin.com (JS练兵场),方便尝试使用案例代码. 假设有HTML <ul id="parent-list"><li id=" ...
Node.js进击基础一（5-11事件模块）
res.on res有on方法. 在nodejs中不存在浏览器里的冒泡捕获等行为,集成了一个模块events,对外暴露一个对象EventEmitter ,EventEmitter作用只有2个事件的发射 ...
JS栈结构的简单封装
栈:是一种遵循后进先出(Last In First Out / LIFO) 原则的一种有序集合. 新添加或者要删除的元素都会保存在栈的同一端,我们把它叫做栈顶,另外一端叫做栈底. 在栈中所有的新元素都 ...
利用Java基础知识+简单封装写一个银行登录存取款系统
文章目录
自己封装的一个原生JS拖动方法。
代码: 1 function drag(t,p){ 2 3 var point = p || null, 4 target = t || null, 5 resultX = 0, 6 resultY ...

js使用基础总结（简单封装，事件，foreach 原生js写法）

js使用基础总结（简单封装，事件，foreach 原生js写法）相关推荐

最新文章

热门文章