js常用知识点

单选按钮：运用三木运算符

<input type="radio" name="sex" id="man" checked>男
<input type="radio" name="sex">女
<button id="btn">获取性别</button>
<p id="title">当前选择的性别是：</p>

<script>
    var oMan = document.getElementById("man");
    var oBtn = document.getElementById("btn");
    var oTitle = document.getElementById("title");

    //点击，显示对应的性别
    oBtn.onclick = function () {
        //看男有没有选择，如果选中了就是男，否则就是女
        console.log(oMan.checked);//true：选中   false：没有选中
        oMan.checked === true?oTitle.innerHTML = "当前选择的性别是:男":oTitle.innerHTML = "当前选择的性别是:女"
    }
</script>

开关：定义全局变量 tag=true 判断后切换为flase,

if(tag===true){
要执行的代码
tag=flase;
}else{
需要执行的代码
tag=flase;
}

双重循环：排他思想

<style>
        ul{
            list-style: none;
            padding: 0;
            margin: 0;
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        li{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            float: left;
        }
    </style>
	<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>

<script>
    //1.获取元素
    var oLi = document.getElementsByTagName("li");
    //2.循环添加点击事件
    for(var i = 0;i<oLi.length;i++){
        oLi[i].onclick = function () {
            console.log(oLi[i]); //i = 9  循环添加的点击事件中，里面不要再使用循环变量i
            console.log(this); //触发事件的对象

            //将所有的li的样式全部清空
            for(var j = 0;j<oLi.length;j++){
                oLi[j].style.background = "";
            }
            //this=被点击的标签
            this.style.background = "red";
        }
    }

点击事件：加自定义属性（或者用立即执行函数）

<button >仲夏夜之梦</button>
    <button >凤求凰</button>
    <button >缤纷独角兽</button>
    <script>
        //        [button   button  button]
        var arr = ["pink","red","skyblue"];
        var oBut = document.getElementsByTagName("button");

        //循环
        for(var i = 0;i<oBut.length;i++){
            oBut[i].index = i;//添加自定义属性，确保点击的是当前的按钮
            oBut[i].onclick = function () {
                //this-->标签
//                alert(this.index);
                document.body.style.background = arr[this.index];
            }
        }

字符串转json

  //字符串转json
        var str = "http://item.taobo.com/item.html?a=1&b=2&c=&d=xxx&e";
        var json = {};

        str = str.split("?")[1]; //a=1&b=2&c=&d=xxx&e
        var arr = str.split("&");
        console.log(arr); //["a=1", "b=2", "c=", "d=xxx", "e"]

        for(var i = 0;i<arr.length;i++){
            var a = arr[i].split("="); //["a", "1"]
            json[a[0]] = a[1];
        }
        console.log(json);

随机排序

数组.sort(funcation(a,b){
return 0.5-Math.random();
})

字符串中出现字符最多的：思想：定义对象存放字符串、如果有值++

 var str = "fjkajieouriweljrmlksjfoieutlkajdoiqueoiwqjelkjflkdsjfoiwurpowqurkgjfd";
    //出现次数最多的字符，及次数
    var obj = {/* "f":10, "j":2,"s":10*/};
    for(var i = 0;i<str.length;i++){
        //如果已经存在当前字符，就+1
        if(obj[str[i]]){ //如果能取出来东西，说明已经存在 obj.key
            obj[str[i]]++;
        }else{ //取不出来，undefined
            obj[str[i]] = 1;
        }
    }
    console.log(obj.z);
    console.log(obj);

    var max = 0;
    var value = "";
    for(var key in obj){  //for(var key in  循环的对象)  每一次循环的时候，都会把对象前面key存储在前面声明的对象中
      if(max < obj[key]){
          max = obj[key];
          value = key;
      }
    }
    console.log("出现次数最多的是"+value+"一共出现了"+max+"次");

数组常用的方法：

push():逐个加到数组末尾，返回数组长度
pop()：末尾删除，减少了数组长度，返回移除项
unshift(),shift()在开头添加删除，同理上
splice()移除当前数组的一部分
sort()数组排序
map()返回一个新的数组

字符串常用方法
charAt(下标)：返回数组下标字符串
indexof()从左向右查找首次出现的位置，找不到返回-1
seach()从左向右查找首次出现的位置，找不到返回-1
lastindexof从右向左
截取
substring()
slice()
大小写
toLowercase() toupercase()
分割split()
替换 replace()

DOM操作
1获取子节点：父节点.children;非标准，返回元素集合
父节点.childNodes标准 返回包括文本元素
2节点属性：标签1 属性2 文本3 nodetype判断
nadeName 标签节点名
nadeValue 文本节点内容，不是别标签节点
3获取父节点：元素.parentNode;
4其他元素：父元素首尾：父元素.firstchilde 标准会解析换行 （ie不会）
父元素.firstElementchild:标准
元素下一个节点：
nextSibling，nestElementsiblin
元素上一个节点
preriousslibing,preiousElementslibing
操作节点：
creatElement()创建节点
appendchild()父元素末尾加节点
remove()移除自生
removechild(元素):

BOM
alter();弹窗
comfirm()对话框
print()打印
位置：
client:元素大小，元素可视宽高：元素.clientWidth/Height
元素。clientTop/left
offset
元素位置offsetwidth/Height
offsetTop/Left------>到定位父元素位置，父元素未定位，到body
scroll：
滚动距离

window.onscroll=function(){
document.documentElement.scrollTOP||document.body.scrollTop
}

获取表格元素

 var oTab = document.getElementsByTagName("table")[0];

    console.log(oTab.tHead); //获取thead
    console.log(oTab.tFoot); //获取tfoot
    console.log(oTab.tBodies[0]); //获取tbody


    //行
    console.log(oTab.rows); //HTMLCollection(4) [tr, tr, tr, tr]
    console.log(oTab.tBodies[0].rows); //tbody中的行

    //单元格:必须通过行获取
    console.log(oTab.rows[0].cells);