DOM操作属性

 \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时,则不会克隆和元素相关的事件。浅拷贝。(拷贝的不包括事件)

 

 

 

猜你喜欢

转载自www.cnblogs.com/maxiag/p/10324529.html