JQuery（2）

JQuery下拉框操作：

取值赋值操作

body代码：

<select id="sel">
	<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" />

　　

js代码：

$("#qu").click(function(e){
		alert($("#sel").val());
	})
$("#fu").click(function(){
		$("#sel").val("广东");
	})

　　

选取下拉选项后，点击取值：

点击赋值下拉选项变为广东选项。

 添加移除选项：

body：

<select id="sel">

</select>

<input type="text" id="shuru" />
<input type="button" value="添加" id="btn" />
<input type="button" value="移除" id="yichu" />

　　

js：

$("#btn").click(function(){
	var v = $("#shuru").val();
	//var str = "<option value='"+v+"'>"+v+"</option>";  //拼接字符串方法

	//造元素方法
	var op = document.createElement("option");
	op.setAttribute("value",v);
	op.innerHTML = v;

	$("#sel").append(op); //追加

})

$("#yichu").click(function(){
		var v = $("#shuru").val(); 

		$("[value='"+v+"']").remove(); //移除
	})

　　

输入值点击添加：

输入值移除：

复选框操作

取值赋值操作：

body：

                <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" />

　　

js：

$("#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());
				}
			}
		})
		$("#fuck").click(function() {
			var zhi = "上海";
			/*var ck = $(".ck");                   //循环遍历方法
			for(var i=0;i<ck.length;i++)
			{
				if(ck.eq(i).val() == zhi)
				{
					ck.eq(i).prop("checked",true);
				}
			}*/

			$("[value='" + zhi + "']").prop("checked", true); //拼接字符串方法
		})

　　

点击取值会输出选到的值，点击赋值上海选项会被选中。

JQuery控制元素

css

#zz {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0px;
			top: 0px;
			background-color: black;
			z-index: 5;
			filter: alpha(opacity=50);
			-moz-opacity: 0.5;
			-khtml-opacity: 0.5;
			opacity: 0.5;
		}

　　

body：

<div id="shang" style="position:absolute; z-index:10; left:100px; top:100px;">
			<input type="button" value="关灯" id="guan" />
			<input type="button" value="开灯" id="kai" />
		</div>

　　

js：

$("#guan").click(function() {
			var str = "<div id='zz'></div>";
			$("body").append(str);
			$(this).css("display", "none");
			$("#kai").css("display", "block");
		})
		$("#kai").click(function() {
			$("#zz").remove();
			$("#guan").css("display", "block");
			$(this).css("display", "none");
		})

　　

效果：

JSON

JSON是一种数据格式
JSON比较像php里面的关联数组，它里面存的内容也是key和value成对存在的

<script type="text/javascript">

	var js = {
		"one":"hello",
		"two":"world",
		"three":"汉族"
		};

	//alert(js.three.n2);

	//使用foreach的形式来遍历JSON数据
	for(var k in js)
	{
		alert(js[k]);
	}

</script>