前端网页制作-javaScripe 初学笔记
2024-04-16 08:57:13 阅读次数：33
html5，脚本
前端网页制作-javaScripe 笔记
本人为js新手，以下内容如果有任何误人子弟的地方希望大家积极提出，我会马不停蹄的改正，谢谢大神们的指点，本人感激不尽。
1: Hello Word
- 输出"Hello Word"
document.write();
docement.write(Hello Word);
- 嵌入js代码的方式
- head 标签中
- script 标签中：< script type="text/javascript" src="地址"> < /script>
- 在HTML标签中直接添加，若在js中嵌套html标签，需要用单引号
2：输出语句
- document.write();
表示正常在网页中输出
- alert();
在网页中自动弹出对话框
- onclick();
在鼠标点击时弹出对话框
3：常量与变量
- 常量
固定不变的值，比如数字
- 变量
含义：可以变化的值;
- 声明：var 变量;
- 赋值：可以在声明时赋值，也可以之后再赋值;
- 注意：变量名不能是系统关键字，并且必须以字母、下划线、或是美元符号开头($)。
- 如果声明后没有赋值，变量值类型为undefined,这是编译器的问题;
4：数据类型
- 数据类型分类
- Number:数值(包含整数，小数等),其中若想表示八进制，在数值前加0，若想表示十六进制，在数值前加0x;但是在输出时，系统会自动转换成十进制;
-
- boolen:只有两个值：true,false。
- string:字符串
- undefined:表示变量既没有定义，也没有赋值;
- null:表示什么都没有，但是已经定义了。通常用来确认变量，对象是否创建成功或是用来清空内容
- 数组Array:一组数的集合
- bool类型判断其他数据类型的真假
- 数值类型：任意非0数值为true,0和NaN为false
- Object类型：任何对象都会是true
- String类型：非空字符串为true，空字符串("")为false
- object对象：如果没有赋值的属性，会是这个属性值默认为undefined;
- 查询数据类型
typeof(变量名);
例如：var n = "ds";
alert(typeof(n)); // 则会弹出string;
5：运算符
- 赋值运算符
- 算术运算符
- 比较运算符：其中==表示相等运算符，如果两边的数据类型不同，则会先转换成相同的类型后进行比较。
其中===表示等同运算符，意思是两边的数据类型与数值完全相等;
- 逻辑运算符
- 条件运算符（在if函数中常用）
- 位运算符（略）
6:控制语句
- if 语句
- switch 语句（注意四点： case,冒号,break,default;）
- for 循环（注意可以在for后的括号里不写语句1和3，注意分号要保留，但是在循环语句中要加上;）
- while 循环（continue只能跳出一个迭代，但是break可以跳出整个循环;）
- for/in 循环
- with 语句
- return 返回值
7:函数
- 定义
由事件驱动的或是当它被调用时执行的可重复使用的代码块;
- 函数的声明 function 关键字
function 函数名(参数列表){ 代码块 }
- 函数的调用
函数名(参数列表); // 这样可以调用函数了;
- arguments 对象
- 本质：将函数的参数转变为一个数组(比如arguments[0]为函数的第一个参数)
- arguments.length 表示函数的参数个数;
- 注意
- 存在返回值的函数注意用一个变量去接收，但在直接输出的语句中无需接收即可输出;
- 函数可以在任何位置，只要声明了就可以，无需先声明，再调用
8:对象
- 概述
对象包含属性与值，当属性值为方法时，属性也称字段，方法也称函数;
- 创建对象
- var 对象名 = new.Object();
- var 对象名 = { 属性名:属性值; };
- 创建属性
- 对象名.属性 = 属性值;
- 对象名.属性 = 方法名;（在调用时注意不要忘记括号,否则会打印出函数的代码）
- 删除属性 delete关键字
delete 对象名.属性名; // 此时该属性会变为undefined
9:数组
- 创建数组
- var 数组名 = new.Array(); // 创建空数组;
- var 数组名 = new.Array(数组内容) // 既声明了数组又为数组进行了赋值
- var 数组名 = new.Array(数字) // 声明一个有固定度的数组
- 数组元素操作
- 数组名.push(内容);：动态的添加元素;
- delete 数组名[下标];:删除指定下标的内容;
- 数组名.pop();:删除数组中最后一个元素(有返回值，返回值为被删除的值)
- 数组名.shift();:移除数组顶端的元素;
- 数组名.unshift(内容);:在数组开头添加内容，返回值是现在数组的长度
- 数组名.join('字符\字符串');：在输出时使用，会使数组元素之间用指定字符连接;
- 数组名.reverse();:将数组元素进行颠倒;
- 排序方法 sort
- 数组名.sort();:将数组按照第一个数字从小到大进行排序
- 数组名.sort(自定义方法名);
function 自定义方法名(ar1,ar2){
if(ar1 > ar2){ return 1;}
else if(ar1 < ar2){ return -1;}
else{ return 0; }
} //然后才能做到按照整体的大小进行有小到大的顺序进行排序，如果想要从大到小进行排序，只需把1变为-1，-1变成1即可；
- 自定义数组名 = 数组1.concat(数组2\元素) //数组1与数组2进行合并，得到一个新的数组
- solice 方法：
- 一共有三个参数
- 第一个参数：起始位置索引(按照下标来)
- 截取元素个数(返回值为被劫取的元素构成的新数组)：var 自定义数组名 = 数组名.splice(2,2,"小A","小B") // 在下标为2的地方截取两个元素，并用小A小B进行替换;
- 插入的元素（可有可无）
- 切取元素 slice:(返回值是从起始位置到结束位置的元素，但是包含其实位置的那个元素，不包含结束位置的那个元素)
- 两个参数
- 第一个参数为起始位置的下标;
- 第二个参数是截取位置的下标（若省略，则会截取到末尾）;
- in 运算符与 for-in 循环语句
for(自定义变量 in 数组) { } //对数组中的每一个数进行操作
10:Date 对象
- 创建date日期
- var 变量名 = new Date(); // 得到此时此刻的时间
- var 变量名 = new Date( 数字 ); // 得到从1970年1月1日0时+数字（毫秒）之后的日期
- var 变量名 = new Date( 日期（格式：年,月,日） ); // 得到指定的日期，但是具体时间是0点0分0秒
- var 变量名 = new Date( 日期2（格式：年,月,日,时,分,秒） ); //得到指定年月日时分秒
- Date 方法
- getDate() //返回一个月中的某一天（1-31）
- getDay() //返回一周中的某一天（0-6）
- getFullYear() //以四位数字返回年份
- getHours() //返回小时（0-23）
- getMilliseconds() //返回毫秒数（0-999）
- getMinutes() //返回分钟（0-59）
- getMonth() //返回月份（0-11）
- getSeconds() //返回秒数（0-59）
- getTime() //返回从1970年1月1日至今的毫秒数
日期格式包括：
- 月/日/年
- 月(英文)|(空格)|日||年
- 周(英文) 月(英文) 日(数字) 年(数字) 时(数字) 分(数字) 秒(数字) 日期格式(如：GMT+0800)若格式不正确，返回值为NaN
- Date.parse(日期格式); //得到从1970年1月1日0点0分0秒到指定日期的毫秒数
- Date.UTC(年,月,日,时,分,秒) //UTC可以考虑时区的划分，但要注意：‘月’在本方法中是0-11，‘日’中0表示星期一，1表示星期二，以此类推;
- 也可以用一下方法：
- toString() //用字符串格式表示时间，与直接打印时间显示相同，但是格式是字符串
- toDateString() //获得日期部分的显示
- toTimeString()//获得时间部分的表示
- toLocaleString() //返回本地格式时间;
- toLocaleDateString() //返回本地时间的日期部分;
- toLocaleTimeString() //返回本地时间的时间部分;
- valueOf() //返回距离1970年的毫秒数;
11:Math对象
- 算数值
- Math.PI //返回圆周率
- Math.E //自然对数底数e
取整
- Math.ceil(num) //小数部分进位
- Math.floor(num) //小数部分舍弃
- Math.round(num) //小数部分四舍五入
随机数
- Mith.random() //产生0-1之间的随机数;
- Mith.random()*最大值+最小值 //产生 最小值-最大值 之间的随机数;
三角函数
- num 值为弧度制
- Math.sin(num) //正弦
- Math.cos(num) //余弦
- Math.tan(num) //正切
- Math.asin(num) //反正弦
- Math.acos(num) //反余弦
- Math.atan(num) //反正切
- 其他
- Math.max(N个num) //返回括号中数值的最大值
- Math.min(N个num) //返回括号中数值的最小值
- Math.abs(num) //返回括号中数值的绝对值
- Math.pow(x,y) //返回x的y次幂
- Math.atan2(x,y) //返回从x轴到点(y,x)的角度（在-PI/2 到PI/2之间）
- Math.valueOf() //返回Math对象的原始值
12:字符串对象
- 类型转换
- 变量名.toSting() //转变成字符串类型
- 变量名.toString(num) //转变成num进制的数值
- 变量名.parseInt() //转换成整形
- 变量名.parseFloat() //转化成浮点数
- 变量名.Number() //转化成数值类型
- 字符串的执行方法
- 例：var s = "beauty"
- charAt(num) //返回字符串中第num个数，例：var s1 = s.charAt(0); 则s1得到'b'
- charCodeAt(num) //返回字符串中第num个字符的unicode编码
- 字符串1.concat(字符串2) //连接两个字符串，例：var s2 = s.concat(' '+s1); 则s2为"beauty b"
- slice(n,m) //提取字符串[n,m)之间的内容,(不包括m) 例：var s3 = s.slice(0,3); 则s3为"bea"
- substring(n,m) //(少见)正常情况下与slice一样，但参数为负值时有不同
- substr(n,num) //从字符串的第n个数开始截取num个字符;例：var s4 = s.substr(2,2); 则s4为"au"
- split() //将字符串变为数组，例:var arr = s.split(); 则arr[0]就是s字符串
split(字符) //以传入的字符为分界线分割整个字符串;例:var arr2 = s.split('l'); 则arr2[0]为"he",arr2[1]因为夹在两个'l'之间，因此为空字符，arr[2]为'o',但是arr[4]由于不存在，因此输出undefined
- 字符串的检索
- 例：var s = "hello";
- indexOf(字符) //按就近原则返回字符串中指定字符的下标，若找不到，返回-1;例：s.indexOf('l');则返回2
- search(字符) //与indexOf类似，找到与正则表达式匹配的值,并返回位置,若找不到则返回-1
- lastIndexOf(字符) //按就远原则返回字符串中指定字符的下标，若找不到，返回-1; 例：s.indexOf('l');则返回3
- toLowerCase() //字符串变为小写
toUpperCase() 字符串变为大写,例：document.write(s.toUpperCase()); 则打印出"HELLO"
- match() //找到一个或多个正则表达式的匹配,并以数组的方式返回,若未找到,返回null
- replace() //替换与正则表达式匹配的子串并返回替换后的内容,但是不会对原字符串进行修改;例：document.write(s.replace(/a/,'l')); 则打印出"healo",因为查找到的l被a替换;
13:浏览器对象
- BOM
- 简称浏览器对象(Browser Object Model),可以作为访问浏览器的入口
- window对象
- 对话框//其中window.是可以省略的
- window.alert(内容) //只有确认按钮
- window.confirm() //有确认和取消两个按钮,有返回值,为bool类型;
- window.prompt() //可以输入,返回输入的值;若点击取消,返回null;例：prompt("hello","hi"); 则会弹出"hello",下方需要填写的地方预先填入"hi";
- 窗体控制
-
- open()相关用法
- open() //新建窗口
- open('URL地址') //跳转到指定网站
- open('URL地址',窗口名) //也可以跳转到指定窗口,但如果窗口名相同,会覆盖,即打开最后一个网站
- open('URL地址',窗口目标) //确认在新建窗口中打开还是在当前窗口打开,例：open('','_parent');则会覆盖当前网页,变为百度的网页
- open('URL地址','窗口属性') //设定打开的位置与窗口大小
- height:高
- width:宽
- top:页面左上角离顶端的距离
- top:页面左上角离左端的距离
例：open('','height=100,top=100');
- close() //关闭当前窗口
- 定时器例：function f(){ document.write("hello"); }
- setInterval(函数名,t)//以t秒为周期,周期性执行函数
- setTimeout(函数名,t) //延时t毫秒执行函数;存在返回值,为定时器的id;例：
- var Id = setTimeout(f,1000);则1s后打印"hello";
- setTimeout(f(){ document.write("hello"); },1000); //会有同样的效果
- clearInterval(函数名) //停止执行函数;
- clearTimeout(定时器) //清理定时器;例：clearTimeout(Id);
- 其他方法与属性
- 方法:print() //打印当前窗口
- 属性:innerWidth //文档显示区的宽度;例：document.write(window.innerWidth);则打印出显示区的宽度
- 属性:innerHeight //文档显示区的高度;
- 属性:name //设置或返回窗口的名称
- History对象
- 属性：
- length //返回从当前网页跳转的页面数
- 方法：
- history.back() //加载当前页面的前一个URL,类似于浏览器向左指的箭头
- history.forward() //前进到当前页面的后一个URL,类似于浏览器向右指的箭头
- history.go(num) //前进到历史记录中的第num个页面;若num=-1,则是后退一个页面,若num=1,则是前进一个页面;
- Location对象
- 属性：
- 与服务器有关,如：location.href() //返回当前页面的URL地址
- 方法：
- location.assign('URL地址') //加载指定URL的地址;
- location.reload() //重新加载,相当于浏览器自身的刷新按钮;如果传入参数false,则会检测文档是否改变,若改变则从服务器重新下载,否则从缓存中装载;若传入参数true,则绕过缓存从服务器上重新下载文档
- location.replace() //用指定文档替换当前文档,并且不会在History对象中生成一个新的记录
- Screen对象
- 返回与用户相关的参数
属性：
- screen.availHeight //返回浏览器文档显示区(不包含任务栏)的高度
- screen.availWidth //返回文档显示区的宽度
- screen.height //返回包含任务栏的高度,相当于显示屏的高度
- screen.width //返回浏览器(显示屏)的宽度
- Navigator对象
返回与浏览器相关的参数
- 属性：
- navigator.appName //返回浏览器的名称
- navigator.cookieEnabled //返回浏览器中是否启用cookie的布尔值
- navigator.onLine //返回浏览器是否处于脱机状态,ture为在线,false为离线
14:DOM对象
- 概述：
- Document对象就是文档对象
- 每个HTML文档都会成为Document对象
- 作为Window对象的一部分，可以通过脚本对HTML页面中的所有元素进行访问
- 文档对象是从上往下解析,所以注意逻辑
- 操作方法
- document.getElementById('id名') //返回通过id找到的元素
- document.getElementsByName('name名') //返回拥有指定name名的数组
- getElementsByTagName('标签元素的名称') //返回拥有指定标签名称的数组
- document.write(内容) //输出，其中内容部分可以嵌套html标签；但是如果文档加载完成之后调用document.write()方法，会重新加载新的文档，使原来文档被新的文档覆盖
- HTML标签属性的获取与修改
- 指定对象.属性 //获取对应的元素的属性，注意class属性需要用className获取
- 指定对象.id //返回元素的id；也可以加一个赋值符号进行修改
- 指定对象.className //获取元素的class
- CSS样式的获取与修改
- style属性
- 指定对象.style.具体属性 //如：div.style.background，则会修改div元素的背景
- 指定对象.style.具体属性的内容 //比如想要修改id为navForward的style属性中的background-color 可以这样做：navForward.style.backgroundColor，即把'-'下划线去掉，并且第二个单词的首字母大写
- class的修改：
如果是两个样式，在原来的标签中需要 class='类1 类2'（注意两个类中有空格），并且在JS中用：指定元素.clssName='类1修改版'+' '+'类2修改版'
- 元素巧用：
通过JS的function函数以id名或类名为媒介，指向一个css的样式，并在css样式中进行大量复杂的修改，这样就不需要用JS代码对指定元素进行修改
- 操作HTML文档对象的属性
- 指定对象.getAttribute("指定属性") //返回指定对象的指定属性
- 指定对象.setAttribute("指定属性","指定的值") //设置指定属性为指定的值
- 指定对象.removeAttribute("指定属性") //从元素中移除指定属性
- 创建HTML文档对象
- var 指定元素名=document.createElement('创建的元素标签') //创建元素节点，相当于新建一个元素，但是并没有添加到文档中，需要与下一个方法搭配使用
- 指定对象.appendChild(指定元素名) //在指定对象中添加指定的元素名对应的元素，作为子元素，如果出现异常情况，请检查两点：1.是否只创建了一次，2.是否添加到指定对象中后，在把指定对象添加到了其他地方
- 指定对象.removeChild(子元素) //删除指定对象中的子元素
- DOM节点操作
- 获取元素的内容和标签名称
- 对象名称.innerHTML //设置或返回元素的名称，注意如果对象指向一个文本，会返回#text，即便对象指向一个空格之类的东西，也会返回这个
- 对象名称.tagName //返回元素的标签名
- 对象名称.nodeType //返回元素的节点类型
- 元素节点 返回 1
- 属性节点 返回 2
- 文本节点 返回 3
- 对象名称.nodeValue //设置或返回元素的值
- 文本节点 返回 文本内容
- 属性节点 返回 属性值
- 元素节点 返回 null
- 子元素相关操作
- 对象名称.parentNode //返回元素的父节点
- 对象名称.childNodes //返回所有子节点的数组,也可作为访问子节点的入口，例：var val = divF.childNodes; 则val[num] 为divF的第(num + 1) 个子节点
- 对象名称.children //返回除了文本节点之外的其他节点组成的数组
-
- 对象名称.firstChild //返回对象中的第一个子节点
- 对象名称.firstElementChild //返回对象中除文本节点外的第一个子节点
-
- 对象名称.lastChild //返回对象中的最后一个子节点
- 对象名称.lastElementChild //返回对象中除文本节点外的最后一个子节点
- 对象名称.parentNode //返回元素的父节点
- 同级元素间的相互调用(兄弟选择器)
-
- 对象名称.previousSibling //返回位于除文本节点的相同节点树层级的前一个元素
- 对象名称.previousElementSibling //返回位于相同节点数层级的前一个元素
- 对象名称.nextSibling //返回除文本节点外位于相同节点数层级的下一个节点
- 对象名称.nextElementSibling //返回位于相同节点数层级的下一个节点
-
-
- 属性节点
- 对象名称.attributes //访问——返回对象的属性，也可以访问具体的属性，例：对象名称.attributes[num].nodeName；则会访问第num个属性
- 对象名称.insertBefor(新增元素名称,指定子元素位置) //插入——在指定对象前插入新增的元素名对应的元素，并将它作为子节点，例：d.insertBefore(h,d.children[1])，则是在对象名称为d的元素第2个子元素前添加名称为h的元素
- 对象名称.replaceChild(新的元素名称,指定的子元素位置) //替换——将对象中的指定子元素替换成新的元素
- 。。。。。。。。
15:javascript事件
- 添加事件
- HTML事件处理——作为HTML的属性，在标签中添加事件，若添加JS函数时注意加小括号，可以添加多个事件，用逗号隔开
- DOM0级事件处理——用脚本添加事件,例：触发对象.onclick = 触发函数;注意函数不要加小括号，不可添加多个事件，如果对同一个id设置多个onclick的事件时，只会执行最后一个
- DOM2级事件处理——可以添加多个事件
- DOM2级事件处理
- 添加事件：触发对象.addEventListener('事件类型',函数名)
如：but.addEventListener('click',function_1) //向but对象中添加一个onclic事件，执行functi_1函数
- 移除事件：触发对象.addEventListene('事件类型',函数名)IE8及以下浏览器需要使用：
- 添加事件：触发对象.attachEvent('事件名称'，函数名)
- 删除事件：触发对象.detachEvent('事件类型'，函数名)
- 鼠标事件
- onclick ：鼠标单击事件
- ondblclick ：鼠标双击事件
- onmousedown ：鼠标按下
- onmouseup ：鼠标弹起
- mouseover ：鼠标移入
- mouseout ：鼠标移出
- contextmenu ：单击鼠标右键
- 键盘事件
- onkeydown ：按下某键时
- onkeyup ：弹起某键时
- onkeypress ：按下并松开某个键盘字符时注：当onkeydown与onkeypress同时存在时，onkeydown优先于onkeypress执行，但表现出来后有可能存在后者的效果覆盖前者；并且onkeypress事件对于系统按键（ALT,CTRL等）并不适用（因为它接受的是字符），而对onkeydown适用
- 其他事件
- onload ：当页面或图像加载完成后
- onunload ：用户退出页面时（兼容性不好，部分浏览器不执行）
- onabort ：图像加载中断时
- onchange ：改变域时
- onerror ：文档或图像加载出错时
- onselect ：选中文档时
- onscroll ：当文本滚动时
- 事件对象
每一个事件都可以被认为是一个事件的对象
- event.type ：得到事件的类型
- event.target ：获得事件来源
获得事件后：
- event.clientX :返回触发事件时鼠标在浏览器文档中的水平坐标
- event.clientY :返回触发事件时鼠标在浏览器文档中的垂直坐标
- event.screenX :返回触发事件时鼠标指针在屏幕平面上的水平坐标
- event.screenY :返回触发事件时鼠标指针在屏幕平面上的垂直坐标
- event.keyCode ：返回键盘事件中触发的按键的Unicode代码
- event.which ：返回键盘事件中触发的按键的Unicode代码（与keyCode相同）注意：由于 event.keyCode 与 event.which 存在浏览器兼容性问题，因此可以使用 var v = event.which || event.keyCode;
- ctrlKey：返回当事件触发时，“CTRL”按键是否被按下
- altKey：返回当事件触发时，“ALT”按键是否被按下
- shiftKey：返回当事件触发时，“SHIFT”按键是否被按下
- button：返回当事件触发时，鼠标上哪个键是否被按下;其中0代表左键，1代表中键，2代表右键;
- 事件的冒泡和捕获
事件对象.addEventListener('事件类型',函数名,false/true); //true为事件的捕获；false为事件的冒泡；默认为false
event.stopPropagation(); //在function函数中添加这句代码可以阻止事件的冒泡
event.preventDefault(); //在function函数中添加这句代码可以阻止浏览器的默认操作；比如阻止点击超链接后的自动跳转，点击右键后弹出一个操作的菜单等；
- 事件的冒泡：事件的发生按照从最特定的事件目标到最不特定的目标的顺序触发；意思是同时触发多个重叠事件时，事件会从最内层的元素开始发生，一直向上传递；
- 事件的捕获：事件按照与冒泡相反的方向依次发生；意思是当触发多个重叠的事件时，事件会从最外层开始发生，依次向内传递；
16:JS 选择器
- document.querySelector('CSS选择器'); //根据深度优先算法和先序遍历原则查找并返回含有传入的选择器的第一个元素
- document.querySelectorAll('CSS选择器'); //返回含有传入选择器的nodeList集合;对集合进行批量操作时可能会需要for循环;注：如果需要多个选择器同时查找，可以使用：('CSS选择器1,CSS选择器2....');并且不支持动态添加元素的查找;
- document.getElementsByClassName('class名称'); //返回含有相同类名称的一个元素集合，作为NldeList对象;
版权声明：本文内容来自第三方投稿或授权转载，原文地址：https://blog.csdn.net/weixin_35757704/article/details/52130571，作者：呆萌的代Ma，版权归原作者所有。本网站转在其作品的目的在于传递更多信息，不拥有版权，亦不承担相应法律责任。如因作品内容、版权等问题需要同本网站联系，请发邮件至ctyunbbs@chinatelecom.cn沟通。
上一篇：Objective-C使用位运算设计可复选的枚举
下一篇：StringBuffer源码分析之 append 方法
