javascript 要点概要

1、<!--嵌入式写法-->

<script type="text/javascript">alert('后盾人 人人做后盾！');</script>

<!--引入js-->

<script src="hd.js"></script>

2、表单重定向

<form action="javascript:alert('表单提交啦！')" method="post"> </form>

3、如果script是用来引入js文件的，那么这个script标签中间就不能写任何js代码

4、 引号不能包裹同类的引号

正确的用法是:

英文单引号里面可以包英文双引号

英文双引号里面可以包英文单引号

alert('后盾人 人人做后盾');

alert('后盾人的理念是："分享！！！"');

5、输出工具document.write("<h1>后盾人 人人做后盾</h1>");

6、<script type="text/javascript">prompt('请输入你的密码','88888888');</script>

通过prompt返回的结果都是字符串类型的数据   转换var num = prompt('请输入数字')*1;

7、命名严格区分大小写，变量名不能以数字开头   

_  $ 和普通字母用法一样  不能用关键字和保留字命名

8、1/如果变量被重新声明,但是没有被重新赋值,那么变量的值是不会改变的

2/如果变量被重新声明并且被重新赋值了,那么变量的值就会发生改变

9、分号表示一段功能体的结束     如果有换行,可以不用加分号

要求:凡是能加分号的地方,一定要加分号!!养成良好的习惯,习惯很重要!习惯很致命!

10、变量类型就是数据类型     

被声明,但是没有被赋值的空变量类型是undefined   var hd;

整数和小数(浮点数)都是数值类型     var hd = 3.1415926;

凡是用引号完整包裹的数据，类型就是字符串   var hd = '8888888';

布尔值只有两个值,真和假      var hd = 4>7;

对象     var hd = {};

检测变量类型  var re = typeof hd;

11、在字符串中将变量独立出来的方法:将变量左右两侧都变成完整的字符串,然后用加号连接

+加号如果在字符串中间,表示连接字符串

12、++ 写在前面表示自私,先自增,再参与运算

++ 写在后面表示无私,先参与运算,再自增

13、== 只判断内容,不判断类型   === 全等于,即判断内容,又判断类型

!=  不等于,只判断内容,不判断类型    !== 全不等于,即判断内容,又判断类型

14、三元表达式   (条件)?条件为真时返回的数据:条件为假时返回的数据;

var re = (age>=18)?'成年人':'未成年';

15、用基本语法创建函数function sanjiao(){  }

用字面量的形式创建函数 var sanjiao = function(){   }

调用函数/运行函数/执行函数 sanjiao();    函数的自调用(function hd(){ })()

16、创建函数

function chengji(x,y,z){  var re = x*y*z;   alert(re);  }

chengji(5,6,7);    chengji(5,6,7,8,9);  多则不变   chengji(5,6);  少则NaN

17、函数遇到return,会立即返回结果,并且停止函数的执行

18、局部变量:在函数内部用var声明的变量,局部变量只能作用在函数内部.

全局变量:不是局部变量的变量就一定是全局变量.作用范围是整个js区块

提倡能用局部变量的时候,一定要用局部变量

19、内置顶层函数     eval()拼接字符   直接运算

20、数组的长度永远比数组最大的下标大1. 数组最大的小标+1=数组长度

var shuiguo = ['苹果','鸭梨','水蜜桃','香蕉','西瓜'];

21、遍历数组for (var i=0;i<shuoguo.length;i++) {document.write(shuiguo[i]+'很好吃<br />');}

22、二维数组var jingdian = [['狼牙山','白洋淀','北戴河'],['黄山','九华山','天柱山'],['少林寺','嵩山',' 龙门石窟','白马寺'],['泰山','大明湖','趵突泉','梁山','沂蒙山','三孔'],['平遥古城','五台山']];

document.write(jingdian[3][0]);

23、冒泡排序，挨个比大小交换位置

24、比较笼统的说法:一切事物皆对象    比较正式的解释:对象是很多属性(变量)和方法(函数)的集合体

类(构造函数)     对象是由类创建的(类可以创建出对象)

用原生形式创建对象(也叫用json格式创建对象)

var iphone9 = {color:'土豪金', weight:'200g',   chat:function(){alert('能聊天')}  };

alert(iphone9.price);     对象.函数名()   iphone9.call();

