第一种方式:内嵌
<div οnclick="alert('xx')"></div>
第二种方式:内部
<script>
function test(t){
}
</script>
<div οnclick="test(this)"></div>
第三种方式:通过dom的方式来分配事件
document.getElementById("指定id").οnclick=function(){ 函数体 }
js中的常用事件(列举,不详细列出使用方法)
- onfocus(获得焦点事件)
- onblur(失去焦点的事件)
- onchange事件(select控件选中值发生改变)
- onmouseover(鼠标移动到指定元素上方)
- onmouseout(鼠标移出指定元素)
- onmousedown(鼠标按下)
- onmouseup(鼠标弹起)
- onload 事件
- 阻止默认行为
- 阻止事件传递
关于隐藏和显示
style.display = "none" 隐藏之后位置不存在
style.visibility = "hidden" 这个隐藏之后位置存在
js的自定义对象(重点):
自定义对象的方式:在javascript中,所有的对象都是通过函数来创建
1.直接通过无参的方法来创建,这种情况下,name的信息专属于p,如果再new一个新的p,无法共享name
function Person(){ } //函数
var p = new Person(); //对象
p.name = "a";
2.通过构造方法来创建,这种情况下,name和age是属于所有对象共有的信息
function Person(name,age){
this.name = name;
this.age = age;
}
var p2 = new Person("",12);
alert(p2.name);
3.通过Object来创建(不怎么用)
var p4 = new Object();
p4.name = "";
4.通过字面量方式来创建
var p5 = {
name:"小黑",
age:18,
say:function(){
alert(this.name);
}
}
p5.say();
尚未吃透,未完待续。。。
-----------------------------------------------分割线--------------------------------------------------------------------
js中给函数添加方法:String.prototype.reverse=function(){ }
js的DOM:
DOM:完档对象模型
<html>
<head></head>
<body>
<div id="aa"></div>
<div></div>
</body>
</html>
document.getElementById("aa")
常用方法:
getElementById(""); 根据id找到符合条件的标签
getElementByName(""); 根据标签的name找到所有符合条件的标签<input>
getElementByTagName(""); 根据指定的标签名找到所有符合条件的标签
hasChildNodes() 查看一个节点是否拥有子节点
childNodes 获取一个节点的子节点
nodeName查看节点名称
nodeType 查看节点类型 (1表示元素节点,2表示属性节点,3表示文本节点)
nodeValue 查看节点值
firstChild 获取某个节点下的第一个节点
getAttributeNode 获取某个节点下的属性节点
getAttribute 获取某个节点下的属性节点的值
setAttribute 设置某个节点下的属性节点
注意:nodeValue属性值对于元素节点,其值是不存在的,一般用innerHTML来访问.
对于文本节点,nodeValue的值是文本值.对于属性节点,nodeValue就是属性值
掌握:
createElement 创建一个新节点
createTextNode 创建一个文本节点
appendChild 拼接子节点
insertBefore 在指定节点前面插入目标节点
removeChild 删除节点