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 ...
随机推荐
- Fabio 安装和简单使用
Fabio(Go 语言):https://github.com/eBay/fabio Fabio 是一个快速.现代.zero-conf 负载均衡 HTTP(S) 路由器,用于部署 Consul 管理的 ...
- 百度推出新技术 MIP，网页加载更快，广告呢？
我们在2016年年初推出了MIP,帮助移动页面加速(原理).内测数据表明,MIP页面在1s内加载完成.现在已经有十多家网站加入MIP项目,有更多的网站正在加入中.在我们收到的反馈中,大部分都提到了广告 ...
- 首个threejs项目-前端填坑指南
第一次使用threejs到实际项目中,开始的时候心情有点小激动,毕竟是第一次嘛,然而做着做着就感受到这玩意水好深,满满的都是坑,填都填不过来.经过老板20天惨无人道的摧残,终于小有成就. 因为第一次搞 ...
- iOS开源项目周报0105
由OpenDigg 出品的iOS开源项目周报第四期来啦.我们的iOS开源周报集合了OpenDigg一周来新收录的优质的iOS开发方面的开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等. He ...
- js数组学习整理
原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...
- enote笔记法使用范例（2）——指针（1）智能指针
要知道什么是智能指针,首先了解什么称为 “资源分配即初始化” what RAII:RAII—Resource Acquisition Is Initialization,即“资源分配即初始化” 在&l ...
- C++常见笔试面试要点以及常见问题
1. C++常见笔试面试要点: C++语言相关: (1) 虚函数(多态)的内部实现 (2) 智能指针用过哪些?shared_ptr和unique_ptr用的时候需要注意什么?shared_ptr的实现 ...
- celery使用的一些小坑和技巧(非从无到有的过程)
纯粹是记录一下自己在刚开始使用的时候遇到的一些坑,以及自己是怎样通过配合redis来解决问题的.文章分为三个部分,一是怎样跑起来,并且怎样监控相关的队列和任务:二是遇到的几个坑:三是给一些自己配合re ...
- listview下拉刷新和上拉加载更多的多种实现方案
listview经常结合下来刷新和上拉加载更多使用,本文总结了三种常用到的方案分别作出说明. 方案一:添加头布局和脚布局 android系统为listview提供了addfootview ...
- 怎样两个月完成Udacity Data Analyst Nanodegree
在迷恋数据科学很久后,我决定要在MOOC网站上拿到一份Data Science的证书.美国三个MOOC网站,Udacity上的课程已经被分成了数个nanodegree,每个nanodegree都是目前 ...