25、用构造函数的形式创建对象

用来创建手机对象的构造函数

function pgsj(){   this.size = '5.5寸';   this.call = function(){ alert('能打电话！'); } }

var iphone9 = new pgsj();

对象里的属性和方法是可以修改的  iphone9.weight = '199g';

alert(iphone9.weight);       iphone9.call = function(){alert('哈哈哈');}

var iphone92 = new pgsj();

新增属性和方法iphone92.huo = function(){alert('能点火');}    iphone92.huo();

26、 对象的属性和方法的两种访问方式 iphone9.call();        iphone9['call']();

对象的遍历   for (x in iphone9) {document.write(x+'=>'+iphone9[x]+'<br />');}

删除对象中的方法或属性    delete iphone9.color;

销毁对象    iphone9 = null;

27、var shuiguo = ['苹果','鸭梨','水蜜桃','香蕉','西瓜'];

通过构造函数创建数组   var shuiguo = new Array('苹果','鸭梨','水蜜桃','香蕉','西瓜');

28、向数组末尾追加新元素   shuiguo.push('芒果','火龙果','榴莲');

向数组开头追加新元素   shuiguo.unshift('芒果','火龙果','榴莲');

删除数组的最后一个元素      shuiguo.pop();

删除数组的第一个元素shuiguo.shift();

29、第一个参数是指定从几号位置开始删除或添加    第二个参数是指定删除几个元素

shuiguo.splice(2,3);//从2号开始删除，删除3个数据

slice在截取的时候,只包含开始,不包含结束

30、将数组转换成字符串   var re = shuiguo.join('');

数组的连接  var re = shuiguo.concat(jingdian);

数组内容复制的技巧   var re = jingdian.concat(jingdian);

31、数组去重复，让i号元素去跟它后面的元素进行比较循环i号元素后面的元素,让后面的元素挨个的和i号元素进行比较，相同删除i号元素，j自减

32、冒泡，temp调换位置

33、Sort函数排序，专门用来排序的函数!   function sortNum(x,y){return y-x;}

34、获得字符串的长度（中文汉字一个汉字算一个字符）document.write(str.length);

获得字符串中3号位置上的字符var re = str.charAt(3);var re = str[3];

获得字符串中3号位置上的字符的Unicode编码var re = str.charCodeAt(3);

将Unicode编码转成原始字符var re = String.fromCharCode(100);

35、获得u在str中第一次出现的位置var re = str.indexOf('u');

获得u在str中最后一次出现的位置var re = str.lastIndexOf('u');

在字符串中查找有无相关字符串var re = str.match('nr123');

replace默认只替换第一个符合条件的字符串var re = str.replace('后盾','******');//while

36、var re = str.slice(3,-1);

第一个参数是指定从几号开始第二个参数是制定截取几个字符var re = str.substr(3,3);

37、用a当做拆分点,将字符串转换成数组   var re = str.split('a');

38、转换大小写var re = str.toUpperCase();var re = str.toLowerCase();

39、取绝对值var re = Math.abs(-10);

四舍五入round四舍五入之后的结果一定是整数var re = Math.round(9.48);

向上取整  如果是整数,向上向下取整的结果还是它本身   var re = Math.ceil(5.88);

40、随机数26-91    var re = Math.floor(Math.random()*(91+1-26)+26);

41、鞭炮setInterval(hi,2000);

定时炸弹    页面打开后2秒钟,执行一次hi函数  setTimeout(hi,2000);

42、clearInterval(timer); clearTimeout(timer);

43、var re = confirm('你确定删除吗？');  返回值true/false

44、history.back();   history.go(-1);

45、location.replace('http://houdunren.com');    区别忘了？？？？

location.assign('http://houdunren.com');

location.href = 'http://houdunren.com';

刷新页面location.reload();

46、抓到id是hd的元素,然后绑定单击事件

document.getElementById("hd").onclick = function(){alert('后盾人 人人做后盾！');}

ondblclick onmousedown  onmouseup  onmouseover onmousemove onmouseout

<div id="hd" onclick="hi()"></div>  

47、判断浏览器

if (document.all) {//ie

document.getElementById("hd").attachEvent('onclick',function(){

alert('低版本ie才能触发');

})

}else{//w3c

document.getElementById("hd").addEventListener('click',function(){

alert('w3c触发啦！！！！');

})

}

