javascript的用法

1.找元素
var a = document.getElementById("test"); //根据ID找,只能找到一个
var a = document.getElementsByClassName("test");//根据class名找，可以找到多个，返回数组
var a = document.getElementsByTagName("div"); //根据标签名找，可以找到多个，返回数组
var a = document.getElementsByName("uid"); //根据Name找，可以找到多个，返回数组，主要针对于表单元素

2.控制元素
var a = document.getElementById("test");
a.remove(); //移除元素
var s = document.createElement("span"); //创建元素
a.appendChild(s); //追加子元素

3.操作内容
普通元素
var a = document.getElementById("test");
alert(a.innerText); //取元素的文本内容
a.innerText = "<b>加粗</b>"; //给元素赋文本值
alert(a.innerHTML); //取元素的HTML代码内容
a.innerHTML = "<b>加粗</b>";//给元素扔一个HTML代码

表单元素
var a = document.getElementById("uid");
a.value = "用户名"; //给元素赋值
alert(a.value); //取值

4.操作属性
var a = document.getElementById("test");
a.setAttribute("bs","100"); //添加属性
alert(a.getAttribute("bs")); //获取属性值
a.removeAttribute("bs"); //移除属性

5.操作样式
var a = document.getElementById("test");
a.style.backgroundColor = "red"; //设置样式
alert(a.style.width); //获取样式,只能获取内联的
a.style.width = ""; //移除样式

二、例子鼠标点击事件变红色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.item{ width:200px; height:200px; background-color:#60F; float:left; margin:2px;}
</style>
</head>

<body>

<div class="item" onclick="sel(this)"></div>
<div class="item" onclick="sel(this)"></div>
<div class="item" onclick="sel(this)"></div>
<div class="item" onclick="sel(this)"></div>
<div class="item" onclick="sel(this)"></div>
<div class="item" onclick="sel(this)"></div>
<div class="item" onclick="sel(this)"></div>
<div class="item" onclick="sel(this)"></div>
<div class="item" onclick="sel(this)"></div>
<div class="item" onclick="sel(this)"></div>
<div class="item" onclick="sel(this)"></div>
<div class="item" onclick="sel(this)"></div>

</body>
<script type="text/javascript">

function sel(a){
    //让所有的元素变为初始颜色
    var sy = document.getElementsByClassName("item");
    for(var i=0;i<sy.length;i++){
        sy[i].style.backgroundColor = "blue";
    } 
    //让该元素变选中
    a.style.backgroundColor="red";
}

</script>
</html>

 

三、关于鼠标的事件
onclick 鼠标单击触发
ondblclick 鼠标双击触发
onmouseover 鼠标移上触发
onmouseout 鼠标离开触发
onmousemove 鼠标移动触发

关于键盘的事件
onkeydown 键盘按下触发
onkeyup 按键抬起的时候触发
onkeypress 按键触发

关于表单的事件
onfocus 获得焦点触发
onblur 失去焦点触发
onchange 内容改变触发


posted on 2017-06-19 21:24  qdljyl  阅读(151)  评论(0)  编辑  收藏  举报

导航