js基本属性

1. js:java script

Js:基于对象，解释执行

Java:面向对象，编译执行

1. html引入js方式

1. 内部js:body的最后一行

<script>

...

</script>

1. 外部js:

<script src=”path”></script>

1. 控制台的输入输出

1. console.log(内容)；

1. js变量和数据类型

①变量声明

1. var varName;
2. Let varName;

②赋值的时候确定变量的类型（值类型决定变量的类型）；

1. 变量的类型随着赋值类型的不同，可以改变。
2. 甚至变量可以直接赋值使用，不用声明。

①var str = typeof(var);

②string ‘’,””没有字符都是字符串类型

字符串转化为数值类型

1var int = parseInt(str); 转化为整数

2var float = parseFloat(str); 转化为小数

3var ix = str.indexOf(subStr[,beginIndex]); 从beginIndex开始查找subStr的首字母在str中首次出现的位置如果存在则返回:0-str.length-1,否则返回-1

4var lastix = str.lastindexOf(subStr[,beginIndex]); 从beginIndex开始查找subStr的首字母在str中最后出现的位置如果存在则返回:0-str.length-1,否则返回-1

5var subStr = str.substring(beginIndex[,endIndex]);截取beginIndex(inclusive)从开始到endIndex(exclusive)之间的字符串

6var arr = str.split(sepStr);

已sepStr为分隔符，将字符串str拆分成字符串数组

7字符串拼接：

+或者”aa”.concat(“bb”);

③number 1,0.5,31729837912所有数字都一样

1float.toFixed(n); 四舍五入保留精度到n位

④boolen true,false

1在js中:0,””,null，undefined作为false使用;

⑤undefined （声明未赋值）未赋值的变量

⑥object 引用类型

1数组var arr = new Array(var,var,var...);

Var arr = [];

2数组的常用属性和方法

Int len = arr.length 获取数组的长度(数组中元素的数量);

Arr.push(item); 尾部追加元素数组自动扩展;

Arr.splice(beginIndex,howManytoDelete,item...); 插入和删除方法

从beginIndex(inclusive)开始删除howManytoDelete个元素，并插入item...，如果为0，则默认为插入操作，如果item...为空，则默认为删除操作

var.peak = arr.pop(); 获取并删除最后一个元素

var top = arr.shift(); 获取并删除第一个元素

Var str = arr.join(joinStr); 使用指定的连字符把所有元素连成一个长字符串

②日期

Var date = new Date();

Console.log(date); 输出

Var year = date.getMonth()+1;

Console.log(date.getFullYear()); 输出年份

3数组的遍历

For(var i=0;i<arr.length-1;i++){

Console.log(arr[i]);

}

i为下标

For(const i in arr){

Console.log(arr[i]);

}

带下标

