js常用属性及方法总结(温习下旧知识)

最新推荐文章于 2024-04-29 20:35:48 发布
babybk
最新推荐文章于 2024-04-29 20:35:48 发布
阅读量542
点赞数
分类专栏： javasctipt 常用属性方法总结文章标签： javascript
本文链接：https://blog.youkuaiyun.com/babybk/article/details/51357014
版权
javasctipt 同时被 2 个专栏收录
62 篇文章
订阅专栏
常用属性方法总结
1 篇文章
订阅专栏
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="box" qwe="张展亮" style="background:#000">
        asdfsdf
    </div>
</body>
<script type="text/javascript">

    //获取指定对象的样式属性getStyle （只读）
    var getStyle = function( obj , attr ){
                return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
            };


    //用正则写getClass（只读）
    var getClass = function(cName,obj){
            obj = obj||document;
            if (obj.getElementsByClassName)
            {
                return obj.getElementsByClassName(cName);
            }
            else
            {   
                var arr = [];
                var tagName = obj.getElementsByTagName('*');
                var reg = new RegExp("\\b"+cName+"\\b");
                for (var i = 0; i < tagName.length; i++) {
                    if (reg.test(tagName[i].class)) 
                    {
                        arr.push(tagName[i]);
                    }
                }
                return arr;
            }

        }

        //node.nodeType             判断节点类型

        //childNodes                获取元素的所有子节点          有兼容问题
        //children                  获取元素所有的孩子元素节点       没有兼容问题
        //firstChild                获取元素的第一个节点              有兼容问题
        //firstElementChild         获取元素的第一个元素节点        没有兼容问题
        //lastChild                 获取元素的第一个节点          有兼容问题
        //lastElementChild          获取元素的最后一个元素节点       有兼容问题
        //nextSibing                获取元素的下一个兄弟节点        有兼容问题
        //nextElementSibing         获取元素的下一个元素节点        有兼容问题
        //previousSibing            获取元素的上一个节点          有兼容问题
        //previousElementSibing     获取元素的上一个元素节点
        //parentNode                获取元素的父节点                不存在兼容问题



        //offsetParent      获取元素的最近定位父级                 不存在兼容问题         
        //offsetLeft        获取元素离他最近定位父级的left值      不存在兼容问题(只可读)
        //offsetTop         获取元素离他最近定位父级的top值           不存在兼容问题(只可读)
        //offsetWidth       获取元素的绝对宽度(边框+内边距+宽度)    不同浏览器有1px误差 推荐使用
        //offsetHeight      获取元素的绝对高度(边框+内边距+高度)    不同浏览器有1px误差
        //clientWidth       获取元素的绝对宽度(内边距+宽度)           没有误差
        //clientHeight      获取元素的绝对高度(内边距+高度)           没有误差
        //scrollWidth       获取元素的绝对宽度(内边距+宽度)           没有误差,但如果有溢出则不同浏览器会有20px误差   不推荐使用
        //scrollHeight      获取元素的绝对高度(内边距+高度)           没有误差,但如果有溢出则不同浏览器会有20px误差   不推荐使用


        //getAttribute("属性")            获取元素的任意属性(这个方法比较强硬)
        //setAttribute("属性","值")        向元素添加任意属性(这个方法比较强硬)
        //removeAttribute("属性")     移除元素中的某个属性

        //obj.currentStyle["属性"]            获取元素最终的style        只可读     只支持ie
        //getComputedStyle(obj).["属性"]  获取元素最终的style        只可读     支持非ie
        /*
            var getStyle = function(obj,attr){
                return obj.currentStyle?obj.currentStyle[attr]:getComputed(obj)[attr];
            }
        */


        //表单部分单选和多选按钮，选中是true，不选中是false


        //document.body.scrollTop               获取当前滚动高度(只兼容谷歌)
        //document.documentElement.scrollTop    获取当前滚动高度(只兼容非谷歌)
        /*
            var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
            注意:如果要设置滚动高度两个都要设置      
        */


        //pageX/Y   获取触点距离body左上角的距离    会随着页面滚动而变化  除ie8-不兼容外,其他都兼容

        var oBox = document.getElementsByClassName("box")[0];   
        oBox.removeAttribute("class");
        console.log(oBox.getAttribute("qwe"));
        console.log(oBox.setAttribute("style","width:500px;height:500px;background:red"));




        //下面是Bom(浏览器对象模型)
        //Bom给我们提供一些方法操作我们的浏览器

        //window.open()打开一个页面(一般浏览器会把他当做垃圾,并拦截他)    参数1:打开的路径   第二个参数:打开的位置(target)
        //window.close()关闭当前页面(一般浏览器都会阻止这个功能，也用不到)
        /*
            window.location用它可以获取当前窗口的地址(他的类型是对象)
                他的属性有:
                    window.location.href:用它可以获取当前窗口的地址(加上这个属性,他的类型就变成了字符串)
                    window.location.search:在当前域名后面加上一个新的地址(一般用于把网页指向一个后台)
                    window.location.hash="#miaodian"形同与锚链接

                href属性举例用法
                    window.location.href= "http://www.baidu.com";(跳转到一个新的页面)
        */
        /*
            window.console.time("test");
                要测试的代码(code)
            window.console.timeEnd("test");
                两者一样接收一个字符串作为参数,字符串相当于计时的id。浏览器会将拥有相同参数(id)的console.time()与console.timeEnd()进行匹配,记录两者之间的时间差。因此,可以通过使用不同的id来对JavaScript程序中不同的地方进行计时
        */
        //window.onscroll(当浏览器滚动时触发该事件)
        //window.onresize(当浏览器窗口改变大小的时候,会触发这个事件)



        //字符串操作
        //new String(obj)                   把对象的值转换为字符串(效果并不理想,不建议用)
        //charAt()                          获取指定字符串索引处索引值
        //charCodeAt()                      获取指定字符串索引处Unicode值
        //length                            属性,直接返回字符串长度
        //toUpperCase()                     将字符串全部转换为大写
        //toLowerCase()                     将字符串全部转换为小写
        //fromCharCode(numX,numX,...,numX)  将一系列Unicode值转换为字符串
        //indexOf()                         返回字符串中特定字符第一次出现的位置
        //lastIndexOf()                     返回字符串中特定字符最后一次出现的位置
        /*
            subString()                     返回字符串中介于两个指定下标之间的字符(两个参数,都不能为负,且第二个参数要比第一个大)
                                            方法返回的子串包括 start 处的字符，但不包括 stop 处的字符
        */
        //slice()                           返回字符串的某个部分，并以新的字符串返回被提取的部分。
        //match()                           在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
        /*
            search()                        检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
                                            只检索一次,如果是正则就算有g标识也没用(忽略大小写请加i)
        */
        //concat()                          用于将多个字符串拼加成一个字符串(可以有多个参数，按顺序拼加)
        //split()                           将某个字符串分隔成多个字符串，可以指定分隔符
        //replace()                         将字符串中的某个子串以特定字符串替代


        //arr.push(att)             向数组后面添加,返回数组长度
        //arr.unshifu(att)          向数组前面添加,返回数组长度
        //arr.pop()                 删除数组最后一个,返回删除的哪个
        //arr.shift()               删除数组第一个,返回删除的哪个
        /*
            arr.splice()            第一个参数为要添加/删除的起始位置
                                    第二个参数为要删除的数量(0个代表不删除)
                                    第三个参数为要添加的新内容
                                    (0,1)从第0位开始删除1个，返回删除的哪个
                                    (0,1,"a")把第0位开始的第一位替换为"a"
                                    (0,0,"a")在第0位后面添加"a"
        */
        /*arr.sort()                按照字符编码来排序
                                    可传函数参数
                                    倒序可以用reverse
        */
        //arr.jion()                以参数为间隔符把数组转换为字符串,返回字符串  



        /*
            setInterval             定时器
            clearInterval           清楚定时器

            setTimeout              延时定时器
            clearTimeout            清除延时定时器
        */                  


</script>
</html>