还剩最后两个,JavaScript的基本内容就算是告一段落了,我当然知道这很不全面,但是掌握这些+会查API就足够应付一般的问题了,像js中的原型、闭包等高级一些的知识点,等以后用到的时候再去深入研究也不迟。
一、js操作节点
js中的知识点有很多,对于初学者来说不可能一下全都记住,那就先把一些常用的内容记在心里,然后再完善自己的知识库,下面展示的是操作页面属性的常用方法。
<head>
<title></title>
<script type="text/javascript">
function change(){
var userName = document.getElementById("userName");
userName.className="lala";
userName.value="改好了";
//js获取元素中的属性
alert("color="+userName.getAttribute("color"));//color=blue
alert("myAttr="+userName.getAttribute("myAttr"));//myAttr=one
//js设置元素中的属性
userName.setAttribute("color","red");
userName.setAttribute("myAttr","two");
userName.style.cursor="pointer";
}
</script>
</head>
<body>
<input type="text" id="userName" class="huhu" style="cursor:default;" color="blue" myattr="one" value=""/>
<input type="button" value="改起来" onclick="change()"/>
</body>
页面刚打开时的截图如下:
点击“改起来”按钮后的截图如下:
二、void运算符
void()可以保留超链接的样式,而且点击超链接之后不会进行页面跳转,有点意思吧。
下面的代码< body>中有很多换行符,所以页面打开后会出现纵向的滚动条。如果href=”#”的话,点击之后虽然不会跳转到其他页面,但是会跳转到本页面的顶部;如果href=”javascript:void(0)”的话,那点击之后就既不会跳转到其他页面,也不会跳转到本页面的其他位置,这就是void()运算符的作用。
<head>
<title>JS代码void运算符</title>
<script type="text/javascript">
function sayHello(){
alert("Hello");
}
</script>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<!--保留超链接的样式,不进行页面跳转-->
<a href="javascript:void(0)" onclick="sayHello()">超链接</a>
</body>
上面的例子,onclick事件句柄绑定的函数会正常触发,而且点击之后不会进行页面跳转。