zoukankan      html  css  js  c++  java
  • JavaScript

    JavaScript

    1. 概念:一门客户端脚本语言。

    2. JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)。

    3. 数据类型:

      1. 原始数据类型(基本数据类型):

        • number:数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)。

        • string:字符串。可以用双引号或者单引号包裹。

        • boolean: true和false。

        • null:一个对象为空的占位符。

        • undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined。

      2. 引用数据类型:对象

    4. 变量:一小块存储数据的内存空间。

      1. typeof运算符:获取变量的类型。

        • null运算后得到的是object

      2. 变量的定义使用var关键字,也可以不使用

        • 用:定义的变量是局部变量

        • 不用:定义的变量是全局变量(不建议)

    基本对象

    Function:函数(方法)对象

    1. 创建

      • function 方法名称(形式参数列表){方法体}

      • var 方法名 = function(形式参数列表){方法体}

    2. 特点

      • 方法定义时,不用写参数类型和返回值

      • 方法是一个对象,如果定义名称相同的方法,会覆盖

      • 在JS中,方法的调用只与方法的名称有关,和参数列表无关

      • 在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数。

    Array:数组对象

    Boolean

    Date:日期对象

    Math:数学对象

    Number

    String

    RegExp:正则表达式对象

    1. 正则表达式:定义字符串的组成规则。

      1. 单个字符:[]

        • 如: [a] [ab] [a-zA-Z0-9_]

        • 特殊符号代表特殊含义的单个字符:

          • d:单个数字字符[0-9]

          • w:单个单词字符[a-zA-Z0-9_]

      2. 量词符号:

        • ?:表示出现0次或1次

        • *:表示出现0次或多次

        • +:出现1次或多次

        • {m,n}:表示 m<= 数量 <= n

        • m如果缺省: {,n}:最多n次

        • n如果缺省:{m,} 最少m次

      3. 开始结束符号

        • ^:开始

        • $:结束

    2. 正则对象:

      1. 创建

        • var reg = new RegExp("正则表达式");

        • var reg = /正则表达式/;

      2. 方法

        • test(参数):验证指定的字符串是否符合正则定义的规范

    Global

    1. 特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。 方法名();

    2. 方法:

      • encodeURI():url编码

      • decodeURI():url解码

      • encodeURIComponent():url编码,编码的字符更多

      • decodeURIComponent():url解码

      • parseInt():将字符串转为数字

        • 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为 number

      • isNaN():判断一个值是否是NaN

        • NaN六亲不认,连自己都不认。NaN参与的==比较全部问false

      • eval():讲 JavaScript 字符串,并把它作为脚本代码来执行。

    事件

    BOM

    1. 概念:Browser Object Model 浏览器对象模型

      • 将浏览器的各个组成部分封装成对象。

    2. 组成:

      • Window:窗口对象

      • Navigator:浏览器对象

      • Screen:显示器屏幕对象

      • History:历史记录对象

      • Location:地址栏对象

    3. Window:窗口对象

      • 创建

      • 方法

        • 与弹出框有关的方法:

          • alert() 显示带有一段消息和一个确认按钮的警告框。

          • confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

          • prompt() 显示可提示用户输入的对话框。

        • 与打开关闭有关的方法:

          • close() 关闭浏览器窗口。

            • 谁调用我 ,我关谁

          • open() 打开一个新的浏览器窗口

        • 与定时器有关的方式

          • setTimeout() 在指定的毫秒数后调用函数或计算表达式。

          • clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

          • setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。

          • clearInterval() 取消由 setInterval() 设置的 timeout。

      • 属性:

        • 获取其他BOM对象:

          • history

          • location

          • Navigator

          • Screen:

      • 获取DOM对象 :document

      • 特点

        • Window对象不需要创建可以直接使用 window使用。 window.方法名();

        • window引用可以省略。 方法名()

      • Location:地址栏对象

        • 创建(获取):

          • window.location

          • location

        • 方法:

          • reload() 重新加载当前文档。刷新

        • 属性

          • href 设置或返回完整的 URL。

      • History:历史记录对象

        • 创建(获取):

          • window.history

          • history

        • 方法:

          • back() 加载 history 列表中的前一个 URL。

          • forward() 加载 history 列表中的下一个 URL。

          • go(参数) 加载 history 列表中的某个具体页面。

        • 参数:

          • 正数:前进几个历史记录

          • 负数:后退几个历史记录

        • 属性:

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

    DOM

    1. 概念: Document Object Model 文档对象模型

      • 将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作

    2. W3C DOM 标准被分为 3 个不同的部分:

      • 核心 DOM - 针对任何结构化文档的标准模型

        • Document:文档对象

        • Element:元素对象

        • Attribute:属性对象

        • Text:文本对象

        • Comment:注释对象

        • Node:节点对象,其他5个的父对象

      • XML DOM - 针对 XML 文档的标准模型

      • HTML DOM - 针对 HTML 文档的标准模型

    核心DOM模型

    1. Document:文档对象

      1. 创建(获取):在html dom模型中可以使用window对象来获取

        • window.document 或document

      2. 方法:

        1. 获取Element对象:

          • getElementById() : 根据id属性值获取元素对象。id属性值一般唯一

          • getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组

          • getElementsByClassName():根据Class属性值获取元素对象们。返回值是一 个数组

          • getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

        2. 创建其他DOM对象:

          • createAttribute(name)

          • createComment()

          • createElement()

          • createTextNode()

    2. Element:元素对象

      1. 获取/创建:通过document来获取和创建

      2. 方法:

        • removeAttribute():删除属性

        • setAttribute():设置属性

    3. Node:节点对象,其他5个的父对象

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

      2. 方法:

        • CRUD dom树:

          • appendChild():向节点的子节点列表的结尾添加新的子节点。

          • removeChild() :删除(并返回)当前节点的指定子节点。

          • replaceChild():用新节点替换一个子节点。

      3. 属性:

        1. parentNode 返回节点的父节点

    4. HTML DOM

      1. 标签体的设置和获取:innerHTML

      2. 使用html元素对象的属性

      3. 控制元素样式

        1. 使用元素的style属性来设置

          • 如:

            //修改样式方式1 
            div1.style.border = "1px solid red";
            div1.style.width = "200px";
            //font-size--> fontSize
            div1.style.fontSize = "20px";
        2. 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。

    事件监听机制

    • 概念:某些组件被执行了某些操作后,触发某些代码的执行。

      • 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了

      • 事件源:组件。如: 按钮 文本输入框...

      • 监听器:代码。

      • 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听 器代码。

    • 常见的事件:

      1. 点击事件:

        1. onclick:单击事件

        2. ondblclick:双击事件

      2. 焦点事件

        1. onblur:失去焦点

        2. onfocus:元素获得焦点。

      3. 加载事件:

        1. onload:一张页面或一幅图像完成加载。

      4. 鼠标事件:

        1. onmousedown 鼠标按钮被按下。

        2. onmouseup 鼠标按键被松开。

        3. onmousemove 鼠标被移动。

        4. onmouseover 鼠标移到某元素之上。

        5. onmouseout 鼠标从某元素移开

      5. 键盘事件:

        1. onkeydown 某个键盘按键被按下。

        2. onkeyup 某个键盘按键被松开。

        3. onkeypress 某个键盘按键被按下并松开。

      6. 选择和改变

        1. onchange 域的内容被改变。

        2. onselect 文本被选中。

      7. 表单事件:

        1. onsubmit 确认按钮被点击。

        2. onreset 重置按钮被点击。

     

    javascript:void(0):

    1. 创建了一个超级链接,当用户点击以后不会发生任何事。
      1. <a href="javascript:void(0)">单击此处什么也不会发生</a>

    javascript:history.go(-1)

    1. <a href="javascript:history.go(-1)">返回上一页</a>
  • 相关阅读:
    dataframe字段过长被截断
    sublime text 3安装Anaconda插件之后写python出现白框
    在tkinter中使用matplotlib
    RemoteDisconnected: Remote end closed connection without response
    object of type 'Response' has no len()
    matploylib之热力图
    pycharm格式化python代码快捷键Ctrl+Alt+L失效
    Windows下Redis集群配置
    七牛云--对象存储
    Spring发送邮件
  • 原文地址:https://www.cnblogs.com/---------zjh---------/p/13372828.html
Copyright © 2011-2022 走看看