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是个型参
<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接口都是返回这两类数据
因为这两种数据也可以跨平台传输
Jquery网页元素里面的操作以及JSON的更多相关文章
- jQuery网页元素拖拽插件
效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-inde ...
- 如何使用T-SQL备份还原数据库及c#如何调用执行？ C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用（一） span<T>之高性能字符串操作实测
如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...
- webBrowser中操作网页元素全攻略
原文 webBrowser中操作网页元素全攻略 1.获取非input控件的值: webBrowser1.Document.All["控件ID"].InnerText; 或webBr ...
- Javascript及Jquery获取元素节点以及添加和删除操作
用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...
- 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.数组插入.删除 ...
- jQuery使用(五)：DOM操作之插入和删除元素
插入: insertBofore() before() insertAfter() after() appendTo() append() prependTo() prepen() 删除: remov ...
- 深度解析JQuery Dom元素操作技巧
深度解析JQuery Dom元素操作技巧 DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了JQuery dom元素操作方法,写的十分的全面细 ...
- jQuery学习之------元素样式的操作
jQuery学习之------元素样式的操作 一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多 ...
- js随笔，css和js禁止网页选择文本，table的class样式使得td的class样式失效，jquery获得元素坐标
css使用user-select,user-select不是W3C标准,浏览器支持不完整:user-select有两个值,none用户不可以选择文本,text用户可以选择文本 body{-moz-us ...
随机推荐
- iOS可视化动态绘制连通图
上篇博客<iOS可视化动态绘制八种排序过程>可视化了一下一些排序的过程,本篇博客就来聊聊图的东西.在之前的博客中详细的讲过图的相关内容,比如<图的物理存储结构与深搜.广搜>.当 ...
- 03.LoT.UI 前后台通用框架分解系列之——多样的表格
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
- 伪共享（false sharing），并发编程无声的性能杀手
在并发编程过程中,我们大部分的焦点都放在如何控制共享变量的访问控制上(代码层面),但是很少人会关注系统硬件及 JVM 底层相关的影响因素.前段时间学习了一个牛X的高性能异步处理框架 Disruptor ...
- 【Web动画】SVG 实现复杂线条动画
在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...
- Axure 8.0.0.3312可用注册码
用户名:aaa 注册码:2GQrt5XHYY7SBK/4b22Gm4Dh8alaR0/0k3gEN5h7FkVPIn8oG3uphlOeytIajxGU 用户名:axureuser 序列号:8wFfI ...
- Asp.Net Core + Dapper + Repository 模式 + TDD 学习笔记
0x00 前言 之前一直使用的是 EF ,做了一个简单的小项目后发现 EF 的表现并不是很好,就比如联表查询,因为现在的 EF Core 也没有啥好用的分析工具,所以也不知道该怎么写 Linq 生成出 ...
- PHP设计模式（七）适配器模式（Adapter For PHP）
适配器模式:将一个类的接口转换成客户希望的另外一个接口,使得原本由于接口不兼容而不能一起工作的那些类可以在一起工作. 如下图(借图): // 设置书的接口 // 书接口 interface BookI ...
- 推荐10款超级有趣的HTML5小游戏
HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...
- 张小龙宣布微信小程序1月9日发布，并回答了大家最关心的8个问题
2016 年 12 月 28 日,张小龙在微信公开课 PRO 版的会场上,宣布了微信小程序的正式发布时间. 微信小程序将于 2017 年 1 月 9 号正式上线. 同时他解释称,小程序就像PC时代的网 ...
- 自定义控件之 圆形 / 圆角 ImageView
一.问题在哪里? 问题来源于app开发中一个很常见的场景——用户头像要展示成圆的: 二.怎么搞? 机智的我,第一想法就是,切一张中间圆形透明.四周与底色相同.尺寸与头像相同的蒙板图片,盖在 ...