IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript -> 正文阅读

[JavaScript知识库]JavaScript

JavaScript:
概念:一门客户端脚本语言。运行在客户端浏览器中,每一个浏览器都有JavaScript的解析引擎。脚本语言:不需要编译,直接就可以被浏览器解析执行。
功能:可以来增强用户和HTML页面的交互过程,可以来控制HTML元素,让页面有一些动态效果,增强用户体验
JavaScript=ECMAScript+JavaScript自己特有的东西(BOM+DOM)

ECMAScript:客户端脚本语言的标准

  1. 基本语法
    与HTML结合的方式:内部JS直接写在HTML文件呢,外部JS用src建立连接引入外部文件
  2. 注释
    单行注释://注释内容;多行注释:/注释内容/
  3. 数据类型
    原始数据类型(基本数据类型):number:数字 string:字符串 boolean:true和false null:一个对象为空的占位符 undefined:未定义
    引用数据类型:对象
  4. 变量
    变量:一小块存储数据的内存空间
    语法:var 变量名=初始化值;使用var则变量变为局部变量,不用则变为全局变量
  5. 运算符
    不用于Java的:===(全等于) 比较之前先判断类型,如果类型不相等直接返回false
    三元运算符:语法:表达式?值1:值2;如果是true则取值1,false则取值2

基本对象:

  • Function对象:函数(方法)对象
    创建:var fun=new Function(形式参数列表,方法体);
    function 方法名称(形式参数列表){ 方法体 }
    var 方法名=Function(形式参数列表){ 方法体 }
    属性:length属性表示形参的个数
    特点:方法定义时,形参的类型不用写,返回值类型也不写;方法是一个对象,定义名称相同的方法会覆盖;在js中,方法调用与方法名称有关,和参数列表无关;方法声明中有一个隐藏的内置对象arguments封装所有的实际参数
    调用:方法名称(实际参数列表)

  • Array对象:数组对象
    创建:var arr=new Array(元素列表);
    var arr=new Array(默认长度);
    var arr=[元素列表];
    方法:join():将数组中的元素按照指定的分隔符拼接为字符串
    push():向数组的末尾添加一个或更多元素,并返回新得长度
    属性:length表示数组的长度
    特点:js中,数组元素的类型可变的,长度可变的

  • Date对象
    创建:var date=new Date();
    方法:toLocaleString():返回当前date对象对应的时间本地字符串格式;getTime():获取毫秒值

  • Math对象
    创建:Math对象不用创建可以直接使用 如:Math.方法名();
    方法:random():返回0~1之间的随机数,含0不含1
    ceil(x):对数进行向上舍入
    floor(x):对数进行向下舍入
    round(x):把数四舍五入为最近的整数
    属性:PI:圆周率

  • RegExp:正则表达式对象
    正则表达式:定义字符串的组成规则
    单个字符:[ ] 如[a] [ab] [a-zA-Z0-9_]
    特殊符号代表特殊含义的单个字符:\d:单个数字字符[0-9] \w:单个单词字符[a-zA-A0-9_]
    量词符号:?:表示出现0次或1次 *:表示0次或多次 +:出现1次或多次 {m,n}:表示数量m<=数量<=n
    开始结束符号:^:开始 $:结束
    正则对象:
    创建:var reg=new RegExp(“正则表达式”);
    var reg=/正则表达式/;
    方法:test(参数) 验证指定的字符串是否符合正则定义的规范

  • Global
    特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。方法名();
    方法:encodeURL():URL编码
    decodeURL():URL解码
    encodeURLComponent():URL编码,编码的字符更多
    decodeURLComponent():URL解码
    parseInt():逐一判断每一个字符是否是数字,直到不是数字为止,将是数字的返回为number
    isNaN():判断一个值是否是NaN
    eval():将JavaScript字符串,把他作为脚本代码来执行

