首页 > 其他分享 >js知识点

js知识点

时间:2023-04-18 20:58:24浏览次数:34  
标签:知识点 JavaScript 对象 标签 元素 js var 节点

目录

js知识点

js

js的核心
1 文档对象模型(DOM)
2 浏览器对象模型(BOM)

js优点
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 很容易学习。

数据类型

1 js中不区分整型和浮点型,都叫数值类型
	1 整型
    2 浮点型
    3 NaN=====>not a number
var str = `my name is ${name}, my age is ${age}`;
2 字符串拼接
	使用+
3 类型转换
	eg:parseInt("123")转为整型
    parseFloat("123.123")转为浮点型
4 布尔值
	true 和false
    在js中那些为假呢
    0 空字符串 NaN null undefault
    
'''null和undefault的区别'''
'''
1 null 表示值为空,一般在需要指定或者清空一个变量的时候使用
2 undefined 表示当声明一个变量但未初始化时,该值默认值是undefined
3 函数无明确的返回值时,返回值也是undefined
'''

数组

# 数组可以存放任意的数据类型
#取值 ======>通过索引来取值
# 多维数组 =====>var lll = [1, 2, [3, 4,[5, 6]]];  # 三维数组
					拼接字符串一般使用 +
				'''	常用方法'''
    	.length 数组的长度或者大小
        .push() 尾部追加元素
        .pop() 	弹出元素
        .unshift()	头部插入
        .shift()	头部移除
        .slice(start,end) 切片
        .reverse() 反转或者翻转
        .join() 将数组元素连接成字符串
        .concat(val,val1)	连接数组
        .sort() 排序
        '''补充'''
        .trim() 移除空格,有左右
        .charAt(n) 返回第n个字符
        .split()	分割
#补充 slice和substring的区别 string.slice(start,stop)string.substring(start,stop)
'''相同点'''
如果start等于stop,返回空字符串
如果stop参数省略,则取到字符串末尾
如果参数超过string的长度,这个参数会被替换为string的长度
'''不同点'''
substring()的特点
如果start > stop start和stop将被交换
如果参数是负数或者不是数字,将被0替换
silce()的特点
如果start > stop 不会交换
如果start 小于0 则会从字符串末尾往前的第abs(start)个字符开始,包括自己
如果stop 小于0 则会从字符串末尾往前的第abs(start)个字符结束,不包括自己

forEach()

var arr1 =[1,2,3,4]
arr1 forEach(function(values,index,arr)
            {
                console.log(value,index,arr)
            })

'''补充'''
some返回true,false,一般用来提高效率

补充

== 比较值
=== 比较值,内存地址
这里由于的x++和++x在出现赋值运算式,x++会先赋值再进行自增1运算,而++x会先进行自增运算再赋值!

三元运算

a > b ?a :(b=="20")?a:b
#如果条件成立执行?后面的,否则执行 :后面的

函数

function 函数名(参数可选){
    代码
}
#匿名函数
var sum = function(参数){
    代码
}

'''函数中的argument参数'''
arguments相当于将出传入的参数全部包含,可以通过索引来取值

函数的全局变量和局部变量

在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。

全局变量:
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

变量生存周期:
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

作用域,看你所在的位置,就近原则

内置对象和方法

自定义对象

#对象本质上是键值对的集合
1 创建一个对象
	方法一 var obj =new object()
    方法二 var obj ={}
2 给对象增加值
	obj.name="xiaoming"
3 给对象改值
	obj.name="xiaohong"
4 给对象删除值
	delect obj.name

Date对象

1 创建一个date对象
	var date=new.Date();使用date.toLocaleString()输出
Date对象的方法
var date =new Date();
	getDate()  		获取日
    getDay()   		获取星期
    getMonth()		获取月(0~11)
    getFullYear()	获取年份
    getHours()		获取小时
    getMinutes() 	获取分钟
    getSeconds()	获取秒
    getTime()   	获取毫秒数

