\n 换行符 \b 空格 \r 回车 && 与 || 或 ! 非(取反)
alert() 用浏览器提示框显示 信息 (消息弹出框)
prompt( ) 用浏览器对话框,接收用户输入的 提示信息 (信息输入框)
console.log() 用浏览器控制台显示信息
isNaN()方法 判断一个变量是否为 非数值 是数值返回false 不是返回true
(typeof 变量) 可以用来获取变量的数据类型
parseInt(); 数字转整数
parseFloat()数字 浮点小数
变量.toFixed( 要保留几位 )四舍五入为指定小数保留个数(添加几保留几位)
Object{} 对象
indexOf() 可以返回某个字符串的值在字符串首次出现的位置
delete 对象.键名 删除对象的属性和方法
对象.length 获取对象的长度
for in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。
for(var key in 对象){
//key 是对象中的每一个键
//对象[key];
}
var 变量 = new Date() 获取当前时间
对象.hasOwnProperty('键') 检查一个对象中是否存在某个属性或方法、返回布尔值
对象 instanceOf 构造函数名 | 监测对象类型 检测一个对象的数据类型
Math.abs() 获取一个对象的绝对值
Math.round() 四舍五入
Math.PL π
Math.ceil() 向上取整
Math.floor() 向下取整
Math.random() 随机数 (随机生成0 ~1之间的数)
Math.max() 求几个数的最大数
Math.min() 求几个数的最小数
switch( 结果表达式 ){// 多条件查询 ( 等值判断是用 )
case value1 : //表达式结果 等于 value1 时 要执行的代码
break;
default: //表达式结果 不等于任何一个 value 时 要执行的代码
}
while 语句就是当条件满足时重复执行相同的代码;
do..while 最少会执行一次循环的代码。
continue 立即跳出本次循环,继续下一次循环
break 退出整个循环 开始执行 循环后面的代码
return 关键字 可以终止函数的执行 可以 将数据返回给调用者,调用者 可以用变量接收函数返回的结果
数组(Array)
创建数组 : var arr = new Array( ) 通过构造函数创造数组
var arr = [ ] 通过字面量创造数组
变量课访问的范围 是作用域
全局作用域 是函数之外的执行环境
局部作用域只能在本函数中使用
数组名.unshift(要添加的项,多个) 在数组开始位置添加
数组名.push(添加的项,可多个) 在数组结束位置添加(常用)
数组名.shift() 删除并返回数组的第一个元素(删除第一个)
数组名.pop() 删除并返回数组的最后一个元素(删除最后一个)
数组名.splice(索引,删除的个数,替换项) 从数组中添加、删除任意位置
数组名.indexOf('要查询的东西') 从前向后查询|不存在返回-1
数组名.lastIndexOf('要查询的东西') 从后向前查询|不存在放回-1
数组名.reverse() 颠倒数组中元素顺序
数组名.sort(function(a,b){return a-b}); 从小到大排列
数组名.sort(function(a,b){return b-a}); 从大到小排列
数组名.slice(索引,个数)截取 ①索引 ② 截取的个数
数组名.join('')数组拼接 ('')添字符 (把数组转换成字符串)[用于把数组中的所有元素放入一个字符串]
字符串.split() (把字符串转换成数组) [用于把一个字符串分割成字符串数组]
数组名.forEach(function(a,b,c){}) 遍历 a:遍历内容 b:所在位置 c:这个数组
数组名.filter(function(a,b,c){ return 条件}) 过滤出符合条件的元素 用新变量接收
数组名.every(function(a,b){return 条件}) 验证数组中的每个元素是否都符合指定条件,返回布尔值
数组名.some(function(a,b){return 条件}) 验证数组中的每个元素是否都符合指定条件,返回布尔值
数组.map(function(a,b){return 操作}) 遍历数组中每一个元素,更改后存入一个新的数组中 返回新数组
数组名=[] 清空数组
数组名.length = 0; 清空数组
string字符串对象
字符串.charAt(数字) 那个字符在这个位置
字符串[索引] 获取字符串中的单个字符
拼接字符串记得用 + 拼接符
字符串.concat(要拼接的字符串)
字符串slice(开始位置,结束位置) 截取
查询字符是否在字符串中
字符串.indexOf('要查询的字符') 返回所在位置 从前向后查询
字符串.lastIndexOf('要查询的内容') 返回所在位置 从后向前查询
字符串.trim() 去掉字符串前后的空格
字符串.toUpperCase() 字符串转成大写
字符串.toLowerCase() 字符串转成小写
字符串.replace(①,②) 字符串替换 ①原来的②要替换的
字符串.split('要拿出的相同字符')字符串分割 把字符串分割成数组
时间
var 变量 = new Date() 获取当前时间
24小时制
获取(get)
日期对象.getFullYear() 年
日期对象.getMonth() 月 // 注意:获取月份是从0开始的
日期对象.getDate() 日
日期对象.getHours() 时
日期对象.getMinutes() 分
日期对象.getSeconds() 秒
对象.getMilliseconds() 毫秒
对象.getDay(); 0-6(星期日到星期六)
对象.getTime();
设置(set)
日期对象.setFullYear(数字)
日期对象.setMonth(数字)
注意:获取月份是从0开始的
日期对象.setDate(数字)
日期对象.setHours(数字)时
日期对象.setMinutes(数字) 分
日期对象.getSeconds() 秒
对象.setMilliseconds(数字)毫秒
对象.setTime(数字);
12小时制的样式
时间对象.toLocaleString() // 获取当前 时间 例如样式: 2018/5/14 上午11:12:22
时间对象.toLocaleDateString() // 获取当前 年/月/日
时间对象.toLocaleTimeString() // 获取当前 时:分:秒 12小时值得 例如样式:上午 11:22:22
【var dt = new Date();
const 变量名 = (dt.getMonth()+' ').padStart(2,'0') 这样自动会把时间前面的0补齐
padStart( ) :第一个参数表示: 长度 第二个参数表示: 前面要用什么补齐
padEnd( ) :第一个参数表示:长度 读儿歌参数 表示: 向后要用什么补齐
】
WebAPI获取元素节点的方法
document.getElementById() 获取标签在的ID
document.getElementsByTayName() 获取标签名
document.getElementdByClassName()获取标签类名
document.getElementsByName() 根据标签的name值获取一组节点对象。返回一个伪数组
document.querySelector()[0] 根据选择器获取【单个节点对象】。返回一个节点对象(ID记得加 # 类名加 .)
document.querySelectorAll() 根据标签的name值获取【一组节点对象】。返回一个伪数组
操作元素
元素.innerHTML = '可以填写内容和标签';
元素.className = 类名; 添加或删除类名
元素.innerText='只可以填写内容'; 添加标签会被一起打印到页面
操作表单属性
元素.value 获取文本框的内容(所有表单都可以用)
元素.value ='' 设置文本框的内容
元素.cheked 操作表单元素 是否选中【针对 单选框 和 多选框 选择=true】
元素.disabled 操作表单元素是否禁止(针对按钮 禁用=true)
元素.selected 操作下拉框选项是否选中【针对下拉框】
元素.readOnly 操作表单元素是否只读【针对文本框】
什么是自定义属性
针对html标签的属性可以分为两类:
标签自带属性(语言设计者提供的属性)id、title、src、href、name、type等
自定义标签属性用户根据需求,自己给标签添加的自己定义的标签属性
操作方式
获取节点对象.getAttribute('属性名'); // 会返回标签的属性的值
设置节点对象.setAttribute('属性名','值'); // 会修改或添加标签属性
删除节点对象.removeAttribute('属性名'); // 会删除标签的属性
注意:自定义标签属性的操作只能够通过元素的getAtrribute、setAttribute、removeAttribute提供的方法操作。 不能直接通过元素点的方式直接获取或设置
操作元素的样式 【重要】
通过元素的style属性操作
var box = document.getElementById('box');
box.style.width = '100px'; // 设置元素的宽度
box.style.height = '100px'; // 设置元素的高度
box.style.backgroundColor = 'red'; // 设置元素的颜色 // css→ background-color js→ backgroundColor
注意:通过样式属性设置宽高、位置的属性类型是字符串,需要加上px。
通过设置元素的className属性操作
var box = document.getElementById('box');box.className = 'aa bb'; // 设置box.className.replace('aa','AA'); // 替换
小结:元素的style属性适合操作单个样式,而元素className适合操作一组样式
根据节点之间关系获取节点
获取父节点
元素节点.parentNode作用:获取一个节点的父节点
获取子节点
节点.childNodes 获取一个节点的所有子节点(包括文本节点和元素节点),返回一个有序的集合
节点.children 获取一个节点的所有子节点(仅仅是元素节点)
获取第一个节点
父节点.firstChild 获取第一个子节点对象,包含空白(空格)文本节点对象
父节点.firstElementChild 获取第一个元素子节点对象 有兼容问题(IE9以下)
获取最后一个子节点
父节点.lastChild 获取最后一个子节点对象,包含空白文本(空格)节点对象
父节点.lastElementChild 获取最后一个元素子节点对象,有兼容问题IE9以下
获取上一个兄弟节点
节点.previousSibling; 获取上一个同级的节点,包含空白文本节点对象
节点.previousElementSibling; 获取上一个同级的元素节点,有兼容问题IE9以下
获取下一个
节点.nextSibling;获取下一个同级的节点,包含空白文本(空格)节点对象
节点.nextElementSibling; 获取下一个同级的元素节点,有兼容问题IE9以下
创建元素
document.write('内容') 缺点会覆盖整个页面 一般不用
元素.innerHTML ='内容'优点:对于添加多个嵌套的内容操作方便。缺点:会覆盖部分网页元素以及事件
document.createElement('标签名') 优点:不会覆盖原有的元素的事件。缺点:对于添加嵌套多的内容操作麻烦。(只是标签名字不用加<> 如加 <div>标签 直接写成document.createElement(‘div’) 就可以 )
创建元素性能问题 【了解】
innerHTML 会产生字符串解析,由于字符串的不可变性,尽量避免大量的拼接,否则消耗内存,影响性能。
document.createElement('标签')创建的性能要比innerHTML要高,但是若涉及到多层嵌套内容时,代码操作麻烦。
所以,一般情况下,两者配合使用较多
添加元素
父节点.appendChild(新的子节点);作用:向父节点最后追加新的节点
父节点.insertBefore(新的节点,旧的子节点) 将一个新的节点插入到父节点中的某个子节点的前面
删除元素
父节点.removeChild(子节点) 作用:删除父元素中的指定的子节点
替换元素
父节点.replaceChild(新的节点,旧的子节点) 作用:替换子节点
基本动画【一】 (tab 切换用)
动画显示
元素.show([speed],[callback])
参数:① speed ,可选,表示动画执行时长,数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。
② callback,可选,表示动画执行完后要执行的程序,用函数 表示。
动画隐藏
元素.hide([speed],[callback])
参数 同【同显示一样】
动画切换
元素.toggle([speed],[callback])
参数【同显示一样】
基本动画【二】(轮播图常用)
动画显示
元素.slideDown([speed],[callback])
参数:
① speed ,可选,表示动画执行时长,数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。
② callback,可选,表示动画执行完后要执行的程序,用函数 表示。
动画隐藏
元素.slideUp([speed],[callback])
参数:
① speed ,可选,表示动画执行时长,数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。
② callback,可选,表示动画执行完后要执行的程序,用函数 表示。
动画切换
元素.slideToggle([speed],[callback])
参数:
① speed ,可选,表示动画执行时长,数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。
② callback,可选,表示动画执行完后要执行的程序,用函数 表示。
基本动画【三】
动画显示
元素.fadeIn([speed],[callback])
参数:① speed ,可选,表示动画执行时长,数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。
② callback,可选,表示动画执行完后要执行的程序,用函数 表示。
动画隐藏
元素.fadeOut([speed],[callback])
参数:同显示一样】
动画切换
元素.fadeToggle([speed],[callback])
参数:【同显示一样】
自定义动画
元素.animate({params},[speed],[easing],[callback]);
参数
① params ,必选。 表示运动的哪些样式属性,用对象 表示。
② [speed] ,可选,表示动画执行时长,数字 表示毫秒。
③ [easing] ,可选,表示运动的方式,默认为swing(缓动)慢快慢 可以是linear(匀速)。
④ callback,可选,表示动画执行完后要执行的程序,用函数 表示。
动画的队列和动画的停止
元素.stop([clearQueue], [jumpToEnd]);
参数:
clearQueue ,可选,表示是否清空动画队列。 默认为false。
若是false 时,会停止当前这一个动画,开始队列中的下一个动画
若是true 时,停止动画并清空所有的动画队列。
jupmToEnd ,可选,表示是否让当前动画直接达到目标值。默认为false
若是false 时,会直接停止当前动画,不会达到目标值。
若是true 时,则会停止当前动画,直接达到目标值。
jQuery操作节点
创建节点
$('<li>内容</li>')
添加节点
把一个子元素追加到父元素的最后面
元素.append(子元素);(获取父元素在把子元素添加)
子元素.appendTo(父元素);(意思是:把创建好的子元素添加到父元素最后面)
把一个子元素追加到父元素最前面
元素.prepend(子元素);(获取父元素在把子元素添加)
子元素.prependTo(父元素);(意思是:把创建好的子元素添加到父元素最前面)
把一个元素追加到一个同级兄弟元素的前面
兄弟元素.before(新元素);
把一个元素追加到一个同级兄弟元素的后面
兄弟元素.after(新元素) ;
删除节点
要删除的节点.remove();
清空节点
元素.empty(); 元素.html('');
克隆节点
元素.clone(boolean);
默认false,
若是true时,则会克隆和元素相关的事件。 深拷贝(拷贝的包括事件)
若是false时,则不会克隆和元素相关的事件。浅拷贝。(拷贝的不包括事件)