BOM:Browser Object Model浏览器对象模型,将浏览器各个组成部分封装成对象
组成:
Window:窗口对象
属性:
获取其他BOM对象:history,location,Navigator,Screen
获取DOM对象:document
方法:

  • 与弹出框有关的方法:

    1.alert()显示带有一段消息和一个确认按钮的警告框
    2.confirm()显示带有一段消息以及确认按钮和取消按钮的对话框 按确定返回true,取消返回false
    3.prompt()显示可提示用户输入的对话框 返回值:获取用户输入的值
    特点:Window对象不需要创建可以直接使用,window引用可以省略

  • 与开发关闭浏览器有关的方法:

    close()关闭浏览器窗口
    open()打开一个新的浏览器窗口,会返回一个新的window对象

  • 与定时器有关的方式:
    setTimeout() 在指定的毫秒值后执行指定的函数或语句,只会执行一次;参数:1.js代码或者方法对象;2.毫秒值;返回值:唯一表示用于取消
    clearTimeout() 取消由setTimeout()方法设置的timeout
    setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式
    clearInterval() 取消由setInterval()设置的timeout

Navigator:浏览器对象
Screen:显示器屏幕对象
History:历史记录对象

  • 创建(获取):window.history或直接使用history

  • 方法:
    back()加载history列表中的前一个URL
    forward()加载history列表中的下一个URL
    go(参数)加载history列表中的某个具体页面 参数表示几个单位

  • 属性:length 返回当前窗口历史列表中的URL数量

Location:地址栏对象

  • 创建(获取):window.location或直接使用location
  • 方法:
    reload():重新加载当前文档,刷新
  • 属性:
    href:设置或返回完整的URL

DOM:Document Object Model 文档对象模型,控制HTML文档的内容
代码:获取页面标签(元素)对象 Element
document.getElementById(“id值”):通过元素的id获取元素对象
可以通过对象 修改属性 修改标签体内容

核心DOM模型:

  • Document:文档对象

    • 创建(获取):在HTML DOM模型中可以使用window对象获取
    • 方法:
      • 获取Element对象:
        getElementById():根据id属性值获取元素对象。id属性值一般唯一
        getElementByTagName():根据元素名称获取元素对象们。返回一个数组
        getElementByClassName():根据Class属性值获取元素对象们。
        getElementByName():根据name属性值获取元素对象们。
      • 创建其他DOM对象:
        createAttribute(name)
        createComment()
        createElement()
        createTextNode()
  • Element:元素对象

    • 获取(创建):通过Document来创建或获取
    • 方法:
      removeAttribute()删除属性
      setAttribute()设置属性
  • Node:节点对象,其他5个的父对象

  • 特点:所有的dom对象都可以被认为是一个节点

    • 方法:
      • appendChild():向节点的子节点列表的结尾添加新的子节点
      • removeChild():删除(并返回)当前节点的指定子节点
      • replaceChild():用新节点替换一个子节点
    • 属性:
      • parentNode 返回节点的父节点

HTML DOM:

  • 标签体的设置和获取:innerHTML
  • 使用html元素对象的属性
  • 控制样式

事件:

  • 功能:某些组件被执行了某些操作后,触发某些代码的执行

  • 绑定事件:

     1.直接在HTML标签上,指定事件的属性(操作),属性值就是js代码
     2.通过js获取元素对象,指定事件属性,设置一个函数
    
  • 常用事件:

  • 点击事件:

     onclick:单击事件
     ondblclick:双击事件
    
  • 焦点事件

     onblur:失去焦点
     onfocus:元素获得焦点。
    
  • 加载事件:

     onload:一张页面或一幅图像完成加载。
    
  • 鼠标事件:

     onmousedown	鼠标按钮被按下。定义方法时定义一个形参,接受event对象
     onmouseup	鼠标按键被松开。
     onmousemove 鼠标被移动。
     onmouseover 鼠标移到某元素之上。
     onmouseout 鼠标从某元素移开。
    
  • 键盘事件:

     onkeydown	某个键盘按键被按下。	
     onkeyup		某个键盘按键被松开。
     onkeypress	某个键盘按键被按下并松开。
    
  • 选择和改变

     onchange 域的内容被改变。
     onselect 文本被选中。
    
  • 表单事件:

     onsubmit	确认按钮被点击。
     onreset	重置按钮被点击。
    
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-22 13:28:04  更:2021-08-22 13:28:15 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 12:50:20-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码