1小时学会JQuery

---------------------------------------------------------------------------------------------------------------

[版权申明：本文系作者原创，转载请注明出处]

文章出处：http://blog.csdn.net/sdksdk0/article/details/51756085

作者：朱培   ID：sdksdk0

---------------------------------------------------------------------------------------------------------------

一、JQuery简介

1.1简介

jQuery是继prototype之后又一个优秀的JavaScript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

1.2优点

- （1）写少代码,做多事情【write less do more】
-    （2）免费，开源且轻量级的js库，容量很小
-         注意：项目中，提倡引用min版的js库
-    （3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome
-         注意：jQuery不是将所有JS全部封装，只是有选择的封装
-    （4）能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
-    （5）文档手册很全，很详细
-    （6）成熟的插件可供选择
-    （7）提倡对主要的html标签提供一个id属性，但不是必须的
-    （8）出错后，有一定的提示信息
-    （9）不用再在html里面通过<script>标签插入一大堆js来调用命令了

二、JQuery的九类选择器

使用jquery，首先我们需要去把jquery的包导入，这个jquery的官网上面是可以下载的，地址：https://jquery.com/，目前最新版本是3.0，一般会有两种版本的，一个是完全的，一个是迷你版本的，两个版本就是大小不一样，里面的实质性东西其实是一样的，而这个迷你版的适合项目正式上线使用，因为占的体积小啊，一般学习或者练习的话就可以尝试使用完全版的。下面以几个案例来实际说明jquery的使用，完整的代码会在文末提供下载链接，欢迎下载学习。选择器的部分在下载的文件中的/JQuery\WebRoot\selector目录下。

2.1 基本选择器

[javascript] view plain copy

print?

1. //1)查找ID为"div1ID"的元素个数
2. alert(  $("#div1ID").size());
3. //2)查找DIV元素的个数
4. alert( $("div").length);
5. //3)查找所有样式是"myClass"的元素的个数
6. alert($(".myClass").size());
7. //4)查找所有DIV,SPAN,P元素的个数
8. alert($("div,span,p").size());
9. //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
10. alert($("#div1ID,.myClass,p").size());

2.2 层次选择器

[javascript] view plain copy

print?

1. //1)找到表单form里所有的input元素的个数
2. alert($("form input").size());
3. //2)找到表单form下所有的子级input元素个数
4. alert($(" form > input").size());
5. //3)找到表单form同级第一个input元素的value属性值
6. alert($("form + input").val());
7. //4)找到所有与表单form同级的input元素个数
8. alert($("form ~ input").size());

2.3 增强基本选择器

[javascript] view plain copy

print?

1. //1)查找UL中第一个元素li的内容
2. alert($("ul li:first").html());
3. alert($("ul li:first").text());
4. //html()要用在html/jsp中，不能用在xml中，而text()都可以用
5. //2)查找UL中最后一个元素的内容
6. alert($("ul li:last").text());
7. //3)查找所有未选中的input元素个数
8. alert($(":checkbox:checked").size());  //选中的    2
9. alert($(":checkbox:not(:checked)").size());  //未选中
10. //4)查找表格的1、3、5...奇数行个数
11. alert($("table tr:odd").size());  //3
12. //5)查找表格的2、4、6...偶数行个数
13. alert($("table tr:even").size());  //3
14. //6)查找表格中第二行的内容，从索引号0开始
15. alert($("table tr:eq(1)").text());
16. //html()强调的是标签中的内容，即便标签中有子标签，也会显示出来，而text()强调的是标签中的文本内容，不会显示子标签
17. //7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大
18. alert($("table tr:gt(0)").size());  //5
19. //8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
20. alert($("table tr:lt(3)").size());
21. //9)给页面内所有标题<h1><h2><h3>加上红色背景色
22. alert($(":header").css("background-color","red").css("color","white"));

2.4 内容选择器

[javascript] view plain copy

print?

1. //1)查找所有包含文本"John"的div元素的个数
2. alert($("div:contains('John')").size());  //2
3. //2)查找所有p元素为空的元素个数
4. alert($("p:empty").size());  //2
5. //3)给所有包含p元素的div元素添加一个myClass样式
6. $("div:has(p)").addClass("myClass");
7. //4)查找所有含有子元素或者文本的p元素个数,即p为父元素
8. alert($("p:parent").size());  //2

2.5 可见性选择器

[javascript] view plain copy

print?

1. //1)查找隐藏的tr元素的个数
2. alert($("table tr:hidden").size());  //1
3. //2)查找所有可见的tr元素的个数
4. alert($("table tr:not(:hidden)").size());
5. alert($("table tr:visible").size());  //2

2.6 属性选择器

[java] view plain copy

print?

