JavaScript
引入方式、注释
-
行内样式
<p id="" class="" style="" onclick="console.log(2);">text</p> -
内嵌式
<script type="text/javascript"> // js代码 </script> -
外接式
<script type="text/javascript" src="js/index.js"></script>
注释
//单行注释
/*多
行
注
释*/
console.log('hello world'); //打印输出语句
alert('hello world');//弹出框输出
console.log(window);
var name = prompt('请输入今天的天气？'); // 输入语句
console.log(name);
运算符
-
++i，i++var a = 4; // 先把a的值赋值给c，再a++ var c = a ++; console.log(c); // 4 console.log(a); // 5 // 先++a，再赋值给c var c = ++a; console.log(c); // 5 console.log(a); // 5 -
==和===var a = 2; var b = '2'; console.log(a == b); // 比较的是值，为true console.log(a === b); // 比较是值和数据类型，为false -
逻辑运算符
- && 与
- || 或
- ！ 非
-
三元运算符
(codition) ? run this code : run this code instead; var isResult = 1 > 2 '真的' : '假的' ;
流程控制
条件判断
if(条件){
do something
}else{
do something
}
switch (expression) {
case choice1:
run this code
break;
case choice2:
run this code instead
break;
default:
actually, just run this code
}
循环语句
for(初始化条件;结束条件;递增条件){
//run this code
}
- break终止循环
- continue 终止本次循环
var total = 0;
var i;
for(i = 1;i <= 10000; i++){
total = total+ i;
}
console.log(total);//50005000
while循环
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
三元运算符
var a = 1;
var b = 2;
var c = a > b ? a : b //如果a>b这个条件成立，就把冒号前面的值给c，否则把冒号后面的值给c
变量
声明变量使用关键字var，语法如下
var 变量名;
var x,y;//可以一次多个
var x = 5;//声明变量x并将5赋值给x
变量名可以任意取名，但要遵循命名规则：
- 变量必须使用字母、下划线(_)或者美元符($)开始。
- 可以使用任意多个英文字母、数字、下划线()或者美元符($)组成。
- 不能使用Javascript关键字和Javascript保留字来进行命名
- 变量名严格区别大小写，如A何a是两个不同的变量
关于用不用var声明变量的区别
全局上下文中
- 带var的变量是 声明一个全局变量，不能被
delete删除- 不带var的变量是 创建一个全局对象（window）的属性，可以用
delete关键字删除函数上下文中
- 带var的变量是 声明一个私有变量
- 不带var的变量，处理机制是
- 沿作用域链向上查找该变量，是哪个上下文中声明的变量，就改变哪个上下文中的变量
- 如果所有上下文中都没有该变量，则给全局对象 window，添加一个同名属性
基本数据类型
Number(数值)
String(字符串)
Boolean(布尔值)
undefined(未定义)
null(空对象)
Number(数值)
Javascript不区分整数和浮点数，统一用Number表示。
NaN（不是数字），Infinity（无限大）,isNaN：判断是否是NaN
var a = 2; // 整型
var b = '2'; // 字符串
var c = true; // 布尔
var d; // 未定义的
var e = null; // 空对象
// 先声明后定义
var f;
console.log(f); // 值 是undefined
console.log(typeof f); // 类型 是undefined
parseInt("123") // 返回123
parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456") // 返回123.456
var str = '1122.78fe'
console.log(parseInt(str)); //可以识别 1122
console.log(parseFloat(str)); //可以识别 1122.78
console.log(Number(str)); // 结果 NaN 无法识别
String(字符串)
-
length 属性:查看字符串的长度
var a = 'hello'; a.length; // 5 -
trim() : 移除两边空白
var a = ' hello '; a.trim(); // "hello"- trimLeft() 去除左边空白
- trimRight() 去除右边空白
-
charAt(n) : 从0开始返回索引为n的那个字符
var a='hello'; a.charAt(2); // e -
concat() : 字符串的拼接
var a = 'hello'; var b = 'world'; a.concat(b) //"helloworld" -
indexOf() : 通过元素找索引
var a='interesting'; a.indexOf('t'); // 2 : 只找到第一个就不再继续找 start参数 : 索引的起始位置 var a='interesting'; a.indexOf('n',2); // 从第二个位置往后找,得到结果是 : 9 如果找不到就返回 -1: a.indexOf('t',8); // 第八个位置之后没有t元素了,得到结果 : -1 -
slice() : 切片(前取后不取)
var a='happy'; a.slice(1,-1); // app a.slice(1,4); // app -
toLowerCase() 全部变小写 , toUpperCase() 全部变大写
var a='happy'; a.toUpperCase(); // HAPPY -
split() : 字符串分割,第二个参数是返回多少个数据
var a='happy'; a.split('a'); // ["h", "ppy"] a.split('a',1); // ["h"] :返回一个数
Boolean(布尔值)
在JS里面布尔值首字母为小写
var a=true;
var b=flase;
""(空字符串)、0、null、undefined、NaN都是false。
null和undefined
- null表示值是空,一般在需要指定或清空一个变量时才会使用,如:name=null;
- undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined,还有就是函数无明确的返回值时,返回的也是undefined
- null表示变量的值是空,undefined则表示只声明了变量,但还没有赋值
引用数据类型
数组：Array
var arr = ['张三','李四']; //数组
数组常用方法和属性
-
索引取值
var a = [123, "ABC"]; console.log(a[1]); // 输出"ABC" -
length属性 :
var a = [123, "ABC"]; a.length; // 2 -
push() : 尾部追加 pop() : 尾部删除
var a = [11,22,33] a.push('123'); // [11, 22, 33, "123"] a.pop(); //"123" a -- [11, 22, 33] -
unshift() : 头部追加 shift() : 头部删除
var a = [11,22,33] a // [11, 22, 33] a.unshift('aa'); a // ["aa", 11, 22, 33] a.shift(); // "aa" a // [11, 22, 33] -
sort() : 排序
var a = [11,4,84,73]; a.sort(); // [11, 4, 73, 84] 首字符会按照ASCII的大小排序 -
splice() : 删除元素
var a=[11,22,33,44]; a.splice(1,2,'aa','bb'); // 从索引为1的位置往后删两个,并将内容替换 a; // 得到结果 : [11, "aa", "bb", 44] // 参数: 1.根据索引从哪删,2.删几个,3.删除位置替换的新元素(可多个元素) -
reverse() : 在原数组上的反转
var a=[11,22,33,44]; a.reverse(); // [44, 33, 22, 11] -
join() : 将数组元素连接成字符串
var a=['aa','bb']; a.join('+'); // 'aa+bb' 通过+号将数组里面的元素拼接 -
concat() : 连接组合并,得到一个新数组，原数组不变(类似于python列表的extend)
var a=["aa", "bb"] var b=[11,22]; a.concat(b); // ["aa", "bb", 11, 22]
对象：Object
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 Number、String、Date、Array 等等，通过new实例化的对象都是object类型(var s = new String('hello')，var n = new Number(12)等)，数组不需要new声明，类型就是object类型。
对象只是带有属性和方法的特殊数据类型。
// 定义在对象中的函数，叫做对象的方法
var obj = {
name:'yhp',
age:19,
fav:function () {
console.log(this);
}
};
obj.fav();
函数：function
// js中,有全局作用域和函数作用域
// 1.普通函数的声明
function add(a,b){
return a + b //返回多个值，可以用数组包裹起来 return [a,b]
}
// 2.函数表达式
var add2 = function(){
};
// 3.自执行函数
;(function(){
alert(1111);
})();
Date对象
var d1 = new Date(); //获取当前时间
console.log(d1.toLocaleString()); //当前时间日期的字符串表示
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12"); // 月/日/年(可以写成04/03/2020)
console.log(d3.toLocaleString());
//方法3：参数为毫秒数，了解一下就行
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString()); //毫秒并不直接显
date对象的其他方法
var d = new Date();
d.getDate() 获取日
d.getDay () 获取星期 ，数字表示（0-6），周日数字是0
d.getMonth () 获取月（0-11,0表示1月,依次类推）
d.getFullYear () 获取完整年份
d.getHours () 获取小时
d.getMinutes () 获取分钟
d.getSeconds () 获取秒
d.getMilliseconds () 获取毫秒
d.getTime () 返回累计毫秒数(从1970/1/1午夜),时间戳
JSON
var str1 = '{"name": "yhp", "age": 18}';
var obj1 = {"name": "yhp", "age": 18};
// JSON字符串转换成对象 反序列化
var obj = JSON.parse(str1);
// 对象转换成JSON字符串 序列化
var str = JSON.stringify(obj1);
Math计算模块
Math.abs(x) 返回数的绝对值。
Math.exp(x) 返回 e 的指数。
Math.floor(x) 小数部分进行直接舍去。
Math.log(x) 返回数的自然对数（底为e）。
Math.max(x,y) 返回 x 和 y 中的最高值。
Math.min(x,y) 返回 x 和 y 中的最低值。
Math.pow(x,y) 返回 x 的 y 次幂。
Math.random() 返回 0 ~ 1 之间的随机数。
Math.round(x) 把数四舍五入为最接近的整数。
Math.sin(x) 返回数的正弦。
Math.sqrt(x) 返回数的平方根。
Math.tan(x) 返回角的正切。
BOM
Browser Object Model,浏览器对象模型,能使JS有能力和浏览器进行交互
1.系统对话框方法
- alert()
- confirm()
- prompt()
2.location
window对象的子对象
location.href; // 获取当前的URL
location.href="URL" // 跳转到指定页面
示例:location.href = 'http://www.baidu.com';直接跳转到百度
location.reload(); // 重新加载页面,就是刷新一下页面
3.定时器
计时器是异步的
setTimeout
一次性任务
var t=setTimeout("JS语句",毫秒) 第一个参数js语句多数是写一个函数，不然一般的js语句到这里就直接执行了，
先用函数封装一下，返回值t其实就是一个id值（浏览器给你自动分配的）
-
setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
-
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
-
第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。
setTimeout('confirm("你好");',3000); // 3秒之后执行前面的js代码 setTimeout(confirm('xxx'),3000); // 如果写的不是字符串,会直接执行 setTimeout(function(){confirm('xxx')},3000); // 最好写成函数 var a = setTimeout(function(){console.log('xxx')},3000); // a是浏览器来记录计时器的一个随机数字 clearTimeout(a) // 清除计时器,通过这个数字可以清除
setInterval
周期性任务
- setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
- setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
var a = setInterval(function(){console.log('xxx')},3000);
clearInterval(a);
DOM
文档对象模型
-
HTML DOM 模型被构造为对象的树。
-
是一套对文档的内容进行抽象和概念化的方法。
-
DOM标准规定HTML文档中的每个成分都是一个节点(node)：
- 文档节点(document对象)：代表整个文档
- 元素节点(element 对象)：代表一个元素（标签）
- 文本节点(text对象)：代表元素（标签）中的文本
- 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
- 注释是注释节点(comment对象)
-
JavaScript 可以通过DOM创建动态的 HTML：
- JavaScript 能够改变页面中的所有 HTML 元素 / HTML 属性 / CSS 样式
标签查找
直接查找
-
document.getElementById(id值);根据ID获取一个标签 -
document.getElementsByClassName(类值);根据class属性获取（可以获取多个元素，所以返回的是一个数组） -
document.getElementsByTagName(标签名);根据标签名获取标签合集(得到的是数组,可以通过索引拿到值)
间接查找
var a = document.getElementById('d1');
a.parentElement; 获取a这个标签的父级标签
a.children; 所有子标签 得到的一个数组,可以通过索引取值
a.firstElementChild; 第一个子标签元素
a.lastElementChild; 最后一个子标签元素
a.nextElementSibling; 下一个兄弟标签元素
a.previousElementSibling; 上一个兄弟标签元素
节点操作
/*创建节点(创建标签) */
var a = document.createElement('标签名称');
示例创建a标签
var a = document.createElement('a');
var dd = document.getElementById('dd'); // 找到div标签
/*添加节点*/
// 添加节点,添加到了最后
dd.appendChild(a); // 将创建的a标签添加到dd这个div标签里面的最后.
// 某个节点前面添加节点
父级标签.insertBefore(新标签,某个儿子标签)
示例:
var dd = document.getElementById('dd'); // 找到父级标签
var a = document.createElement('a'); // 创建一个新的a标签
var d2 = dd.children[1]; // 找到父级标签下的某个儿子标签
dd.insertBefore(a,d2); // 将a标签插入到上面这个儿子标签的前面.
/*删除节点*/
dd.removeChild(d2); 父级标签中删除子标签
/*替换节点*/
var dd = document.getElementById('dd'); // 找到父级标签
var a = document.createElement('a'); // 创建a标签
a.innerText = '百度';
var d1 = dd.children[0]; // 找到要被替换的子标签
dd.replaceChild(a,d1); // 替换
文本操作
var divEle = document.getElementById("d1")
divEle.innerText; // 输入这个指令，一执行就能获取该标签和内部所有标签的文本内容
divEle.innerHTML; // 获取的是该标签内的所有内容，包括文本和标签
d1.innerText; 查看
设置一个文本:
d1.innerText = "<a href=''>百度</a>";
d1.innerHTML = "<a href=''>百度</a>"; 能够识别标签
属性操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18") // 比较规范的写法 给某一标签增加属性
divEle.getAttribute("age") // 查看属性
divEle.removeAttribute("age") // 删除属性
// 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的
标签对象.属性; // 设置属性
标签对象.属性="..." // 修改属性
获取值操作
适用于用户输入或者选择类型的标签如:input / select / textarea
var inp = document.getElementById('username');
inp.value; // 查看值
inp.value = 'jjj'; // 设置值
选择框:
<select name="city" id="city">
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">深圳</option>
</select>
var inp = document.getElementById('city');
inp.value; // 查看值
inp.value = '1'; 设置值
class的操作
var d = document.getElementById('dd');
d.classList; // 获得这个标签的class属性的所有的值
d.classList.add('xx2'); // 添加class值
d.classList.remove('xx2'); // 删除class值
d.classList.contains('xx2'); // 判断是否有某个class值,有返回true,没有返回false
d.classList.toggle('xx2'); // 有就删除,没有就增加
CSS样式操作
-
对于没有中横线的CSS属性一般直接使用style.属性名即可
-
对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。
var d = document.getElementById('d'); d.style.backgroundColor = 'deeppink'; d.style.height = '1000px'
事件
onclick
当用户点击某个对象时调用的事件句柄。
绑定事件的方式有两种
-
方式一:
<div id="d1" onclick="f1();"></div> <script> // 可写在body标签里也可写在head标签里 function f1() { var d = document.getElementById('d1'); d.style.backgroundColor = 'yellow'; } </script> -
方式二: (常用这种方式)
<div id="d1"></div> <script> // 只能写在body标签里面 var a=document.getElementById('d1'); a.onclick=function () { a.style.backgroundColor='red'; } </script>
常用事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
