javascript五月学习记录

5月份用原生js写导航菜单和轮播图,学习了一些DOM知识和几个javascript内置函数。

DOM知识

getElementById 用法document.getElementById("id") 获取的是一个对象,这个对象对应着文档里的一个元素节点。

getElementsByClassName和getElementsByTagName这两获取的是数组。数组里是一些元素节点。他们的Elements是复数形式。
部分低端浏览器不支持getElementsByClassName这个方法,可自行封装。

//传入两个参数 class名和父元素,可以缩小查询范围,提高效率
    var getElementsByClassName=function(cname,oParent){
    if(oParent==null){oParent=document}
//如果浏览器支持,则返回默认方式
    if(oParent.getElementsByClassName){
        return oParent.getElementsByClassName(cname);
    } 
// 对不支持的浏览器进行处理  
    else{
//找到父元素下所有元素节点
        var  all=oParent.getElementsByTagName("*");
        var  j=all.length;
//正则 提供处理多类名元素 如class="name1 name2"
        var  theClass=new RegExp("(^|\\s)"+cname+"(\\s|$)");
// 数组存储结果
        var  result=new Array();
//开始遍历父元素下所有子元素节点
        for(var i=0;i<j;i++){
            var allClass=all[i].className;
//用test()方法检测子元素类名是否包含指定类名
            if (theClass.test(allClass)){
//将包含的元素添加到存储数组中
                result.push(all[i])
            }       
        }
        return result;      
    }
}

getAttribute和setAttribute

element.getAttribute("属性名") 方法返回元素指定属性名的属性值。
elment.setAttribute("属性名","属性值") 方法添加或者改变现有属性的值。

这里属性值是指HTML元素的属性值如title,src,value等。并非获取CSS属性值

内置函数

replace() 把字符串里的匹配内容替换成目标内容。

stringObj.replace(rgExp,replaceText) 这个语句不会修改stringObj自身的内容,他返回的结果是把stringObj里匹配rgExp(可以使正则或字符串)的部分替换成replaceText之后的字符串。

var a="javascript";  
var b=a.replace("java","big");  
console.log(a); //javascript  
console.log(b); //bigscript  

push()和pop()这两个是一对针对数组的方法。

array.push(x)会把x添加到数组array的最后面。当然可以也可以加个参数x,y,z会依次在数组最后面加上新元素。这条语句返回的是array更新后的长度。

array.pop()会删除array的最后一个元素,并且返回这个被删除的元素。当array为空,pop()不会改变array。返回值为undefined

var a=["python","java","javacript"];  
var b=a.push("c++");  
console.log(b); //4  
console.log(a); //[ 'python', 'java', 'javacript', 'c++' ]  
var c=a.pop();  
console.log(c); //c++  
console.log(a); //[ 'python', 'java', 'javacript' ]  

indexOf() 用于字符串和数组,obj.indexOf(searchX,index)返回一个数值:从obj的第index处开始从左到右查找searchX的首次出现位置,没找到就返回-1。

index不指定时默认值为0 。index为正值但大于或等于数组、字符串的长度时,返回-1 。但是如果被查找的searchX是空字符串,obj为字符串时返回字符串长度,obj为数组时依然返回-1 。

index为负值时,数组和字符串的处理不一样。

字符串string.indexOf(x,index) 如果index小于0,直接当作0处理。 数组array.indexOf(x,index) 如果index小于0。 index为-1时从倒数第一个开始查找x, index为-2时从倒数第二个开始查找x, 依此类推。显然当index负值的数字足够大(大于数组长度)时,其实就是等于从0开始查找。

var  a=[1,2,3,4];  
var  b="javascript";  
c=a.indexOf(3,-2)  
console.log(c);  // 2  
mm=a.indexOf(1,-2);  
console.log(mm);  // -1  
d=b.indexOf("a",-3)  
console.log(d); // 1  

match()、 test()、 exec() regexpObj.test(string)最简单,正则表达式如果和字符串匹配返回true,否则false。

match()和exec()待续。