Jquery网页元素里面的操作以及JSON
如果网页里面有复选框，下拉列表Jquery怎么来操作，主要是怎么选取数据，就是取选中值，第二个是设置哪一项选中
<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<select id="sel">
<option value="张店">张店</option>
<option value="临淄">临淄</option>
<option value="淄川">淄川</option>
<option value="周村">周村</option>
<option value="桓台">桓台</option>
</select>
<input type="button" value="取值" id="qu" />
</body>
<script type="text/javascript">
// 事件：事件源和事件数据
// 事件源就是指谁触发的事件
// 事件数据就是指在触发该事件的时候带了哪些数据
// e:事件数据，如果事件里面用到了数据就要写上e，这里的e是个型参
$("#qu").click(function(e){
alert($("#sel").val());
})
</script>
事件：事件源和事件数据
事件源就是指谁触发的事件
事件数据就是指在触发该事件的时候带了哪些数据
e:事件数据，如果事件里面用到了数据就要写上e，这里的e是个型参
事件数据就是指在触发该事件的时候带了哪些数据
e:事件数据，如果事件里面用到了数据就要写上e，这里的e是个型参
如何设置选中项的值
<input type="button" value="取值" id="qu" />
<input type="button" value="赋值" id="fu" />
</body>
<script type="text/javascript">
$("#qu").click(function(e){
alert($("#sel").val());
})
$("#fu").click(function(){
alert($("#sel").val("淄川"));
})
</script>
取值赋值都用val就可以
checkbox列表 复选框列表Jquery如何操作
<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" /> </body> <script type="text/javascript"> $("#quck").click(function(){ //取复选框的选中值，JS做一个循环 var ck = $(".ck"); for(var i=0; i<ck.length;i++) { //JS方式 //ck[i].checked //用Jquery做,判断是否选中 if(ck.eq(i).prop("checked")) { alert(ck.eq(i).val()); } } }) </script>
这样就取了checkbox 列表所有选中项的值
如果我想设置某一项选中，一点赋值就把这一项选中
<input type="button" value="取值" id="quck" /> <input type="button" value="赋值" id="fuck" /> </body> <script type="text/javascript"> $("#quck").click(function(){ //取复选框的选中值，JS做一个循环 var ck = $(".ck"); for(var i=0; i<ck.length;i++) { //JS方式 //ck[i].checked //用Jquery做,判断是否选中 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); } } }) </script>
这种方式有些复杂，这种不会有BUG
如何用Jquery来操作页面的内容？
一个下拉列表一个文本框还有一个按钮，当我在文本框输入一下内容，点击按钮的时候，我就把内容加到下拉里面！也就是实现添加移除
<script src="jquery-1.11.2.min.js"></script> <style type="text/css"> </style> </head> <body> <select id="sel"> </select> <input type="text" id="shuru" /> <input type="button" value="添加" id="btn" /> <input type="button" value="移除" id="yichu" /> </body> <script type="text/javascript"> $("#btn").click(function(){ //我要实现的操作，我取到用户的输入加到下拉列表里面 //第一步先取用户的输入值 var v = $("#shuru").val(); //第二部要不值扔到select里,select里面只支持option字符串拼接 var str = "<option value='"+v+"'>"+v+"</option>"; $("#sel").append(str);//可追加 }) $("#yichu").click(function(){ var v = $("#shuru").val(); $("[value='"+v+"']").remove();//移除 从页面移除 什么都可以 }) </script>
append 追加
remove 移除
这两个后期会经常用，移除是从页面移除，什么都可以
当然也可以自己造元素
<script type="text/javascript"> $("#btn").click(function(){ var v = $("#shuru").val(); //造元素 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();//移除 从页面移除 什么都可以 }) </script>
自己造元素也可以实现上边的效果
针对于remove我们来做一个练习
<script src="jquery-1.11.2.min.js"></script> <style type="text/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;} </style> </head> <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> </body> <script type="text/javascript"> $("#guan").click(function(){ //做一个DIV扔到页面上 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"); }) </script>
这样效果就可以实现了，做一些效果很方便
接下来我们在一起看一下JSON
JSON是一个数据的载体
JSON是一种数据格式
JSON比较像PHP里面的关联数组，它里面存的内容也是key和value成对存在的
JSON在调用接口的时候也会经常使用到
JSON在JS的面向对象里也可以使用它可以简单的做一个相当于是一个类，比较适合在JS里面解析，在JS应用频率也比较高，可以看成是JS里面的一种类型
做一个练习
<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>
三个都能取到
XML 和JSON，都是数据的传输格式，所有网上的API接口都是返回这两类数据
因为这两种数据也可以跨平台传输
