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 ...
随机推荐
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- ASP.NET Aries 入门开发教程7：DataGrid的行操作（主键操作区）
前言: 抓紧勤奋,再接再励,预计共10篇来结束这个系列. 上一篇介绍:ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑 本篇介绍主键操作区相关内容. 1:什么时候有默认的 ...
- ZKWeb网页框架1.2正式发布
发行日志 https://github.com/zkweb-framework/ZKWeb/blob/master/ReleaseNotes/ReleaseNote.1.2.md 主要改动 更新 ZK ...
- iOS有关横向TableView的东西
之前看到Apple store里面有横向的tableview,当然也有可能是collectionview啦. 尤其是项目中只有一条那么需要横向滑动的东西,就没有必要使用庞大的collectionvie ...
- 如何在Elasticsearch中安装中文分词器(IK+pinyin)
如果直接使用Elasticsearch的朋友在处理中文内容的搜索时,肯定会遇到很尴尬的问题--中文词语被分成了一个一个的汉字,当用Kibana作图的时候,按照term来分组,结果一个汉字被分成了一组. ...
- springmvc+bootstrap+jquerymobile完整搭建案例(提供下载地址)
用一张简单的截图说明下,然后提供一个下载地址. bootstrap的大部分样式官方都是写好的,所以只需要class="官方样式即可",具体可以看官方的案例,下面来个地址 http: ...
- 原生JS实现-星级评分系统
今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star();使用默认值5个星星,默认信息 var msg = [........]; sufuStar.sta ...
- 15个C++项目列表
实验楼上有很多C++的实战项目,从简单到进阶,学习每个项目都可以掌握相应的知识点. 如果你还是C++新手的话,那么这个C++的项目列表你可以拿去练手实战开发,毕竟学编程动手实践是少不了的! 如果你不知 ...
- linux字符串url编码与解码
编码的两种方式 echo '手机' | tr -d '\n' | xxd -plain | sed 's/\(..\)/%\1/g' echo '手机' |tr -d '\n' |od -An -tx ...
- POJ1743 Musical Theme [后缀数组]
Musical Theme Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 27539 Accepted: 9290 De ...