JavaScript版本介绍：
- ECMA 基础版本只有基础的语法
- DOM Document Object MOdel 文档对象模型（html）
- html也页面的修改
- 标签属性
- css样式
- 元素标签的CRUD
- BOM :Borswer Object Model 浏览器对象模型
- 弹出提示框
- 加载网站
JavaScript
js的什么是
- 轻量级的编程语言
- 嵌入到html，由浏览器执行
- 目标是动态 的修改html，css和调用浏览器的一些方式
- 是脚本语言
js的作用
- 修改HTML属性
- 修改css属性
- 对页面标签的CRUD
- 浏览器的BOM操作
js的组成
- ECMAScript:基础部分，包含了JavaScript基本语法 变量 方法 循环 分支
- DOM：文档对象模型，对页面进行操作（css,元素crud） createElement();
- BOM：浏览器对象模型，对浏览器进行调用 提示框 加载指定的地址！
js的引入方式
- 内联：onclick 写在元素内部，即属性 标签事件属性添加js代码
无法复用，代码较乱- 内部引入： 定义一个script标签 编写js代码 标签事件属性引用
script标签 写内容 再用onclick引入- 外部引入
- 外部定义一个js文件，编写js代码！引入到html文件中，标签调用方法即可！
注意：在外部引用的时候script标签功能单一，引用了不能在写js代码！
JS的ECMAScript（基本语法）
变量声明
var variable的简写
语法： var 变量名 = 值 ；也可以在声明的时候不进行赋值
//js是脚本语言，无需提前指定任何类型， 类型由赋值决定
//js是脚本语言，方法中的声明的是局部变量，但是如果不加var，那他就是一个全局变量
//有时候，不声明变量，但是如果，这个变量是标签的id，那他就会默认的将这个变量设为标签对象
基本变量类型
- number 数字类型
- string 字符串
- boolean 布尔
- null 空对象 他的类型是Object
- undefined 未赋值
alert(typeof(变量名)) 这个能弹出一个提示框 返回变量 的类型类型转换
- 自动类型转换
- 当js尝试操作一个错误的类型时，会自动将其转换成一个正确的类型
- 方法转换
- parseInt（） 将字符串转换成数字
- parseInt(字符串) 一旦遇到不是数字的就结束截取 只取整数部分
- 将字符串转成int
- 数字开头截取到第一个非数字字符 “11xx” 11
- 如果要是非数字开头 则返回一个 Nan
- 只保留整数部分
- parseFloat 转小数 只保留整数部分和小数部分
引用类型
- 直接创建对象，都是Object
- 例如：var student = new Object();
- 属性 student.nama = “”:
- 方法：student.eat = function(){}
这种方法不咋用 因为js不咋用对象- javaScript Object Notation JSON 对象创建方式
- js特殊创建对象的语法
- {属性名：属性值（需要括起来），属性名：属性值}
例如：var th = {name:"" , age:3 , function(){}} ;- JSON字符串
- 前后端需要交互 传递数据！数据类型就是字符串，设定一些’数据的格式‘方便前端解析！
- 自定义格式，在复杂的数据面前 显得描述的很乱!
- 仿照前端对象描述的形式来描述字符串！
- 数据清晰
- json字符串到前端可以转成json对象，所谓的解析变成了对象调用！
- js的方法 new 对象：’{“name”:“xxx”,“age”:19}’
- json字符串转成json对象： JSON.Parse(json字符串);
- **json对象转成json字符串：JSON.**stringify(json对象);
数组
运算符
分支
循环
以上的四个和Java的一样
函数声明
普通的方法 可以直接调用
function 方法名（name ，age ）{ 方法体 return(根据自己的意愿可写可不写) } // 形参直接写参数名匿名方法 方法可以作为一个值 function类型 就是为了给属性和变量赋值，通过属性和变量调用；不能直接调用
例如：var dtClick = function（）{}方法参数
- 调用方法的时候可以不按照参数列表传参
- 如果少于了，未赋值的形参是 undefined类型，可以通过判断等于undefined默认值
- 多于了，无法通过形参获取数据，可以通过内部的一个arguments参数，包含本次调用传入的所有参数！他是一个数组
- 虽然方法参数很动态，我们尽量按照形参列表传参！
内置函数
- 数组类型的内置函数：
- 声明一个数组 var 变量 = [];
- 属性 Length长度
- 方法：用的时候可以在菜鸟教程查看：
- 字符串类型的内置函数
- 创建对象类型变量 var 变量 = “” 或者 var 变量 = new String(“字符串”);
- 属性： length 字符串长度
- 方法: 用的时候可以在菜鸟教程查看;
- 数学运算的内置函数
- 属性 Math.属性 PI E
- 方法：注意，用Math.Random的时候，获得的是一个0 - 1的数 ，接近1 而不等于1
- 时间处理的内置函数
- 实例化时间类型对象的三种方法
- new Date(); 获取当前时间对象
- new Date(毫秒值); 获取指定毫秒值的时间对象， 通常用于获取未来一个位置的时间！例如 10天后是星期几！
- new Date(年，月，日，时，分，秒，毫秒);获取一个具体时间的对象，通常用于未来具体时间，例如：双十一是星期几，双十一距今天的时间等！
- 注意：时间处理时 月份 0-11 星期 0-6
- 正则表达式的内置函数
- 正则是什么：用于验证数据的一种方式！
- 例如：字符串是不是手机号。是不是银行卡号！
- 正则对象声明
- var reg = /^正则规则$/
- 正则对象方法：
- boolean = 正则对象.test(验证的数据“”);
- 正则表达式语法
- 固定出现的 直接写
- 可能出现 [0-9] [a-z] [ABC] 注意：大写的在前面
- 量词 {1,10} 这种是1-10的位数 {1,}这种是大于1位的 {,8} {5} 这种是第五位的
- /1{1}$/ 是 中文的范围！
- console.info(s) ：控制台输出 s 值
事件：
事件是发生在html标签身上的一些‘事情’！事情被点击啦，被悬浮啦，被加载完毕啦，被加载打断，被xxxx啦！可能这些事情会有一些后续的影响，修改html属性，修改了css样式，操作html的元素标签，进行了bom操作！
事件的三要素：
- 事件源 元素标签
- 事件类型 点击事件 双击事件
- 事件影响 本身，或者其他的标签，，修改html属性 css dom bom
事件的类型：
- 点击事件 onclick
- 双击事件 ondbclick
- 键盘按下 onkeydown
- 键盘抬起 onkeyup
- 键盘按下抬起 onkeypress
- 页面加载完毕 onload
- 失去焦点 onblur
- 获取焦点 onfoucs
- 输入内容改变 onchange
事件源何如绑定事件
元素标签直接绑定
例如：这个就是一个点击事件：btnClick() 需要声明出来
<button onclick="btnClick()">提取</button>优点：简单 缺点：绑定固定方法
外部属性绑定
- 元素标签对象.事件属性 = function(){}
- 优点：外部代码方法，不用开始指定方法名，比较灵活！
事件的影响：
修改html文本
html元素的文本操作 利用 ： innerText innerHTML
获取：
- var x = 元素.innerText 只会获取文本！
- var x = 元素.innerHTML 不仅获取文本，子标签！
- 获取文本内容的时候可以通过，元素对象.value 来获取，但是这种只支持from表单的一些内容。
设置
元素标签.innerText = “纯文本不识别标签”；
元素标签.innerHTML = “识别标签和文本”
设置值得时候会覆盖！
修改html属性
- 获取属性
- var 属性值 = 元素标签.属性名
- var 属性值 = 元素标签.getAttribute(属性名）; 属性名不能 " . "
- 设置属性
- 元素标签.属性名 = “值”
- 元素标签.setAttribute(“属性名”，“属性值”); 属性名不能 " . "
修改CSS样式：
设置：元素标签.Style.css属性 属性命名驼峰式 该方法只能用在内联的时候
获取：
ie的获取方法：
获取的方法是window.getComputedStyle(标签的对象，伪元素类（通常为null)）他可以获得一个CSSStyleDeclaration对象，然后可以通过对象.css样式 获取得到属性值；
window.getComputedStyle(im , null ).marginLeft //可以获得内部引入的style的css样式的值- **window.getComputedStyle(Element, [pseudoElt])[name 获取css属性名];** 该方法一共有两个参数,其中第一个为必须参数,第二个参数为可选参数,为空时会默认为null. Element:需要计算样式的元素.注第一个参数必须是Element对象(传递一个非节点元素，如 一个#text 节点， 将会抛出一个错误). pseudoElt:伪类元素的字符串.表示指定元素节点的伪元素（:before、:after、:first-line、:first-letter等）默认值为null. - 其他浏览器的获取方法： - Element.currentStyle(perperty) - perperty必须采用驼峰式的写法。如果需要获取 font-size 属性，那么传入的参数应该是 fontSize。因此在IE 中要获得单个属性的值，就必须将属性名转 - 例如：obj.currentStyle[name]
js的BOM操作
javascript的BOM操作的是浏览器的一些操作，例如弹出窗口。。。
Window对象：window一般可以不写
- alert（）提示框
- confirm() 确认框 返回boolean值 里面可以输入字符串作为提示
- prompt("") 确认输入框 返回输入的结果字符串 里面可以输入字符串作为提示
Location对象
- 用于加载指定网络地址的
- 获取 localtion.href
- 页面跳转
- html a标签 用于固定跳转，直接可以在html写死！
- js location.href =“地址” 可能根据逻辑判断，跳转的位置不确定。需要在js中跳转
Navigator对象
- 用于获取浏览器信息，信息不准！ cookie
定时器
定时器是当需要周期性修改元素标签的时候，必须使用的记录！
一次性定时器
var 定时器对象 = window.setTimeOut(function ， time毫秒);
停止定时器 window.clearTimeout(定时器对象);
循环定时器
var 循环定时器对象 = window.setInterval(function,time毫秒);
停止定时器 window.clearInterval(循环定时器对象);
js的DOM操作
JavaScript的DOM操作的是HTML的文档
查找元素标签：
方法查询：
- document.getElementById（id的值） 单个元素
- document.getElementsByClassName（元素的class值） 元素数组 返回文档中所有指定类名的元素集合
- document.getELementsByTagName（元素标签） 元素数组 返回带有指定标签名的对象集合
属性查询：
属性查询 元素标签.parentNode 父标签 获取父标签
元素标签.firstChild; 获取第一个孩子
var p = document.getElementById("p"); var r = p.parentNode; r.style.backgroundColor = "red";创建元素标签
首先，创建一个标签 ，他返回一个标签的对象，因此，可以接受一下
- var 自定义的 = document.creatElement(“标签名”);
然后，如果需要给这个标签添加文本内容的话，就需要创建一个文本对象
- var message = document.createTextNode(“文本内容”);
再将这个文本内容添加到标签中
- 自定义的.appendChild(message);
最后就可以将这个标签添加到需要的地方了
//创建一个标签 var p=document.createElement("p"); //这个是需要添加p标签的父类标签 var ps = document.getElementById("parents"); //要给p标签添加的文本内容 var rre = document.createTextNode("ahd"); //给p标签添加文本 p.appendChild(rre); //给父类标签添加p标签 ps.appendChild(p);插入元素标签
父元素标签.appendChild(子元素);
父元素标签.insertBefore(newItem,existingItem); 新的标签，参考标签
在已有的标签之前添加一个新的标签
替换元素标签
父元素标签.replaceChild(新元素,替换标签);
方法用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。
删除元素标签
- 父元素标签.removeChild(子元素标签);
- 标签.remove();
\u4e00-\u9fa5 ↩︎
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