1. //1)查找所有含有id属性的div元素个数
2. alert($("div[id]").size());  //1
3. //2)查找所有name属性是newsletter的input元素，并将其选中
4. $("input[name='newsletter']").attr("checked","checked");
5. //3)查找所有name属性不是newsletter的input元素，并将其选中
6. $("input[name!='newsletter']").attr("checked","true"); //1
7. //4)查找所有name属性以'news'开始的input元素，并将其选中
8. $("input[name^='news']").attr("checked","true");  //3
9. //5)查找所有name属性以'letter'结尾的input元素，并将其选中
10. $("input[name$='letter']").attr("checked","true");   //2
11. //6)查找所有name属性包含'news'的input元素，并将其选中
12. $("input[name*='news']").attr("checked","true");   //3
13. //7)找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中
14. $("input[id][name$='letter']").attr("checked","true");

2.7 子元素选择器

[javascript] view plain copy

print?

1. //1)迭代[each]每个ul中第1个li元素中的内容,索引从1开始
2. $("ul li:first-child").each(function(){
3. alert($(this).text());
4. });
5. //2)迭代每个ul中最后1个li元素中的内容,索引从1开始
6. $("ul li:last-child").each(function(){
7. alert($(this).text());
8. });
9. //3)在ul中查找是唯一子元素的li元素的内容
10. $("ul li:only-child").each(function(){
11. alert($(this).text());
12. });
13. //4)迭代每个ul中第2个li元素中的内容,索引从1开始
14. $("ul li:nth-child(2)").each(function(){
15. alert($(this).text());
16. });

2.8 表单选择器

[javascript] view plain copy

print?

1. //1)查找所有input元素的个数
2. alert($("input").size());  //10
3. alert($(":input").size());  //13
4. //2)查找所有文本框的个数
5. alert($(":text").size());  //1
6. //3)查找所有密码框的个数
7. alert($(":password").size());  //1
8. //4)查找所有单选按钮的个数
9. alert($(":radio").size());
10. //5)查找所有复选框的个数
11. alert($(":checkbox").size());
12. //6)查找所有提交按钮的个数
13. alert($(":submit").size());
14. //7)匹配所有图像域的个数
15. alert($(":images").size());
16. //8)查找所有重置按钮的个数
17. alert($(":reset").size());
18. //9)查找所有普通按钮的个数
19. alert($(":button").size());
20. //10)查找所有文件域的个数
21. alert($(":file").size());  //1
22. //11)查找所有input元素为隐藏域的个数
23. alert($(":input:hidden").size());  //1

2.9 表单对象属性选择器

[javascript] view plain copy

print?

1. //1)查找所有可用的input元素的个数
2. alert($("input:enabled").size());
3. //2)查找所有不可用的input元素的个数
4. alert($("input:disabled").size());
5. //3)查找所有选中的复选框元素的个数
6. alert($(":checkbox:checked").size());
7. //4)查找所有未选中的复选框元素的个数
8. alert($(":checkbox:not(:checked)").size());
9. //5)查找所有选中的选项元素的个数
10. alert($("select option:selected").size());
11. alert($("#provinceID  option:not(:selected)").size());

三、JQuery的方法API的使用

jquery的方法非常多，其实都挺简单的，使用jquery大大降低了开发难度。该部分内容在下载的文件中的\JQuery\WebRoot\method目录中。

each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象

append()：追加到父元素之后

prepend()：追加到父元素之前

after()：追加到兄弟元素之后

before()：追加到兄弟元素之前

attr(name)：获取属性值

attr(name,value)：给符合条件的标签添加key-value属性对

