js的数据类型:
- 简单数据类型:number,string,undefined,null,boolean
- 复杂数据类型:object,array
简单数据类型是没有属性和方法的,但是浏览器允许简单类型直接调用方法,会自动简单类型转换成复杂类型;但其中undefined和null没有对应的复杂类型,所以在调用方法时会报错
1.浮点数:
var num = 1.2;
浮点数精度丢失问题:
console.log(0.1+0.3) // 精度丢失,小数进行o运算的时候,有可能算不准,所以不要用小数进行比较
undefined和null
-
undefined表示一个没有赋值的变量
-
null表示一个空的对象
转换成字符串
toString() //将来所有的数据都会有toString()方法,除了null和undefined
String() //拼串,使用起来最方便
转换成数字类型
1.Number()可以把任意值转换成数值类型,但是如果字符串中有不是数字的字符,返回NaN
2.parseInt() //转整数
var num1 = parseInt("12.3abc"); // 返回12,如果第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt("abc123"); // 返回NaN,如果第一个字符不是数字或者符号就返回NaN
3.parseFloat() //转小数
转换成布尔类型
所有的值都可以转换成布尔类型
Boolean()
其中,""
,NaN
,undefined
,null
,0
,false
这几个值会转换成false,其他值都会转换成true
NaN
NaN: not a number, 表示一个非数字
在js中,NaN用来表示一个非数字的特殊值,当发现无法进行运算时,js不会报错,而是会返回一个NaN
NaN的注意事项:
-
NaN的类型是number类型的,表示一个非数字
-
NaN不等于任何值,包括NaN本身
-
通过isNaN()可以判断是否是一个数字,返回false的时候,表示是一个数字。
三元运算符
表达式1 ? 表达式2 : 表达式3
1. 三元运算符会得到一个结果,结果根据表达式1的值来确定。
2. 如果表达式1的值为true,会返回表达式2的值
3. 如果表达式1的值为false,会返回表示3的值
for循环里的break和continue
break表示结束整个循环
continue表示结束本次循环,下一次继续循环
//冒泡排序
var arr=[65,97,76,13,27,49,58];
for(var j=0;j<arr.length-1;j++){
var flag=true;
for(var i=0;i<arr.length-1-j;i++){
if(arr[i]>arr[i+1]){
flag=false;
var temp=arr[i];
arr[i]=arr[i+1];
arr[i+1]=temp;
}
}
//优化比较的次数
if(flag){
break;
}
}
console.log(arr)
//数组去重
new Set() filter reduce
var arr=[2,3,4,77,55,2,4,56,56,77];
var temp=[];
var flag=false;
for(var i=0;i<arr.length;i++){
for(var j=0;j<temp.length;j++){
if(arr[i]==temp[j]){
flag=true;
break;
}
}
if(flag===false){
temp.push(arr[i])
}
}
console.log(temp)
//es6
ar arr=[2,3,4,77,55,2,4,56,56,77];
[...new Set(arr)];
函数:
函数的三要素:函数名,参数,返回值;
//求三个数的最大值
function maxfet(n1,n2,n3){
var max =n1>n2 ? n1:n2;
return max>n3?max:n3;
}
var max=maxfet(4,6,1);
console.log(max)
//用函数的方式求一个数组的最大最小值
function getmaxmin (numValue){
var max=numValue[0];
var min=numValue[0];
for(var i=0; i<numValue.length;i++){
if(max<numValue[i]){
max=numValue[i]
}
if(min>numValue[i]){
min=numValue[i]
}
}
return [max,min];
}
var max=getmaxmin([3,4,6,7,8])
console.log(max[0])
console.log(max[1])
//翻转一个任意数组,返回一个新的数组
function reverseArray(arr){
var newArr=[];
for(var i=arr.length-1;i>=0;i--){
newArr.push(arr[i])
}
return newArr
}
console.log(reverseArray([1,2,3,4,56]))
//函数的冒泡排序
function babule(arr){
for(var i=0;i<arr.length-1;i++){
var flag=true;
for(j=0;j<arr.length-i-1;j++){
if(arr[j]>arr[j+1]){
flag=false;
var temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
if(flag){
break;
}
}
}
return arr;
}
var newArr1=babule([1,3,5,7,9,2,4,6,8,10])
console.log(newArr1)
//分装一个函数,求阶乘的和 1!+2!+3!
//分装一个求5的阶乘的函数 1*2*3*4*5
var num=1;
function getProduct (n) {
for (var i=1;i<=n; i++) {
num =num*i;
}
return num;
};
//分装一个函数,求阶乘的和 1!+2!+3!
var pr=0;
function product (n) {
for (var i=1;i<=n;i++){
pr +=getProduct(i);
}
return pr;
}
var temp =product(3);
console.log(temp)
变量的作用域:变量起作用的区域;
全局作用域:在函数外面区域定义的变量叫全局变量;在任何地方都可以访问到
函数作用域:只有函数才能形成作用域,在函数内部的定义的变量就局部变量,局部变量只能在当前的函数内部可以访问到
没有用var声明的变量,叫隐式全局变量;
函数查找变量的时候,如果有局部变量,会优先使用局部变量,如果没有局部变量会使用全局变量;
var num =11;
function fn(){
var num =33;
num=44;
console.log(num)
}
console.log(num)
//打印结果
44,11
//原因:num=44会赋值给局部变量num=33;在函数外边打印num因获取不到局部变量,只能获取全局变量所以打印结果为11;
var num1 =11;
var num2 = 22;
function fn (){
var num1 = 33;
num1 = 44;
num2 = 55;
console.log(num1); //44
console.log(num2); //55
}
fn();
console.log(num1); //11
console.log(num2); //55
js的预解析:预解析在代码执行之前发生,会把所有的变量和函数的声明提前;只会提升声明,不会提升赋值
1.把所有的var声明提升到当前作用域的顶部,只会提升声明,不会提升赋值,如果有多个var重名,后面的var会忽略;
2.把所有的function声明提升到当前作用域的顶部,只会提升声明,不会提升调用,如果有多个同名的function,后面的会覆盖前面的;
function fn(){
console.log("哈哈");
}
fn();
function fn(){
console.log("呵呵");
}
fn()
//结果是“呵呵”
console.log(num)
var num =22;
console.log(num)
var num =33;
//结果是“undefind,22”
Math对象的random(随机数)
function getrandomColor(){
//随机3个0-255的随机数
var n1= parseInt(Math.random()*256);
var n2= parseInt(Math.random()*256);
var n3= parseInt(Math.random()*256);
var randomColor= "rgb(" +n1+","+n2+","+n3+")";
return randomColor
}
var color=getrandomColor();
document.body.style.backgroundColor=color
数组的方法:join();reverse();sort();
- push() //给数组的最后面增加一个或者多个元素
- pop() //最后面删除一个元素
- unshift() //在最前面增加一个元素
- shift() //在最前面删除y
- join() //吧数组的每一项按照分隔符拼接成一个字符串
- reverse() //翻转一个数组
- sort() //对数组进行排序
- concat() //合并多个数组
- slice() //数组的截取 ,slice(begin) //从begin开始截取,截取到最后;silce(begin,end) //从begin开始截取到end(但不包含end)
- splice(start,deletecount,add) //可以在数据的任意地方删除或者添加元素
- 参数1:开始删除的位置
- 参数2:删除几个元素
- 参数3:在删除的位置添加元素(如果不想删除,只想添加,让参数2等于0)
- 返回值:删除的元素组成的数组
- indexOf(); //获取到某个元素在数组中第一次出现的下标;其返回值:下标,如果找到了,就会返回对应的下标,如果没有这个元素,则会返回-1;
var arr=[1,2,3,4]
var str =arr.join("-");
arr.reverse()
arr.sort();
// splice
var arr=["张飞","张辽","张角","张宝","张毅"]
var newArr = arr.splice(2,1)
console.log(arr)
console.log(newArr)
var num =4;
var arr = [1,2,3,4,5,6,1,2,3,4,5];
if(arr.indexOf(num)==-1){
console.log("不包含")
}else{
console.log("包含")
}
var arr =["c","a","z","a","x","a","a","z","c","x","a","x"]
//1.找到数组中第一个a出现的位置
console.log(arr.indexOf("a"))
//2.找到数组中最后一个a出现的位置
console.log(arr.lastIndexOf("a"))
//3.找到数组中每一个a出现的位置
for(var i=0; i<arr.length;i++){
if(arr[i]=="a"){
console.log(i)
}
}
//4.数组去重,返回一个新数组
var obj=[];
for(var i=0;i<arr.length;i++){
if(obj.indexOf(arr[i])== -1){
obj.push(arr[i])
}
}
console.log(obj)
//5.获取数组中每个元素出现的次数
var obj={};
for(var i=0; i<arr.length;i++){
if(arr[i] in obj){
obj[arr[i]]++
}else{
obj[arr[i]]=1
}
}
console.log(obj)
//将"li-yan-he"转换成"LiYanHe"
var str="li-yan-he";
str=str.split("-")
var newstr=[];
for(var i=0;i<str.length;i++){
var str1=str[i][0].toUpperCase() + str[i].slice(1);
newstr.push(str1)
}
newstr=newstr.join("")
console.log(newstr)
String对象:(所有的字符串操作,原来的字符串都不会发生改变。都需要返回值)
- 字符串是可以遍历的 ,还可以通过下标来操作
-
indexOf() //查找字符第一次出现出现的位置,(从左往右查找)
-
lastIndexOf() //查找字符第一次出现出现的位置,(从右往左查找)
- trim() //可以把字符串两边的空格去掉
- toUpperCase() //将所有的字符变成大写
- toLowerCase() //将所有的字符变成小写
- concat() //字符串的拼接(基本不用)
- slice() //字符串截取
- substring() //跟slice()用法想同,不常用
- substr()//字符串截取
- split() // 把一个字符串切割成一个数组,与join()方法截然相反
- replace() //替换(只会查找第一个进行替换)
//indexOf和lastIndexOf
var str ="afgnasffdggghxvv";
console.log(str.indexOf("a"));
console.log(str.lastIndexOf("a"));
//trim
var str1=" aa bb sss "
var st=str1.trim()
console.log(st)
//toUpperCase和toLowerCase
var str2= "hello World"
console.log(str2.toUpperCase())
console.log(str2.toLowerCase())
//split
var str3="a-b-a-v";
var arr=str3.split("-")
console.log(arr) //abav
//replace
//bb换成ee
var str4 ="aa bb cc dd bb";
varnewStr =str4.replace(/bb/g,"ee")
webAPI:DOM
DOM:文档对象模型
1.事件的三要素:
- 事件源:触发事件的元素;
- 事件名称:click点击事件
- 事件处理程序:事件出发后要执行的代码(函数形式)
2.document.getElementById() //获取元素的ID
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .cls{ width: 200px; height: 300px; } </style> </head> <body> <button id="btn">按钮</button> <img src="img/30.png" id="imgIcon" /> <script> var btn = document.getElementById("btn"); var img = document.getElementById("imgIcon"); btn.onclick = function () { img.src="img/30_01.png"; img.className="cls" } </script> </body> </html>
3.标签中的class对应了对象中的className
4.通过innerText属性修改标签的内容
5.document.getElementsByTagName() //通过标签名获取元素
- 参数:是字符串类型的标签名
- 返回值:类数组,伪数组不是数组,所以他不能使用数组的方法,但是能够跟数组一样遍历,并且可以通过下标操作
var btn = document.getElementById("btn"); var ps = document.getElementsByTagName("p"); btn.onClick = function () { for (var i=0;i<ps.length;i++){ ps[i].innerText="嘿嘿" } }
通过arguments获取所有调用函数时传进来的参数
input表单元素
input里面的属性:disabled selected checked都是布尔类型
onfocus和onblur(获取焦点和失去焦点)
input全选案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
text-align: center;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>红烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>西红柿鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>红烧狮子头</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>日式肥牛</td>
<td>田老师</td>
</tr>
</tbody>
</table>
</div>
<script>
//功能1:点击全选的checkbox,控制所有的checkbox
//获取的全选input
var all = document.getElementById("j_cbAll");
//获取tbody
var tbody = document.getElementById("j_tb");
//获取tbody下所有的input
var inputs = tbody.getElementsByTagName("input");
//给all注册点击事件
all.onclick = function () {
for(var i=0; i<inputs.length;i++) {
inputs[i].checked = all.checked;
}
}
//功能2:点击下面的checkbox,控制全选的checkbox
//1. 给所有inputs注册点击事件
//2. 判断是否都选中了,如果都选中了,让all选中,否则让all不选中
for (var i=0; i<inputs.length; i++) {
inputs[i].onclick = function () {
var flag = true;
for( var j=0; j<inputs.length; j++) {
if(inputs[j].checked==false){
flag=false;
break;
}
}
if(flag==true){
all.checked = true;
}else{
all.checked = false;
}
}
}
</script>
</body>
</html>
attribute:属性(这三个方法。不管是股友属性还是自定义属性,只要写在标签上都可以获取)
- getAttribute(name) //获取属性
- setAttribute(name,value) //设置属性
- removeAttribute(name) //删除属性
innerText和innerHtml的区别:
innerText:不识别标签,对标签转义,当成文本(设置标签的内容,推荐使用innerText,防止xss攻击,保证标签不生效)
innerHTML:能够识别html标签,标签能生效
根据css选择器获取:
doucument.querySelector(); //只返回一个对象,如果要返回多个,会返回第一个
doucument.querySelectorAll(); // 会返回伪数组
获取所有的节点:
childNodes() //获取所有的子节点(包括文本节点,注释节点,标签)
children() //获取所有的孩子元素(不包含注释节点,文本节点)
获取兄弟节点:
previousSibling //获取前面的兄弟节点
previousElementSibling //获取前面的兄弟元素
nextSibling //获取后面的兄弟节点
nextElementSibling //获取后面的兄弟元素
父节点:
parentNode //获取父节点(没有兼容性)
克隆节点:
cloneNode //克隆节点(deep参数:false时表示浅复制,只复制标签不复制标签里面的内容,true:会复制所有内容)
创建节点:
createElement (参数是标签名;返回值:元素)
什么叫原型:
任何一个函数,都有一个属性,prototype,值是一个对象
把函数的prototype指向的这个对象就叫做原型。
原型内所有的属性和方法都可以被这个构造函数new出来的实例访问。
原型的作用: 存储一些所有实例需要共享的内容,比如方法。
2. __proto__: 属性
任何一个对象都有__proto__属性,通过这个属性可以访问到 构造函数的原型。
p.__proto__ == Person.prototype 正常情况
如果想要修改原型对象的内容,使用Person.prototype修改,不要用__proto__
3. constructor:属性
所有的原型对象,都有一个constructor属性,这个属性指向了构造函数
要求:能够画出原型的三角关系图 妈妈 爸爸 孩子
原型链: 每一个对象都会有自己的__proto__, 它的原型也会有自己的原型。最终到达了Object.prototype
属性搜索原则:
自己有,就用自己的,没有就找自己爸爸的,还有没,就找爷爷的,还没有,一直找到祖宗Object.prototype
如果自己有这个属性,直接用
如果没有,就访问p.__proto__这个对象
如果还没有,就访问p.__proto__.___proto__,知道Object.prototype
如果还没有,就undefined。