Jquery网页元素里面的操作以及JSON

时间：2021-01-02 09:35:21

如果网页里面有复选框，下拉列表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>

Jquery网页元素里面的操作以及JSON

事件：事件源和事件数据
事件源就是指谁触发的事件
事件数据就是指在触发该事件的时候带了哪些数据
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>

Jquery网页元素里面的操作以及JSON

取值赋值都用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>

Jquery网页元素里面的操作以及JSON

Jquery网页元素里面的操作以及JSON

Jquery网页元素里面的操作以及JSON

这样就取了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>

Jquery网页元素里面的操作以及JSON

这种方式有些复杂，这种不会有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>

Jquery网页元素里面的操作以及JSON

Jquery网页元素里面的操作以及JSON

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>

Jquery网页元素里面的操作以及JSON

Jquery网页元素里面的操作以及JSONJquery网页元素里面的操作以及JSON

这样效果就可以实现了，做一些效果很方便

接下来我们在一起看一下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>

Jquery网页元素里面的操作以及JSON

Jquery网页元素里面的操作以及JSON

Jquery网页元素里面的操作以及JSON

三个都能取到

XML 和JSON，都是数据的传输格式，所有网上的API接口都是返回这两类数据

因为这两种数据也可以跨平台传输

相关文章