如果网页里面有复选框，下拉列表Jquery怎么来操作，主要是怎么选取数据，就是取选中值，第二个是设置哪一项选中

  1. <script src="jquery-1.11.2.min.js"></script>
  2. <style type="text/css">
  3.  
  4. </style>
  5. </head>
  6.  
  7. <body>
  8. <select id="sel">
  9.     <option value="张店">张店</option>
  10.     <option value="临淄">临淄</option>
  11.     <option value="淄川">淄川</option>
  12.     <option value="周村">周村</option>
  13.     <option value="桓台">桓台</option>
  14. </select>
  15.  
  16. <input type="button" value="取值" id="qu" />
  17.  
  18. </body>
  19. <script type="text/javascript">
  20.  
  21. // 事件：事件源和事件数据
  22. // 事件源就是指谁触发的事件
  23. // 事件数据就是指在触发该事件的时候带了哪些数据
  24. // e:事件数据，如果事件里面用到了数据就要写上e，这里的e是个型参
  25. $("#qu").click(function(e){
  26.  
  27.           alert($("#sel").val());
  28.  
  29.     })
  30.  
  31. </script>

事件：事件源和事件数据
事件源就是指谁触发的事件
事件数据就是指在触发该事件的时候带了哪些数据
e:事件数据，如果事件里面用到了数据就要写上e，这里的e是个型参
 
如何设置选中项的值
  1. <input type="button" value="取值" id="qu" />
  2. <input type="button" value="赋值" id="fu" />
  3. </body>
  4. <script type="text/javascript">
  5.  
  6. $("#qu").click(function(e){
  7.  
  8.           alert($("#sel").val());
  9.     })
  10.  
  11. $("#fu").click(function(){
  12.         alert($("#sel").val("淄川"));
  13.     })
  14. </script>

取值赋值都用val就可以

checkbox列表 复选框列表Jquery如何操作

  1. <input type="checkbox" class="ck" value="张店" />张店
  2. <input type="checkbox" class="ck" value="临淄" />临淄
  3. <input type="checkbox" class="ck" value="淄川" />淄川
  4. <input type="checkbox" class="ck" value="桓台" />桓台
  5. <input type="checkbox" class="ck" value="周村" />周村
  6.  
  7. <input type="button" value="取值" id="quck" />
  8. </body>
  9. <script type="text/javascript">
  10.  
  11. $("#quck").click(function(){
  12.          //取复选框的选中值，JS做一个循环
  13.          var ck = $(".ck");
  14.          for(var i=0; i<ck.length;i++)
  15.          {
  16.              //JS方式
  17.              //ck[i].checked
  18.              //用Jquery做,判断是否选中
  19.              if(ck.eq(i).prop("checked"))
  20.              {
  21.                  alert(ck.eq(i).val());
  22.              }
  23.          }
  24.     })
  25. </script>

这样就取了checkbox 列表所有选中项的值

如果我想设置某一项选中，一点赋值就把这一项选中

  1. <input type="button" value="取值" id="quck" />
  2. <input type="button" value="赋值" id="fuck" />
  3. </body>
  4. <script type="text/javascript">
  5.  
  6. $("#quck").click(function(){
  7.          //取复选框的选中值，JS做一个循环
  8.          var ck = $(".ck");
  9.          for(var i=0; i<ck.length;i++)
  10.          {
  11.              //JS方式
  12.              //ck[i].checked
  13.              //用Jquery做,判断是否选中
  14.              if(ck.eq(i).prop("checked"))
  15.              {
  16.                  alert(ck.eq(i).val());
  17.              }
  18.          }
  19.     })
  20. $("#fuck").click(function(){
  21.          var zhi = "临淄";
  22.          var ck = $(".ck");
  23.          for(var i=0;i<ck.length;i++)
  24.          {
  25.              if(ck.eq(i).val() == zhi)
  26.              {
  27.                 ck.eq(i).prop("checked",true);
  28.              }
  29.          }
  30.     })
  31.  
  32. </script>

这种方式有些复杂，这种不会有BUG

如何用Jquery来操作页面的内容？

