对js的一些总结

---------最近工作老是在做前端页面，不可避免的使用了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

//除法函数，用来得到精确的除法结果
//说明：javascript的除法结果会有误差，在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。
//调用：accDiv(arg1,arg2)
//返回值：arg1除以arg2的精确结果
function accDiv(arg1,arg2){
    var t1=0,t2=0,r1,r2;
    try{t1=arg1.toString().split(".")[1].length}catch(e){}
    try{t2=arg2.toString().split(".")[1].length}catch(e){}
    with(Math){
        r1=Number(arg1.toString().replace(".",""));
        r2=Number(arg2.toString().replace(".",""));
        return (r1/r2)*pow(10,t2-t1);
    }
}
//给Number类型增加一个div方法，调用起来更加方便。
Number.prototype.div = function (arg){
    return accDiv(this, arg);
};
//乘法函数，用来得到精确的乘法结果
//说明：javascript的乘法结果会有误差，在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。
//调用：accMul(arg1,arg2)
//返回值：arg1乘以arg2的精确结果
function accMul(arg1,arg2)
{
    var m=0,s1=arg1.toString(),s2=arg2.toString();
    try{m+=s1.split(".")[1].length}catch(e){}
    try{m+=s2.split(".")[1].length}catch(e){}
    return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m);
}
//给Number类型增加一个mul方法，调用起来更加方便。
Number.prototype.mul = function (arg){
    return accMul(arg, this);
};
//加法函数，用来得到精确的加法结果
//说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。
//调用：accAdd(arg1,arg2)
//返回值：arg1加上arg2的精确结果
function accAdd(arg1,arg2){
    var r1,r2,m;
    try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
    try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
    m=Math.pow(10,Math.max(r1,r2));
    return (arg1*m+arg2*m)/m;
}
//给Number类型增加一个add方法，调用起来更加方便。
Number.prototype.add = function (arg){
    return accAdd(arg,this);
}
//减法函数
function accSub(arg1,arg2){
     var r1,r2,m,n;
     try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
     try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
     m=Math.pow(10,Math.max(r1,r2));
     //last modify by deeka
     //动态控制精度长度
     n=(r1>=r2)?r1:r2;
     return ((arg2*m-arg1*m)/m).toFixed(n);
}
///给number类增加一个sub方法，调用起来更加方便
Number.prototype.sub = function (arg){
    return accSub(arg,this);
}

调用：数字.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的区别不要混用。  

 <script type="text/javascript">

        $(".className")//类选择器
        $("#id")//id选择器
        $("div")//元素选择

        $("div[arrt='xxx']")//元素选择
        $("option:selected")//状态选择 常用的状态还有 last

        $("div").parent().parent() //获取父类的父类节点
        $("div").children()//子类节点
        $("div").parent("selector") // 方法内加上选择器筛选（上诉任意选择器）
        $("div") .find("selector")// 查找div下符合选择器的元素
        $("div").eq(0)// 获取div元素中的第一个，eq(i)数组下标从0开始
        $("xx").length//获取匹配到的元素数量，从1开始
        $("xx").index("selector")//返回seletor在匹配元素数组中的索引，找不到返回-1

        $("#xx").html() //获取设置元素内的所有内容
        $("#xx").text() //获取设置文本内容
        $(".xx").val();//获取设置元素value值
        $("#xx").attr("name") //获取元素中name的属性值，
        $("#xx").attr("name"，"xiaoming")//设置name属性值为xiaoming

        $("xx").css("{xxx:xx,xxx:xx}");//设置css样式

        $("xx").append("html");//可以向匹配元素内增加内容 常用在为table添加一行
        $("xx").warp("xxx");//用指定内容包装匹配元素，相当于为匹配元素添加父类
        $("xx").remove();//从DOM中删除所有匹配的元素。
        $("xx").removeAttr("xx");//清除匹配元素的属性
        $("xx").empty();//清空匹配元素的所有内容（子元素），保留匹配元素
        $("xx").replaceWith("xxxx");//将所有匹配的元素替换成指定的HTML或DOM元素

        常用的函数:
         $(document).ready(function(){});简写成：$(function(){});//要在DOM加载完成后执行的函数

         $("xx").each(function(){
            $(this).xxx
         });//遍历匹配的所有元素，并执行操作$(this)指当前元素；常常用在批量操作中
 </script>

 

常用的就这些，其他的查看文档吧！

 

　　

　　

 

 JS测试调试

alert() 、console.log()  最后+Chrome F12 谁用谁知道 其他不写了 （懒

 

未完待续！