48、注意,元素.style.css样式 这种写法只能获得元素的行内样式

var w = document.getElementById("hd").style.width;

设置css样式

document.getElementById("hd").style.width = '500px';

49、控制style.css   dan的运动、图片显隐

50、设置title标签中的内容   document.title = '我是新设置的标题';

51、通过id抓取元素document.getElementById("one").style.color = 'red';

通过id抓过来的元素只有一个    但是通过class/标签名/name属性抓到的元素会以数组的形式返回回来,哪怕只抓到一个元素

通过class抓取元素     var ps = document.getElementsByClassName('ls');

通过name属性抓元素      var ps = document.getElementsByName('hd');

通过标签名抓元素     var ps = document.getElementsByTagName('p');

52、获得纯文本内容

if (document.all) { var con = title.innerText; }else{ var con = title.textContent; }

兼容性的短路写法 var con = title.innerText || title.textContent;

53、获得任意属性值  var re = h.getAttribute('hd');   alert(re);

设置任意属性  h.setAttribute('hd','wwwwwwwww');

54、获得实际作用在元素身上的样式

if (document.all) {//IE

// var w = hd.currentStyle.width;

// var w = hd.currentStyle.marginTop;

var w = hd.currentStyle.backgroundColor;

}else{//W3C标准浏览器

// var w = getComputedStyle(hd,null).width;

// var w = getComputedStyle(hd,null).marginTop;

var w = getComputedStyle(hd,null).backgroundColor;

}

55、抓取hd里的所有子节点  var re = hd.childNodes;   alert(re.length); re[3].style.color = 'red';

抓到one的父级节点 one.parentNode.style.color = 'red';

获得第一个子节点hd.firstChild.style.color = 'red';hd.lastChild.style.color = 'red';

抓取one的下一个节点one.nextSibling.style.color = 'red';

抓取one的上一个兄弟节点one.previousSibling.style.color = 'red';

56、创建新的空标签 var obj = document.createElement('h2');

给新标签添加内容obj.innerHTML = '我是新来的！！！';

给新标签添加属性obj.setAttribute('class','houdun');

将obj追加到box的尾部box.appendChild(obj);box.appendChild(title);

将title元素添加到2号h2标签前面box.insertBefore(title,hs[2]);

删除标签box.removeChild(hs[1]);

替换元素box.replaceChild(title,hs[1]);

复制节点var newobj = title.cloneNode(true);

将新复制出来的节点追加到box后面box.appendChild(newobj);

57、点击新增上传框

创建新的input标签var newfile = document.createElement('input');

设置属性newfile.setAttribute('type','file');

将新的上传框追加到box    box.appendChild(newfile);

58、如果是有定位属性的元素,获得的直接是它的left和top值

获得有定位属性的元素的left和top值var t = box.offsetTop;  var t = box.offsetLeft;

如果是没有定位的元素,参照于离他最近的有定位属性的元素来获得结果var t = box3.offsetLeft;

获得元素实际占用的总高度 var h = box.offsetHeight; var h = box.offsetWidth;

59、滚动条位置.scrollTop  所有内容的高度news.scrollHeight   

60、 漂浮广告   凡客放大镜

61、键盘事件、快速回复、打字游戏

62、要注意月份,js中月份是0-11来规定的,如果是咱们平常说的5月,那么写的时候应该写

var time = new Date(2016,4,8,11,58,0);//推荐写法

63、获得年费 var re = time.getFullYear();

var re = time.getMonth();

获得周几.0代表周天,1-6分别代表1-6var re = time.getDay();

var re = time.getTime();

time.setFullYear(2055);设置日期信息

64、阻止浏览器默认行为  <a href="javascript:void(0);" id="link">后盾人</a> 或者

var ev = window.event || e; 

if (document.all) {ev.returnValue = false;}else{ev.preventDefault();}

65、倒计时效果

66、This  for循环、局部变量

循环所有的图片,给每张图片都加单击事件

for (var i=0;i<imgs.length;i++) {

给i号图片添加一个变量,用来记录序号

imgs[i].xuhao = i;

给i号图片加单击事件

imgs[i].onclick = function(){

alert(this.xuhao);

}

}

67、选项卡效果

68、轮播图