js基础小结(2)

js 操作css 的属性

语法:
document.getElementById("id").style.属性="值"

属性:就是css中属性 css属性有"-" 例如:backgroud-color
若有"-" 只需要将"-"删除,后面第一个字母变大写即可。

//给标签添加css样式 通过js操作
// 只需要获得标签 然后再通过元素的style属性进行设置就行

  • 注意:
    只要是window对象的属性和方法,可以把window省略
    window.onload 等价于 onload
    window.setInterval() 等价于 setInterval()
    window 对象有onload的方法可以直接使用

code example:



    
        
        
    
    
        
        

window对象模型

js的组成:
  • ECMAScript(语法)
  • BOM(浏览器对象模型)
  • DOM(文档对象模型)

bom:
1 window:浏览器打开的窗口
2 location:定位信息 (地 址栏)
3 history:历史
4 Navigator(浏览器的版本等相关信息 几乎很少用)
5 Screen(获得屏幕等相关信息 几乎很少用

dom:
1 document(使用最多)
2 element
3 attributate
4 event



    
        
        
    
    
        
    
    


loaction 与history的用法



    
        
        
    
    
        
        
    
    


事件焦点



    
        
        
    
    
        
              请输入:
    
    


dom 获取元素

1 根据id 获得元素 
   document.getElementById()
2 根据 标签获得元素
   document. getElementByTagName() 返回数组
3 获得一类标签(返回数组)
   document.getElementsByClassName():需要给标签添加class属性 
   document.getElementsByName():需要给标签添加name属性

dom 分析

dom(文档对象模型)
    当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)
    节点(Node)
        文档节点 document
        元素节点 element
        属性节点 attribute
        文本节点 text
获取节点:
通过document可以获取其他节点:
常用方法:
document.getElementById("id值"):获取一个特定的元素document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)
document.getElementsByClassName("class属性的值"):通过class属性获取一类元素(多个)
document.getElementsByName("name属性的值"):通过name属性获取一类元素(多个)

        设置获取获取节点的value属性
            dom对象.value;获取
            dom对象.value="";设置
        设置或者获取节点的标签体
            dom对象.innerHTML;获取
            dom对象.innerHTML="";设置
        获取或者设置style属性
            dom对象.style.属性;获取
            dom对象.style.属性="";设置
        获取或者设置属性
            dom对象.属性

js补充

数组:
    语法:
        new Array();//长度为0
        new Array(size);//指定长度的
        new Array(e1,e2..);//指定元素
        非官方
            var arr4=["aa","bb"];
    常用属性:
        length
    注意:
        数组是可变的
        数组可以存放任意值
    常用方法:(了解)
        存放值:对内容的操作
            pop():弹 最后一个
            push():插入 到最后
            
            shift():删除第一个
            unshift():插入到首位
        打印数组:
            join(分隔符):将数组里的元素按照指定的分隔符打印
        拼接数组:
            concat():连接两个或更多的数组,并返回结果。
        对结构的操作:
            sort();排序
            reverse();反转
引用类型总结:
    原始类型中的String Number Boolean都是伪对象,可以调用相应的方法
    Array:数组
    String:
        语法:
            new String(值|变量);//返回一个对象
            String(值|变量);//返回原始类型
        常用方法:
            substring(start,end):[start,end)
            substr(start,size):从索引为指定的值开始向后截取几个
            
            charAt(index):返回在指定位置的字符。
            indexOf(""):返回字符串所在索引
            
            replace():替换
            split():切割
            
        常用属性:length 
    Boolean:
        语法:
            new Boolean(值|变量);
            Boolean(值|变量);
            非0数字 非空字符串 非空对象 转成true
    Number
        语法:
            new Number(值|变量);
            Number(值|变量);
        注意:
        
            null====>0 
            fale====>0 true====>1
            字符串的数字=====>对应的数字
            其他的NaN
    Date:
        new Date();
        常用方法:
            toLocalString()
    RegExp:正则表达式
        语法:
            直接量语法  /正则表达式/参数
            直接量语法  /正则表达式/
            
            new RegExp("正则表达式")
            new RegExp("正则表达式","参数") 
            参数:
                i:忽略大小写
                g:全局
            常用方法:
                test() :返回值为boolean
    Math:
        Math.常量|方法
        Math.PI
        Math.random()  [0,1)
        
    全局:
        ★
        decodeURI() 解码某个编码的 URI。 
        encodeURI() 把字符串编码为 URI。

        Number():强制转换成数字
        String():转成字符串
        
        parseInt():尝试转换成整数
        parseFloat():尝试转换成小数
        
        eval() 计算 JavaScript 字符串,并把它作为脚本代码来执行。 

你可能感兴趣的:(js基础小结(2))