js-组成-dom-常见单词

Posted 2020-11-23 jiang-1210

------------恢复内容开始------------

1. js组成：
ECMAScript(语法) 描述了该语言的语法和基本对象
DOM（文档对象模型） 描述了处理网页内容的方法和接口
BOM（浏览器对象） 描述了与浏览器进行效应的方法和接口

2. JS输出方式：
alear警告框，
console.log 控制台输出框， （康搜唠可）
document.write页面输出框， （刀科们呢）
prompt用户输入框，
confirm确认消息框。

3. 常用数据类型：
number 数字，
string 字符串，
Ob ject 对象类型，
Boolean 布尔类型，
Undefined未定义，
Null 空类型 （no）
isNaN

4. 将某种数据类型转换成字符串类型方法：string tostring

5. 将某种数据类型转换成字符串类型方法：
Number
parseInt转换成整型数据 （破森特）
parseFloat转换成浮点类型数字（带小数点类型） （破死副楼特）

6. typeof 判断表达式或者变量的数据类型

7. break 结束退出循环

8. continue 退出当前循环 进行下一次循环 （肯踢牛）

9. switch 语句（思维吃）

10. function 函数名 （风克身）

11. return语句 函数通过关键字 return为函数设置返回值，终止函数执行 （瑞tean）

12 Math random

 

**************************************************************
12 数组
常用方法
1. push 向数组尾部添加元素 （朴实）
2. pop 删除尾部元素 （泡泼）
3. unshift 向数组头部添加元素
4.shift 删除头部元素
5.join 转换字符串 （照n）
6.reverse 返回倒叙数组 （瑞我司）
7.sort 正序排序 （廋特）
8.slice 截取数组元素 （斯莱丝）
9.splice 用于删除添加或替换 （撕破莱斯）
10.indexOf 返回某个指定的字符串值在字符串中首次出现的位置 （因袋克思 of）
11.includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false
instanceof 判断对象是不是数组
index 从何处添加删除元素

*********************************************************************
13. 字符串对象
常用方法
1.charAt（获取字符串指定位置元素）（截取一个字符 在指定的索引表中返回一个字符 方法）
2.charCode（返回指定字符）
3.fromCharCode（可接受Unicode的值 返回一个字符串）
4.concat（返回一个或多个字符串）
5.search（查找字符串中的颜色 返回字符串中的起始位置）
6.match（在字符串中查找检索指定的值）
7.replace（替换新的字符）
8.split（字符串转成数组）
9.repeat（复制）
10.slice（截取下标）
11.substr（从start截取length的字符串）
12.substring
13.indexOf（）
14.lastIndexof（）
15.toLowerCase（全部转换为小写）toUpperCase（全部转换为大写）
16.trim（消除空格 消除开头和结尾）

 

*****************************************************************
14. 间歇性定时器使用及清除
setInterval
clearsetInterval

延时性定时器使用及清除
setTimeout
clearTimeout

**************************************************
15.
max最大值
min最小值
bas绝对值
pow返回x和y幂的值
sqrt返回一个数的平方根
floor向下取整
ceil向上取整
round向上取整（对数字进行四舍五入）
random随机数（默认0-1之间 不包括1）
计算公式Math。random（最大值-最小值+1）+最小值

**************************************************************
16. 日期和时间对象
1.创建时间对象
var time=new Date
2.获取年份
time.getFullyear
3.获取月份
time.genMonth
4.获取日期
time.getdate
5.获取时间小时
time.getHours
6.获取分钟
time.getMinutes
7.获取秒
time.getSeconds
8.获取毫秒
time.getMilliseconds
9.获取星期
time.getDay
10.获取1970-1-1到现在时间
time.getTime

时间转字符串
toString
把时间转换为本地格式
toLocaleString
把时间对象日期部分转字符串
toDateString
世界时间标准格式
toUTCString
把时间部分转换为字符串
(time.toLocaleTimeString());

********************************************************************
17. bom知识

1.location对象属性
2.获取的URL
console.log（location.href）；
3.获取的http协议
console.log（location.protocol）
4.获取路径或文件名
console.log（location.pathname）
5.获取主机名
console.log（location.hostname）
6.获取端口号
console.log（location.port）

