Jquery

简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

 我们使用jquery可以更好完成以下操作

• html文档操作，对于dom相关操作优化
• jquery提供更加方便与丰富事件处理
• jquery提供简单动画特效
• jquery提供ajax交互

常用js框架:

• dojo 面向对象的js框架
• extjs 学习成本比较高 它提供大量的丰富组件，它效果展示非常好
• prototype 早期比较流行js框架
• angularJS 它是一个mvc js框架，它提供双向数据绑定。

使用

第一步:导入js文件

第二步：完成操作

jQuery核心函数

jQuery(callback)它是$(document).ready()的简写。

$(document).ready(function(){});页面加载完成后，指定的函数执行。

关于jquery对象与dom对象转换

对于dom对象-----àjquery对象   $(dom)

对于jquery对象----àdom对象    jquery对象[0] 或  jquery.get(0)

jQuery选择器

#id 根据 id属性查找一个元素

*匹配所有元素

方法总结

• html ()方法，无参数代表获取元素中的html代码，如果有参数代表设置元素的html信息
• text()方法，无参数代表获取元素中的文本信息，如果有参数代表设置元素的文本信息
• each()方法，它的使用可以帮助我们遍历元素，可以传递一个函数 each(function(n)),n就代表的是每一个元素的序号，在函数中可以通过this来获取其dom对象
• index()方法，它可以判断元素的序号

层级选择器

• 空格 得到元素下的所有子元素(包含直接子元素与间接子元素)
• 大于号>  只获取直接的子元素
• 加号+  只获取直接的一个兄弟元素
• 波浪线~ 所有的后边的兄弟元素

