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>