• 学习笔记2


    一、数组常用方法

    数组的添删查改

    	var arr=[1,2,3,4]
    	arr.push()//往数组的尾部添加数据
    	arr.unshift()//往数组的头部添加数据
    	arr.pop//删除数组尾部的那一个数据,返回的结果是被删除的那个数据
    	arr.shift//删除数组头部的那一个数据,返回值是被删除的那个数据
    	arr.splice(m,n)//从数组的索引m开始删除n个数据,返回值是被删除的那个数据的数组形式
    	arr.splice(m,n,a)//从数组的索引m开始删除n个数据,增加a在m
    之前(a 可以是a,a及更多),返回值是被删除的那个数据的数组形式
    	arr.slice(m,n)//从数组的索引m开始截取n个数据,和字符串的用法一样不会改变原数组
    	arr.concat()//将指定数据合并到原数组的尾部,同样不改变原数组
    	arr.join(字符串)//用指定的字符串来代替原数组的逗号,返回值是一个字符串,不会改变原数组
    	arr.indexOf(数据)//从左到右判断数据在数组中的位置,如果存在就返回索引位置,不存在就返回-1
    	arr.lastIndexOf(数据)//从右到左判断数据在数组中的位置,如果存在就返回索引位置,不存在就返回-1
    

    数组排序

    	arr.reverse//数组倒序,返回值是倒序的数组,会改变原数组
    	arr.sort//数组排序,返回值是数据按Unicode排序后的数组,会改变原数组
    	arr.sort(function(a,b){ retur a-b/*b-a*/})//升序或者降序的内部机制,回调函数的返回值是正数就交换位置,是负数就不交换位置(冒泡排序法)
    

    二、DOM的基本操作

    DOM:document object model(文档对象模型)

    DOM节点

    节点的分类 nodetype (用来检测节点的类型)

    • 元素节点 1
    • 属性节点 2
    • 文本节点 3
    • 注释节点 8
    • 文档节点 9
    • 空白节点 11

    **DOM操作 **

    基于节点树的操作

    	oBox.firstChild               第一个子节点
    	oBOx.lastChild                最后一个子节点
    	oBox.childNode                子节点的集合
    	oBox.nextSibling              上一个兄弟节点
    	oBox.previouSiblibing         下一个兄弟节点
    

    基于元素节点的操作

    	oBox.firstElementChild               第一个元素子节点
    	oBOx.lastElementChild                最后一个元素子节点
    	oBox.children                        元素子节点的集合
    	oBox.nextElementSibling              下一个兄弟元素  节点
    	oBox.previouElementSiblibing         上一个兄弟元素节点
    

    DOM的属性

    	nodeName//节点的名字用大写显示
    	nodeValue//文本节点和注释节点的内容
    	nodeType//节点的类型
    	attributes//元素节点的属性集合
    

    判断一个元素节点有没有子节点

    	element.hasChildNodes()//如果有则返回true,没有则返回false
    

    创建节点

    	document.createElement(内容)//创建元素节点
    	document.createTextNode(内容)//创建文本节点
    	document.createComment(内容)//创建注释节点
    	document.createDocumentFragment(内容)//创建文档片段节点
    

    添加节点(剪切操作)

    	parentNode.appendChild(a)//在parentNode的最后面添加节点a
    	parentNode.insertBefore(a,b)//把节点a添加在节点b前面
    

    删除节点

    	parentNode.removeChild(a)//删除parentnode的子节点a
    

    替换节点(剪切操作)

    	parentNode.replaceChild(a,b)//用节点a替换b节点
    

    元素节点的常用属性

    	innerHTML//获取元素节点的内容,可读可写(如果内容中有符合html格式的,会被解析成标签)
    	innerText//获取元素节点的内容,可读可写(如果内容中有符合html格式的,不会被解析成标签)
    	attribute//获取元素节点的属性节点
    

    三、脚步化CSS

    	dom.style//只能获取行内样式表,一般不用来获取样式,常用行内样式表来设置样式
    	getComputeStyle(oBOx,null)//获得显示(计算)样式表,是只读的不可以用来修改(获得的是字符串且带单位)
    

    获取元素的显示属性

    	dom.clientWidth//获取的是width+左右的padding
    	dom.clientHeight//获取的是width+上下的padding
    	dom.offsetwidth//获取的是width+左右的padding+左右的border
    	dom.offsetHeight//获取的是width+上下的padding+上下的border
    	(以上获得的全是数字)
    

    	dom.offsetParent//获得有定位属性的父级
    	dom.offsetLeft//获取距离有定位属性父级的水平距离
    	dom.offsetTop//获取距离有定位属性父级的竖直距离
    

    	window.pageYOffset//获取页面滚动的水平距离
    	window.pageXOffset//获取页面滚动的竖直距离
    	window.innerWidth//获取页面的宽度
    	window.innerHeight//获取页面的高度
    	window.scrollTo(x,y)//让滚动条滚动到指定位置
    	window.scrollBy(x,y)//让滚动条每次滚动指定距离
    

    四、定时器

    	setTimeout(function(){//延迟定时器,30毫秒后只执行一次
    		
    	},30)//当一个函数作为i另一个函数执行时的参数,则这个函数是回调函数
    	setInterval(function(){//循环定时器,每隔30毫秒执行一次
    		
    	},30)
    

    定时器中的回调函数中的参数怎么传?

    例子:
    	setInterval(function(a,b){
    		console.log(a+b)
    	},30,2,3)从定时器的第二个实参开始,之后的都表示回调函数的实参
    结果
    	2,3
    

    对于JS是单线程的,而单线程一定是同步的但是定时器是多线程的,所以浏览器会给定时器单独开辟一个线程,即放到其他同步代码执行完在执行定时器。

    	for(var i=0;i<5;i++)
    	{
    		setTimeout(function(){
    			console.log(i)
    	    },i*30)//定时器内真正异步的部分是里面的回调函数部分
    	}
    再来一个例子
    	for(var i=0;i<5;i++)
    	{
    		setTimeout(function(i){
    			console.log(i)
    	    },30,i)
    	}//此次结果是0,1,2,3,4
    

    五、日期对象&&数学对象

    日期对象

    获取日期时间

    	var date=new Date()//获取计算机的时间/时间戳
    	date.toLocaleString()//获得本地日期+时间字符串
    	date.toLocaleDateString()//获得本地日期字符串
    	date.toLocaleTimeString()//获得本地时间字符串
    	
    	date.getFullYear()//获取年
    	date.getMonth()//获取月 0-11
    	date.getDate()//获取日
    	date.getHours()//获取小时
    	date.getMInutes()//获取分钟
    	date.getSeconds()//获取秒
    	
    	date.setFullYear()//设置年
    	date.setMonth()//设置月 0-11
    	date.setDate()//设置日
    	date.setHours()//设置小时
    	date.setMInutes()//设置分钟
    	date.setSeconds()//设置秒
    

    //新年倒计时	
    	var date=new Date(2021,1,1);//设置时间戳
    	setInterval(function(){
    		var new=new Date;
    		var time=new-date;//获取到达过年前的毫秒数
    		var day=Math.floor(time/(1000*60*60*24));
    		var hour=Math.floor(time/(1000*60*60)%24);
    		var minute=Math.floor(time/(1000*60)%60);
    		var second=Math.floor(time/(1000)%60);
    		console.log('离过年还有'+day+'天'+hour+'小时'+minute+'分'+second+'秒');
    	},1000)
    	
    

    数学对象

    Math对象

    	Math.PI//获取圆周率
    	Math.random()[0,1)//获取随机数(可以取到0不能取到1)
    	Math.min(很多参数)//返回的是实参中的最小值
    	Math.max(很多参数)//返回的是实参中的最大值
    	Math.ceil(实参)//向上取整
    	Math.floor(实参)//向下取整
    	Math.round(实参)//四舍五入
    	Math.abs(实参)//取绝对值
    	Math.sin(x)//求x的正弦值
    	Math.cos(x)//求x的余弦值
    	Math.tan(x)//求x的正切值
    	Math.pow(x,y)//求x的y次方
    	Math.aqrt(x)//求x的平方根
    
  • 相关阅读:
    jdbc连接池工具与pg fdw连接的问题
    关于drill http存储插件http 超时的一些说明
    tds-fdw PostgreSQL said: DB-Library error: DB #: 20002, DB Msg: Adaptive Server connection failed, OS #: 0, OS Msg: Success, Level: 9 问题解决.md
    开发自己的jdbc驱动——可选开发工具
    nexus Invalid state: DELETED; allowed: [STARTED] 问题解决
    airline开发类似git cli 的jar 包
    开发自己的jdbc驱动——基本说明
    nessie 安装&&简单试用
    nessie 类似git 管理数据湖
    一些不错的开源大数据虚拟数据sql 查询引擎
  • 原文地址:https://www.cnblogs.com/ww-523-99/p/13616369.html
Copyright © 2020-2023  润新知