1.下拉列表取值、赋值
(1)写个下拉列表,如下:
<select id="sel">
<option value="山东">山东</option>
<option value="淄博">淄博</option>
<option value="临淄">临淄</option>
<option value="周村">周村</option>
<option value="张店">张店</option>
<option value="桓台">桓台</option>
</select>
<input type="button" value="取值" id="qu" />
<input type="button" value="赋值" id="fu" />
(2)给取值写事件,单击取值时,取得是下拉列表的值
$("#qu").click(function(){
alert($("#sel").val()); //弹出下拉列表中的value值的对话框
})
(3)给赋值写事件,单击赋值按钮后,默认显示下拉列表的值
$("#fu").click(function(){
$("#sel").val("桓台"); //value值可以换
})
单击赋值按钮后:
2.复选框的取值和赋值
(1)和下拉列表一样,写个复选框
<input type="checkbox" class="ck" value="张店" />张店
<input type="checkbox" class="ck" value="淄川" />淄川
<input type="checkbox" class="ck" value="周村" />周村
<input type="checkbox" class="ck" value="临淄" />临淄
<input type="checkbox" class="ck" value="博山" />博山
<input type="button" value="取值" id="quck" />
<input type="button" value="赋值" id="fuck" />
(2)给取值写事件,单击取值时,取得是复选框的值
$("#quck").click(function(){
var ck = $(".ck"); //找到复选框
for( var i=0;i<ck.length;i++) //循环
{
if(ck.eq(i).prop("checked")) //判断复选框的选中状态
{
alert(ck.eq(i).val());
}
}
})
(3)给赋值写事件,单击赋值按钮后,默认显示复选框的值
$("#fuck").click(function(){
var zhi = "周村";
$("[value='"+zhi+"']").prop("checked",true); //属性找元素,修改属性
})
结果就是周村被选中了
3.将文本框中的内容添加到下拉列表
(1)写个下拉列表、文本框和按钮
<select id="s"></select> //下拉列表没有值,从文本框中向这里填值
<input type="text" id="shuru" /> //文本框
<input type="button" value="添加" id="btn" />
<input type="button" value="移除" id="yichu" />
(2)对添加按钮写事件,单击添加按钮,文本框中的值添加到下拉列表
$("#btn").click(function(){
var a = $("#shuru").val();
var str = "<option value='"+a+"'>"+a+"</option>"; //拼接字符串显示下拉列表的项
$("#s").append(str); //追加,这样可以让值添加至下拉列表,而不是每次只添加一次,用html是修改的代码,每次添加也只是一个,再添加时上一个值就没有了
})
(3)对移除按钮添加事件,单击移除按钮,在文本框显示的值也从下拉列表中移除
$("#yichu").click(function(){
var b = $("#shuru").val();
$("[value='"+b+"']").remove(); //移除
})
4.遮罩层
(1)写按钮
<div id="shang" style="position:absolute; z-index:2; ">
<input type="button" value="关灯" id="guan" />
<input type="button" value="开灯" id="kai" />
</div>
(2)点击关灯,显示遮罩层
$("#guan").click(function(){
var str = "<div id='zz'></div>"; //添加一个层,样式写在头部:遮罩层是半透明的黑色
$("body").append(str); //这个层写在body中
$(this).css("display","none"); //单击关按钮,开灯按钮显示,关灯按钮隐藏
$("#kai").css("display","block");
})
#zz{width:100%; height:100%; position:absolute; left:0px; top:0px; background-color:black; z-index:1;filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}
(3)单击开灯按钮,遮罩层不显示
$("#kai").click(function(){
$("#zz").remove(); //移除遮罩层
$("#guan").css("display","block");
$(this).css("display","none"); //单击开按钮,开灯按钮隐藏,关灯按钮显示
})
5.JSON
JSON是一种数据格式,JSON比较像php里面的关联数组,它里面存的内容也是key和value成对存在的
例如:
var js = {
"one":"hello",
"two":"world",
//"three":"汉族", //1.
"three":{"n1":"汉族","n2":"回族"} //2.
};
//alert(js.three); //1.
//alert(js.three.n2); //2.
1. 2.
全部显示js中的
var js = {
"one":"hello",
"two":"world",
"three":"汉族",
};
//使用foreach的形式来遍历JSON数据
for(var k in js)
{
alert(js[k]); //遍历显示
}