$("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本

remove()：删除自已及其后代节点

val()：获取value属性的值

val("")：设置value属性值为""空串，相当于清空

text()：获取HTML或XML标签之间的值

text("")：设置HTML或XML标签之间的值为""空串

clone()：只复制样式，不复制行为

clone(true)：既复制样式，又复制行为

replaceWith()：替代原来的节点

removeAttr()：删除已存在的属性

addClass()：增加已存在的样式

removeClass()：删除已存在的样式

hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式

toggleClass()：如果标签有样式就删除，否则增加样式

offset()：获取对象的left和top坐标

offset({top:100,left:200})：将对象直接定位到指定的left和top坐标

width()：获取对象的宽

width(300)：设置对象的宽

height()：获取对象的高

height(500)：设置对象的高

children()：只查询子节点，不含后代节点

next()：下一下兄弟节点

prev()：上一下兄弟节点

siblings()：上下兄弟节点

show()：显示对象

hide()：隐藏对象

fadeIn()：淡入显示对象

fadeOut()：淡出隐藏对象

slideUp()：向上滑动

slideDown()：向下滑动

slideToggle()：上下切换滑动，速度快点

下面来看一些实例：

1、关于循环：

[javascript] view plain copy

print?

1. //用JSON语法创建一个一维数组，存入object类型的编号和姓名，再迭代
2. var nameArray=[
3. {id:1,name:"张三 "},
4. {id:2,name:"王明" },
5. {id:3,name:"李水" }
6. ];
7. var _nameArray=$(nameArray);
8. _nameArray.each(function(){
9. //this代表object类型
10. alert(this.id+":"+this.name);
11. });

2、子元素插入到父元素内

[javascript] view plain copy

print?

1. //DIV标签插入到UL标签之后(父子关系)
2. $("ul").append($("div"));
3. //DIV标签插入到UL标签之前(父子关系)
4. $("ul").prepend($("div"));

3、子元素插入到父元素外

[javascript] view plain copy

print?

1. //DIV标签插入到UL标签之后(兄弟关系)
2. $("ul").after($("div"));
3. //DIV标签插入到UL标签之前(兄弟关系)
4. $("ul").before($("div"));

4、获取属性

[javascript] view plain copy

print?

1. //取得form里第一个input元素的type属性
2. alert($("form input:first").attr("type"));  //text
3. //设置form下最后一个input元素的为只读文本框
4. $("form input:last").attr("readonly","readonly");
5. $(":password").attr("readonly","readonly");
6. //获取密码框的值
7. alert($(":password").val());

5、创建元素

[javascript] view plain copy

print?

1. //创建div元素，添加"哈哈"文本，ID属性，并添加到文档中
2. //js方式
3. var divElement=document.createElement("div");
4. divElement.innerHTML="哈哈";
5. divElement.setAttribute("id","2016");
6. //document.getElementsByTagName("body")[0].appendChild(divElement);
7. document.body.appendChile(divElement);
8. //jquery方式
9. var _div=$("<div id='2016'>哈哈</div>");
10. //  $("body").append(_div);
11. $(document.body).append(_div);

6、删除元素

[javascript] view plain copy

print?

1. //删除ID为secondID的LI元素
2. $("#secondID").remove();
3. //删除所有LI元素
4. $("ul li").remove();
5. //删除UL元素
6. $("ul").remove();
7. //$(""#b").remove();

7、获取文本内容

[javascript] view plain copy

print?

1. //取得<div>中的内容
2. alert($("div").text());
3. //取得<option>的值和描述
4. var _option=$("#city option");
5. var value=_option.val();
6. var text=_option.text();
7. alert(value+":"+text);

8、复制元素

[javascript] view plain copy

print?

1. //复制原input元素，添加到原input元素后，与其同级
2. var _old=$(":button");
3. var _new=_old.clone();  //在内存中
4. _new.val("新按钮");  //无参代表取值，有参代表赋值
5. _old.after(_new);
6. //为原input元素动态添加单击事件，且复制原input元素，
7. var _old=$(":button");
8. _old.click(function(){
9. alert("动态事件");
10. });
11. //添加到原input元素后，与其同级，且和原按钮有一样的行为
12. var _new=_old.clone();
13. _new.val("新按钮");
14. _old.after(_new);

9、替换元素

[javascript] view plain copy

print?

1. //双击<div>中的文本，用文本框替换文本
2. $("div").dblclick(function(){
3. var _text=$("<input type='text'  style='width:165px;height:23px'  />");
4. //文本框替代文本框标签
5. $(this).replaceWith(_text);
6. });

10、删除属性

[javascript] view plain copy

print?

1. //为<table>元素添加属性border/align/width
2. $("table").attr("border","2").attr("align","center").attr("width","40%");
3. //将<table>元素的align属性删除
4. $("table").removeAttr("align");

11、添加样式

[javascript] view plain copy

print?

1. //为无样式的DIV添加样式
2. $("div:first").addClass("myClass");
3. //为有样式的DIV删除样式
4. $("div:last").removeClass("myClass");
5. //切换样式，即有样式的变成无样式，无样式的变成有样式
6. $("div").toggleClass("myClass");
7. //最后一个DIV是否有样式
8. var flag=$("div:last").hasClass("myClass");
9. alert(flag?"有":"无");

12、获取坐标，坐标设置

[java] view plain copy

print?

1. //获取图片的坐标
2. var offset=$("img").offset();
3. var x=offset.top;
4. var y=offset.left;
5. alert(x+":"+y);
6. //设置图片的坐标
7. $("img").offset({
8. top:200,
9. left:200
10. });
11. //获取图片的宽高
12. var w=$("img").width();
13. var h=$("img").height();
14. alert(w+":"+h);
15. //设置图片的宽高
16. var w=$("img").width(500);
17. var h=$("img").height(500);

13、获取父元素的子元素

[javascript] view plain copy

print?

1. //取得div元素的直接子元素内容，不含后代元素
2. var _span=$("div").children();
3. var content=_span.html();
4. alert(content);
5. //取得div元素的下一个同级的兄弟元素内容
6. var _p=$("div").next();
7. alert(_p.text());
8. //取得div元素的上一个同级的兄弟元素内容
9. var _p=$("div").prev();
10. alert(_p.text());
11. //依次取得div元素的上下一个同级的所有兄弟元素的内容
12. var _all=$("div").siblings();
13. _all.each(function(){
14. alert($(this).text());
15. });
16. //只找p
17. var _all=$("div").siblings("p");
18. _all.each(function(){
19. alert($(this).text());
20. });

14、动画渐变（显示，隐藏）

[java] view plain copy

print?

1. //图片隐蔽
2. //$("img").hide(5000);  //5秒之后隐藏
3. //隐藏的动画结束后调用一个函数
4. $("img").hide(5000,function(){
5. alert("完成");
6. });
7. //暂停3秒后继续隐藏
8. window.setTimeout(function(){
9. $("img").show(5000);
10. },3000);
11. //图片显示
12. $("img").show(5000);

15、图片的淡入淡出

[javascript] view plain copy

print?

1. //淡入显示图片
2. $("img").fadeIn(5000);
3. //淡出隐蔽图片
4. $("img").fadeOut(5000);

16、标签的滑动

[javascript] view plain copy

print?

1. //向上下滑动
2. $(":button").click(function(){
3. //div标签上下移动
4. $("div").slideToggle(1000);
5. });

四、JQuery的事件API

1、页面加载

//定义a()和b()二个方法
		function a(){
			alert("JS方式");
		}
		function b(){
			alert("JQUERY方式");
		}
		//使用JS方式加载a()和b()二个方法
		window.onload=function(){
			a();
			b();
		}; 

		//使用jQuery方式加载a()和b()二个方法
		$(document).ready(function(){
			a();
			b();
		});

		//使用jQuery最简方式加载a()和b()二个方法
		$(function(){
			a();
			b();

		});
		//js方式的onload与jquery方式的ready对比，ready更快。

2、触发改变事件

//当<select>标签触发onchange事件,显示选中<option>的value和innerHTML属性的值
		$("#city").change(function(){
			var $option=$("#city option:selected");
			var value=$option.val();
			var text=$option.text();
			alert(value+":"+text);
		});
		

3、获得焦点

	//加载页面时获取光标并选中所有文字
		$(function(){
			//光标定位文本框
			$(":text").focus();
			//选中文本框所有文本
			$(":text").select();

		});

4、按键事件

	//当按键弹起时，显示所按键的code码
		$(function(){
			$(document).keyup(function(){
				//获取按键的unicode编码
				var code=event.keyCode;
				alert(code);
			});
		});

5、获得鼠标的移动事件

	//显示鼠标移动时的X和Y座标

		$(function(){
			$(document).mousemove(function(){
				var x=event.clientX;
				var y=event.clientY;
				$("#xID").val(x);
				$("#yID").val(y);

			});
		});

6、mouseover和mouseout事件

//鼠标移到某行上，某行背景变色
		$("table tr").mouseover(function(){
			$(this).css("background-color","pink");
		});

		//鼠标移出某行，某行还原
		$("table tr").mouseout(function(){
			$(this).css("background-color","white");
		});

		//鼠标移到某图片上，为图片加边框
		$("img").mouseover(function(){
			$(this).css("border-color","red");

		});

		//鼠标移出图片，图片还原
		$("img").mouseout(function(){
			$(this).css("border-color","white");

		});

7、submit事件

	<form action="06_mouseover_mouseout.html" method="post">
		用户名：<input type="text"/>
		<input type="submit" value="表单提交"/>
	</form>

	<script type="text/javascript">
		//当表单提交前检测
		$(function(){
		 	//将光标定位于文本框中
		 	$(":text").focus();

		 });

		$("form").submit(function(){
			var flag=false;
			//获取文本框中的内容
			var name=$(":text").val();
			//去掉两边空格
			name=$.trim(name);

			if(name.length==0){
				alert("用户名不能为空");
				$(":text").focus();
				$(":text").val("");		

			}else{

				flag=isChinese(name);
				//不是中文
				if(!flag){
					alert("用户名必须是中文");
				}else{

				}
			}
			return flag;
		});

		//检查是否为中文
		function isChinese(str){
			if(/^[\u4e00-\u9fa5]+$/.test(str)){
				return true;
			}else{
				return false;
			}
		}

	</script>

源码下载地址：https://github.com/sdksdk0/JQuery-Demo