初探JavaScript魅力-01
JavaScript是一门用于给网页添加功能、交互的脚本语言。
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
#div1{
width:200px;
height: 100px;
background: #CCC;
border: 1px solid #999;
display: none;
}
</style>
</head>
<body>
<input type="checkbox" onmouseover="div1.style.display='block';" onmouseout="div1.style.display='none';" />
<!--div1是div的id,代表了选择了该div。.表示所属关系。
div1的style(样式)里的display属性赋值为block -->
<div id="div1">
为了您的信息安全。。。。
</div>
</body>
</html>
直接使用ID进行元素选择是不兼容的(火狐或者低版本的chrome),我们应该采用更加兼容的写法:document.getElementById()。
因此我们可以将上面的代码进行改写:
<input type="checkbox" onmouseover="getElementById('div1').style.display='block';" onmouseout="getElementById('div1').style.display='none';" />
通过getElementById获取了id为div1的元素来使用,这样在任何浏览器下都不会产生兼容性问题了。
初探JavaScript魅力-02
初探JavaScript魅力-02
例外的className
HTML里的属性名和JS里保持一致,HTML里面怎么写,VALUE里面就怎么写——唯一的例外就是className。因为JS里的class是保留字,在JS里有其他作用,如果我们在JS里直接使用HTML里的class属性,程序是不会执行的,所以JS用className代替了class。当我们想改变一个元素的class时,采用以下写法:
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {
width:100px;
height:100px; border:
1px solid black;
}
.box {
background:red;
}
</style>
<script>
function toRed()
{
var oDiv=document.getElementById('div1');
oDiv.className='box'; //className,而不是class
}
</script>
</head>
<body>
<input type="button" value="变红" onclick="toRed()" />
<div id="div1">
</div>
</body>
</html>
初探JavaScript魅力-03
初探JavaScript魅力-03
函数传参
functionsetStyle(name,value)
{
var oDiv=document.getElementById('div1');
oDiv.style.name=value;
}
实际上,这个函数是无法正常运行的。原因出在这种写法下,浏览器并不会认为oDiv.style.name中的name和参数中的name是同一个东西,而会认为这是一个叫“name”的样式,当然css中并没有名为“name”的样式,因此无法执行。
第一种操作属性的方法就是我们已经学过的使用.字符连接,来操作属性。而第二种操作属性的方法,是通过[‘属性名’]的方法来进行操作。具体的使用方法如下:
function setText()
{
var oTxt=document.getElementById.(‘txt1’);
//第一种操作属性的方法
oTxt.value=’dsfasdfasdf’;
//第二种操作属性的方法
oTxt[‘value’]=’dsfasdfasdf’;
}
二者不存在任何区别。第一种比第二种更为简便,因此大多选用第一种写法。而第二种写法的好处是,[]内放置的是一个字符串(关于字符串的具体内容本课末会讲),而字符串可以通过变量来储存,也可以通过参数传递具体的值。
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{
width:200px;
height:200px;
background:red;
}
</style>
<script>
function setStyle(name, value)
{
var oDiv=document.getElementById('div1');
oDiv.style[name]=value;
}
</script>
</head>
<body>
<input type="button" value="变宽" onclick="setStyle('width', '400px')" />
<input type="button" value="变高" onclick="setStyle('height', '400px')" />
<input type="button" value="变绿" onclick="setStyle('background', 'green')" />
<div id="div1">
</div>
</body>
</html>
在JS里,任何使用.字符的地方,都可以用[]代替
[
第四课初探JavaScript魅力-04
](http://igeekbar.com/igeekbar/post/558.htm)
css里的样式优先级。在css里,样式的优先级代表了css优先执行的代码。样式优先级的顺序如下(从高到低):
1 行间样式
2 ID
3 class
4 标签
5 通配符
提取行间事件与匿名函数
行为,样式,结构三者分别对应着JavaScript,css和HTML,而将行为,样式,结构三者分离,简单来说,就是避免添加行间样式和行间事件。
getElementById一次只能获取一个元素(因为id在HTML里不可重复),而getElementsByTagName一次可以获取一组元素。