javaScript笔记目录
一、事件
1.鼠标事件
代码如下（实例）：
onclick 当用户点击某个对象时会触发的事件
ondblclick 当用户双击某个对象是会触发的事件
onmousedown 鼠标按钮在某个元素上被按下时触发的事件
onmouseenter 当鼠标指针移动到元素上时触发的事件
onmouseleave 当鼠标指针移出元素时触发的事件
onmousemove 当鼠标在元素上移动时触发的事件
onmouseover 当鼠标移到某元素之上时会触发的事件
onmouseout 当鼠标从某元素中移开时触发的事件
onmouseup 当鼠标键在某元素上被松开时触发的事件
1.1鼠标事件属性
clientX 可以获取鼠标指针的水平坐标
cilentY 可以获取鼠标指针的垂直坐标
pageX 可以获取鼠标相对于当前页面的水平坐标
pageY 可以获取鼠标相对于当前页面的垂直坐标
/*
* clientX可以获取鼠标指针的水平坐标
* cilentY可以获取鼠标指针的垂直坐标
*/
var x = event.clientX;
var y = event.clientY;
2.鼠标滚轮事件
onwheel 鼠标滚轮事件
2.1鼠标滚轮事件属性
event.wheelDelta 可以获取鼠标滚轮滚动方向
3.键盘事件
代码如下（实例）：
//onkeydown 某个键盘按键被按下时触发
onkeyup 某个键盘按键被松开是触发
onkeypress 某个键盘按键被按下并松开。
3.1键盘事件属性
document.onkeydown=function(event){
// 判断y键是否被按下
// 判断y和ctrl是否同时被按下
/*
* 可以通过keyCode来获取按键的编码
* 通过它可以判断哪个按键被按下
* 除了keyCode，事件对象中还提供了几个属性
* altKey
* ctrlKey
* shiftKey
* - 这个三个用来判断alt ctrl 和 shift是否被按下
* 如果按下则返回true，否则返回false
*/
if(event.keyCode==89&&event.keyCode==17){
console.log("y键被按下了");
}
}
4.表单事件
代码如下（实例）：
//onblur 元素失去焦点时触发
onfocus 元素获取焦点
onchange 表单元素的内容改变时触发
oninput 元素获取用户输入时触发
onsubmit 表单提交时触发
5.加载事件
代码如下（实例）：
//window.onload
加载完body在加载script代码
二、内置对象
1.字符串对象
代码如下（示例）：
1.字符串.length 获取字符串的长度
2.charAt(index)方法和charCodeAt(index)方法 用于获取第n个字符的内容，和内容unicode编码,index索引是从0开始计算的
3.indexOf(要查找的字符) lastIndexOf(要查找的字符)
4.字符串.toLowerCase()转换成小写
字符串.toUpperCase()转换成大写
5.字符串截取
1.substr(开始的索引位置,截取的长度);
2.substring(开始的索引位置,结束的索引位置); 不包含结束的索引
2.时间对象
代码如下（示例）：
/* Date对象
-在JS中使用Date对象来表示一个时间 */
// 创建一个Date对象
// 如果直接使用构造函数创建一个Date对象，则会封装为当前代码的执行时间
var d=new Date();
// 创建一个指定的时间对象
// 需要在构造函数中传递一个表示时间的字符串作为参数
// 日期格式 月份/日/年 时：分：秒
var d2=new Date("01/01/1970 8:00:00");
/* getDate()
-获取当前日期对象是那一日 */
var date=d.getDate();
/* getDay()
-获取当前日期对象是周几
-会返回一个0-6的值
0表示周日 */
var day =d.getDay();
/* getMonth()
-获取当前对象的月份
-会返回0-11的值
0表示1月
1表示2月
11表示12月 */
var month=d.getMonth();
// var year=d2.getYear()
/* getTime()
-获取当前日期对象的时间戳
-时间戳，指的是从格林威治标准时间的1970年1月1日，0时0分0秒(时间差8小时)
到当前时间发费的毫秒数（1秒等于1000毫秒） */
var time=d2.getTime();
/* 利用时间戳来测试代码的执行的性能
获取当前时间戳 */
// time=Date.now();
var start=Date.now();
for(var i=0;i<100;i++){
console.log(i);
}
var end=Date.now();
console.log("我执行了："+(end-start)+"毫秒")
// console.log("我执行了：" + start-end+"毫秒");
3.数学对象
代码如下（示例）：
1.Math.PI获取圆周率
2.Math.abs() 绝对值
3.Math.ceil 对x进行上舍入(进一法);有小数就进1
4.Math.floor对x进行 下舍入(舍一法) 小数抹去
5.Math.round 四舍五入
6.Math.pow(x,y) x的y次方
7.Math.sqrt(x) 求x的平方根
8.Math.max() 返回最大值
9.Math.min() 返回最小值
10.Math.round() 生成1个0-1的随机数字
4.数组对象
代码如下（示例）：
1.数组.join() 使数组元素以特定字符进行拼接得到新的字符串,join方法是将数组转换成了具有特殊分割符的字符串
2.字符串.split() 将具有一定规则的字符串转换成数组
3.数组.push()在数组末尾加一个元素或者多个元素(都是直接对数组本身进行操作)
4.数组.pop方法在数组的末尾删除掉一个元素(都是直接对数组本身进行操作)
5.数组.unshift在数组的头部追加一个或者多个元素
6.shift 删除数组当中的第一个位置的元素
7.数组.sort排序 会改变原有数组 而且排序是按字符顺序排序，请谨慎使用
8.数组.reverse 使数组顺序颠倒 --(都是直接对数组本身进行操作)
三、自定义对象
1.递归函数
代码如下（示例）：
// 3.递归函数
function tempfun(x){
if(x<1){
return; //递归的出口
}else{
document.write("<br/>"+x);
}
tempfun(x-1);
}
tempfun(1000);
2.创建对象
/* 创建一个对象 */
var obj=new Object();
// 向对象中添加属性
obj.name="孙悟空";
obj.age=18;
2.1字面量创建对象
var obj={
name:"孙悟空",
age:28,
gender:"男",
address:"花果山"
};
// 对象的属性值可以是任何的数据类型，也可以是个函数
obj.sayName=function(){
console.log(obj.name);
};
/* 函数也可以称为对象的属性
如果一个函数作为一个对象的属性保存，
那么我们称这个函数是这个对象的方法
调用函数就说调用对象的方法 (method)
但是它只是名称上的区别*/
3.对象的访问
for in循环得规则
总结：for(var i in xxx) for in循环中如果xxx是数组此时i就是索引012345…
for(var i in xxx) for in循环中如果xxx是对象此时i就是属性名称…
想访问对象的属性值 可以 对象[属性名]
var shuzu=['李白','杜甫','陶渊明','李清照'];
for(var i in shuzu){
document.write("使用for in循环 此时的i是"+i+","+shuzu[i]+"<br/>");
}
4.构造函数
// 构造函数的特点:
// 1.一般情况首字母大写
// 2.没有显示使用object创建对象
// 3.运用this来指向此对象(将构造函数的作用域指向新对象 所以此时的this才是当前对象)
// 4.无明确return值，但仍能被新建的对象接收到
// 5.如果构造函数没有传入参数，则自动补充undefined
// typeof 是用于判断基础数据类型的，如果用于判断对象的数据类型都会返回object
function createPerson(name, age, sex) {
// 1.必须创建空对象
var person = new Object();
person.myName = name;
person.mySex = sex;
person.myAge = age;
person.sayHi = function() {
//
}
// 3.将制造好的对象返回
return person;
}
var p1 = createPerson("小灰灰", "男", 18);
console.log(p1);
// 2.构造函数模式上生产对象
function MyFunCreatePerson(name, sex, age) {
// 构造函数内自动省略 new Object()
// var obj=new Object(); 或者 var obj={};
this.herName = name;
this.herSex = sex;
this.herAge = age;
this.sayHello = function() {
var msg = "您好我是:" + this.herName + "我的性别是:" + this.herSex + "我的年龄是:" + this.herAge;
}
// 还自动省略了 return obj
}
var p2 = new MyFunCreatePerson("喜洋洋", "男", 20);
console.log(p2);
// constructor.name 用于获取对象的具体类型对象
// document.write("<br/>工厂模式创建对象的对象是"+p1.myName+"类型是"+p1.constructor.name);
// document.write("<br/>工厂模式创建对象的对象是"+p2.herName+"类型是"+p2.constructor.name);
// 3.原型模式 生产对象--大大实现了属性和方法的共享 节省了很多资源
function person(){
person.prototype.pName="小峰";
person.prototype.pAge=18;
person.prototype.pSex="男";
person.prototype.pFriends=["小鱼人","小狐狸","小河蟹","小德玛"];
person.prototype.sayHello=function(){
var msg = "您好我是:" + this.pName + "我的性别是:" + this.pSex + "我的年龄是:" + this.pAge;
document.write(msg)
}
}
var pp=new person();
pp.pName="小艾";
pp.pAge=66;
pp.pFriends.push("Galaxy");
pp.sayHello();
document.write("小艾同学的朋友有"+pp.pFriends);
console.log(pp);
var ppt=new person();
ppt.pName="皮皮题";
ppt.sayHello();
console.log(ppt);
document.write("皮皮题的朋友还有"+ppt.pFriends);
// 原型模型其弊端
// 由于原型函数属性和方法是共享的，会导致如果属性指向的是一个对象，有一个实例更改了此对象，所有实例都会跟着更改
//4. 原型模型升级版 --构造函数和原型模式的混合使用
function NewPerson(name,age,sex){
this.newName=name;
this.newAge=age;
this.newSex=sex;
this.newFriends=['小露露','小娜娜'];
}
NewPerson.prototype.playGamej=function(){
var msg="您好啊，我是"+this.newName+"我今年"+this.newAge+"岁了";
}
var person1=new NewPerson("小马",15,"男");
var person2=new NewPerson("小王",18,"女");
console.log(person1);
console.log(person2);
person1.newFriends.push("老王");
person2.newFriends.push("老赵");
document.write("<br/>小马的朋友有"+person1.newFriends);
document.write("<br/>小王的朋友有"+person2.newFriends);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function MyFunCreatePerson(name, sex, age) {
if(name==undefined||name==""){
this.herName="无名";
}else{
this.herName=name;
}
if(sex==undefined){
this.herSex="女";
}else{
this.herSex = sex;
}
if(age==undefined){
this.herAge=19;
}else{
this.herAge = age;
}
this.sayHello = function() {
var msg = "您好我是:" + this.herName + "我的性别是:" + this.herSex + "我的年龄是:" + this.herAge+"岁";
document.write(msg);
}
}
var p1=new MyFunCreatePerson();
p1.sayHello();
var p2=new MyFunCreatePerson("小美");
p2.sayHello();
</script>
</body>
</html>
5.对象直接量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 键 值 对
// var person3={name:"zhangshan",
// person2:"lishi",
// person1:"wangwu"}
var person={
name:"zhangshan",
sex:'女',
friends:['明亮','非凡'],
playGame:function(){
var msg="大家好，我是"+this.name+"我的性别是"+this.sex+"我正在后排打游戏"
}
}
// 对象直接量的访问 与 常规对象访问一致
// 1.对象名称.属性名称
console.log(person.name);
// 2.对象名称["属性名"]
console.log(person["sex"]);
// 3.使用for in 循环访问
for(var i in person){
console.log("属性名称有"+i+"属性值"+person[i]);
}
</script>
</body>
</html>
四、JSON
1.json转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 1.将json转换成一般字符串 JSON.Stringfy
// json类型的对象
var hero={"name":"惊奇队长","sex":"女","gongji":"宇宙射线"};
var str =JSON.stringify(hero);
// 将JSON转换为字符串后我们可以做很多操作
var str =str.replace("惊奇队长","地震女");
console.log(str);
// 2.将一定格式的字符串转换成json JSON.parse()
var ob=JSON.parse(str);
var str1='{"haha":77,"dd":66}';
var ob1=JSON.parse(str1);
console.log(ob1);
</script>
</body>
</html>
扫一扫
522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