****************************************************************
18. dom知识
1.通过id查找
getElementByid
2.通过节点（标签）查找元素
getElementsByTagName
3.通过class查找
getElementsByclassName
4.通过name查找 通过标签名获取元素
getElementsByName

 

通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
获取html的方法（document.documentElement）
获取body的方法（document.body）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）

 

 

输出内容到页面的方法
document.write
document.writeln

 

//getAttribute() 方法返回指定属性名的属性值。
// setAttribute（） 设置元素属性

//innerHTML：开始和结束标签之间的所有HTML
//innerText：开始和结束标签之间的文本

//outerHTML:开始和结束标签之间的文本和所有的HTML
//outerText:获取所有文本内容

 

****************************************************************************
18-2. dom-父元素和子元素获取

dom-父元素和子元素获取单词及用法

1.--克隆节点
cloneNode

2.--createElement 科瑞特一来客门特 **
创建元素

 

3.--childNodes *
获取父元素的所有子节点
获取所有子元素/节点(包括文本类型(空格))通过索引(下标)获取对应元素 从索引0开始

4.--firstchild *
.通过父元素获取第一个子节点（包括空文本(#text类型元素）

5.--children *
.获取当前元素对象的所有节点（不包括空文本）

6.--lastchild *
-.获取最后一个子节点

7.--console.log(myDiv.firstChild.nextSibling);
获取第一个子节点的下一个节点

8.--Div.previousSibling
获取该节点的上一个兄弟元素

9.--.Div.nextSibling
获取该节点的下一个兄弟元素

10.--获取最后一个元素的前一个元素
lastElementChild.previousElementSibling

11.--first.parentNode
通过第一个元素获取父元素

12.--firstElementChild *
获取父元素里第一个子元素（不包括空格）

13.--lastElementChild *
获取父元素里最后一个子元素

14.--children *
获取所有子元素

15.--childElementCount
获取元素个数

16.--firstElementChild.nextElementSibling.
获取第一个元素的下一个元素

 

17.--lastElementChlid.previousElementSibling
获取父元素里最后一个子元素的前一个元素

 

18.--parentElement *
通过第一个元素获取父元素

 

******************************************************************
DOM事件 单词及用法

// onclick 鼠标被点击时触发事件
// ondblclick 鼠标双击触发事件
// onmousedown 鼠标按下事件
// onmousedoup 鼠标抬起事件
// onmousemove 鼠标移动事件
// onmouseover/onmouseenter 鼠标滑过事件
// onmouseout/onmouseleave 鼠标离开

 

*****************************************************************

*****此种方法为全选框在js中的做法；
*****首先需要获取全选按钮；
*****其次在取获取多选框；
*****在函数中设置点击事件“onclick”函数循环多选框在多选框中设置
**多选框下标选中，相当于点击全选按钮触发事件就是全部选中；

<button>全选</button><br>
<input type="checkbox"name="">
<input type="checkbox"name="">
<input type="checkbox"name="">
<input type="checkbox"name="">
<input type="checkbox"name="">
<input type="checkbox"name="">
<input type="checkbox"name="">

<script class="text/javascript">
// 获取全选按钮
var btn= document.getElementsByTagName("button")[0];
console.log(btn);

// 获取所有多选框
var AllchrckBox= document.getElementsByTagName("input");
console.log(AllchrckBox);

// 设置点击事件

btn.onclick= function(){
for(var i=0;i<AllchrckBox.length;i++){

AllchrckBox[i].checked="checked";
}
}

 

 

 

*********************************************************************
获取焦点：onfocus;
失去焦点：onblur;
当表单内容发生改变时触发：onchange;
当表单被重置时触发的事件按钮：onreset加到表单元素form后面
当表单元素被提交时触发的事件按钮：onsubmit加到表单元素form的后面
当表单元素正在输入时触发的事件：oninput;

 

 

*********************************************
事件绑定的三种方式

1.onclick事件点击按钮
2.在css中获取点击按钮onclick
3.在js中引入document.getElementTagName
<!--
div中直接添加点击事件
<div onclick="alert(第一种事件绑定)"></div>-->
<!--
第二种函数添加
<div onclick="add()"></div>-->

 

 

 

 

 

 

 

 

 

 

------------恢复内容结束------------