$(function(){
		//1.	获取id=d的所有<a>子元素
		//var size=$("#d a").size();
		//2.	获取id=d 的直接<a>子元素
		//var size=$("#d>a").size();
		//3.	获取id=d第一个<p>兄弟元素
		//alert($("#d+ p").html());
		//4.	获取id=d的所有<p>兄弟元素
		//var size=$("#d~p").size();
		//alert(size);
		//5.	将id=d下的所有子元素<a>的文字颜色设置成红色
		$("#d >a").css({"color":"red"});

方法总结:

css()方法，它可以设置元素的样式,如果只有一个值  css(name,value),如果有多个值,css({name:value,name:value})

过滤器

过滤器它是在基本选择器与层次选择器获取到一批元素后，在进行过滤操作，使用过滤选择器基本都是”:”开头，除了属性过滤选择器。

基本过滤选择器

	$(function() {
		//1.设置表格第一行，显示为红色
		//$("tr:first").css("color","red");
		
		//2.设置表格除了第一行以外，显示为蓝色
		//$("tr:not(tr:first)").css("color",'blue');
		//$("tr:gt(0)").css("color","blue");
		
		//3.设置表格的奇数与偶数行颜色不一致，例如，偶数行设置为红色，奇数行设置为蓝色
		//$("tr:odd").css("color","red");
		//$("tr:even").css("color","blue");
		
		//设置页面上的标题为灰色
		$(":header").css("color","gray");
	});

内容过滤选择器

内容过滤选择器它是根据元素内部文本内容进行选中。

<script type="text/javascript">
	$(function() {
		//1.设置含有文本内容JAVA的div字体颜色为红色
		//$("div:contains('JAVA')").css("color","red");
		//2.设置没有子元素的div文本内容为"这是一个空的DIV"
		//$("div:empty").html("这是一个空的DIV");
		//3.包含<a>元素的div字体颜色为黄色
		$("div:has(a)").addClass("divColor");
		//4.设置所有含有子元素的span字体为蓝色
		$("span:parent").css("color","blue");
		
	});

可见性过滤选择器

可见性过滤选择器它匹配display:none或表单中input hidden这样的元素.

<script type="text/javascript">
	$(function() {
		//1.获取表单中隐藏域的值
		//var value=$("input:hidden").val();
		//alert(value);
		//alert($("form :hidden").val());
		
		//2.设置table中所有可见tr背景色为蓝色
		$("tr:visible").css("background-color","blue");
		//3.获取table中所有隐藏tr中文本值，
		alert($("tr:hidden").text());
		//并将隐藏tr显示出来，
		$("tr:hidden").show();
		//原来显示的tr隐藏起来
		$("tr:visible").hide();
	});
</script>

• val() 获取元素当前的值  value值
• show() 让元素显示出来
• hide() 让元素隐藏起来

属性过滤选择器

根据元素的属性来过滤

^=匹配开始

$=匹配结尾

*=匹配包含

<script type="text/javascript">
	$(function() {
		//设置所有含有id属性的div，字体颜色红色
		//$("div[id]").css("color","red");
		//获取name=username的value值
		//alert($("[name='username']").val());
		//设置所有多选框被选中
		//$("input[type='checkbox']").attr("checked",true);
		//设置class中包含itcast的多选框被选中
		//$("input[type='checkbox'][class*='itcast']").attr("checked",true)
		//获取class=itcast1的多选框的name属性值
		//alert($("input[type='checkbox'][class='itcast1']").attr("name"));

	});
</script>

方法总结

attr()设置或返回被选元素的属性值。

子元素过滤选择器

根据子元素顺序来获取。

nth-child根据序号来选择，序号是从1开始,也可以设置odd even 根据奇偶来设置

也可以通过倍数来设置

first-child 获取第一个

last-child 获取最后一个

only-child 获取只有一个子元素

<script type="text/javascript">
	$(function() {
		//设置列表中第2个li字号为30
		//$("ul li:nth-child(2)").css("font-size",30);
		//设置列表中第一行字体为红色
		//$("ul li:first-child").css("color","red");
		//设置列表中最后一行字体为蓝色	
		//$("ul li:last-child").css("color","blue");
		//获取ul下只有一个li的信息
		alert($("ul li:only-child").html());
	});
</script>

表单过滤选择器

表单对象属性过滤选择器

checked它是用于radio,checkbox 判断选中

selected它是用于select下拉框选中。

<script type="text/javascript">
	$(function() {
		$(":button").click(function() {

			//1.获取选中的性别信息
			//alert($(":radio:checked").val());

			//2.获取选中的爱好信息			
			//$(":checkbox:checked").each(function(){
			//	alert($(this).val());
			//});

			//3.获取选中的城市
			alert($("select option:selected").val());
		});
	});
</script>

• jQuery DOM操作

<script type="text/javascript">
	$(function() {
		//内部插入
		//1.在select中开始添加一项<option value='学前班'>学前班</option>
		//$("#edu").prepend($("<option value='学前班'>学前班</option>"));
		//$("<option value='学前班'>学前班</option>").prependTo($("#edu"));
		
		//2.在select最后添加一项<option value='研究生'>研究生</option>
		//s$("#edu").append($("<option value='研究生'>研究生</option>"));
		//$("<option value='研究生'>研究生</option>").appendTo($("#edu"));

		//外部插入
		//1.在select中开始添加一项<option value='学前班'>学前班</option>
		//$("#edu option:first").before($("<option value='学前班'>学前班</option>"));
		//$("<option value='学前班'>学前班</option>").insertBefore($("#edu option:first"));
		//2.在select最后添加一项<option value='研究生'>研究生</option>
		
		//$("#edu option:last").after($("<option value='研究生'>研究生</option>"));
		$("<option value='研究生'>研究生</option>").insertAfter($("#edu option:last"));
	});
</script>

 

删除

<script type="text/javascript">
	$(function(){
		//1.empty代表的是将元素下所有子元素删除
		//$("#d1").empty();
		//给p注册事件
		$("#d1 p").click(function(){
			alert("pppppppppp");
		});
		//2.remove与detach功能都是删除
		//var p=$("#d1 p").remove();
		var p=$("#d1 p").detach();
		//remove与detach的区别:remove删除时连注册的事件也删除 而detach它不删除注册事件.
		$("#d2").append(p);
	});	
</script>

 

 

替换与克隆

替换操作

克隆操作

<script type="text/javascript">
	$(function(){
		//1.	获取id=d的所有<a>子元素
		//var size=$("#d a").size();
		//2.	获取id=d 的直接<a>子元素
		//var size=$("#d>a").size();
		//3.	获取id=d第一个<p>兄弟元素
		//alert($("#d+ p").html());
		//4.	获取id=d的所有<p>兄弟元素
		//var size=$("#d~p").size();
		//alert(size);
		//5.	将id=d下的所有子元素<a>的文字颜色设置成红色
		$("#d >a").css({"color":"red"});
	});
</script>

 

筛选

过滤操作它相当于是我们在jquery中使用的过滤选择器，

例如 eq可以根据序号来获取元素 first与last来获取第一个元素与最后一个元素

查找

是通过当前元素，获取祖先元素，父元素子元素等。

find方法，它可以直接来查找指定的元素.

jQuery事件机制

Jquery中的事件与传统的javascript中事件区别:

Jquery中事件允许绑定多个函数，而javascript中一个事件只能绑定一个函数.

事件绑定

<script type="text/javascript">
	$(function(){
		//这种方案是jquery提供的一种简化绑定事件操作
		//$("#btn").click(function(){
		//	alert("hell");
		//});
		//bind用于绑定事件
		//$("#btn").bind("click",function(){
		//	alert("hello");
		//});
		//unbind用于解除事件的绑定
		//$("#btn").unbind("click");
		//我们也可以使用live来进行事件绑定
		//$("#btn").live("click",function(){
		//	alert("hello world");
		//});
		//我们可以使用die方法来解决live的绑定操作
		//$("#btn").die("click");
		//live与bind的区别
		//bind只能为存在的元素进行事件的绑定，而live它可以为没有存在，后续通过代码新添加的元素绑定事件.
		$(":button").live("click",function(){
			alert("hello...");
		});
		//新添加一个按钮
		$("body").append($("<input type='button' value='新按钮'>"));
	});
		//传统的javascript中绑定事件
	/* windown.onload=function(){
		document.getElementById("btn").onclick=function(){
			
		}
	}; */
</script>

 

一次性事件和自动触发

one()为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

<script type="text/javascript">
	$(function() {
		//为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
		$("#btn").one("click", function() {
			alert("hello world");
		});
		//在开发中可以对我们的表单使用one一次性函数，避免表单重复提交.
	});
</script>

trigger()在每一个匹配的元素上触发某类事件

<script type="text/javascript">
	$(function() {
		//给按钮注册一个点击事件
		$("#btn").click(function() {
			alert("hello world");
		});
		//给按钮注册一个mouseover事件
		$("#btn").bind("mouseover", function() {
			//事件触发
			$(this).trigger("click");
		});
	});
</script>

事件切换

hover

这个操作它可以绑定两个函数，当触发mouseover时第一个函数执行，当触发mouseout时第二个函数执行。

<script type="text/javascript">
	$(function() {
		//1.先设置div隐藏
		$("div").hide();
		//2.给h1添加hover操作
		$("h1").hover(function(){
			//鼠标移入到h1上会执行
			//$("div").show(2000);
			//$("div").slideDown(2000);
			$("div").fadeIn(2000);
		},function(){
			//鼠标离开h1时会执行
			//$("div").hide(2000);
			//$("div").slideUp(2000);
			$("div").fadeOut(2000);
		});
	});
</script>

 

 

toggle

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件

<script type="text/javascript">
	$(function() {
		$("img").toggle(function() {
			$(this).attr("src", "2.png");
		}, function() {
			$(this).attr("src", "3.png");
		}, function() {
			$(this).attr("src", "1.png");
		});
	});
</script>