首先对于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的一些应用的更多相关文章

  1. JavaScript图表FusionCharts免费在线公开课，由印度原厂技术工程师主讲，10月13日发车

    FusionCharts公开课达人还你做 轻松晋升图表大师 [开课时间]10月13日 14:30[主讲老师]印度原厂技术工程师[开课形式]网络在线公开课[活动费用]前50名免费 现在就可以报名哦  报 ...

  2. [转载]Ubuntu17.04（Zesty Zapus）路线图发布：2017年4月13日发布

    Canonical今天公布了Ubuntu 17.04(Zesty Zapus)操作系统的发布路线图,该版本于今年10月24日上线启动,toolchain已经上传且首个daily ISO镜像已经生成.面 ...

  3. 2015年12月13日 spring初级知识讲解（四）面向切面的Spring

    2015年12月13日 具体内容待补充...

  4. 号外号外：9月13号《Speed-BI云平台案例实操--十分钟做报表》开讲了

    引言:如何快速分析纷繁复杂的数据?如何快速做出老板满意的报表?如何快速将Speed-BI云平台运用到实际场景中?         本课程将通过各行各业案例背景,将Speed-BI云平台运用到实际场景中 ...

  5. 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 ...

  6. 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 ...

  7. 2016年10月13日 星期四 --出埃及记 Exodus 18:24

    2016年10月13日 星期四 --出埃及记 Exodus 18:24 Moses listened to his father-in-law and did everything he said.于 ...

  8. 微软MVP社区夏日巡讲北京站 7月13日星期六 微软北京望京Office

    微软MVP社区夏日巡讲 开营啦 时间: 7月13日星期六 地点: 微软北京望京Office 报名方式:请看下图宣传海报 微软最有价值专家联合微软云创新中心专家为您呈现精彩的Windows 应用开发和W ...

  9. 09.13日记（2014年9月13日00:18:26）英语，bootstrap，阮一峰，

    我们这里只推荐一本语法书:台湾的旋元佑老师写的<文法俱乐部>(简体版名为<语法俱乐部>).这本书因为出版社倒闭而绝版,淘宝可以买到影印的版本. (1)学英语:奶爸的英语教室 资 ...

随机推荐

  1. try finally 执行顺序问题

    有return的情况下try catch finally的执行顺序 在遇到Exception 并且没有catch的情况下finally语句块没有执行 System.exit(0),终止了 Java 虚 ...

  2. div包裹页面后多余部分没有显示，也没滚动条 overflow 属性设置

    今天弄个div套着一个页面结果那个页面超出范围后页面没有滚动条可以滚动浏览下面的内容,原来是设置了overflow的hidden属性 visible 默认值.内容不会被修剪,会呈现在元素框之外. hi ...

  3. SPOJ 694 DISUBSTR - Distinct Substrings

    思路 求本质不同的子串个数,总共重叠的子串个数就是height数组的和 总子串个数-height数组的和即可 代码 #include <cstdio> #include <algor ...

  4. [HDU 1976] Software Version

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1976 #include<iostream> #include<cstdio> ...

  5. 剥开比原看代码12：比原是如何通过/create-account-receiver创建地址的？

    作者:freewind 比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchai ...

  6. 无法启动此程序，因为计算机中丢失api-ms-win-crt-runtime-|1-1-0.dll

    今天想把自己电脑上的python2换成python3时,安装完python3后,命令行启动时需要出现了上述错误,在网上查了资料后应该是库文件遭到了破坏,于是我下了一个东西安装后就解决了,如果出现了此问 ...

  7. 牛客练习赛7 E 珂朵莉的数列（树状数组+爆long long解决方法）

    https://www.nowcoder.com/acm/contest/38/E 题意: 思路: 树状数组维护.从大佬那里学习了如何处理爆long long的方法. #include<iost ...

  8. Python学习 day03打卡

    今天学习的主要内容: ppython的基本数据类型: 1. python基本数据类型回顾 2.int---数字类型 4.str---字符串类型 一.python基本数据类型 1. int==>整 ...

  9. mybatis+spring boot, mapper 提示Could not autowire. No beans of … type found

    工具及背景: IntelliJ IDEA 2016.1.3 Ultimate.spring boot, maven项目,利用mybatis 注解的方式查询mysql. 业务逻辑关系:controlle ...

  10. 使用CSS渐变

    转载自:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients CSS 渐变 是在 CSS3 Image ...