一个下拉列表一个文本框还有一个按钮，当我在文本框输入一下内容，点击按钮的时候，我就把内容加到下拉里面！也就是实现添加移除

  1. <script src="jquery-1.11.2.min.js"></script>
  2. <style type="text/css">
  3.  
  4. </style>
  5. </head>
  6.  
  7. <body>
  8.  
  9. <select id="sel">
  10. </select>
  11. <input type="text" id="shuru" />
  12. <input type="button" value="添加" id="btn" />
  13. <input type="button" value="移除" id="yichu" />
  14. </body>
  15. <script type="text/javascript">
  16. $("#btn").click(function(){
  17.     //我要实现的操作，我取到用户的输入加到下拉列表里面
  18.     //第一步先取用户的输入值
  19.     var v = $("#shuru").val();
  20.     //第二部要不值扔到select里,select里面只支持option字符串拼接
  21.     var str = "<option value='"+v+"'>"+v+"</option>";
  22.     $("#sel").append(str);//可追加
  23.  
  24.     })
  25. $("#yichu").click(function(){
  26.       var v = $("#shuru").val();
  27.       $("[value='"+v+"']").remove();//移除  从页面移除 什么都可以
  28.     })
  29.  
  30. </script>

append  追加

remove  移除

这两个后期会经常用，移除是从页面移除，什么都可以

当然也可以自己造元素

  1. <script type="text/javascript">
  2. $("#btn").click(function(){
  3.  
  4.     var v = $("#shuru").val();
  5.  
  6.     //造元素
  7.     var op = document.createElement("option");//创建元素
  8.     op.setAttribute("value",v);
  9.     op.innerHTML = v;
  10.  
  11.     $("#sel").append(op);//可追加
  12.  
  13.     })
  14. $("#yichu").click(function(){
  15.       var v = $("#shuru").val();
  16.       $("[value='"+v+"']").remove();//移除  从页面移除 什么都可以
  17.     })
  18.  
  19. </script>

自己造元素也可以实现上边的效果

针对于remove我们来做一个练习

  1. <script src="jquery-1.11.2.min.js"></script>
  2. <style type="text/css">
  3. #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;}
  4.  
  5. </style>
  6. </head>
  7.  
  8. <body>
  9. <div id="shang" style="position:absolute; z-index:10; left:100px; top:100px;">
  10. <input type="button" value="关灯" id="guan" />
  11. <input type="button" value="开灯" id="kai" />
  12. </div>
  13.  
  14. </body>
  15. <script type="text/javascript">
  16. $("#guan").click(function(){
  17.     //做一个DIV扔到页面上
  18.     var str ="<div id='zz'></div>";
  19.     $("body").append(str);
  20.     //点击关灯让关灯按钮隐藏
  21.     $(this).css("display","none");
  22.     $("#kai").css("display","block");
  23.     })
  24. $("#kai").click(function(){
  25.      $("#zz").remove();
  26.      //一点击开灯让关灯按钮显示
  27.      $("#guan").css("display","block");
  28.      $(this).css("display","none");
  29.     })
  30.  
  31. </script>

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

接下来我们在一起看一下JSON

JSON是一个数据的载体

JSON是一种数据格式

JSON比较像PHP里面的关联数组，它里面存的内容也是key和value成对存在的

JSON在调用接口的时候也会经常使用到

JSON在JS的面向对象里也可以使用它可以简单的做一个相当于是一个类，比较适合在JS里面解析，在JS应用频率也比较高，可以看成是JS里面的一种类型

做一个练习

  1. <script type="text/javascript">
  2.  
  3. var js = {
  4.         "one":"hello",
  5.         "two":"world",
  6.         "three":"汉族"
  7.         };
  8.  
  9.     //alert(js.three.n2);
  10.  
  11.     //使用foreach的形式来遍历JSON数据
  12.     for(var k in js)
  13.     {
  14.         alert(js[k]);  //取索引
  15.     }
  16.  
  17. </script>

三个都能取到

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

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

