JavaScript学习杂记

Posted 2020-08-29

1.运算符
字符串拼接用"+"
符号"||"

2.arr.length  //数组长度
str.substr(2,3);  //读取字符串第几位起的几个字符,str中第三位起的三个字符
arr.join(); //将数组元素以符号隔开
arr.split(); //将字符串以符号分开

3.字符串对象
str.indexOf();  //返回子串的位置,如果没找到则返回-1
Date日期对象
var date = new Date();
dete.getFullYear();
Math对象 //方法名直接用
Math.floor(2.3); //2
Math.random(); //返回[0,1)
数组对象

4.window对象
window.alert(‘弹窗‘);
window.confirm(‘确认‘);
window.navigator  //浏览器信息
window.location.href=""; //跳转到某个网页
window.history //浏览历史
window.screen  //屏幕对象
window.document  //文档对象(重要)

5.结点操作
找对象
  //按id找,返回值是对象
  document.getElementById(‘one‘);
  //按标签找,返回值是对象的集合
  document.getElementsByTagName(‘p‘);
  //对于表单元素,可以按name来查询,返回值是结点列表(对象集合)
  document.getElementsByName(‘form1‘);
  //按照类名来找,返回对象集合
  document.getElementsByClassName(‘form1‘);
  //找子对象chlidren,parent    
   document.getElementById(‘one‘).childNodes;
   document.getElementById(‘one‘).children; //children非标准属性,不包括空白节点

6.获取运行时得style对象
//计算出obj的style
function getStyle(obj , attr) {
    return obj.currentStyle ? obj.currentStyle[attr] : window.getComputedStyle(obj , null)[attr];
}

7.删除对象
步骤: 1.找到对象 2.找到他的父对象parentObj 3.parentObj.removeChild(子对象);
<script>
    function del() {
        var lis = document.getElementsByTagName(‘li‘);
        var lastli = lis[lis.length - 1];
        lastli.parentNode.removeChild(lastli);
    }
</script>

8.创建结点
    1.创建对象 2.找到父对象parentObj 3.parentObj.addChild(对象);
function add() {
    var li = document.createElement(‘li‘);
    var tex  = document.createTextNode(‘four‘);
    li.appendChild(tex);
    document.getElementsByTagName(‘ul‘)[0].appendChild(li);
}

9.暴力操作结点
function add3() {
    var ul = document.getElementsByTagName(‘ul‘)[0];
    ul.innerhtml = ‘<li>one</li><li>two</li><li>three</li>‘;
}

10.联动菜单
DOM操作 事件
onchange();
09.html

11.定时器
window.setTimeout(‘change()‘,1000);  //1秒后执行change();
clearTimeout();
setInterval(‘change()‘,1000);   //每隔1秒后执行change();
clearInterval();

12.常用事件
onclick //元素点击时
onfocus //元素获得焦点时
onblur  //元素失去焦点时
onmouseover //鼠标移到元素上面时
onmouseout  //鼠标移出元素上面时
onsubmit = "return change()"  //表单提交时,在form中
onload //页面加载完毕时   window.onlod = function change() {} 或写在body里

13.事件 行为 结构 相分离
    14.html

14.//事件对象
event = window.enent || event;
//事件委托
ev.target

15.正则验证邮箱
patt.test(String);
//找出字符串中的符合正则的字符串
正则匹配邮箱
patt.exec(String);