JSON对象

1 python中
	import json
    json.dumps()	序列号
    json.loads()	反序列化
    
2 js中
	Json.stringfy()	序列号
    JSON.parse()	反序列化

EegExp对象

1 定义正则的两种方法
	var regexp =new RegExp("正则")
    var regexp =/正则/
    正则校验
    	regexp.test("数据")
2 var s ="数据"
	s.match(/匹配元素/gi) g匹配多个 i不区分大小写

MAth对象

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数(底为e)。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

BOM 和DOM

BOM

'''Window方法'''
	window.innerHeight
    window.innerWidth
    window.open()
    window.close()
    
    '''navigator(浏览器)对象'''
    navigator.appName   浏览器名称
    navigator.appVersion  // Web浏览器厂商和版本的详细字符串
    navigator.userAgent  // 客户端绝大部分信息
	navigator.platform   // 浏览器运行所在的操作系统
    
    '''history对象'''
    history.forward() 前进一页
    history.back()		后退一页
    
    '''location对象  重定向到新页面'''
    location.href
    location.href="URL" 跳转到指定页面
    location.reload()	重新加载页面
弹出框
1 alert()	警告框
2 confirm()	确认框=====》true和false
3 prompt()	提示框=====>确认返回输入的值,取消返回null

计时相关
#setTimeout()   #执行一次
    var t=setTimeout("功能",时间)
    clearTimeout(t)
#setInterval()	#连续执行
	// 每隔一段时间就执行一次相应函数
	var timer = setInterval(function(){console.log(123);}, 3000)
	// 取消setInterval设置
	clearInterval(timer);
	

DOM

先理解

DOM规定HTML文档中的每一个成分都是一个节点(node)
	文档节点(document对象)	代表整个文档
    元素节点(element对象)		代表一个元素或者标签
	文本节点(text对象)		代表元素(标签)中的文本
    属性节点(attribute属性)	代表一个属性,元素(标签)才有属性
    注释是注释节点(comment对象)
    
● JavaScript 能够改变页面中的所有 HTML 元素
● JavaScript 能够改变页面中的所有 HTML 属性
● JavaScript 能够改变页面中的所有 CSS 样式
● JavaScript 能够对页面中的所有事件做出反应

标签查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

间接查找

parentElement 父节点标签元素
children 		所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

节点操作

1 首先创建节点元素
	var div =document.createElement("div")
    var div1 =document.getElementById("d1")
2 给创建的节点添加属性
	方法一,对于创建这个标签已经存在的属性
    div.id="c1"
    方法二 创建的属性不存在的属性
    div.setAttribute("name","xiaoming")
    div.setAttribute("width","100px")
3 获取属性
	div.getAtrribute("name")
4 删除属性
	div.removeAttribute("width")
5 增加属性
	div1.append(div)
替换节点:
语法:
somenode.replaceChild(newnode, 某个节点);
属性节点
获取文本节点的值
	var divEle = document.getElementById("d1")
    divEle.innerText
    divEle.innerHTML
设置文本节点的值
    var divEle = document.getElementById("d1")
    divEle.innerText="1"
    divEle.innerHTML="<p>2</p>"

获取值操作

语法:
elementNode.value
适用于以下标签:
● .input   
● .select
● .textarea 
● value不能获取文件数据,获取文件数据要用files

class的操作

className  获取所有样式类名(字符串)

classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true,否则返回false
classList.toggle(cls)  存在就删除,否则添加

指定css操作
obj.style.backgroundColor="red"

事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习:输入框
onblur         元素失去焦点。               应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击,使用的对象是form。
绑定方法
方式一
	<div id="d1" onclick="changeColor(this);">点我</div>
    <script>
      function changeColor(ths) {
        ths.style.backgroundColor="green";
      }
    </script>
