jQuery的几个应例题、JSON基础

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]);  //遍历显示
}