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 ...
随机推荐
- boosting、adaboost
1.boosting Boosting方法是一种用来提高弱分类算法准确度的方法,这种方法通过构造一个预测函数系列,然后以一定的方式将他们组合成一个预测函数.他是一种框架算法,主要是通过对样本集的操作获 ...
- ThreadLocal简单理解
在java开源项目的代码中看到一个类里ThreadLocal的属性: private static ThreadLocal<Boolean> clientMode = new Thread ...
- Python标准库--typing
作者:zhbzz2007 出处:http://www.cnblogs.com/zhbzz2007 欢迎转载,也请保留这段声明.谢谢! 1 模块简介 Python 3.5 增加了一个有意思的库--typ ...
- echo命令
linux的echo命令, 在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的, 因此有必要了解下echo的用法echo命令的功能是在显示器上显示一段文字,一般起到一个提示的 ...
- python-time 模块
1.时间戳是以秒为单位的浮点小数,时间戳以自1970年1月1日午夜到现在经过了的时间来表示 2.时间模块引入方式:import time 3.返回时间戳 time.time() 4.返回时间元组:ti ...
- SpringMVC（关于HandlerMapping执行流程原理分析）
请求过来先碰见中央调度器(前端调度器) //Determine handler for the current request; 对当前请求决定交给哪个handler, 当前请求地址过来 处理器执行链 ...
- Linux上运行NET
今天尝试了下Ubuntu上运行NET程序,按照 https://github.com/aspnet/Home 的指引,一步一步来: 1.安装DNVM(原名KVM) Linux控制台下输入 curl - ...
- 针对Linux ASP.NET MVC网站中 httpHandlers配置无效的解决方案
近期有Linux ASP.NET用户反映,在MVC网站的Web.config中添加 httpHandlers 配置用于处理自定义类型,但是在运行中并没有产生预期的效果,服务器返回了404(找不到网页) ...
- 保护ASP.NET 应用免受 CSRF 攻击
CSRF是什么? CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写为:CSRF/ ...
- node应用线上部署时锁定包的依赖版本
npm shrinkwrap 我们使用node开发时,经常需要依赖一些模块来完成功能需求,而我们所依赖的模块也必然会依赖其他模块,就这样一级一级的依赖,而且这些依赖模块并不为我们所控制.一个产品或项目 ...