js常用属性及方法

 js数据类型

1 函数 : 重复执行的代码块
<script type="text/javascript">
    // 函数定义
    function fnAlert(){
        alert('hello!');
    }
    // 函数执行
    fnAlert();
</script>

2 函数传参

<script type="text/javascript">
    // 函数定义
    function fnAlert(){
        alert('hello!');
    }
    // 函数执行
    fnAlert();
</script>

3 条件语句: 控制程序的走向,条件运算符
==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

4 获取元素的方法

a 通过内置对象document的getElementByid方法获取html对象
<script type="text/javascript">  # 程序由上而下执行,这种方式一般在下面写
    var oDiv = document.getElementById('div1');
</script>  
....
<div id="div1">这是一个div元素</div>

# 或者使用window.onload将函数放在里面
<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

b


5 操作元素的属性

获取页面上的元素后,对元素进行操作,包括读与写
读取属性: var 变量 = 元素.属性名
改写属性: var 元素.属性名 = 新属性
属性名在js里面的写法
1 html属性与js里面属性一致
2 class属性改写className
3 style属性有横杠的改成驼峰式如: font-size-->fontSize

<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // 读取属性值
        var sValue = oInput.value;
        var sType = oInput.type;
        var sName = oInput.name;
        var sLinks = oA.href;
        // 写(设置)属性
        oA.style.color = 'red';
        oA.style.fontSize = sValue;
    }

</script>

<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">天下英雄出我辈,一入江湖岁月催</a>
 innerHTML: 可以读取或者写入标签包裹的内容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //读取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //写入
        oDiv.innerHTML = '<a href="http://www.itcast.cn">黄图霸业谈笑中,不胜人生一场醉<a/>';
    }
</script>

......

<div id="div1">这是一个div元素</div>

事件属性及匿名函数 (样式,id ,类属性,事件属性)
事件属性: 鼠标点击事件属性(onclick)，鼠标移入事件属性(onmouseover),鼠标移出事件属性(onmouseout),将函数名称赋值给元素的事件属性,可以把事件和函数关联起来
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');

    oBtn.onclick = myalert;

    function myalert(){
        alert('ok!');
    }
}
    // 直接将匿名函数赋值给绑定的事件

    oBtn.onclick = function (){
        alert('ok!');
    }
}
</script>