JavaScript个人学习笔记
一, JS基础
1. JS概念
(1) JS作用:
- HTML与用户没有交互的功能，网页只能看，不能操作。. JavaScript用来制作web页面交互效果，提升用户体验。
web前端三层来说：
结构层 HTML : 从语义的角度，描述页面结构
样式层 CSS : 从审美的角度，美化页面
行为层 JavaScript : 从交互的角度，提升用户体验 - HTML当做毛坯房, CSS当做装修, JS当做智能家居
(2) JS组成部分
- ECMAScript核心: js基本语法,数据类型,语句,函数(方法)…
- BOM:定义了一组和浏览器相关的方法和接口. 就是控制浏览器的
- DOM:定义了一组操作文档(HTML)的方法和接口. 操作HTML
2. JS和HTMl的整合方式
(1)方式一
- 内嵌式 : 通过script标签即可,可以放在html任意位置.
<!---->
<script>
alert("hello");
</script>
(2) 方式二
- 外联式 : 定义一个js文件,扩展名是js , 通过script标签引入
//js代码
alert("hello...");
<!--1. 把js代码定义在一个.js文件里面
2. 通过script引入; src属性; js文件路径
[注意] 如果通过该外联式引入的js,这时script里面的js代码不再执行.
如果定义另一个script会从上往下执行 -->
<script src=".js文件路径">
</script>
3. JS常用小功能
- alert( ) : 弹出警示框
- console.log( ) : 向控制台打印日志
- console.warn( ) : 控制台警示框
- console.error( ) : 控制台错误提示
- document.writte(); 文档打印. 向页面输出内容. 这个语句 主要就是给用户看的
4. JS基本语法
(1) 变量
- JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var’
var 变量名 = 值;
注意:
1.var可以省略不写,建议保留
2.最后一个分号可以省略,建议保留
3.同时定义多个变量可以用","隔开，公用一个‘var’关键字. var c = 45,d='qwe',f='68';
(2) 数据类型
[1] 五种原始原始数据类型
- number : 整数型, 浮点型
- boolean : 布尔型
- String : 字符,字符串
- Object : 对象类型 如 Date
- unefined : 未定义类型; 即变量没赋值的状态
[2] typeof操作符
- 作用： 用来判断变量是什么类型
- 写法：typeof(变量名) 或 typeof 变量名
- null与undefined的区别：
null: 对象类型，已经知道了数据类型，但对象为空。
undefined：未定义的类型，并不知道是什么数据类型。
[3] 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var i = 5; //整数
var f = 3.14; //浮点
var b = true; //布尔
var c = 'a'; //字符串
var str = "abc"; //字符串
var d = new Date(); //日期
var u; //未定义类型
var n = null; //空
document.write("整数：" + typeof(i) + "<br/>");
document.write("浮点 ：" + typeof(f) + "<br/>");
document.write("布尔：" + typeof(b) + "<br/>");
document.write("字符：" + typeof(c) + "<br/>");
document.write("字符串：" + typeof(str) + "<br/>");
document.write("日期：" + typeof(d) + "<br/>");
document.write("未定义的类型：" + typeof(u) + "<br/>");
document.write("null：" + typeof(n) + "<br/>");
</script>
</body>
</html>
[4] 字符串转换成数字类型
- 全局函数 : 可以在JS任意位置直接使用的函数,不用导入对象,不属于任何对象
- 转换函数:
- parseInt( ) : 将一个字符串转成整数,如果一个字符串包含非数字,name就从首数字开始取数字字符,一旦发现非数字字符,马上停止获取内容.如果转换失败,则返回NaN=Not a Number,不是一个数
- parseFloat( ) : 将一个字符串转成小数,原理同上.
- isNaN( ) : 转换前判断被转换的字符串是否是一个数字.返回值为boolean.
(3) 运算符
- 关系运算符 > , < , >= , <=
- number类型和字符串做 " * “, " - " ,” / "的时候,字符串自动的进行类型转换,前提是 字符串的内容要满足number类型
- 做除法时, 保留小数
var i = 2;
var j = 5;
alert(j/i);
- " == "比较数值, " === "比较数值和类型
var i = 2;
var j = "2";
alert(i==j); // ==比较的仅仅是数值, true
alert(i===j); // ===比较的是数值和类型.false
(4) 语句
- 基本跟Java一致
- 不同点 :
[1] 特殊:
if( ),while( )等语句,如果( )里面是 0, null, “”, undefined,( )里面是false.
获取方式如下 :
<script>
//0 "" null undefined ==> flase
if(0){
//如果 0 是true,
console.log("true"); //如果 0 是true,其它3个同样处理.
}else{
//如果 0 是false
console.log("false");
}
[2] 如果获得具体的数据类型
使用常规方法array拿到的是Object, 推荐使用方法如下:
//js数据类型的获取
var arry = ["a","b","c"]; //json格式
var obj = {"a":"AAA","b":"BBB","c":"CCC"}; //json格式
var i = 5;
var str = "测试";
var date = new Date();
var flag = true;
console.log("=========准确获取如下============");
console.log(getType(arry)); //[object Array]
console.log(Object.prototype.toString.call(arry));
console.log(getType(obj));
console.log(getType(i));
console.log(getType(str));
console.log(getType(date)); //[object Date]
console.log(getType(flag));
</script>
5. 在浏览器中调试
- IE,firefox,Google 按 " F12 " 或" ctrl + F12"进行调试
二,盘点数据校验涉及到的知识
1. 函数
- 有函数名的函数格式
语法:
function 函数名(参数列表){
函数体
}
注意:
1.不管有没有返回值,函数格式是一样的 function 函数名(参数列表){函数体}
2.如果有参数,参数不需要加var关键字(不需要加类型)
3. JS中函数是没有重载的,后面的会把前面给覆盖掉
- 匿名函数
//匿名函数(JQ中大量使用,也可以用常量接收,通常和事件绑定一起用)
var sum = function(a,b) {
return a+b;
}
console.log(sum(10,20));
2. 获取元素(标签)方法
- 通过id : document.getElementById(“id”) : 通过id属性找到唯一的元素,如果页面有多个同名id,则得到第1个元素, 一般不写同名id;
- 通过name属性 : document.getElementsByName(“name”) : 通过name属性得到一组标签,返回一个数组;
- 通过标签名称 : document.getElementsByTagName(“标签名”) : 通过标签名得到一组标签,返回一个数组. 如 : input;
- 通过类名 :document.getElementsByClassName(“类名”) : 通过类名得到一组标签,返回一个数组.
3. 点击事件
(1) 方式一 [常用]:
- 通过标签的事件属性绑定
(2)方式二 :
- 派发事件(注意:页面加载成功之后才可以派发)
元素对象.οnclick=function(){}; 元素对象可以通过:document.getElementById(“id值”)来获得;
三,JS事件 [ 重点 ]
1. 重点掌握事件
其它事件查询 w3cschool.
- onclick : 点击
- onsubmit : 表单提交
- onfocus : 获得焦点; onblur( ) : 失去焦点
- onload : 等页面加载完成 (可以不使用, 直接把script写在下面)
- onchange : 内容改变
2. 掌握的事件
(1) 和鼠标相关的的事件
- onmousedown : 某个鼠标按键被按下
- onmousemove : 鼠标移动
- onmouseout : 鼠标从某元素移开
- onmouseover : 鼠标被移到某元素上
- onmouseup : 某个鼠标按键被松开
(2)和键盘相关的事件
- onkeydown : 某个键盘的键被按下
- onkeypress : 某个键盘的键被按下或按住
- onkeyup : 某个键盘的键被松开
四, JS完成轮播图所涉及的知识点
1. 定时任务
- setInterval(code,time) 按照指定的周期（以毫秒计）来调用函数或计算表达式
参数说明: code即执行的代码;
方式一: 函数名 setInterval(show,3000);
方式二:函数字符串 setInterval(“show()”,3000);
time:时间,单位毫秒
eg: setInterval(“sayHello()”,3000);
setInterval(sayHello,3000); - 示例代码
<script>
//每隔1s向控制台打印hello...
//1. 创建定时任务
setInterval("sayHello()",1000);
//2. 创建打印hello...的函数
function sayHello() {
console.log("hello...");
}
</script>
2. 操作图片
- 改变src的值
- 步骤 :
- 获得标签
- 通过标签拿到src(路径)进行改变
//1. 获得img标签对象
var imgEle = document.getElementById("imgId");
//2. 改变src值
imgEle.src = "../img/banner_1.jpg"; //改变后的路径
五,BOM总结
1. 概述:
- Browser Object Model,为了便于对浏览器的操作，JavaScript封装了对浏览器中各个对象，使得开发者可以方便的操作浏览器中的各个对象
2. BOM的5个对象
2.1 window : 窗体对象
2.2 navigator : 浏览器对象
2.3 screen : 屏幕对象
2.4 history : 历史对象
2.5 location :当前路径信息
location.href; 获得路径
location.href = “http://www.baidu.com”; 设置路径,跳转到百度页面
六,盘点表单校验知识
1. JS正则表达式
(1) 概述:
正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。
说白了: 正则表达式用来校验字符串是否满足一定的规则的.
(2) 表达式的创建
[1] 方式一 :
var reg = new RegExp("正则表达式");
//说明：正则表达式在JS中是一个对象。Regular Expression
[2] 方式二 :
var reg = /正则表达式/;
//说明：以/开头，以/结尾，中间是正则表达式
[3] 两种方式区别 :
- 在js中，正则表达式的两种声明方式对于“\d、\D”之类的匹配模式中，前者需要转义，而后者无需转义
- 前者支持字符串拼接，支持变量，更加灵活；后者对于固定的表达式，书写起来方便快捷、更加直观。
(3) 匹配模式
- 默认情况下, 正则表达式不忽略大小写的. 可以通过 i 改成忽略大小写模式
(4) 正则表达式中常用的方法
- boolean test(“字符串”)
- 如果正则表达式匹配字符串,返回true,否则返回false
(5) 常见正则表达式规则
- 代码实现:
// 手机号码: 以1开头, 第二位是3,4,5,6,7,8,9的11位数字
//var reg =/^1[3456789]\d{9}$/i; //忽略大小写的
var reg =/^1[3456789]\d{9}$/; //不忽略大小写的
var str = "188245899";
alert(reg.test(str));
2. innerHTML : 向一块标签区域插入html
- 支持html标签;
- 会把之前的内容覆盖
<body>
<span id="spanId">世界</span>
<br/>
<input type="button" value="innerHTML" onclick="writteIn()"/>
</body>
<script>
//向span标签里面插入hello...
// 标签对象.innerHTMl = "html字符串";
//1. 支持标签的(解析标签)
//2. 会把之前的内容给覆盖
function writteIn() {
//1.获得span标签对象
var spanEle = document.getElementById("spanId");
//2. 调用innerHTMl属性
spanEle.innerHTML = "<font color='red'>hello...</font><img src='img/tu.png'/>";
}
</script>
- 思路分析:
- 给输入框设置onfocus事件 : onfocus = “函数名1( )”
- 创建函数1给出提示
- 给输入框设置失去焦点事件 : onblur = “函数名2( )”
- 创建函数2检验数据
- 函数2逻辑 :
- 获取输入框的值
- 使用正则表达式进行校验
- 不符合给出警告框
七,盘点JS控制复选框的全选和全不选知识
1. DOM
(1) 概念 :
- 文档对象模型（Document Object Model，简称DOM），可以让用户对网页中的元素(标签)进行操作.
说白了就是使用dom里面封装了API操作HTML的标签.
(2) JS里面的DOM编程
- 每个HTML页面在被浏览器解析的时候都会在内存中创建一棵DOM树，我们通过编写JS代码就可以访问这棵树上任何一个节点，并且对节点进行操作。通过 DOM模型，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。新创建的元素对象，要挂到DOM树上才可以在网页上显示出来。
整个文档是一个文档节点
每个 HTML 元素(标签)是元素(标签)节点
HTML 元素内的文本是文本节点
每个 属性是属性节点
注释是注释节点
- 一切皆节点,一切皆对象
(3) dom定义的方法
(4) 查找节点的方法
- document.getElementById(“id”) : 通过id属性找到唯一的元素,如果页面有多个同名id,则得到第1个元素, 一般不写同名id;
- document.getElementsByName(“name”) : 通过name属性得到一组标签,返回一个数组;
- document.getElementsByTagName(“标签名”) : 通过标签名得到一组标签,返回一个数组. 如 : input;
- document.getElementsByClassName(“类名”) : 通过类名得到一组标签,返回一个数组.
- 示例代码 :
<script>
//1. 根据id来获得标签节点(对象)
var inputEle = document.getElementById("inputId");
//2. 根据标签名获得标签节点数组
var inputEles = document.getElementsByTagName("input");
//console.log("input标签的数量="+inputEles.length);
for(var i = 0; i < inputEles.length;i++){
inputEles[i];
}
//3.根据类名来获得标签节点数组
var inputEles2 = document.getElementsByClassName("inputClass");
console.log(inputEles2.length);
</script>
(5) 创建和修改元素的方法
- document.createElement(“标签名”) : 在文档上创建一个元素对象
- 元素对象.setAttribute(“属性名”,“属性值”) : 给元素添加一个属性名和属性值如果属性名不存在则是添加属性,存在则修改属性值
- document.createTextNode(“文本内容”) : 在文档上创建一个文本节点
(6) 挂在dom树的方法
- 父元素.appendChild(子元素) : 将元素追加成父元素的最胡一个元素
- 父元素.removeChild(子元素) : 通过父元素删除一个子元素
- 元素.remove( ) : 元素删除本身
2. 思路分析
- 创建页面
- 给 全选 的复选框设置点击事件
- 创建 全选函数( ) 响应这个事件
- 全选函数( ) 逻辑:
- 获得其他复选框(除全选框) 元素数组
- 遍历元素数组,
- 获得全选框元素的选择状态,
- 将遍历到的数组元素状态变成全选框元素的选择状态
八,JS控制表格的隔行换色
1. 使用JS操作CSS样式
(1) 操作CSS属性名上的区别
(2) 操作CSS样式
- 方式一
标签对象.style.样式名 = “样式值”
注: 每条语句只能修改一个样式 - 方式二
元素对象.className = “样式类名”
注:每条语句修改一批样式
(3) 代码实现:
<script>
//1. 获得所有的行标签数组
var trELes = document.getElementsByTagName("tr");
//2. 遍历行标签数组,
for(var i = 0; i < trELes.length; i++){
//判断是奇数行还是偶数行,
if (i % 2 == 0){
// 给奇数行设置一个背景色,
trELes[i].style.backgroundColor = "#4F81BD";
}else{
// 给偶数行也设置一个另外背景色
trELes[i].style.backgroundColor = "#FFB6C1";
}
}
</script>
九,JS控制二级联动
1. JS内置对象之数组 [重点]
(1) 创建数组的格式
- new Array( ) : 说明0个长度的数组
- new Array(5) : 创建5个长度的数组
- new Array(2,4,10,6,41) : 指定每个元素创建数组
- [4,3,20,6] : 使用中括号指定每个元素
(2) Js数组特点
- 数组里面可以存放不同的类型的值(和Java不一样)
- 数组长度可变
- 数组中是有方法的
- concat( ) : 连接两个或更多数组,并返回结果
- reverse( ) : 将数组进行反转
- join(separtor) : 与split功能相反,将数组通过分隔符,拼接成一个字符串
代码实现:
<script>
/**
* 数组的特点:
* 1. 数组里面可以存放不同类型的数据
* 2. 数组没有越界概念的, 长度可变的
* 3. 数组是有方法的
*/
//定义了一个长度为5的数组, 并且赋值了
var array = [1,2,3,4,"哈哈哈"];
console.log(array.length); //5
// console.log(array[0]); //1
// console.log(array[4]); //哈哈哈
array[8] = 8888; // var array = [1,2,3,4,"哈哈哈",undefined,undefined,undefined,8888]
console.log(array.length);// 9
//console.log(array[8]);//在java里面数组越界, 在js里面undefined
/*for(var i = 0; i < array.length;i++){
console.log("array["+i+"]="+array[i]);
}*/
</script>
4.二维数组
<script>
//定义了一个长度为3的数组
var citys = new Array(3);
citys[0] = ["深圳","惠州","东莞","广州"];
citys[1] = ["武汉","黄冈","鄂州","黄石"];
citys[2] = ["济南","青岛","威海","日照","烟台"];
//遍历
for(var i = 0; i < citys.length;i++){
var cityArray = citys[i];
console.log("cityArray="+cityArray);
for(var j = 0; j < cityArray.length;j++){
console.log("city="+cityArray[j]);
}
}
var citys02 = [["深圳","惠州","东莞","广州"],["武汉","黄冈","鄂州","黄石"],["济南","青岛","威海","日照","烟台"]];
</script>
2. JS内置对象之date
(1) 日期对象的创建
var 变量名 =new Date(); // Date 对象会自动把当前日期和时间保存为其初始值。
(2) 日期对象常见的方法
- getFullYear() : 从Date对象以4位数字返回年份;
- getMonth() : 从Date对象返回月份(0~11)
- getDate() : 从Date对象返回一个月中的某一天(1~31)
- getDay() : 从Date对象返回一周中的某一天(0~6). 其中: 0表示周日 1~6表示周一到周六
- getHours() : 返回Date对象的小时(0~23)
- getMinutes() : 返回Date对象的分钟(0~59)
- getSeconds() : 返回Date对象的秒数(0~59)
- getMilliseconds() : 返回Date对象的毫秒(0~999)
- getTime() : 返回从1970年1月1日至今的毫秒数. 类似于Java中的System.currentTimeMills()
- tolocaleString() : 根据本地时间格式, 把Date对象转化成字符串
3. 思路分析
- 创建页面, 初始化数据
var cityArray = new Array(3);
cityArray[0] = ["深圳", "广州", "惠州", "东莞"];
cityArray[1] = ["武汉", "鄂州", "黄冈", "黄石", "荆州"];
cityArray[2] = ["济南", "青岛", "日照"];
- 给省份的select设置onchange事件
<select onchange="refreshCity()"></select>
- 创建refreshCity()函数
function refreshCity(){
//1. 获得省份的值
//2. 根据省份的值来获得当前省份下的城市数据 ["深圳", "广州", "惠州", "东莞"]
//3. 遍历城市数据 ["深圳", "广州", "惠州", "东莞"]
//4. 把每一个城市创建成 <option>深圳</option>
//5. 把创建好的option添加到城市的select里面
}
- 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
籍贯: <select id="provinceId" onchange="refreshCity(this)">
<option value="-1">-请选择-</option>
<option value="0">广东</option>
<option value="1">湖北</option>
<option value="2">山东</option>
</select>
<select id="cityId">
<option>-请选择-</option>
</select>
</body>
<script>
//初始化数据
var citys = new Array(3);
citys[0] = ["深圳","惠州","东莞","广州"];
citys[1] = ["武汉","黄冈","鄂州","黄石"];
citys[2] = ["济南","青岛","威海","日照","烟台"];
//创建refreshCity()的函数响应省份的slect内容改变事件
function refreshCity(obj) {
//0 获得城市的select
var citySelect = document.getElementById("cityId");
// 清空城市的select里面之前的option innerHTML;
citySelect.innerHTML = "<option>-请选择-</option>";
//1. 获得选择的省份的值
var pValue = obj.value;
//2. 根据省份的值 获得当前省份下面的城市的数据 ["深圳","惠州","东莞","广州"]
if (pValue > -1){ //eg: 如果选择的是广东, pValue = 0
var cityArray = citys[pValue];//["深圳","惠州","东莞","广州"]
//3. 遍历城市的数据(数组)
for(var i = 0; i < cityArray.length;i++){
//4. 把每一个城市, 创建成 <option>深圳</option>
var cityValue = cityArray[i]; //获得每一个城市的数据 eg: 深圳
//a . 创建option节点 <option></option>
var opEle = document.createElement("option");
//b 创建文本节点 深圳
var textNode = document.createTextNode(cityValue);
//c. 把文本节点添加到option节点 <option>深圳</option>
opEle.appendChild(textNode);
//5. 把创建好的option添加到城市的select里面
citySelect.appendChild(opEle);
}
}
}
</script>
</html>
十,电子时钟
1. 知识点
(1) 定时任务
setInterval(code, time);
(2) 日期对象
(3) innerHTML
2. 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="spanId"></span>
</body>
<script>
var SpanEle = document.getElementById("spanId");
//1.设置定时任务
setInterval("printSystemTime()",1000);
//
function printSystemTime(){
//1.获得当前时间
//2.把时间字符串插入到span里面
var mydate = new Date();
SpanEle.innerHTML=mydate.toLocaleString();
//SpanEle.innerHTML=mydate.toTimeString()
}
</script>
</html>
扫一扫
831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
