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 ...
随机推荐
- 记一次debug记录：Uncaught SyntaxError: Unexpected token ILLEGAL
在使用FIS3搭建项目的时候,遇到了一些问题,这里记录下. 这里是发布搭建代码: // 代码发布时 fis.media('qa') .match('*.{js,css,png}', { useHash ...
- 前端框架 EasyUI （2）页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
- 基于OpenCV的车辆检测与追踪的实现
最近老师布置了一个作业,是做一个基于视频的车辆检测与追踪,用了大概两周的时间做了一个简单的,效果不是很理想,但抑制不住想把自己的一些认识写下来,这里就把一些网络上的博客整理一下分享给大家,希望帮助到大 ...
- JavaScript的继承实现方式
1.使用call或apply方法,将父对象的构造函数绑定在子对象上 function A(){ this.name = 'json'; } function B(){ A.call(this); } ...
- Git初探--笔记整理和Git命令详解
几个重要的概念 首先先明确几个概念: WorkPlace : 工作区 Index: 暂存区 Repository: 本地仓库/版本库 Remote: 远程仓库 当在Remote(如Github)上面c ...
- 阿里云学生优惠Windows Server 2012 R2安装IIS，ftp等组件，绑定服务器域名，域名解析到服务器，域名备案，以及安装期间错误的解决方案
前言: 这几天终于还是按耐不住买了一个月阿里云的学生优惠.只要是学生,在学信网上注册过,并且支付宝实名认证,就可以用9块9的价格买阿里云的云服务ECS.确实是相当的优惠. 我买的是Windows S ...
- 开源免费且稳定实用的.NET PDF打印组件itextSharp（.NET组件介绍之八）
在这个.NET组件的介绍系列中,受到了很多园友的支持,一些园友(如:数据之巅. [秦时明月]等等这些大神 )也给我提出了对应的建议,我正在努力去改正,有不足之处还望大家多多包涵.在传播一些简单的知识的 ...
- 用FSM一键制作逐帧动画雪碧图 Vue2 + webpack
因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最 ...
- 前端开发：面向对象与javascript中的面向对象实现（二）构造函数与原型
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...
- Java 程序优化 (读书笔记)
--From : JAVA程序性能优化 (葛一鸣,清华大学出版社,2012/10第一版) 1. java性能调优概述 1.1 性能概述 程序性能: 执行速度,内存分配,启动时间, 负载承受能力. 性能 ...