JS学习笔记一
| 1、类 |
| 2、原型 |
| 3、数组和键值对 |
| 4、时间对象 |
| 5、类型 |
| 6、判等 |
| 7、定义方法 |
| 8、JS不存在方法重载 |
| 9、定义匿名函数 |
| 10、对话框 |
| 11、location页面跳转 |
| 12、获取元素 |
| 13、事件 |
| 14、加载完成事件 |
| 15、定时器 |
| 16、设置style样式 |
| 17、event |
| 18、动态添加元素 |
| 19、关于鼠标的事件 |
| 20、innerText和innerHTML |
1、类
function Person(name) { this.Name = name;//在类内部声明一个属性Name,初始化为name值 this.say = function() { alert(this.Name); }; //类是没有返回值的，所以如下代码可以不写 //return name; } //使用构造方法创建对象 var p1 = new Person('zhh'); //p1.say();//调用 方法 //alert(typeof (p1));//object //alert(typeof (Person('zhh')));//因为Person作为函数时，没有返回值，所以是undefined //alert(typeof(Person));//Person就是一个函数，类型是function
function Person() { } //为对象增加成员 //var p1 = new Person(); //p1.Name = "zhh";//为对象p1新建了一个属性Name //p1.say = function() { // alert(p1.Name); //}; //p1.say(); //新建出来的对象，是没有Name属性的，因为类Person中没有Name属性 //var p2 = new Person(); //alert(p2.Name);
2、原型
//原型：对象的类型 function Person() { this.Age = 100; } var p1 = new Person(); //p1.Title = 'abc'; //访问原型 p1.__proto__.Title = 'abc';//为原型注释数据成员 //Person.prototype.Title = 'abc';//功能同上面的代码 var p2 = new Person(); alert(p2.Title);
3、数组和键值对
//使用[]定义数组 var array1 = [123, 'abc']; array1[0]; //键值对{键:值,...} var array2 = { name: 'zhh', age: 18, gender:'你猜' }; //alert(array2['name']);//将array2认为是集合，通过键访问值 //alert(array2.name);//将array2认为是json，通过属性访问值 //定义json数组 var temp = [{ title: 'zhh', age:18 }, { title: '牛头', age:20 }, { title: '马面', age:22 }]; //输出每个对象的title值 for (var index in temp) {//temp是数组，所以index是索引 alert(temp[index].title); }
4、时间对象
//创建时间对象 //var date = new Date(); ////获取世界时间，会提示当前时区 //alert(date.toString()); ////获取当前时区的当前时间 //alert(date.toLocaleString());
5、类型
//当变量被声明之后，没有初始化，则值为undefined var a1; //alert(a1); //输出类型 //alert(typeof(a1));//返回a1变量的类型对应的字符串 //指定null值时，当前变量为null a1 = null; //alert(a1); //alert(typeof(a1));//null是一个object的值 //class Person{} var a2 = '100'; alert(a2 + 1);//字符串拼接 alert(parseInt(a2) + 1);//转成整数后，进行算术加运算
6、判等
//var a1; //var a2 = null; //undefined表示没有，null表示没有 //if (a1 == a2) { // alert('ok'); //} else { // alert('no'); //} //三个等号先判断类型是否相同，再判断值是否相同 //if (a1 === a2) { // alert('ok'); //} else { // alert('no'); //}
7、定义方法
//function 方法名(参数列表){...} function add(a, b) { //alert(a + b); return a + b;//使用return返回值 } //快捷键func,tab function add2(a, b, c) { alert(a + b + c); //return a + b + c; } //调用方法 //var sum = add(1, 2);//直接使用变量接收方法的返回值 //alert(sum); //接收没有返回值的方法 var sum2 = add2(1, 2, 3); alert(sum2);
8、不存在方法重载
//后声明的函数会将先声明的函数覆盖 function add(a, b) { alert(a + b); } function add(a,b,c) { alert(a + b + c); }
9、定义匿名函数
//定义匿名函数，赋值给一个变量 var f1 = function(a, b) { alert(a+b); };
10、对话框
//alert('123');//提示框，只有一个“确定”按钮 //确认框，有“确定”、“取消”两个按钮 //点确定返回true,点取消返回false //var result = confirm('确定要删除吗？'); //alert(result); //输入框：有一个文本框，一个“确定”按钮，一个“取消”按钮 //点确定则返回文本框中的值，点取消则返回null //var result = prompt('请输入年龄', '10'); //alert(result);
11、location页面跳转
//将地址栏的url进行改写，效果是可以完成页面跳转 location.href = '01对话框.html';
12、获取元素
//根据id获取元素，因为id是唯一的，所以只返回一个dom对象 var temp1 = document.getElementById('btnShow'); //name是可以重复的，所以返回一个dom对象数组 var temp2 = document.getElementsByName('btnShow');
13、事件
//推荐使用这种方式注册事件 //好处：实现了代码分离（html与js）;可以使用this document.getElementById('btnShow2').onclick= function() { alert(this.value); }
14、加载完成事件
//页面中的所有节点加载完成后，会触发此事件 onload = function () { //当节点存在后，找到并注册点击事件 document.getElementById('span1').onclick = function() { alert('ok'); }; };
15、定时器
setInterval(birdFly1, 100);
16、设置style样式
var msg = document.getElementById('msg');
msg.style.left = left + 'px';
17、Event
document.getElementById('btnShow').onclick = function(e) {
//event在事件发生时，由浏览器创建出来的一个对象，包含了鼠标的位置等信息
//alert(event);
//对于早期ie浏览器，不支持参数e的形式
//对于ff浏览器，不支持event保留关键字
//对于最新的ie浏览器，两种方式都支持
alert(e.clientX);
};
18、动态添加元素
//追加图片 document.getElementById('btnImg').onclick = function() { //创建img对象 var img = document.createElement('img'); //通过属性src指定要显示的图片 img.src = 'images/bird1.png'; //在div中追加图片对象 document.getElementById('divContainer').appendChild(img); }; //追加文本框 document.getElementById('btnText').onclick = function() { //创建input对象 var input = document.createElement('input'); //设置属性 input.type = "text"; //加入div中 document.getElementById('divContainer').appendChild(input); }; //追加超链接 document.getElementById('btnA').onclick = function() { //创建a对象 var a = document.createElement('a'); //设置属性 a.href = '10Event.html'; a.innerHTML = '点击显示'; //加入div中 document.getElementById('divContainer').appendChild(a); }; //删除所有元素 document.getElementById('btnRemove').onclick = function() { //获取所有子元素 var childs = document.getElementById('divContainer').childNodes; //遍历子元素，逐个删除 for (var i = childs.length-1; i >=0; i--) { document.getElementById('divContainer').removeChild(childs[i]); } };
19、关于鼠标的事件onmouseover，onmouseout，onmousemove
//获取所有的img标签 var imgs = document.getElementsByTagName('img'); //遍历所有的图片对象 for (var index in imgs) { //为每个图片对象注册指向事件 imgs[index].onmouseover = function() { //将当前及之前的图片变黄，之后的图片变灰 var id = this.id; for (var i = 0; i < imgs.length; i++) { //当前元素及之前的元素 if (i <= id) { imgs[i].src = 'images/star2.png'; } else { //当前元素之后的元素 imgs[i].src = 'images/star1.png'; } } }; //为每个图片对象注册移开事件 imgs[index].onmouseout = function() { //被点击的项及之前的元素是黄色 for (var i = 0; i <= clickIndex; i++) { imgs[i].src = 'images/star2.png'; } //将点击的项之后的元素变成灰色 for (var i = clickIndex+1; i < imgs.length; i++) { imgs[i].src = 'images/star1.png'; } };
onload = function() { //鼠标移动：mousemove window.onmousemove = function (e) { //获取图片对象 var img1 = document.getElementById('img1'); //设置x坐标 img1.style.left = e.clientX - parseInt(img1.width) / 2 + 'px'; //设置y坐标 img1.style.top = e.clientY - parseInt(img1.height) / 2 + 'px'; }; };
20、innerText和innerHTML
document.getElementById('btnShowText').onclick = function() {
//获取div内的文本
alert(document.getElementById('div1').innerText);
};
document.getElementById('btnShowHTML').onclick = function() {
//获取div内的html
alert(document.getElementById('div1').innerHTML);
};
21、控制div显示与隐藏
document.getElementById('btnShow').onclick = function () {
var divShow = document.getElementById('divShow');
if (this.value == '隐藏') {
this.value = '显示';
divShow.style.display = 'none';//控制层隐藏
} else {
this.value = '隐藏';
divShow.style.display = 'block';//控制层显示
}
};
22、正则表达式
//1、匹配test //2、提取exec //3、替换：字符串对象的replace //4、全局模式g:使用时表示匹配所有，不使用表示匹配第一个 onload = function () { //匹配test document.getElementById('btnTest').onclick = function() { //构造正则表达式对象 //var regExp = /^\d{6}$/;//邮政编码 var regExp=/\w+@[a-z0-9]+\..+/;//电子邮箱123@qq.com //获取用户输入的值 var txtMsg = document.getElementById('txtMsg').value; //进行匹配 if (regExp.test(txtMsg)) { //匹配成功返回True alert('ok'); } else {//匹配失败返回false alert('no'); } }; //提取exec document.getElementById('btnExec').onclick = function() { var str = '火车12306电信10000火警119哈哈'; //g表示全局模式，如果不加表示提取第一个，加了表示提取所有 var reg = /\d+/;//匹配电话号码，连续的数字 //var result = reg.exec(str);//如果未匹配到结果，则返回null，如果匹配到结果，则返回匹配的值，类型是数组 //使用全局模式时，结合循环来写 while (true) { var result = reg.exec(str); if (result == null) { break; } } }; //提取组exec document.getElementById('btnExecGroup').onclick = function() { var str = '火车12306电信10000火警119哈哈'; var reg = /\d(\d)\d*/g;//使用()完成提取组的功能 while (true) { var result = reg.exec(str); //提取组时，结果数组中的0元素表示本身，从1元素开始是与(匹配的内容 if (result == null) { break; } } }; //替换：字符串对象的replace方法，将正则对象作为参数 document.getElementById('btnReplace').onclick = function() { //如果使用全局模式g，表示匹配多个；如果不使用g表示只匹配第一个 var reg = /\s+/g; var str = " abc "; document.getElementById('txtMsg').value = '1' + str.replace(reg, '') + '1'; }; };
