5月13 jquery的一些应用
首先对于JavaScript的一些复习：操作内容，操作属性，操作样式
<title>无标题文档</title>
<style>
#aa
{
width:200px;
height:200px;}
</style>
<script src="jquery-1.11.2.min.js"></script>
</head> <body> <div id="aa" style=""><span>hello</span></div>
<div class="bb">22</div>
<div class="bb">33</div>
<div class="bb">44</div>
<input type="text" name="cc" bs="dd" /> </body>
<script type="text/javascript"> //根据ID找元素,找到具体的DOM对象
var a = document.getElementById("aa");
var b = document.getElementsByClassName("bb");
//b[0].style.color="red";
var di= document.getElementsByTagName("div");
var input = document.getElementsByName("cc"); //操作内容
//1.非表单元素
//var d = document.getElementById("aa");
d.innerHTML;
d.innerText;
//2.表单元素 取value
d.value; //操作属性
d.setAttribute("bs","aa");//设置属性（属性名，属性值）
d.getAttribute("bs");//获取属性（属性名）
d.removeAttribute("bs");//移除属性（属性名） //操作样式
d.style.color = "red";
d.style.backgroundColor = "blue";
alert(d.style.width);//获取不到，因为获取只能获取到内联的不能在外面的 </script>
在Jquery中的一些基本的内容：与上面对比开来：也是分为操作内容，操作属性，操作样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#aa
{
width:200px;
height:200px;}
</style>
<script src="jquery-1.11.2.min.js"></script>
</head> <body> <div id="aa" style=""><span>hello</span></div>
<div class="bb">22</div>
<div class="bb">33</div>
<div class="bb">44</div>
<input type="text" name="cc" bs="dd" /> </body>
<script type="text/javascript"> //jquery中的
$(document).ready(function(e) { //根据ID找元素，找出的JQUERY对象，如果要取DOM对象，取索引0的元素
var jd = $("#aa");//根据ID
var ba = $(".bb");//根据Class
var ca = $("div");//根据标签名
var ip = $("input[name=cc]");//根据筛选属性
var ip1 = $("input[bs=dd]"); //根据筛选属性,不加空格
//alert(ip1.eq(0)[0]); for(var i=0;i<b.length;i++)
{
ba.eq(i); //取数组里面的第几个JQUERY对象
} //操作内容
//非表单元素
jd.text(); //jd.text("你好"); //（）里面没有是取值，有是赋值
jd.html(); //jd.html("好啊"); //同上
//2.表单元素
aa.val(); //操作属性
jd.attr("bs","aa");//设置属性（属性名，属性值）
jd.attr("bs");//获取属性（属性名）
jd.removeAttr("bs");//移除属性（属性名） //操作样式
jd.css("background-color","red");//一个参数是获取，两个是添加
//alert(jd.css("width")); //给一个元素加事件
/*$("#aa").click(function(){ alert("aa"); })*/ //给多个元素加事件
/*$(".bb").click(function(){ alert($(this).text()); })*/ //给多个元素设置相同样式(属性)
//$(".bb").css("color","pink"); }); </script>
</html>
关于jquery的一些练习题：实现全选功能，输出选中项，设置选中项
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery的例子</title>
<script src="jquery-1.11.2.min.js"></script> </head> <body>
<input type="checkbox" id="all" /> 全选<br />
<input class="t" type="checkbox" value="aa" /> aa
<input class="t" type="checkbox" value="bb" /> bb
<input class="t" type="checkbox" value="cc" /> cc
<input class="t" type="checkbox" value="dd" /> dd
<input class="t" type="checkbox" value="ee" /> ee <input type="button" id="button" value="点击获取数据" /> <input type="text" id="tex" name="name" />
<input type="button" id="select" value="提交" />
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) { //全选
$("#all").click(function(){ var ck = $(".t");
var xz = $(this)[0].checked;
ck.prop("checked",xz); })
//输出取选中的值
$("#button").click(function(){ var ck = $(".t");
for(var i=0;i<ck.length;i++)
{
if(ck.eq(i).prop("checked"))//ck.eq(i)[0].checked
{
alert(ck.eq(i).val());
}
}
ck.prop("checked",false);//清除选项
}) //设置某项选中
$("#select").click(function(){ var rr = $("#tex").val();
var ck = $(".t");
ck.prop("checked",false);//清除选项
for(var i=0;i<ck.length;i++)
{
if(ck.eq(i).val()==rr)
{
ck.eq(i).prop("checked",true);
}
}
}) }); </script>
5月13 jquery的一些应用的更多相关文章
- JavaScript图表FusionCharts免费在线公开课，由印度原厂技术工程师主讲，10月13日发车
FusionCharts公开课达人还你做 轻松晋升图表大师 [开课时间]10月13日 14:30[主讲老师]印度原厂技术工程师[开课形式]网络在线公开课[活动费用]前50名免费 现在就可以报名哦 报 ...
- [转载]Ubuntu17.04（Zesty Zapus）路线图发布：2017年4月13日发布
Canonical今天公布了Ubuntu 17.04(Zesty Zapus)操作系统的发布路线图,该版本于今年10月24日上线启动,toolchain已经上传且首个daily ISO镜像已经生成.面 ...
- 2015年12月13日 spring初级知识讲解（四）面向切面的Spring
2015年12月13日 具体内容待补充...
- 号外号外：9月13号《Speed-BI云平台案例实操--十分钟做报表》开讲了
引言:如何快速分析纷繁复杂的数据?如何快速做出老板满意的报表?如何快速将Speed-BI云平台运用到实际场景中? 本课程将通过各行各业案例背景,将Speed-BI云平台运用到实际场景中 ...
- 2016年12月13日 星期二 --出埃及记 Exodus 21:8
2016年12月13日 星期二 --出埃及记 Exodus 21:8 If she does not please the master who has selected her for himsel ...
- 2016年11月13日 星期日 --出埃及记 Exodus 20:4
2016年11月13日 星期日 --出埃及记 Exodus 20:4 "You shall not make for yourself an idol in the form of anyt ...
- 2016年10月13日 星期四 --出埃及记 Exodus 18:24
2016年10月13日 星期四 --出埃及记 Exodus 18:24 Moses listened to his father-in-law and did everything he said.于 ...
- 微软MVP社区夏日巡讲北京站 7月13日星期六 微软北京望京Office
微软MVP社区夏日巡讲 开营啦 时间: 7月13日星期六 地点: 微软北京望京Office 报名方式:请看下图宣传海报 微软最有价值专家联合微软云创新中心专家为您呈现精彩的Windows 应用开发和W ...
- 09.13日记（2014年9月13日00:18:26）英语，bootstrap，阮一峰，
我们这里只推荐一本语法书:台湾的旋元佑老师写的<文法俱乐部>(简体版名为<语法俱乐部>).这本书因为出版社倒闭而绝版,淘宝可以买到影印的版本. (1)学英语:奶爸的英语教室 资 ...
随机推荐
- shiro 前后端分离 seseeionId 问题
http://www.cnblogs.com/cshhs/p/9269411.html https://www.w3cschool.cn/shiro/rmvk1if1.html http://www. ...
- webpack用 babel将ES6转译ES5
webpack webpack.config.js配置文件 module.exports = { entry: './es6.js', // 入口文件路径 output: { filename: &q ...
- Autofac创建实例的方法总结
1.InstancePerDependency 对每一个依赖或每一次调用创建一个新的唯一的实例.这也是默认的创建实例的方式. 2.InstancePerLifetimeScope 在一个生命周期域中, ...
- HDU 4323 Magic Number（编辑距离DP）
http://acm.hdu.edu.cn/showproblem.php?pid=4323 题意: 给出n个串和m次询问,每个询问给出一个串和改变次数上限,在不超过这个上限的情况下,n个串中有多少个 ...
- SpringLog4j日志体系实现方式
1.通过web.xml读取log4j配置文件内容 2.通过不同的配置信息,来实现不同的业务输出,注意:log4j可以写入tomcat容器,也可以写入缓存,通过第三方平台读取 #输入规则#log4j.r ...
- 用Let's Encrypt实现Https(Windows环境+Tomcat+Java)
补充1: 已解决20的部分问题,移步这里 单域名下多子域名同时认证HTTPS 补充2: 之前忘了说了,我这个方法只对Tomcat7.0以上有用(要不然就是8.0...) 我自己用的是9.0 原因好像是 ...
- Youtube-dl 配置 使用方法 + 配合aria2 多线程 下载 + 配合 ffmpeg 自动合并分段视频
首先介绍软件,Youtube-dl可以下载网页的视频,功能很强大. 但遇到分段视频不能合并,遇到视频音频分开播放的网站也没办法合并视频音频,所以 需要用ffmpeg来配合的合并视频.合并过程是无损的, ...
- vue--存储
storage 一个存储库,它支持具有相同 api 的 sessionStorage 和 localStorage 安装和用法: storage 的 API: set(key,val) 用key和va ...
- 理解 Redis(3) - 字符串值
正如前面所讲的, redis 的数据结构就是一系列的键值对键 -> printable ASCII (可打印的 ASCII 码, 最大值是 512MB)值 -> Primitives (基 ...
- eureka 和zookeeper 区别 优势【转】
作为服务注册中心,Eureka比Zookeeper好在哪里 著名的CAP理论指出,一个分布式系统不可能同时满足C(一致性).A(可用性)和P(分区容错性).由于分区容错性在是分布式系统中必须要保证的, ...