Jquery网页元素里面的操作以及JSON的更多相关文章

  1. jQuery网页元素拖拽插件

    效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-inde ...

  2. 如何使用T-SQL备份还原数据库及c#如何调用执行？ C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用（一） span<T>之高性能字符串操作实测

    如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...

  3. webBrowser中操作网页元素全攻略

    原文 webBrowser中操作网页元素全攻略 1.获取非input控件的值: webBrowser1.Document.All["控件ID"].InnerText; 或webBr ...

  4. Javascript及Jquery获取元素节点以及添加和删除操作

    用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...

  5. javascript 常见数组操作（ 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方）

    主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除 ...

  6. jQuery使用(五)：DOM操作之插入和删除元素

    插入: insertBofore() before() insertAfter() after() appendTo() append() prependTo() prepen() 删除: remov ...

  7. 深度解析JQuery Dom元素操作技巧

    深度解析JQuery Dom元素操作技巧 DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了JQuery dom元素操作方法,写的十分的全面细 ...

  8. jQuery学习之------元素样式的操作

    jQuery学习之------元素样式的操作 一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多 ...

  9. js随笔，css和js禁止网页选择文本，table的class样式使得td的class样式失效，jquery获得元素坐标

    css使用user-select,user-select不是W3C标准,浏览器支持不完整:user-select有两个值,none用户不可以选择文本,text用户可以选择文本 body{-moz-us ...

随机推荐

  1. Dapper where Id in的解决方案

    简单记一下,一会出去有点事情~ 我们一般写sql都是==>update NoteInfo set NDataStatus=@NDataStatus where NId in (@NIds) Da ...

  2. nginx的使用

    1.nginx的下载 解压后文件目录: 2.nginx的常用命令 nginx -s stop 强制关闭  nginx -s quit 安全关闭  nginx -s reload 改变配置文件的时候,重 ...

  3. DDD初学指南

    去年就打算总结一下,结果新换的工作特别忙,就迟迟没有认真动手.主要内容是很多初学DDD甚至于学习很长时间的同学没有弄明白DDD是什么,适合什么情况.这世界上没有银弹,抛开了适合的场景孤立的去研究DDD ...

  4. 基于SignalR实现B/S系统对windows服务运行状态的监测

    通常来讲一个BS项目肯定不止单独的一个BS应用,可能涉及到很多后台服务来支持BS的运行,特别是针对耗时较长的某些任务来说,Windows服务肯定是必不可少的,我们还需要利用B/S与windows服务进 ...

  5. iOS开发之再探多线程编程：Grand Central Dispatch详解

    Swift3.0相关代码已在github上更新.之前关于iOS开发多线程的内容发布过一篇博客,其中介绍了NSThread.操作队列以及GCD,介绍的不够深入.今天就以GCD为主题来全面的总结一下GCD ...

  6. Android Studio开发RecyclerView遇到的各种问题以及解决（一）

    以前一直在用ListView,,,最近才看RecyclerView发现好强大.RecyclerView前提是Android版本在5.0以上,本人以前用的是eclipse只支持到4.4.索性就安装一个A ...

  7. 编译器开发系列--Ocelot语言1.抽象语法树

    从今天开始研究开发自己的编程语言Ocelot,从<自制编译器>出发,然后再自己不断完善功能并优化. 编译器前端简单,就不深入研究了,直接用现成的一款工具叫JavaCC,它可以生成抽象语法树 ...

  8. VMware下对虚拟机Ubuntu14系统所在分区sda1进行磁盘扩容

    VMware下对虚拟机Ubuntu14系统所在分区sda1进行磁盘扩容 一般来说,在对虚拟机里的Ubuntu下的磁盘进行扩容时,都是添加新的分区,而并不是对其系统所在分区进行扩容,如在此链接中http ...

  9. CentOS：设置系统级代理（转）

    原文地址:http://www.cnblogs.com/cocowool/archive/2012/07/05/2578487.html YUM代理设置 编辑/etc/yum.conf,在最后加入 # ...

  10. 初学DirectX11， 留个纪恋。

    以前学的是openGL, 最近才开始学DirectX11,写了个很垃圾的代码,怀念以前的glPushMatrix(), glPopMatrix(), glBegin(), glEnd(), 多简单啊, ...