一、数组
由于 JavaScript 是弱类型语言,所以在数组的赋值中不做类型区分,各种类型的变量都可以放到同一个数组中,定义方法有以下几种,并且可以用 .length 来获取数组长度:
var arr1 = [99,98,"hello","world",true];
var arr2 = new Array(11,22,"张三",false,0,33);
var arr3 = new Array(10); //创建了一个10长度的数组
console.log(arr1.length); //打印数组 arr1 长度
给原有的元素赋值不会改变数组长度,但给数组中没有的位置赋值会改变数组长度,如:
var arr4 = new Array(10);
arr4[12]=22;
console.log(arr3[12]);
console.log(arr4.length);
arr4的长度就变成了13。
二、数组常用的方法
首先定义一个数组
var arr=new Array("a","b","c","d","e");
-
push(元素)向数组尾部追加元素
arr.push("f"); arr.push("g"); console.log(arr);
-
pop()删除数组的最后一个元素,并返回该元素
var n = arr.pop(); console.log(n); console.log(arr);
-
unshift() 向数组首部添加元素;
arr.unshift("firsh"); console.log(arr);
-
删除数组首部元素,并返回
var n = arr.shift(); console.log(n); console.log(arr);
-
concat() 拼接 返回数组
var arr1=["f","g"]; console.log(arr.concat(arr1));
-
indexOf() 返回元素的下标,从0开始,若数组中不存在该字符则返回-1
console.log(arr.indexOf("c")); console.log(arr.indexOf("q"));
-
join() 元素拼接,用括号中的字符将数组中所有元素依次拼接在一起,并返回字符串
var a=arr.join("#"); console.log(a); console.log(typeof a);
-
splice(下标,个数); 删除,返回删除的数组
var n = arr.splice(1,2); console.log(n); console.log(arr);
-
slice(开始下标,结束下标); 左闭右开,返回原数组截取的内容成为新的数组
slice(1) 从起始位置到最后console.log(arr.slice(1,4)); console.log(arr.slice(1));
-
toString() 将数组变为字符串,有逗号
console.log(arr.toString());
-
sort() 排序,升序排列,按照ASCII码排列
var arr1=["e","a","t","b"]; arr1.sort(); console.log(arr1);
-
reverse() 翻转
arr.reverse(); console.log(arr);
-
includes() 数组中是否包含该元素,包含返回true,不包含false
console.log(arr.includes("a"));
-
forEach 循环
forEach(function(currentValue,index,arr)){ }
currentValue 必须,每次循环的当前元素;
index可选,代表当前元素的索引;
arr可选,代表元素所属的数组对象;var arr=["a","b","c","d"]; arr.forEach(function(el,index){ //el只是指代,随便取 console.log(el+"====="+index); });
三、类和对象
类:具有相同属性和行为(方法)的集合,类是一个逻辑模板。
属性:描述事物特征。
方法:实现某种特定功能。
对象:万物皆对象,对象就是类的具体表现,类是对象抽象出来的。
创建对象的方式有三种:
- 构造函数方式
- 工厂模式
- 字面量形式创建
-
构造函数方式
如定义一个车类,类的首字母大写(参数列表)(logo,price,color)
参数列表:logo,price,color 形式参数,“丰田”,“300000”,“黑色” 实际参数function Car(logo,price,color){ //创建一个类 // this关键字表示当前对象 // 等号左边的logo代表对象中的logo属性 // 等号右边是传来的参数 this.logo = logo; this.price = price; this.color = color; // 定义方法 run方法名(多为动词); this.run = function(){ console.log("car run!!!"); } }
实例化对象,创建一辆车:
// var声明 car是对象名(自定) new创建 Car(实参)说明了创建的类型和属性 var car = new Car("丰田","300000","黑色"); // 获取对象中的属性 // 1.对象名.属性 console.log(car.color); // 2.对象名['属性'] console.log(car['price']); // 给属性赋值 car.color = "红色"; console.log(car.color); // 调用方法 对象名.方法名 car.run(); console.log(car);
想要增加一个返回值用return,用法与java中相同,如创建一个两数相加方法:function add(num1,num2){ var result = num1+num2; // 把得到的结果返回 return result; }
-
工厂模式
定义一个创建对象的接口,让其子类自己决定实例化哪一个工厂类,工厂模式使其创建过程延迟到子类进行。function creatCar(logo,price,color){ var car=new Object(); car.logo=logo; car.price=price; car.color=color; car.show=function(){ console.log("汽车驾驶"); } return car; } // 调用工厂方法,返回对象 var car=creatCar("本田","200000","red"); console.log(car);
后续在javaSE中会详细记录。 -
字面量形式创建
定义方法为:var 对象名={属性:值,属性:值,属性:值,…}var book={ bookId:"book001", bookName:"西游记", bookPrice:58, show:function(){ console.log("展示图书内容"); } } console.log(book.bookName); console.log(book['bookPrice']); book.show();
也可以动态的进行属性的添加和删除// 添加 book.bookAuthor="吴承恩"; console.log(book.bookAuthor); // 删除 delete book.bookId; console.log(book);
还可以复杂的字面量形式创建:var phone={ name:"华为", type:"mate30", price:4999, screen:{ logo:"三星", price:1200, width:5, height:5 } } console.log(phone); console.log(phone.name); console.log(phone.screen.logo);
也可以把多个对象放到数组中var phone1={ name:"华为", type:"mate30", price:4999, color:"黑色", } var phone2={ name:"华为", type:"mate30", price:4999, color:"黑色", } var phone3={ name:"华为", type:"mate30", price:4999, color:"黑色", } var arr=[phone1,phone2,phone3] //都放到 arr 数组中
四、String常用方法和属性
首先创建一个string变量
var str="Hello World";
-
length返回字符串长度,包括空格
console.log(str.length);
-
indexOf返回字符第一个所在位置,从0开始,没有的话返回 -1
console.log(str.indexOf("e")); console.log(str.indexOf("h"));
-
charAt() 返回指定位置的字符
console.log(str.charAt(7));
-
concat() 拼接字符串
console.log(str.concat(" abc"));
-
replace() 字符替换,可以替换多个连续的字符串,没有的话不替换
console.log(str.replace("he","1"));
-
substr(截取位置,截取个数),若没加个数,则直接截取到最后,左闭右闭,截取个数取负数则是倒着取,也可以从右往左截取
console.log(str.substr(1,4)); console.log(str.substr(4)); console.log(str.substr(-2)); console.log(str.substr(-5,3));
-
substring(开始的位置,结束的位置) 截取一段,左闭右开
console.log(str.substring(1,4)); //[1,4)
-
slice(开始的位置,结束的位置) 也是截取一段,左闭右开
console.log(str.slice(1,4)); //[1,4)
-
大小写转换,toUpperCase()转换成大写,toLowerCase()转换成小写
console.log(str.toUpperCase()); console.log(str.toLowerCase());
-
trim() 去掉首尾的空格
console.log(" ab c ".trim());
-
startsWith() 判断是否以()中的字符开始,返回值true或false
console.log(" ab c ".startsWith(" "));
-
String.fromCharCode() 将对应的 ASCII 码赋值给变量.
m=String.fromCharCode(65,66,67,68,69); n=String.fromCharCode(97,98,99,100,101); console.log(m,n);
五、Math类的常用方法
-
常量
console.log(Math.PI); //圆周率 console.log(Math.E); //自然对数
-
随机数,左闭右开
console.log(Math.random()); //[0,1)
-
向下舍
console.log(Math.floor(2.9));
-
向上舍
console.log(Math.ceil(2.3));
-
四舍五入
console.log(Math.round(4.3)); console.log(Math.round(4.6));
-
取绝对值
console.log(Math.abs(-6));
-
取一组数字的最大最小值
console.log(Math.min(1,2,3,4,5,6)); console.log(Math.max(1,2,3,4,5,6));
六、Date类型
Date是时间类型,可通过下面方式直接获取系统时间,但此方式获取的是英文形式
var date = new Date();
console.log(date);
也可以单独获取年、月、日、星期、时、分、秒、毫秒
// 获取年
console.log(date.getFullYear());
// 获取月,从0开始,0-11
console.log(date.getMonth());
// 获取日
console.log(date.getDate());
// 获取星期 0-6,0代表星期日
console.log(date.getDay());
// 时
console.log(date.getHours());
// 分
console.log(date.getMinutes());
// 秒
console.log(date.getSeconds());
// 毫秒
console.log(date.getMilliseconds());
toLocaleString() 直接获取中文形式的时间
console.log(date.toLocaleString());
七、Dom对象
Dom(document object model):文档对象模型,之前的数据都是显示在控制台上,而Dom对象的应用主要就是在页面上对各种显示进行操控。
-
getElementById() 通过控件id获取对象
首先创建一个文本框:<input type="text" id="tid" value="admin" size="10" class="red"/><!-- html中写 -->
用 getElementById() 获取控件进行读取和操作属性值
var txt=document.getElementById("tid"); //javascript中写 console.log(txt);// 打印获取到的控件 console.log(txt.value); //打印控件的属性 console.log(txt.type); // 操作属性值 txt.value="test"; txt.readOnly=true;
可以看到获取的属性值和改变之后的属性值。
-
getElementsByName(); 通过name属性获取对象,获取到的是数组
首先创建几个多选按钮<input type="checkbox" name="hobby" id="hobby1" value="1" />足球<!-- html中写 --> <input type="checkbox" name="hobby" id="hobby2" value="2" />篮球 <input type="checkbox" name="hobby" id="hobby3" value="3" />排球 <input type="checkbox" name="hobby" id="hobby4" value="4" />台球
用 getElementsByName(); 获取控件进行读取和操作属性值,读取到 name=“hobby” 的标签,并把这些标签放到一个数组中。
var arrHobby=document.getElementsByName("hobby"); //javascript中写 console.log(arrHobby); // 获取所有复选框中的value值 for(var i=0;i<arrHobby.length;i++){ // 每次循环或得到的是name对象 // 再通过.value获取到每一个值 console.log(arrHobby[i].value); }
-
getElementsByTagName(); 通过标签名字获取对象,获取到的是数组
在前两点的 input 标签都创建完的基础上var arrInput=document.getElementsByTagName("input"); //javascript中写 console.log(arrInput); console.log(arrInput[3].value);
可以看到把第一点和第二点共5个 input 标签都获取到了并放在了一个数组中,打印坐标为3的 value 值。 -
getElementsByClassName(); 通过类名获取,class属性,获取到的是数组
首先创建一个文本框和一个文字标签,两者都写一个 class=“red” 属性<input type="text" id="tid" value="admin" size="10" class="red"/><!-- html中写 --> <p class="red">段落标签</p>
var arrRed=document.getElementsByClassName("red"); //javascript中写 for(var i=0;i<arrRed.length;i++){ console.log(arrRed[i].value); }
用 getElementsByClassName(); 获取控件进行读取和操作属性值,读取到 class=“red” 的标签,并把这些标签放到一个数组中。
可以看到打印了第一个 class=“red” 标签的value属性值,而第二个 class=“red” 标签由于没有设置value属性值,所以输出undefined。 -
innerText 与 innerHTML
两者都是获取每个标签之间的内容,但 innerHTML 会获取到对象标签中所有的内置元素(可以获取到标签元素等),但 innerText 只获取对象标签中的文本内容(过滤掉标签,获取纯文本)。举例说明:首先创建两个p标签,并获取到所有的p标签对象<p><font color="red">段落1</font></p> <!-- html中写 -->
var arrP=document.getElementsByTagName("p"); //javascript中写 console.log(arrP[0].innerHTML); console.log(arrP[0].innerText);
可以看到 innerHTML 中把 font 标签也获取到了,而 innerText 只获取到了纯文本。也可以通过这种方式这种里面的内容:// 将段落4的文字变为蓝色,注意属性值双引号要改为单引号 arrP[0].innerHTML="<font color='blue'>段落1</font>" //javascript中写 arrP[1].innerText="<font color='blue'>段落2</font>"
可以看到当使用 innerText 改写网页中显示效果,值无论写什么都会原模原样的显示在要改动的标签中,而当使用 innerHTML 改写网页中效果时,会解析标签语言再显示在网页中。 -
点击按钮实现函数功能
创建一个按钮,之后再javascript中写一个对应的函数,即可实现点击按钮实现相应功能<input type="checkbox" id="checkbox-1" onclick="changeDisabled()"/>点击后按钮有效<!-- html中写 -->
function changeDisabled(){ //javascript中写 var btn_1=document.getElementById("btn-1"); var checkbox_1=document.getElementById("checkbox-1"); btn_1.disabled = !checkbox_1.checked; }
οnclick=“changeDisabled()” 实现了点击后跳转到对应函数,函数内容不做解释,这里只表示跳转方式,往后所有的点击都可以用这种方式,在函数中获取dom对象标签,在做自己想要的操作。
-
setAttribute(“属性名”,属性值); dom对象自定义属性
首先创建一个超链接标签,并获取a标签对象:<a href="index.html">打开登录成功页面</a><br><!-- html中写 -->
var a = document.getElementsByTagName("a")[0];//javascript中写
设置原生属性:
a.setAttribute("href","http://www.baidu.com");//javascript中写 console.log(a.href);
设置自定义属性:a标签没有index属性,自己定义并赋值,自定义属性不能直接用a.获得
a.setAttribute("index","text");//javascript中写 console.log(a.getAttribute("index"));
-
dom操作css样式
首先新建一个空的div,不给它任何属性,并且所有属性都在javascript中用dom写。<div>div区域</div><!-- html中写 -->
var div1 = document.getElementsByTagName("div")[0]; //javascript中写 div1.style.background = "red"; div1.style.width ="100px"; div1.style.height = "100px";
可以看到效果都体现了出来。 -
createElement(); 创建节点
appendChild(); 追加子元素 子节点如下面程序,每点击一次按钮出现一个文本框
<div> <p> <input type="button" value="添加电话号" onclick="add()"/> </p> </div> <script type="text/javascript"> function add(){ // 创建文本框 var txt = document.createElement("input"); // 对属性赋值 操作属性 txt.type = "text"; txt.placeholder = "请输入电话号"; // 把创建的对象追加到div中 // 获取div对象 var div = document.getElementsByTagName("div")[0]; // 向div中追加子元素 子节点 div.appendChild(txt); // 创建br var br = document.createElement("br"); div.appendChild(br); } </script>
-
removeChild(); 删除节点
如下面程序,每点击一次按钮删除一个p标签<div id="div1"> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p>段落4</p> <p>段落5</p> </div> <input type="button" value="删除节点" onclick="deleteChild()" /> <script type="text/javascript"> function deleteChild(){ // 正着删 // var p0 = document.getElementsByTagName("p")[0]; // var div1 = document.getElementById("div1"); // div1.removeChild(p0); // 倒着删 var pArr = document.getElementsByTagName("p"); var div1 = document.getElementById("div1"); div1.removeChild(pArr[pArr.length-1]); } </script>
-
控件的id可以直接当dom对象使用
如下面程序,点击按钮后会将按钮赋值,程序中就是直接用id来修改value值<input type="button" id="in1" onclick="btn1()" /> <script type="text/javascript"> // 控件的id可以直接当dom对象使用 function btn1(){ in1.value = "按钮"; } </script>