在js中用对象获取list的value

JavaScript016

在js中用对象获取list的value,第1张

1、html中有如下input控件，代码如下<input type="hidden" name="productName" id="productName" value="测试产品名称">。

2、可以使用js通过id获取，var value = document.getElementById("productName").value。

3、下面我们alert(value),看一下是否获取到input的value值，可以看到，input的value值已经成功弹出。

4、还可以使用document.getElementsByName(name)的方法。

5、测试一下结果，同样还是alert，可以看到，依旧能够成功弹出value的值。

6、还可以通过jquery来获取input的value值，这需要引入jquery的js包，然后通过代码$("#id").val()获取，上面的例子可以使用$("#productName").val()。

7、也可以使用jquery的$("input['name=name']").val()来进行获取，比如上面的例子可以使用$("input['name=productName']").val()。

List是java集合对象，js内置对象中并没有List对象，但是你可以根据js的特性，构造一个List对象，但是基本上可以确定的是js list对象也是依赖于Array,或者是Object对象。

但是个人感觉没有那个必要，

对于js遍历java集合对象(list)的话，需要进行一些转化操作，可以将java中的list对象中的数据通过

json-lib来转成json。如果再做处理

很简单的一个使用：点击菜单，能够显示下面的或者不显示

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>