很简单的一个使用:点击菜单,能够显示下面的或者不显示
1,主要目的:: 展现的是的一个菜单项,然后点击一下,隐藏,点一下,弹出下面的内容
用到的是 overflow:hidden 和 overflow="visible"这两个属性 在点击的function中,设置属性应该node.style.overflow="visible";当然设置tr的高度也是很重要的,要恰好让其他的选项隐蔽。
2,采用同样的技术,多加几个,但是就是传参数比较麻烦,采用this传参很常用
具体代码如下。
<!DOCTYPE html>
<html>
<head>
<!-- 1,主要目的:: 展现的是的一个菜单项,然后点击一下,隐藏,点一下,弹出下面的内容
用到的是 overflow:hidden 和 overflow="visible"这两个属性 在点击的function中,设置属性应该
node.style.overflow="visible";
2,采用同样的技术,多加几个,但是就是传参数比较麻烦
-->
<title>list.html</title>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
dl{
height:18px;/*优先级问题,必须要写*/
overflow:hidden;
}
dd{
margin:0px;
padding:0px;
}
.close{
height:18px;/*优先级问题,必须要写*/
overflow:hidden;
}
.open{
height:80px;
overflow:visible;
background-color:#ff8000;
}
</style>
<script type="text/javascript">
function click2(node1){
// alert("aa"+node.nodeName);// td
var nodes=node1.parentNode;
// alert(nodes.nodeName);
// alert("aa"+nodes.className);
//※※通过传进的对象 判断采用哪种css模式
if(nodes.className=="open"){
nodes.className="close";
}else{
nodes.className="open";
}
}
</script>
</head>
<body>
<!--层次列表-->
<!--当很多时候采用传参就很麻烦,每个都需要去传参
<dl>
<dt onclick="click1(0)">菜单条1</dt>
<dd>菜单1</dd>
<dd>菜单2</dd>
<dd>菜单3</dd>
<dd>菜单4</dd>
</dl>
<dl>
<dt onclick="click1(1)">菜单条2</dt>
<dd>菜单11</dd>
<dd>菜单22</dd>
<dd>菜单33</dd>
<dd>菜单44</dd>
</dl>
<dl>
<dt onclick="click1(2)">菜单条3</dt>
<dd>菜单12</dd>
<dd>菜单23</dd>
<dd>菜单34</dd>
<dd>菜单45</dd>
</dl>
-->
<br/>
<br/>
<hr/>
<!--<dl class="close">先手动采用css测试,可以然后采用编程使用-->
<dl>
<dt onclick="click2(this)">1菜单条1</dt>
<dd>菜单1</dd>
<dd>菜单2</dd>
<dd>菜单3</dd>
<dd>菜单4</dd>
</dl>
<dl>
<dt onclick="click2(this)">2菜单条2</dt>
<dd>菜单11</dd>
<dd>菜单22</dd>
<dd>菜单33</dd>
<dd>菜单44</dd>
</dl>
<dl>
<dt onclick="click2(this)">3菜单条3</dt>
<dd>菜单12</dd>
<dd>菜单23</dd>
<dd>菜单34</dd>
<dd>菜单45</dd>
</dl>
</body>
</html>
list = [w , h]
你list是个数组,只能通过脚标获取
list[0]获取的就是w了,不用再点了
如果你list是个对象
比如
list = {"w":"I am w",
"h":"I am h"}
那么list ["w"] 或者list.w就可以获取w了。
javascript是一个“基于对象”的编程语言,不是面向对象的编程语言。
你要知道javascript中的function定义的函数实际上就是Function对象实例。
例如:
function demo(x){alert(x);}
实际上等价于:
Function demo = new Function("x","alert(x)");
所以你如果想要用javascript来模拟面向对象编程(例如Java的类),那么就可以用function来模拟Class,用function的原型prototype或者嵌套function来模拟类的方法或者属性。下面给你一个简单的例子:
//模拟学生类,可以带参数,例如initName
function Student(initName){var name = initName; //模拟学生类的属性name}
Student.prototype.printName = function(){ //定义Student类prototype中的printName函数
alert(this.name);}
测试时可以这样写:
var student = new Student("张三"); //创建一个“Student对象”,实际上是一个Function实例对象
student.printName(); //执行student对象的printName函数。