前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >javaScript基础最全 最精美 不好打我好吧

javaScript基础最全 最精美 不好打我好吧

作者头像
CaesarChang张旭
发布2021-01-26 14:21:24
1.3K0
发布2021-01-26 14:21:24
举报
文章被收录于专栏:悟道

什么是JavaScript?

JavaScript 是⼀种客户端脚本语⾔。 JavaScript 通常被直接嵌⼊ HTML ⻚⾯,由浏览器解释执⾏ JavaScript 是⼀种解释性语⾔(就是说,代码执⾏不进⾏预编译)。 特点:弱类型和基于对象。(因为⾯向对象需要具有封装、继承、多态的特征) JavaScript语⾔中包含三个核⼼:ECMAScript基本语法、DOM、BOM

在HTML中如何使⽤JavaScript(三种)

1 使⽤ 标签

2 外部 JavaScript:

3内联JavaScript处理器:

基础语法:

1 输出

window.alert() 弹出警告框 document.write() ⽅法将内容写到 HTML 页面中 innerHTML 写⼊到 HTML 元素

console.log() 写⼊到浏览器的控制台

2 变量

由字⺟、数字、下划线、$符号组成, (name也不可以 系统中有name这个变量为"") 不能以数字开头 不能是关键字和保留字,例如:for、 if、while。 区分⼤⼩写 最好驼峰命名法 var name = 'wangwu', age = 25; 使用var声明

3 注释

// /* */

4 数据类型

使⽤typeof操作符获取基本数据类型 遇到引用类型的话 处理的就是对象

7函数

三种定义方法:

使用的话注意一个特殊的调用

在函数代码中,使⽤特殊对象 arguments arguments是⼀个对象,是⼀个伪数组,arguments[索引]---->实参的值 arguments.length--->是实参的个数

隐式全局变量: 没有使⽤var声明的变量,就叫隐式全局变量,在函数外可以获取到。

8常用内置函数

DOM

DOM:文档对象模型(Document Object Model),又称为文档树模型

节点 在HTML当中一切都是节点(node)。 每一个HMTL标签都是一个元素节点(标签)。 标签中的文字则是文字节点。(文本) 标签的属性是属性节点。(属性)

DOM节点的获得

1)通过 id 找到 HTML 元素 document.getElementById("demo");

标签=document.getElementById(“demo”); 通过ID获得标签 他的返回值是一个标签,可以直接使用。获得属性值,设置属性。 2)通过标签名找到 HTML 元素 document.getElementsByTagName("div");

标签数组= document.getElementsByTagName(“div”); 通过标签名获得标签数组 3)通过类名找到 HTML 元素 document.getElementsByClassName("a");

DOM节点的操作 节点的操作都是函数或者方法。


创建节点 常用: document.createElement("标签名");

插入节点 使用方法: 父节点.appendChild(); 父节点.appendChild(新节点); 父节点的最后插入一个新节点

使用方法:父节点.insertBefore(要插入的节点,参考节点); 父节点.insertBefore(新节点,参考节点)在参考节点前插入;

如果参考节点为null,那么将在节点最后插入一个节点。 删除节点 用法:用父节点删除子节点。 父节点.removeChild(子节点);必须指定要删除的子节点

节点自己删除自己: 不知道父级的情况下,可以这么写:node.parentNode.removeChild(node)

复制节点 ( oldNode.cloneNode(true) ) 新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点

复制节点, 接受一个布尔值参数, true 表示深复制(复制节点及其所有子节点), false 表示浅复制(复制节点本身,不复制子节点) 节点属性(节点.属性) 获取:getAttribute(名称)、节点.属性、节点[“属性”]。 设置:setAttribute(名称, 值) 删除:removeAttribute(名称)

改变HTML内容 document.write() 可用于直接向 HTML 输出流写内容。 document.getElementById(id).innerHTML=new HTML

改变 HTML 样式 node.style.property=new style

事件

事件三要素:

  1. 事件源
  2. 事件
  3. 事件驱动程序

常用的事件: onabort 图像的加载被中断。 onblur 元素失去焦点。 onchange 域的内容被改变。 onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onerror 在加载文档或图像时发生错误。 onfocus 元素获得焦点。 onkeydown 某个键盘按键被按下。 onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseup 鼠标按键被松开。 onreset 重置按钮被点击。 onresize 窗口或框架被重新调整大小。 onselect 文本被选中。 onsubmit 确认按钮被点击。 onunload 用户退出页面。

注册事件: 1 element.事件 例: var btn = document.getElementsByTagName('button')[0]; btn.onclick= function(){ } 2.addEventListener element.addeventListener(“事件”,“function”);

移除事件 1.element.onclick = null; 2.removeEventListener

BOM

浏览器对象模型 window对象 window对象是JavaScript中的顶级对象 所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法 可以省略window 常用方法: window.open(url,target,param) url 要打开的地址 target新窗口的位置 _blank _self _parent(父框架) param 新窗口的一些设置 新窗口.moveTo(5,5) 移动到指定的位置 新窗口.moveBy(200,200) 相对新窗口移动指定像素 新窗口.resizeTo() 把窗口的大小调整到指定的宽度和高度。 返回值,新窗口的句柄 window.close() 关闭窗口 循环执行(等待时间过去之后执行) var timerId = setInterval(code,interval); clearInterval(timerId); 定时执行(立刻执行) var timerId = setTimeout(code,interval); clearTimeout(timerId);

location对象

window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。​​​​​​​ kk 获取URL kk="URL" // 跳转到指定页面 hash 返回url中#后面的内容,包含# host 主机名,包括端口 hostname 主机名 pathname url中的路径部分 protocol 协议 一般是http、https search 查询字符串 location.assign() 改变浏览器地址栏的地址,并记录到历史中 设置kk 就会调用assign()。一般使用kk 进行页面之间的跳转 location.replace() 替换浏览器地址栏的地址,不会记录到历史中 location.reload() 重新加载 Navigator 对象 Navigator 对象包含有关浏览器的信息。 appCodeName 返回浏览器的代码名 appName 返回浏览器的名称 appVersion 返回浏览器的平台和版本信息 cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值 platform 返回运行浏览器的操作系统平台 userAgent 返回由客户机发送服务器的user-agent 头部的值

History 对象 History 对象包含用户(在浏览器窗口中)访问过的 URL。 可通过 window.history 属性对其进行访问。 后退 history.back() history.go(-1) 0是刷新 前进 history.forward() history.go(1)

如果你觉得本文对你有帮助,麻烦动动手指顶一下,算是对本文的一个认可。

如有错误 联系邮箱 欢迎批评指正!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/09/17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 什么是JavaScript?
  • 在HTML中如何使⽤JavaScript(三种)
  • 基础语法:
  • 使用的话注意一个特殊的调用
  • DOM
  • 事件
  • BOM
    • 如果你觉得本文对你有帮助,麻烦动动手指顶一下,算是对本文的一个认可。
      • 如有错误 联系邮箱 欢迎批评指正!
      相关产品与服务
      云服务器
      云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档