---------最近工作老是在做前端页面,不可避免的使用了js。下面针对工作中使用到的js进行整理总结。
类型
总所周知,js是个弱类型语言,可以使用var声明一切类型变量,在对变量进行具体的赋值后;变量会与值的类型同步。js和其他的语言所具有的数据类型差不多,除了Number数值类型。而通过DOM操作获取的值类型往往是字符串类型,所以类型转换一般为字符串转其他。记录一下js常用的类型转化方法。
string 转换为其他类型
方法:parseInt() 、parseFloat() 、Number() 其他类似;这些都是强制转换的方法 ;查看变量类型使用typeof();都是原生级的方法,直接用!
坑:NaN ----非数值类型,表明不是数字;往往在类型转化后或者数值运算后出现的结果。出现NaN说明类型转换有问题或者运算的类型不对称,这时候检查转换的值是否出现了不该出现的东西,比如中文、特殊字符、非数字等。
类型转换完当然要计算的啦,加、减、乘、除、来一套,顺便带上浮点运算。
加法:坑:小心变成字符串拼接 出现1+1 =11的情况,还是类型转换问题,除了转换好类型,也可以这样操作 a*1+b*1;或者使用eval();
减法:暂时没有被坑~~~;
乘法:同上;
除法:同上;
浮点运算:js的浮点运算,让以上四大法全有了坑;坑:运算结果出现5.8999999999这种情况 或者6.00000000014;
解决方法:使用以下代码 转载至:http://www.cnblogs.com/jiahaipeng/archive/2008/10/29/1321821.html
1 //除法函数,用来得到精确的除法结果 2 //说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。 3 //调用:accDiv(arg1,arg2) 4 //返回值:arg1除以arg2的精确结果 5 function accDiv(arg1,arg2){ 6 var t1=0,t2=0,r1,r2; 7 try{t1=arg1.toString().split(".")[1].length}catch(e){} 8 try{t2=arg2.toString().split(".")[1].length}catch(e){} 9 with(Math){ 10 r1=Number(arg1.toString().replace(".","")); 11 r2=Number(arg2.toString().replace(".","")); 12 return (r1/r2)*pow(10,t2-t1); 13 } 14 } 15 //给Number类型增加一个div方法,调用起来更加方便。 16 Number.prototype.div = function (arg){ 17 return accDiv(this, arg); 18 }; 19 //乘法函数,用来得到精确的乘法结果 20 //说明:javascript的乘法结果会有误差,在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。 21 //调用:accMul(arg1,arg2) 22 //返回值:arg1乘以arg2的精确结果 23 function accMul(arg1,arg2) 24 { 25 var m=0,s1=arg1.toString(),s2=arg2.toString(); 26 try{m+=s1.split(".")[1].length}catch(e){} 27 try{m+=s2.split(".")[1].length}catch(e){} 28 return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m); 29 } 30 //给Number类型增加一个mul方法,调用起来更加方便。 31 Number.prototype.mul = function (arg){ 32 return accMul(arg, this); 33 }; 34 //加法函数,用来得到精确的加法结果 35 //说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。 36 //调用:accAdd(arg1,arg2) 37 //返回值:arg1加上arg2的精确结果 38 function accAdd(arg1,arg2){ 39 var r1,r2,m; 40 try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} 41 try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} 42 m=Math.pow(10,Math.max(r1,r2)); 43 return (arg1*m+arg2*m)/m; 44 } 45 //给Number类型增加一个add方法,调用起来更加方便。 46 Number.prototype.add = function (arg){ 47 return accAdd(arg,this); 48 } 49 //减法函数 50 function accSub(arg1,arg2){ 51 var r1,r2,m,n; 52 try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} 53 try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} 54 m=Math.pow(10,Math.max(r1,r2)); 55 //last modify by deeka 56 //动态控制精度长度 57 n=(r1>=r2)?r1:r2; 58 return ((arg2*m-arg1*m)/m).toFixed(n); 59 } 60 ///给number类增加一个sub方法,调用起来更加方便 61 Number.prototype.sub = function (arg){ 62 return accSub(arg,this); 63 }
调用:数字.mul(数字);也可以自己进行浮点的”精度”进行设置,使用xxx.toFixed(2);保留两位小数(四舍五入),然后再参与运算!
DOM操作 (重中之重)
先写总结吧:
1、在未定死网页组成结构(DOM树)之前,不要写根据上下结构而获取到的元素的代码,如parent().parent()..... children().children()...这种代码;因为网页结构很可能跟着变化的需求来修改;牵一发而动全身,后患无穷 ;已经明确DOM树的随意使用。
2、针对1的而言,多给标签设置id 、name、class,没有获取不到的元素。但也要注意使用规范,id具有唯一性,class即类,顾名思义相同的为一类多用于标记同类元素,name名称;id、name、class命名都要具有含义,
js技术的重中之重,分别写一下原生javascript和jquery常用的操作dom的方法
原生js常用DOM操作
<script type="text/javascript"> <!--获取最初节点 --> document.getElementById("xx"); //根据id获取 document.getElementsByTagName("xx");//根据标签名如div获取,注意s,表明得到数组对象,可以在后面加上[x]数组下标,从0开始 document.getElementsByName("xx");//根据标签name属性获取,其他同上 <!-- 创建、删除、复制--> document.createElement('xxx'); document.createElement('xxx').parentNode.removeChild(***); .cloneNode(true)或.cloneNode() <!--对最初节点的进一步操作 --> document.getElementById("xx").childeNodes; //获取包括了儿子、孙子、孙子的孙子等所有子节点,是数组 //以下函数包含知识点: //1、js函数书写形式 //2、调用为reduce(this),this指当前元素对象,形参obj接收,直接用obj.xxxx; //3、获取父节点,可以.parenNode.parenNode.parenNode.parenNode直到你满意为止, //4、children只获取儿子,补充.lastChild、.firstChild 顾名思义; //5、innerHTML 获取节点下的包括html的所有内容,也可进行修改xx.innerHTML = "xxx";(IE:innerText,获取文本不含标签) //6、nodeName 获取元素名称,.value获取值 //7、设置样式、style.xxx ="xxxx"; function reduce(obj){ var count = parseInt(obj.parentNode.parentNode.children[1].innerHTML); alert(count.nodeName + cpunt.value); count.style.xxx = ""; } </script>
jquery 常用DOM操作
jquery是目前使用最多的js框架(函数库),对原生js进行了大量封装,优化了DOM操作,var k = $(xx);k为jquery对象(区别与原生js中的对象),能使用jquery函数操作,注意jquery的格式与javascript的区别不要混用。
1 <script type="text/javascript"> 2 3 $(".className")//类选择器 4 $("#id")//id选择器 5 $("div")//元素选择 6 7 $("div[arrt='xxx']")//元素选择 8 $("option:selected")//状态选择 常用的状态还有 last 9 10 $("div").parent().parent() //获取父类的父类节点 11 $("div").children()//子类节点 12 $("div").parent("selector") // 方法内加上选择器筛选(上诉任意选择器) 13 $("div") .find("selector")// 查找div下符合选择器的元素 14 $("div").eq(0)// 获取div元素中的第一个,eq(i)数组下标从0开始 15 $("xx").length//获取匹配到的元素数量,从1开始 16 $("xx").index("selector")//返回seletor在匹配元素数组中的索引,找不到返回-1 17 18 $("#xx").html() //获取设置元素内的所有内容 19 $("#xx").text() //获取设置文本内容 20 $(".xx").val();//获取设置元素value值 21 $("#xx").attr("name") //获取元素中name的属性值, 22 $("#xx").attr("name","xiaoming")//设置name属性值为xiaoming 23 24 $("xx").css("{xxx:xx,xxx:xx}");//设置css样式 25 26 $("xx").append("html");//可以向匹配元素内增加内容 常用在为table添加一行 27 $("xx").warp("xxx");//用指定内容包装匹配元素,相当于为匹配元素添加父类 28 $("xx").remove();//从DOM中删除所有匹配的元素。 29 $("xx").removeAttr("xx");//清除匹配元素的属性 30 $("xx").empty();//清空匹配元素的所有内容(子元素),保留匹配元素 31 $("xx").replaceWith("xxxx");//将所有匹配的元素替换成指定的HTML或DOM元素 32 33 常用的函数: 34 $(document).ready(function(){});简写成:$(function(){});//要在DOM加载完成后执行的函数 35 36 $("xx").each(function(){ 37 $(this).xxx 38 });//遍历匹配的所有元素,并执行操作$(this)指当前元素;常常用在批量操作中 39 </script>
常用的就这些,其他的查看文档吧!
JS测试调试
alert() 、console.log() 最后+Chrome F12 谁用谁知道 其他不写了 (懒
未完待续!