方法二
    <div id="d2">点我</div>
    <script>
      var divEle2 = document.getElementById("d2");
      divEle2.onclick=function () {
        this.innerText="呵呵";
      }
    </script>

window.onload,当页面加载完成之后在执行,存在覆盖现象

标签:知识点,JavaScript,对象,标签,元素,js,var,节点
From: https://www.cnblogs.com/liyuanxiangls/p/17331034.html

相关文章

  • 小白用chatgpt编写python 爬虫程序代码 抓取网页数据(js动态生成网页元素)
    jS动态生成,由于呈现在网页上的内容是由JS生成而来,我们能够在浏览器上看得到,但是在HTML源码中却发现不了一、注意:代码加入了常规的防爬技术    如果不加,如果网站有防爬技术,比如频繁访问,后面你会发现什么数据都取不到1.1 模拟请求头: 这里入进入一步加强,随机,主要是User-Agen......
  • PBI 使用自定义Json
     let查询2=Json.Document(Binary.Decompress(Binary.FromText("i45WMjYwUNJRMjLUdSwoAjJMLYyUYnWilUywCMcCAA==",BinaryEncoding.Base64),Compression.Deflate))in查询2 ......
  • jsp Web实现文件上传下载功能实例解析
    ​ 4GB以上超大文件上传和断点续传服务器的实现随着视频网站和大数据应用的普及,特别是高清视频和4K视频应用的到来,超大文件上传已经成为了日常的基础应用需求。但是在很多情况下,平台运营方并没有大文件上传和断点续传的开发经验,往往在网上找一些简单的PHP或者Java程序来实现基......
  • 微信小程序-组件-.js文件
    经过上一章节的介绍,我们知道了在微信小程序当中组件的.json文件的作用其含义之后,本文将继续来刨铣组件当中的每一个文件的作用其含义,这次介绍的是组件当中的.js文件。其实呢这个js文件你自己结合我们之前讲解过来的这么多内容了你应该也是可以猜得出这个是用来监听组件的生命周期......
  • npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本
    在新建项目时候遇到一个问题如上图,安装cnpm或者node都会报这个错误找了半天发现解决方法如下(操作如上图)1、打开终端2、在终端执行:get-ExecutionPolicy,显示Restricted(表示状态是禁止的)3、在终端执行:set-ExecutionPolicyRemoteSigned4、在终端执行:get-ExecutionPolicy,显示RemoteSig......
  • app直播源码,Node.js实现密码散列加密
    app直播源码,Node.js实现密码散列加密1.安装所需的包: npmibcryptjs--save​2.修改MongoDB中的模型: ///models/AdminUser.js constmongoose=require('mongoose')//定义模型的字段constschema=newmongoose.Schema({  username:{//用户名    ty......
  • 关于typescript引入第三方js文件
    一、通过require方法1.1.安装@types/node并在tsconfig.json配置,如下图所示。npmi@types/node1.2.在ts或vue中引入constvc:any=require('@/libs/VCtrl.js') 二、通过declare定义,然后import导入。2.1.在src目录下创建shims.d.ts文件。declaremodu......
  • js 选择器操作相关
    Javascript知识【jQuery选择器】 https://blog.csdn.net/m0_64550837/article/details/126231445 CSS选择器https://blog.csdn.net/weixin_44214326/article/details/128093869 ......
  • Jsoup(HTML解析)
    1.Jsoup(HTML解析)https://blog.csdn.net/qq_26786441/article/details/1062078282.Jsoup解析htmlhttps://blog.csdn.net/m0_66144992/article/details/122329560 1、环境首先导入jar包<dependency><groupId>org.jsoup</groupId><artifactId>js......
  • js将后端返回的文件流导出,并自定义下载文件名(pdf导出)
    这里调接口时记得加上responseType:'blob'/***@description:下载文件*@param{string}data文件流*@param{string}filename文件名*@return{*}*/exportfunctiondownloadFile(data:string,filename:string){constblob=newBlob([data])const......