js笔记

1 变量声明 可以用$  
var a =3;
  var $b = 'wen';
  console.log(a,$b);
  alert($b);




2对象的声明


var a = {name:'linghchong',age:24,singe:"yes"};  json格式


console.log(a.name ,a.singe);                     数组调用 a.属性
console.log(a['name']);






3 数组的声明
 var s = [3,'wen',true,44,null,"unde"];      [] 这种[]来声明数组,可存储多种类型
 console.log(s);
 console.log(s[3]);                    调用




4  字符拼接 +
console.log(2+4+'zhang'+3+4);  //6zhang34 一旦遇到非法则按照字符拼接




//逻辑运算符  
 ||或的短路运算 第一个为真 即跳过后面的 ,若第一个为假,则往后寻找
var a=false;
var b=4;
var c = 'jia '
console.log(c||a||c);   //jia


console.log(a||b||c);   //4  






&& 逻辑与


console.log(a&&c);   //false


//结构 数组
var zh = ['风','雨','雷','电'];
for(var a=0;a<zh.length;a++){
 console.log(zh[a]);
}




 对象 obj[k] 对象 obj 变量k    obj.k(obj的k属相   obj.name = '讲故事')
var du = {'name':'讲故事',age:44,sty:'fuely'};
for(var k in du){
  console.log(k+' --'+du[k]);
}






//字符串函数为其一个属性


var str = "刘凤云111";
console.log(str.length);  //按字符查 6


console.log(str.substr(1,3));//凤云1 


var arr = ['乱','世','英','雄'];
console.log(arr.join('--'));  //乱--世--英--雄 
 //implode = arr.join  数组拼接成字符串


var str = "怜,我,世,人";
console.log(str.split(','));   //["怜", "我", "世", "人"] 
//explode = str.solit 




字符查找 indexOf()


var str = "hello fengyun"; //没有找到为-1(真) 
  alert(str.indexOf('he') >=0  ?"find":"no here");






toLowerCase() 转化成小写


toUpperCase()  转化成大写


var str = "zhang San";
alert(str.toLowerCase());  //小写
alert(str.toUpperCase());  //大写




//字符替换
replace(str1,str2);


var str = "jin yong";
alert(str.replace('jin','wu')); //wu yong






时期时间方法
    var date = new Date();   //产生时间对象


    var y    = date.getFullYear();  //得到年份
    var month    = date.getMonth()+1; //月份从0--11 (对应1--12)
    var d    = date.getDate();        //月中的天数
    
    var h    = date.getHours();       //小时
 
    var m    = date.getMinutes();     //分钟
    var s    = date.getSeconds();       //秒
    
    var w    = date.getDay();         //星期几




Math 方法 数学 Math是类 全是静态方法


Math.ceil()  //向上取整
floor() //向下取整
min()    //最小
max()    //最大值
pow()     //二次方
random()   //随机数
round()    //四舍五入
sqrt()    //开平方根










数组对象


concat() //合并数组
join()    //implode
pop()     //弹出最后
push()     //插入最后
shift()    //弹出开头
unshift()   //插入开头
sort()       //排序
reverse()     //翻转
slice()       //返回数组的一个片段
splice()       //方法用于插入、删除或替换数组的元素。




var arr = ['feng','花',4,'雪','月'];


console.log(arr.pop());  //弹出最后


console.log(arr.shift());
console.log(arr);
console.log(arr.unshift('first'));
console.log(arr.sort());
console.log(arr.reverse());
console.log(arr.slice(1,3)); //截取2,3 slice(start,end)






confirm 
window.confirm('are you sure');
var a = confirm('aok');  //返回true或false
if(a ==true){
  alert('删除');
}else{
 alert('quxiao');
}








console.log(window.navigator.cookieEnabled); //判断浏览器的cookies是否被禁用




console.log(window.location); //地址栏的属性
console.log(window.location.href="http//:www.baidu.com");跳转




历史纪录
console.log(window.history);


history 
   length:历史纪录的数目
   back() :后退
   forward() :前进
   go()    :






找对象


用id
document.getElementById()


//用标签
document.getElementsByTagName()




//表单元素用name
document.getElementsByName()




//按类名查找
document.getElementsByClassName()


//找子节点
document.getElementById('test').childNodes; 包含空白节点


document.getElementById('test').child; 不包含空白节点




//找父节点
document.getElementById('test').parentNode; 






删除子节点
function de(){
      var lis = document.getElementsByTagName('li'); //找到元素列表
      var last =lis[lis.length - 1];       //lis[3] 得到元素
      last.parentNode.removeChild(last);  //找的元素的父元素,删除子节点 
   }




创建子节点
 function add(){
   var li = document.createElement('li');
   var text = document.createTextNode('绝代芳华');
       li.appendChild(text);
    var u = document.getElementsByTagName('ul')[0];
       u.appendChild(li);
 }


innerHTML(暴力操作)




setTimeout('func',1000);   //经过1秒钟,执行func函数


setInterval('func',1000);  //每隔1秒钟,执行一次


clearTimeout();
clearInterval()




事件


onclick  点击事件


onfocus 事件获得焦点时


onblur  元素失去焦点时






表单提交时


onsubmit = "return 方法();"  function (){  return false};  才会阻止提交










<script type="text/javascript">
  var adr = [ ['济南','聊城','青岛','菏泽','潍坊'],['石家庄','唐山','中原','颜鑫','李智']]; 
  function sel(){
     var sel  = document.getElementById('prov');
     var city = document.getElementById('city');
     var opt='';
     var len = adr[sel.value].length;
     for(var w = 0;w<len;w++){
        opt += '<option value="'+w+'">'+adr[sel.value][w]+'</option>'
     }
      city.innerHTML = opt;
  } 
</script>
</head>
    <body>
    <h1>联动菜单</h1>
    <select id="prov"  οnchange="sel();">
        <option value="-1">请选择</option>
         <option value="0">山东</option>
          <option value="1">河北</option>
    </select>
   <select id="city" >
     
   </select>










五子棋循环 td背景变黑
      var tds =  document.getElementsByTagName('td');
      var w = 0 ;
      var num = 0;
      while(w<tds.length){
         tds[w].onclick = function(){
            this.style.background = num++%2? 'black':'red';
         }
         w++;
      }








//事件委托
    
    var num =0;
    var tab = document.getElementsByTagName('table')[0];
    tab.onclick = function (ev){
       ev.target.style.background =num++%2 ? "black":'red';

    }