JS--总结

一、JavaScript

• 运行在浏览器端的脚本语言，语法类似于java，但是这两者没有任何关系

• js是基于对象的语言

• ja属于解释型语言，浏览器解释到哪一行就执行哪一行

• 大部分浏览器都支持js

二、变量

• js是一种弱语言

• 声明变量时，无需指明数据类型

• let 变量名 = 变量值；

• 变量的数据类型由所赋值决定

• 通过typeof查看变量类型

  • number、string、boolean、

  • undefined

  • object

  • function

• 定义常量：const PI = 3.14

• 数据类型的隐式转换(加运算符)

  • 字符串 + 任意类型 = 字符串

  • 数字 + 布尔：布尔会转换为数字，true为1，false为0

  • 布尔 + 布尔：布尔会转换为数字，true为1，false为0

三、运算符

• 特殊：==（值相等即为true）===（数据类型和值都相同才为true）

四、逻辑结构

五、注释

• js：//单行注释 /*多行注释*/

• html: <!--html注释-->

• css: /*css注释*/

六、html页面引用js的三种方式

• 行内使用

• 内部使用：<script></script>

• 外部js文件：<script src="相对路径"></script>

七、调试

• debugger

• 打开F12

• F10

• F8

• 删掉debugger

八、函数

• 系统函数(内置函数)

  • parseInt()

  • parseFloat()

  • isNaN()

  • 转化为字符串

    • +""

    • str.toString () 不能是null或undefined

    • String()

• 自定义函数

  • function 方法名 (参数列表){

    方法体

    return xx

    }

  • let sum = function(参数列表) {

    方法体

    return xx

    }

• 函数的触发

  • 方法中：通过方法名

  • 事件：

    • onclick

    • ondbclick

    • onchange 改变value值 按钮没有这个事件

    • onblur

    • onfocus

九、window对象

• 代表当前浏览器窗口

• document

• screen：屏幕信息

  • screen.width

  • screen.height

• history：历史访问记录

  • history.forward()

  • history.back()

  • history.go(n)：正数代表前进，负数代表后退

• location：url地址信息

  • location.href = "新的url" 保留访问记录

  • location.replace("新的url"） 不保留访问记录

  • location.reload()：刷新，重新加载页面

• 方法：

  • alert()

  • confirm()：返回值为boolean类型

  • prompt()：

  • open("url","_blank/_self","属性")

  • close()

  • setTimeout("","毫秒数")：多少毫秒后执行

  • setInterval("","毫秒数")：每多少毫秒执行一次

十、日期对象

• 钟表项目

• let today = new Date()

• getFullYear()

• getMonth 0-11对应1-12月

• getDate()

• getDay() 0-6对应星期天到星期六

• getHours()

• getMinutes()

• getSeconds()

十一、document对象

• 代表当前html文档

• 属性：

  • url：当前网址

  • referrer：载入当前页面的网址（父页面或上级页面的网址）

  • 设置背景颜色：document.bgColor

• 方法：

  • write()

  • getElementById(id)

  • getElementsBy...

• 元素的显示和隐藏

  • 元素.style.display="block/inline"

  • 元素.style.display="none" 隐藏后不保留元素原始位置

  • 元素.style.visibility="visivle"

  • 元素.style.visibility="hidden" 隐藏后保留元素原始位置

• 复选框

  • checked

    • true

    • false

十二、表单验证

• 减轻服务器的压力

• 触发事件：

  • onsubmit = "return checkForm()"：表单提交前进行验证

  • onblur = ""：失去焦点

• 字符串

  • 属性：length

  • 方法：

    • toUpperCase()

    • toLowerCase()

    • charAt(index)：获取某个位置的字符

    • substring(start,end)

    • substr(start,length)

    • indexOf()：查找某个字符在字符串中的位置，如果找不到返回-1

十三、正则表达式

• 基本正则表达式

• 符号

  • //

  • ^

  • $

  • \d [0-9]

  • \w

  • {n}

  • {n,m}

  • ? 匹配前一项 0次 或1 次

  • +

• 正则表达式的常用方法

  reg.test(str) 返回值是true或false

• 字符串的常用方法

十四、数组

• 数组的定义

• 属性：length

• 方法

  • sort()：排序

  • reverse()：反转

  • join("-")：将数组中的元素通过指定符号连接为一个字符串

  • push()：往数组最后一个位置添加元素

  • pop() ：删除数组中最后一个元素

十五、下拉框

• select - option

• 事件：onchange

• 属性：

  • 元素.value：获取选中项的value属性值

  • 元素.options.length

  • 元素.selectedIndex

  • 元素.length = 0

• 方法

  • add(new Option(text, value))

十六、jQuery

• 选择器

  • id选择器：#

  • 类选择器：.

  • 标签选择器

  • 组合选择器：英文逗号

  • 后代选择器：空格

  • 子选择器：>

  • 属性选择器：type可以用: ，所有的属性都可以用[]

  • 过滤选择器：:first :last :even :odd :eq(1) :eq(-1)

• 事件

  • $("#btn").click(function(){})

  • $("#div01").hover(functon(){

    鼠标移上

    },function(){

    鼠标离开

    })

• 方法

  • html()

  • text()

  • val()

  • attr()

  • css()

  • addClass() removeClass()

  • hide() show() toggle()

  • fadeIn() fadeOut fadeToggle()

  • slideDown() slideUp() slideToggle()

• DOM节点的操作

  • 查看节点

  • 创建节点：$("html")

  • 追加：append() appendTo()

  • prepend() prependTo()

  • before() insertBefore()

  • after() insertAfter()

  • 删除节点：remove()：自杀

  • 清空节点：empty()：清理门户

  • 复制节点：clone()：无参只复制节点 参数为true 复制节点和事件

  • 替换节点：replaceAll() replaceWith()