前端基础之JS
程序员文章站
2022-06-30 19:17:34
...
#前端基础之js【JavaScript】
1.概念及特点引入方式
JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
JavaScript特点：向HTML页面中添加交互行为；脚本语言，语法和Java类似；解释性语言，边执行边解释
包含：BOM和DOM，ECMAScript。
变量的使用
1.JS是弱类型语言
2.先创建变量 在给变量赋值 在使用变量
3.创建变量的同时就赋值 在使用变量
4.不声明直接赋值(不推荐使用)
const PI = ‘3.14’; // 只读变量【常量】
局部变量用let声明 let i=5;
对象是大括号，数组是中括号
var names=[“张三”,”李四”];
var names2= new Array(“张三”,”李四”);
引入方式：1.使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js组成部分BOM,DOM,ES</title>
<script src="1.js" type="text/javascript" charset="utf-8"></script>
<!--1.通过外部引入js -->
</head>
<body>
<!--
1.JavaScript的组成=ECMAScript+DOM+Bom
2.JavaScript的基本结构
<script type="text/javascript">
JS代码
</script>
3.JavaScript中的注释
单行://
多行/**/
-->
<script type="text/javascript">
<!-- 2.内部引入js-->
//可以识别html格式
document.write("33");
document.write("<p>一行段落不显示段落标记</p>")
document.write("45");
//dw:输入 sc:头部引入外部src
//html使用js三种方式
<!-- 普通的script语句必须放在身体里才可以正常显示，和内置对象不同，内置对象可以放置在任何位置-->
</script>
<button onclick="javascript:alert('确认删除')">删除</button> <!--3。通过标签内部的事件script属性进行引用，事件中的双引号必须改为单引号。否则不运行 -->
</body>
</html>
在HTML中的注释是 在script中的注释是//，/**/
<!-- 【普通的script语句必须放在身体里才可以正常显示】，和内置对象不同，内置对象可以放置在任何位置-->
<!--script标签内，写Javascript代码-->
<!--<script>-->
<!--alert('hello,world'); 在头部和文档正文里都可以-->
<!--</script>-->
<!--外部引入-->
<!--注意：script标签必须成对出现-->
<script src="js/qj.js"></script>
<!--不用显示定义type，也默认就是 javascript如果是css需要写明确type="text/css"-->
<script type="text/javascript">
</script>
【'use strict'; 严格检查模式】，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行！
局部变量建议都使用 let 去定义~
2，JavaScript的基本结构
有的网页中用缺省type=“text/Javascript”，这种写法是正确的，因为HTML5中可省略type属性，HTML5默认为是text/Javascript。
使用外部JS文件和直接在HTML标签中这两种方式 ，并强调：外部文件不能包含
弱语言类型，随用随声明，用var声明；变量的类型由赋值的值决定，声明时不知道其类型，都是var;
2-0完全相等，和值相等；
===数据类型和内容完全相等 ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
==仅值相等
var a=3; var b="3"; a==b true;a===b false;
<script>…</script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可
<script type="text/javascript">
<!—
JavaScript 语句;
—>
</script >
0-1先声明变量再赋值var width; width = 5
0-2同时声明和赋值变量var catName= "皮皮"; var x, y, z = 10;
0-3不声明直接赋值width=5;【变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用】
变量：和java变量类似，不能以#和数字开头；
数据类型
【typeof检测变量的返回值，object：javascript中的对象、数组和null】
数据类型【5种】
undefined 声明变量但是没有给赋值
null 声明变量赋值为null
number 数值类型=整数+浮点数
string 字符串=单引号/双引号
boolean 布尔类型=true/false
判断变量的数据类型 typeof()函数
返回值的:【4种】undefined【没有定义数据类型时，返回这个，不属于任何一种数据类型】
object typeof【null/数组/对象】
number
string
boolean象**及方法名
【字符串对象.length】
| charAt(index) | 返回在指定位置的字符 |
|---|---|
| indexOf**(str，**index) | 查找某个指定的字符串在字符串中【首次】出现的位置【找不到返回-1】默认从0开始 |
| substring(index1**，****index2)**var 数组名称 = new Array(size); | 返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符 |
| split(str) | 将字符串分割为字符串数组 |
数组对象：var 数组名称 = new Array(size);
new表示数组的关键字size表示数组中可存放的元素总数
| length | 设置或返回数组中元素的数目 |
|---|---|
| join( ) | 把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔 |
| sort() | 对数组排序 |
| push() | 向数组末尾添加一个或更多 元素，并返回新的长度 |
【使用string对象的split()方法，将一个字符串分割成数组元素，然后使用join()方法将数组元素放入一个字符串中，并使用符号“-”分隔数组元素，最后显示在页面中。】
3.逻辑控制语句
建立数组两种方式：new对象小括号，直接中括号赋值；
循环遍历三种方式：for,for in,while
对象的数组长度也是数组名.length;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>建立数组的两种方式和三种循环方式；</title>
</head>
<body>
<script type="text/javascript">
var fruits=["banana","apple","orange"];
var names=new Array("banana1","apple1","orange1");
var names2=new Array("banana2","apple2","orange2");
document.write("for循环");
//for循环
for (var i = 0; i < fruits.length; i++) {
document.write(fruits[i]+",");
}
document.write("<br/>");
// 2.forin
for (var j in names) {
document.write(names[j]+",");
}
document.write("forin循环<br/>");
var k=0;
while (k<names2.length){
document.write(names2[k]+",");
k++;
}
document.write("while循环<br/>");
</script>
</body>
</html>
***************************************************************
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>String函数方法</title>
</head>
<body>
<script type="text/javascript">
var str="tangyuanshiwoge";
document.write("字符串长度"+str.length);
document.write("<br/>");
document.write("索引为2的字符"+str.charAt(2));
document.write("<br/>");
document.write("第一个字符为‘j’的字符下标为："+str.indexOf("j"));
//如果返回值不存在返回-1,
document.write("<br/>");
document.write("第一个字符为‘a’的字符下标为："+str.indexOf("a"));
document.write("<br/>");
document.write("截取下标为3-6的字符串"+str.substring(3,6));
</script>
</body>
</html>
代码区分大小写;变量、对象和函数的名称;分号
4.注释
多行注释以 /* 开始，以 / 结束，符号 /…… */ 指示中间的语句是该程序中的注释
单行注释以 // 开始，以行末结束
/*
使用for循环运行“document.write("<h3>Hello World</h3>");”5次
使用document.write在页面上输出“Hello World”
*/
alert("恭喜你！注册会员成功"); //在页同上弹出注册会员成功的提示框
5函数及提示框
函数的含义：类似于Java中的方法，是完成特定任务的代码语句块
使用更简单：不用定义属于某个类，直接使用
函数分类：系统函数和自定义函数
自定义函数：【有无参数，有无返回值均可】
调用函数 函数调用一般和表单元素的事件一起使用，调用格式【事件名=“函数名（）”】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击百度按钮跳转到百度页面</title>
</head>
<body>
<button onclick="goBaiDu()">百度</button>
<script type="text/javascript">
function goBaiDu(){
location.href="http://www.baidu.com";
}
</script>
<!-- href单词一定要拼写正确，不是herf -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输入框和自定义函数</title>
</head>
<body>
<!-- 自定义函数可以有无返回值和有无参数；警告输入框最常用，无返回值，有确认和取消两个按钮，一个参数；提示输入框，有两个 参数，用户可以输入值，如果不输入返回为空；确认框返回值是true或false，只有一个参数，本身不输出有两个按钮确认和取消，借助alert（）警告框；输出结果 -->
<button onclick="show()">点击</button>
<button onclick="showinfo2()">输入十次你好</button>
<!-- ???为什么这个方法不运行 showinfo()是系统方法，不可以起这个名字，否则不运行；-->
<button onclick="showinfo(prompt('请输入次数'))">输入规定的次数你好</button>
<!-- 输入的带参函数用提示框进行输入，引号和双引号交叉在js语法中出现； -->
<script type="text/javascript">
// 利用确认框和警告框看是否删除的结果
var result = confirm("确认删除吗？");
if (result) {
alert("删除成功");
} else {
alert("取消删除");
}
// 利用提示框输入信息和警告框弹出结果来显示信息
function show() {
var content = prompt("请选择你喜欢的颜色", "在这里输入");
alert(content);
}
// 输出方法
function showinfo2() {
for (let i = 1; i <= 10; i++) {
document.write("hello<br/>");
}
}
// 带参输出方法
function showinfo(count) {
for (let i = 1; i <= count; i++) {
document.write("hello<br/>");
}
}
</script>
</body>
</html>
function进行定义函数
因为js弱类型，所以参数无数据类型；
单引号和双引号必须交替出现，不能连续出现
function study( ){
for(var i=0;i<5;i++){
document.write("<h4>欢迎学习JavaScript</h4>");
}
}//自定义函数
//点击按钮调用自定义函数
<input name="btn" type="button"
value="显示5次欢迎学习JavaScript" onclick="study( )" />
function study(count){
for(var i=0;i<count;i++){
document.write("<h4>欢迎学习JavaScript</h4>");
}
}
//自定义带参函数实现根据次数显示成绩次数
<input name="btn" type="button" value="请输入显示欢迎学习JavaScript的次数"
onclick="study(prompt('请输入显示欢迎学习JavaScript的次数:',''))" />
parseInt ("字符串")
将字符串转换为整型数字
如: parseInt ("86")将字符串“86“转换为整型值86
parseFloat("字符串")
将字符串转换为浮点型数字
如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45
isNaN()
【用于检查其参数是否是非数字】
常用的系统函数：
1、parseInt(“string”);将字符串转换为整形数字
2、parseFloat(“string”);将字符串转换为浮点型数字
3、inNaN();用于检查其参数是否是字符串【返回true或false】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math函数的使用</title>
</head>
</body>
<script type="text/javascript">
var a=2.8;
document.write("向上取值"+Math.ceil(a)+"向下取值"+Math.floor(a)+"四舍五入"+Math.round(a));
</script>
<body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description"content="判断数据类型"/>
<title>系统函数转换和判断是否是数字</title>
</head>
<body>
<script type="text/javascript">
var a=11.1;
var newa=parseInt(a);
document.write("当前的数据类型为"+typeof(newa));
document.write("不是非数字吗 "+isNaN(newa));
</script>
</body>
</html>
NaN【not a number】不是一个数字
true:string内容不是全部数字，或者都不是数字；
false: string内容全部是数字,float,int
4、xx.test(“string”);检查string中的文本是否与xx所指定的类型匹配，var xx = 正则表达式
5、xxx.value；解析表单的值
6、xxx.innerText；【解析纯文档】
7、xxx.innerHTML；解析HTML语句，和文本
6.事件
| onload | 一个页面或一幅图像完成加载 |
|---|---|
| onlick | 鼠标单击某个对象 |
| onmouseover | 鼠标指导移到某元素上 |
| onkeydown | 某个键盘按键被按下 |
| onchange | 域的内容被改变 |
| onblur； | 光标离开时【失去焦点】 |
| onfocus； | 光标进入时【获取焦点】 |
7.BOM：浏览器对象模型（Browser Object Model）
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
BOM可实现功能：（默认window.）
Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象
弹出新的浏览器窗口；移动、关闭浏览器窗口以及调整窗口的大小；页面的前进、后退
| history | 有关客户访问过的URL的信息 |
|---|---|
| location | 有关当前 URL 的信息 |
| prompt( ) | 显示可提示用户输入的对话框 |
|---|---|
| alert( ) | 显示带有一个提示信息和一个确定按钮的警示框 |
| confirm**( )** | 显示一个****带有提示信息、确定和取消按钮的对话框 |
| close( ) | 关闭浏览器窗口 |
| open( ) | 打开一个新的浏览器窗口，加载给定 URL 所指定的文档 |
| setTimeout**( )** | 在指定的毫秒数后调用函数或计算表达式 |
| setInterval**( )** | 按照指定的周期（以毫秒计）来调用函数或表达式 |
7-1 window.open(“弹出窗口的url”,“窗口名称”,"窗口特征”)
| height、width | 窗口文档显示区的高度、宽度。以像素计 |
|---|---|
| left、top | **窗口的x坐标、y坐标。**以像素计 |
| toolbar=yes | no |1 | 0 | 是否显示浏览器的工具栏。黙认是****yes |
| scrollbars=yes | no |1 | 0 | 是否显示滚动条。黙认是****yes |
| location=yes | no |1 | 0 | 是否显示地址地段。黙认是****yes |
| status=yes | no |1 | 0 | 是否添加状态栏。黙认是****yes |
| menubar**=yes | no |1 | 0** | 是否显示菜单栏。黙认是****yes |
| resizable=yes | no |1 | 0 | 窗口是否可调节尺寸。黙认是****yes |
| titlebar**=yes | no |1 | 0** | 是否显示标题栏。黙认是****yes |
| fullscreen**=yes | no |1 | 0** | 是否使用全屏模式显示浏览器。黙认是****no。处于全屏模式的窗口必须同时处于剧院模式 |
7-2history()历史记录对象
| back() | 加载 history 对象列表中的前一个****URL |
|---|---|
| forward() | 加载 history 对象列表中的下一个****URL |
| go() | 加载 history 对象列表中的某个具体****URL |
history.back() 后退按钮 history.go(-1)
history.forward() 前进按钮 history.go(1)
document.write("历史列表中URL的数量: " + history.length);
7-3location属性和方法【主页面使用href实现跳转和刷新本页】地址栏对象
| host | 设置或返回主机名和当前URL的端口号 |
|---|---|
| hostname | 设置或返回当前URL的主机名 |
| href | 设置或返回完整的****URL |
| assign()；加载新的文档 | 同类的分组 |
| reload() | 重新加载当前文档 |
|---|---|
| replace() | 用新的文档替换当前文档 |
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>
<a href="javascript:location.reload()">刷新本页</a>
<a href="javascript:history.back()">返回主页面</a>
8.confirm()与alert ()、 prompt()区别
A alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何操作在【浏览器】显示。改变输出打印 推荐用 console.log(x); )类似于alert，不过不会打断在【控制台】显示；
alert是警告框，只有一个按钮“确定”无返回值，[【警告框】经常用于确保用户可以得到某些信息。当警告框出现后，用户【需要点击确定】按钮才能继续进行操作。语法：alert(“文本”)【确定和取消两个按钮】
B prompt( )：提示框。两个参数，输入对话框，用来提示用户输入一些信息，单击【“取消”按钮则返回null】，单击“确定”按钮则【返回】用户输入的值，常用于收集用户关于【特定问题而反馈的】信息 prompt(“文本”,“默认值”)
通过var con=prompt(“请输入你喜欢的颜色”,”在这里输入”); //通过alert（con）进行显示
C confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击【“取消”按钮返回false】，因此与if-else语句搭配使用 语法：confirm(“文本”)
<!DOCTYPE html>
<html>
<head>
<title>console.log()</title>
<script language= "javascript" > //js脚本标注，可默认不写
var name,age;
name=prompt( "请问你叫什么名字?alert" ); /*在页面上弹出提示对话框，
将用户输入的结果赋给变量name*/
alert(name); //显示在浏览器
age=prompt( "你今年多大了?" , "请在这里输入年龄console" ); /*在页面上再一次弹出提示对话框，
讲用户输入的信息赋给变量age*/
console.log(age) ;//显示在控制台
var a=23.4;
alert(typeof(a));
var a=23.4;
console.log(typeof(a));
</script>
</head>
<body>
</body>
</html>
*********************************************************************************
//，类一加载直接运行；
<html>
<head>
<title>alert</title>
<script language= "javascript" > //JavaScript脚本标注
alert( "上联：山石岩下古木枯" ); //在页面上弹出上联
alert( "下联：白水泉边少女妙" ); //在页面上弹出下联
</script>
</head>
</html>
***********************************
9.Document对象
| referrer | 返回载入当前文档的****URL |
|---|---|
| URL | 返回当前文档的****URL |
判断页面是否是链接进入；自动跳转到登录页面
var preUrl=document.referrer; //载入本页面文档的地址
if(preUrl==""){
document.write("<h2>您不是从领奖页面进入，5秒后将自动
跳转到登录页面</h2>");
setTimeout("javascript:location.href='login.html'",5000);
}
| getElementById**() 【对象的id唯一****】** | 返回对拥有指定id的第一个对象的引用 |
|---|---|
| getElementsByName**() 【相同name属性****】** | 返回带有指定名称的对象的集合 |
| getElementsByTagName**() **【相同的元素】 | 返回带有指定标签名的对象的集合 |
| write() | 向文档写文本、HTML表达式或JavaScript代码 |
访问页面元素：动态改变层、标签中的内容；访问相同name的元素；访问相同标签的元素
id是唯一的，所以getElementById,【返回一个值】其余是getElementsByName/ClassName/TagName;【返回多个值】
改变元素内容，样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A0OXWSuY-1604479407169)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20201101200202503.png)]
1、document.write（）；改变HTML输出流
输出也i可以用alert（）【console.log()】
2、对象.innerHTML = 新的HTML；改变HTML内容
3、对象.attribute = 新属性值；改变HTML属性
对象、style、property = 新样式；改变样式，需要通过id获取对象
PS：如果改变样式需要用到，如：font-size，需要写成fontSize
10.对象、style、property = 新样式；改变样式，需要通过id获取对象
PS：如果改变样式需要用到，如：font-size，需要写成fontSizeJavaScript内置对象
Array：用于在单独的变量名中存储一系列的值
String：用于支持对字符串的处理
Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
Date：用于操作日期和时间
var today=new Date(); //返回当前日期和时间var tdate=new Date(“september 1,2013,14:58:12”);
| getDate**()** | 返回 Date 对象的一个月中的每一天，其值介于1～31之间 |
|---|---|
| getDay**()** | 返回 Date 对象的星期中的每一天，其值介于0～6之间【0－表示周日】 |
| getHours**()** | 返回 Date 对象的小时数，其值介于0～23之间 |
| getMinutes**()** | 返回 Date 对象的分钟数，其值介于0～59之间 |
| getSeconds**()** | 返回 Date 对象的秒数，其值介于0～59之间 |
| getMonth() | 返回 Date **对象的月份，其值介于0～11之间 **【0表示1月分】 |
| getFullYear() | 返回 Date 对象的年份，其值为4位数 |
| getTime() | 返回自某一时刻（1970年1月1日）以来的毫秒数 |
使用Date对象的方法显示当前时间的小时、分钟和秒
<div id="myclock"></div>//html中的内容
function disptime(){//定义方法 显示时间见名知义display time
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
}
disptime();//调用方法
实现返回的整数范围为2~99？
var iNum=Math.floor(Math.random()*98+2);
function selColor(){
var color=Array("红色","黄色","蓝色","绿色","橙色","青色","紫色");
// var num=Math.ceil(Math.random()*7)-1;
var num=Math.floor(Math.random()*7);//下标为0-6的种子
document.getElementById("color").innerHTML=color[num];
| ceil() | 对数进行上舍入 | Math.ceil**(25.5);返回26****Math.ceil(-25.5);返回-25** |
|---|---|---|
| floor() | 对数进行下舍入 | Math.floor(25.5);返回25****Math.floor(-25.5);返回-26 |
| round() | 把数四舍五入为最接近的数 | Math.round(25.5);返回26****Math.round(-25.5);返回-26 |
| random() | 返回0~1之间的随机数 | Math.random**();****例如：**0.6273608814137365 |
11.、定时函数
多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout()
setTimeout()在等待指定时间后执行函数，且只执行一次；
setTimeout(“调用的函数”,等待的毫秒数）clearTimeout()清除由setTimeout()设置的定时；
setInterval()是每指导间也不是时间后执行一次函数，循 环执行，所以时钟例子使用setInterval();
setInterval(“调用的函数”,间隔的毫秒数)clearInterval()清除由setInterval()设置的定时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="date对象和清除时间的方法" />
<title>网页时钟特效显示当前时刻</title>
</head>
<body onload="showTime()">
<!-- 页面一打开就显示时间，所以放在body身上； -->
<div id="myclock"></div>
<button onclick="start()">开始</button>
<button onclick="end()">结束</button>
<script type="text/javascript">
// 获取当前时间
function showTime() {
var date = new date();
var hh = date.getHours();
var mm = date.getMinutes();
var ss = date.getSeconds();
document.getElementById("myclock").innerHTML = hh + ":" + mm + ":" + ss;
//给文本内容进行赋值;
}
//开始方法
function start() {
inteval = setInterval("showTime()", 1000);
}
//倒计时只做一次;间隔一段时间就执行一次[可以执行多次]
interval2 = setTimeout("showTime()", 1000);
interval = setInterval("showTime()", 1000); //在start()方法中是局部变量,此时做全局变量供中断的参数,此句话不可以省略;
//清除计时器方法
function stop() {
clearInterval(interval); //清除间隔时间带参;
}
</script>
</body>
</html>
function disptime(){//定义方法 显示时间见名知义display time
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
}
var myTime＝setInterval("disptime() ", 1000 );//间隔一秒显示一次；
var myTime2＝setTimeout("disptime() ", 1000 );//一秒后显示时间
<input name="s" type="button" value="显示提示消息" onclick="timer()" />
function timer(){
var t=setTimeout("alert('3 seconds')",3000);//三秒钟，倒计时
}
12.【节点属性】根据层次关系访问节点
| parentNode | 返回节点的父节点 |
|---|---|
| childNodes | 返回子节点集合，childNodes[i] |
| firstChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
| lastChild | 返回节点的最后一个子节点 |
| nextSibling | 下一个节点 |
| previousSibling | 上一个节点 |
sibling（）:同胞选择器，和自己节点类型相同，但是不包含自己
1、节点的层次关系
(1)任何一个节点，假设叫node（getElementById()返回的，或者getElementsByXXX()[i]返回的）
Var node = document.getElentById(“node”);
①node.parentNode;//是父节点
②node.childNodes;//是子节点数组
(2)若node是一个Element，还可以用Element的属性（一般不用）
2、操作一个节点
(1)操作节点的属性
①方式1 直接操作属性node.XXXX
比如 node.value、node.innerText、node.innerHTML、node.src。。。
②方式2 通过读和写方法node.getAttribute(“XXX”)和node.setAttribute(“XXX”,”值”);
比如 将一个叫node的输入框，值增加1
var tmp = window.parseInt(node.value);
node.value=node.value + 1;
还可以写成：
var tmp = window.parseInt(node.getAttribute(“value”));
node.setAttribute(“value”,tmp+1)
(2)创建和插入节点
①方式1 拼接字符串，然后通过innerHTML
②方式2 各种方法
1)createElement先创建
2)appendChild附加子节点
3)删除节点
①方式1 node.remove();
②方式2 node.parentNode.removeChild(node);
(4)操作节点的样式
①读取样式
1)node.style.XXX只能读取行内的样式
2)一切样式（包括默认的、行内的、内部的、外部的）如何读取？
a.IE及IE内核系列
node.currentStyle.XXX
b.FireFox
document.defaultView.getComputedStyle(node, null).XXX
②修改样式
1)方式1 直接用style属性
node.style.XXX = “值”;
比如 node.style.color = “red”;
node.style.fontSize=”24px”;//注意不是font-size
2)方式2 先封装好类样式，然后直接使用
node.className = “test”;
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$('li.third-item').siblings().css('background-color', 'red');//1245都变成红颜色3自己不变
</script>
</body>
</html>
| firstElementChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
|---|---|
| lastElementChild | 返回节点的最后一个子节点 |
| nextElementSibling | 下一个节点 |
| previousElementSibling | 上一个节点 |
oNext = oParent.nextElementSibling || oParent.nextSibling
oPre = oParent.previousElementSibling || oParent.previousSibling
oFirst = oParent. firstElementChild || oParent.firstChild
oLast = oParent.lastElementChild || oParent.lastChild
| 元素element | 1 |
|---|---|
| 属性attr | 2 |
| 文本text | 3 |
| 注释comments | 8 |
| 文档document | 9 |
| nodeName：节点名称 | nodeType：节点类型 |
【节点信息】nodeName：节点名称odeValue：节点值nodeType：节点类型
获得或设置节点的属性
getAttribute(“属性名”)
setAttribute(“属性名”,“属性值”)
创建和插入节点
| createElement( tagName) | 创建一个标签名为tagName的新元素节点 |
|---|---|
| A.appendChild( B) | 把B节点追加至A节点的末尾 |
| insertBefore( A,B ) | 把A节点插入到B节点之前 |
| cloneNode(deep) | 复制某个指定的节点 |
删除和替换节点
| removeChild( node) | 删除指定的节点 |
|---|---|
| replaceChild( newNode, oldNode)属性attr | 用其他的节点替换指定的节点 |
var delNode=document.getElementById("first");
delNode.parentNode.removeChild(delNode);/。/根据父类删除子类
var oldNode=document.getElementById("second");//新建节点并赋值，以及获得旧节点
var newNode=document.createElement("img");
newNode.setAttribute("src","images/f03.jpg");
oldNode.parentNode.replaceChild(newNode,oldNode);//根据父类的节点进行替换
QQ登录页面的失去焦点事件初步表单验证
通过span标签的accountMess和pwdMess信息，进行给你输入的值进行提示信息；如果不满足条件提示，如果满足了条件，就提示为“”，不显示出来；账号验证非空；密码验证非空，位数6-12位，及其他“”；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>QQ</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#con {
width: 400px;
height: 350px;
/*border: 1px solid red;*/
/*盒子居中,而不是内容居中*/
margin: 0px auto;
}
#con .top {
background-image: url(img/bg.gif);
background-repeat: no-repeat;
background-size: cover;
}
#con .top .left span {
color: white;
font-weight: bolder;
/*相对定位 参照物:自己的本来的位置*/
position: relative;
top: -8px;
}
#con .top .right img {
width: 25px;
height: 25px;
}
#con .top {
/*弹性布局*/
display: flex;
/*水平对齐方式*/
justify-content: space-between;
/*垂直对齐方式*/
align-items: flex-start;
height: 40%;
}
/*中开始*/
#con .middle {
background-color: red;
height: 50px;
text-align: center;
width: 50px;
margin: 0px auto;
position: relative;
top: -25px;
border-radius: 50%;
padding: 5px;
background-color: white;
box-shadow: 0 5px 8px #eee;
}
#con .middle img {
border-radius: 50%;
position: relative;
}
/*中结束*/
/*下开始*/
#con .bottom {
margin: 0px auto;
text-align: center;
font-size: 12px;
color: darkgray;
position: relative;
}
#con .bottom .count,
#con .bottom .pwd {
height: 35px;
width: 300px;
border: 0;
border-bottom: 1px solid gray;
padding-left: 20px;
}
#con .bottom a {
text-decoration: none;
color: darkgray;
}
#con .bottom .btnLogin {
width: 280px;
background-color: dodgerblue;
height: 30px;
border: dodgerblue;
margin-top: 5px;
border-radius: 5px;
color: white;
}
#con .bottom .aa {
width: 300px;
margin: 0px auto;
display: flex;
justify-content: space-around;
}
#con .bottom .aa .one {
position: relative;
left: -20px;
}
#con .bottom .aa .three {
position: relative;
right: -20px;
}
#con .bottom .register {
position: relative;
left: -155px;
bottom: 30px;
}
#con .bottom .code {
width: 35px;
height: 35px;
position: relative;
right: -150px;
bottom: 21px;
}
#con .bottom .pwdIcon {
height: 20px;
width: 20px;
/*绝对定位*/
position: absolute;
left: 40px;
top: 43px;
}
/*下结束*/
</style>
</head>
<body>
<div id="con">
<!--上开始-->
<div class="top">
<div class="left">
<img width="30" height="30" src="img/qq.png" alt="QQ图标" title="QQ" />
<span>QQ</span>
</div>
<div class="right">
<img src="img/设 置.png" />
<img src="img/最小化.png" alt="" />
<img src="img/关 闭.png" />
</div>
</div>
<!--上结束-->
<!--中开始-->
<div class="middle">
<img width="50" height="50" src="img/head.jpeg" />
</div>
<!--中结束-->
<!--下开始-->
<div class="bottom">
<form action="#" method="get">
<!--QQ账号-->
<input onblur="checkAccount()" id="account" placeholder="QQ号码/手机/邮箱" />
<!-- 失去焦点时会给人以提示-->
<br />
<span style="color:red" id="accountMess">
<!-- 文本框内容作为提示信息 -->
</span>
<!-- 使用选择器时id要对应；通过console看运行结果状况，通过source查找具体信息 -->
<br />
<!--密码-->
<input onblur="checkPwd()" id="pwd" type="password" /><br /><br />
<span style="color:red" id="pwdMess">
<!-- 文本框内容作为提示信息 -->
</span>
<div class="aa">
<div class="one"><input type="checkbox" name="" id="" value="" />自动登录</div>
<div class="two"> <input type="checkbox" name="" id="" value="" />记住密码</div>
<div class="three"><a href="#">找回密码</a></div>
</div>
<input type="submit" class="btnLogin" name="btnLogin" id="btnLogin" value="登录" />
</form>
<a class="register" href="#">注册账号</a>
<!--二维码-->
<img class="code" src="img/二维码.png" />
<img class="pwdIcon" src="img/密 码.png" />
</div>
<!--下结束-->
</div>
<script type="text/javascript">
//判断QQ账号是否为空
function checkAccount() {
// 输入完用户名,就会失去焦点,进行账户信息检查;
//通过id属性,获得用户名的文档对象进而获得该文档对象的值;如果值为空,就在用户信息去的内容赋值进行提示信息;
var accountcontent = document.getElementById("account").value;
if (accountcontent == "") {
document.getElementById("accountMess").innerHTML = "请输入账号";
return;
//return不可省略;
}
}
//检查密码的
function checkPwd() {
//输完信息,光标就会消失失去焦点,进行验证密码正确性;
//通过id获得属性的值,如果值为"",提示不能为空,如果值的长度不是6-12位,提示密码长度的合格长度位数;要么就是格式正确,给密码区的内容赋值为"",不对密码输入框进行提示;
var pwdContent = document.getElementById("pwd").value;
if (pwdContent == "") {
document.getElementById("pwdMess").innerHTML = "密码不能为空!";
return;
} else if (pwdContent.length < 6 || pwdContent.length > 12) {
document.getElementById("pwdMess").innerHTML = "密码长度为6~12位!";
return;
} else {
document.getElementById("pwdMess").innerHTML = "";
}
}
//检查姓名
// //类似的姓名输入框可以进行验证
//<span id="nameMess"> </span>
// if (isNaN(namecontent)) {
// document.getElementById("nameMess").innerHTML="姓名不能含有数字";
// }
</script>
}
</script>
</body>
</html>
事件在和style属性相结合实现的[【页面效果】
使用style改变页面内容样式，通常需要一些浏览器触发行为，例如单击某内容、鼠标经过某内容等；这些行为需要JavaScript中的事件；
| onclick | 当用户单击某个对象时调用事件 |
|---|---|
| onmouseover | 鼠标移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
| onmousedown | 鼠标按钮被按下 |
HTML元素.style.样式属性＝"值"
HTML元素.className=“样式名称”
onblur:失去焦点 onfocus获得焦点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输入框和自定义函数</title>
</head>
<body>
<!-- 自定义函数可以有无返回值和有无参数；警告输入框最常用，无返回值，有确认和取消两个按钮，一个参数；提示输入框，有两个 参数，用户可以输入值，如果不输入返回为空；确认框返回值是true或false，只有一个参数，本身不输出有两个按钮确认和取消，借助alert（）警告框；输出结果 -->
<button onclick="show()">点击</button>
<button onclick="showinfo2()">输入十次你好</button>
<!-- ???为什么这个方法不运行 showinfo()是系统方法，不可以起这个名字，否则不运行；-->
<button onclick="showinfo(prompt('请输入次数'))">输入规定的次数你好</button>
<!-- 输入的带参函数用提示框进行输入，引号和双引号交叉在js语法中出现； -->
<script type="text/javascript">
// 利用确认框和警告框看是否删除的结果
var result = confirm("确认删除吗？");
if (result) {
alert("删除成功");
} else {
alert("取消删除");
}
// 利用提示框输入信息和警告框弹出结果来显示信息
function show() {
var content = prompt("请选择你喜欢的颜色", "在这里输入");
alert(content);
}
// 输出方法
function showinfo2() {
for (let i = 1; i <= 10; i++) {
document.write("hello<br/>");
}
}
// 带参输出方法
function showinfo(count) {
for (let i = 1; i <= count; i++) {
document.write("hello<br/>");
}
}
</script>
</body>
</html>
HTML元素.style.样式属性;
【普通浏览器】document.defaultView.getComputedStyle(元素,null).属性;
【IE浏览器】HTML元素. currentStyle.样式属性;
document.getElementById(“titles”).style.color="#ff0000";
document.getElementById(“titles”).style.fontSize="25px ";
function out(){//鼠标移开 设置背景色边框不显示内容
document.getElementById("cart").style.backgroundColor="#f9f9f9";
document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";
document.getElementById("cartList").style.display="none";
}
function over(){//鼠标悬浮 改变背景色，显示块状元素内容，下边框因为手形不显示，显示边框，顶端突出1px间距
document.getElementById("cart").style.backgroundColor="#ffffff";
document.getElementById("cart").style.zIndex="100";//？
document.getElementById("cart").style.borderBottom="none";
document.getElementById("cartList").style.display="block";
document.getElementById("cartList").style.position="relative";
document.getElementById("cartList").style.top="-1px";
}
function over(){
document.getElementById("cart").className="cartOver";
document.getElementById("cartList").className="cartListOver";
}
function out(){
document.getElementById("cart").className="cartOut";
document.getElementById("cartList").className="cartListOut";
}
getComputedStyle获取样式，但是在IE中不支持；
var cartList=document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList,null).display);
ie中currentStyle用来兼容；
alert(document.getElementById("cartList").currentStyle.display);
获取元素的样式
alert(document.getElementById("cartList").display)
HTML中元素属性
| offsetLeft | 返回当前元素左边界到它上级元素的左边界的距离，只读属性 |
|---|---|
| offsetTop | 返回当前元素上边界到它上级元素的上边界的距离，只读属性 |
| offsetHeight | 返回元素的高度 |
| offsetWidth | 返回元素的宽度 |
| offsetParent | 返回元素的偏移容器，即对最近的动态定位的包含元素的引用 |
| scrollTop | 返回匹配元素的滚动条的垂直位置 |
| scrollLeft | 返回匹配元素的滚动条的水平位置 |
| 【clientWidth】 | 返回元素的【可见宽度】 |
| clientHeight】 | 返回元素的【可见高度】 |
随鼠标滚动的广告图var sTop=document.documentElement.scrollTop||document.body.scrollTop;
【标准浏览器】
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
或者【Chrome】
document.body.scrollTop;
document.body.scrollLeft;
上一篇： js一些基础知识1
下一篇： Mysql学习笔记_1