Arr.forEach((e,i)=>{

Console.log(i+”,”+e);

}

不带下标

Arr.forEach(e=>{

Console.log(e);

}

3自定义对象

Varinstanceof Type 判断类型

Var func = function(param...)

 

//构造函数

function Student(stuNo,name,age,gender,address){

this.stuNo = stuNo;

this.name = name;

this.age = age;

this.gender = gender;

this.address = address;

 

this.getStuNo = function(){return this.stuNo;}

this.getName = function(){return this.name;}

this.getAge = function(){return this.age;}

this.getGender = function(){return this.gender;}

this.getAddress = function(){return this.address;}

 

this.setStuNo = function(stuNo){this.stuNo = stuNo;}

this.setName = function(name){this.name = name;}

this.setAge = function(age){this.age = age;}

this.setGender = function(gender){his.gender = gender;}

this.setAddress = function(address){this.address = address;}

 

this.toString = function(){

return [this.stuNo,this.name,this.age,this.gender,this.address].join(',');

}

}

 

//构造函数创建对象

var stu = new Student(1,"张三",18,"男","南京");

console.log(stu.toString());

 

//json格式对象

var student = {

stuNo:1,

name:"黄晓明",

age:33,

gender:"男",

address:"江苏南京"

};

 

 

//json格式的字符串‘’是模板

console.log(student);

var stuStr = '{"stuNo":1,"name":"黄晓明","age":33,"gender":"男","address":"江苏南京"}';

console.log(JSON.parse(stuStr));模板模式转字符串的方法

Var stuStr = JSON.stringify(student);字符串转模板模式

 

//访问对象的属性

Var val = obj.field

Var val = obj[“fieldName”]

 

//js中类似反射

For(const field in student){

Console.log(field+”=”+student[field]);

}

 

⑦function 函数类型

Ⅰ自定义函数

1.Function funcName(param...){

...

}

funcName();

1. var funcName = function(param...){...};
2. 参数的值传递和引用传递

Ⅱ内置函数：比如： parseInt

parseFloat

JSON.stringify

JSON.parse

setTimeout(func,time(ms));延时函数

SetInterval(func,time(ms));定时函数

 

Ⅲ构造函数：相当于java中的类

1首字母大写函数

ⅣCallback回调函数就是函数指针的一种用法。将函数作为引用传递给另外一个函数。

 

 

• 浏览器的窗口内置对象

 

window.location.href = url;修改当前浏览器窗口显示的资源的路径

var searchStr = window.location.search 静态页面的跳转传值的问题

URL:在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位符），它是WWW的统一资源定位标志，就是指网络地址。

• js获取html标签对象

1. 根据选择器获取

①根据id选择器获取唯一对象

var e = document.getElementByld(idStr);

②根据class选择器获取对象数组

var arr= document.getElementsByClassName(classStr);

③根据标签选择器获取对象数组

var arr= document.getElementsByTagName(tagName);

④根据表单元素的name属性获取对象数组

var arr= document.getElementsByName(formElName);

1. 根据家族关系获取var ref = ...;

①获取子元素数组：var childs =ref.children;

②获取兄弟元素：

var nextE = ref.nextElementSibling;

var prevE = ref.previousElementSibling;

③获取父元素数组：var parentE = ref.parentElement;

• Js创建html标签对象

var newE = document.createElement(elName);

• Js操作html标签对象：var el = ...;

1. 操作值

1. 表单元素的值：var val =el.value;
2. 非表单元素的文本：var txt = el.innerText;
3. 非表单元素的内部结构: var structor =el.innerHTML;

el.innerHTML = new_structor;

1. 操作属性

1. var attrVal = el.attr;
2. el.attr = new_attrl

1. 操作样式

1. 具体样式：el.style.xxxYyy=”value”;
2. 类选择器： el.className = “cn”;

el.classList.add(cn,cn2,cn3...);

el.classList.remove(cn,cn2,cn3...);

var bool = el.classList.contains(cn);

el.classList.toggle(cn);

1. 操作子元素

1. 添加子元素：el.appendChild(tagEl);
2. 删除元素：el.remove();

• 事件，事件函数，事件绑定时间函数

1,事件

1. onclick             当单击鼠标时运行脚本
2. ondblclick       当双击鼠标时运行脚本
3. ondrag             当拖动元素时运行脚本
4. ondragend      当拖动操作结束时运行脚本
5. ondragenter     当元素被拖动至有效的拖放目标时运行脚本
6. ondragleave    当元素离开有效拖放目标时运行脚本
7. ondragover     当元素被拖动至有效拖放目标上方时运行脚本
8. ondragstart     当拖动操作开始时运行脚本
9. ondrop             当被拖动元素正在被拖放时运行脚本
10. onmousedown      当按下鼠标按钮时运行脚本
11. onmousemove       当鼠标指针移动时运行脚本
12. onmouseout          当鼠标指针移出元素时运行脚本
13. onmouseover         当鼠标指针移至元素之上时运行脚本
14. onmouseup                当松开鼠标按钮时运行脚本
15. onmousewheel           当转动鼠标滚轮时运行脚本
16. onscroll                       当滚动元素滚动元素的滚动条时运行脚本

1. 事件函数：就是没有参数，没有返回值的普通函数
2. 如何捆绑：标签对象 事件=函数;