jQuery的几个应例题、JSON基础

2017-01-08 18:49:25来源:作者:人点击

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












  



  

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台