jQuery

jQuery是js的一个框架。本质仍是一个js。

www.jq22.com jQuery插件库。
jquery.com jQuery官网

Jquery的封装原理

当我们使用jQuery的时候需要导入Jquery的js文件，相当于写java的时候需要导入jar包。
那么问题来了，我们自己写的js代码，引入后会可能出现覆盖问题，导致引用的无法调用，一直要考虑避开同名覆盖的问题。
那么jquery-xxx.js、jquery-xxx.min.js内部是如何封装的呢？

将数据一次性挂载到window对象下

(function(obj){
	obj.test=function(){
		alert("工厂");
	}
	alert("匿名调用")
})(window)

window.jQuery = window.$ = jQuery

如何使用JQuery。

jQuery的选择器
jQuery操作元素的属性
jQuery操作元素的样式和内容
jQuery操作元素的文档结构
jQuery中的事件(重点)
jQuery的动画效果

1.jQuery的选择器

基本选择器：

ID选择器:

$("#id名") 返回的是存储了指定的HTML元素对象的数组

标签选择器:

$(“标签名”) 返回的是存储了指定标签的数组

类选择器:

$(".类选择器") 返回的是使用了相同类选择器的HTML元素对象

组合选择器:

$(“选择器，选择器，选择器，…”) 返回的是所有选择器所指定的HTML元素对象。

以下的查看文档学习吧
层级选择器
简单选择器
可见性选择器
属性选择器
子元素选择器
表单选择器
表单对象属性选择器

    注意：jQuery中的选择器返回的是存储了指定的HTML元素对象的数组。

<!--引入jQuery--> 
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> 
<!--声明js代码域--> 
<script type="text/javascript"> 
//基本选择器
//iD选择器 
function testById(){ 
	var un=$("#uname"); 
	alert(un.val()); 
} 
//标签选择器 
function testByTag(){ 
	var inps=$("input"); 
	alert(inps.length); 
} 
//类选择器 
function testByClass(){ 
	var objs=$(".commom"); 
	objs.css("color","red")
} 
//组合选择器 
function testBySelect(){ 
	var objs=$("#upwd,#uname,#showdiv") 
	objs.css("background-color","aqua");
} 
</script> 

2.jQuery操作元素的属性

获取：
对象名.attr(“属性名”) 返回属性值。返回的是默认值

注意：如果要获取用户数据使用对象名.val()

修改：
对象名.attr(“属性名”,“新的值”)

注意：
使用jQuery对象获取紧跟的元素：
对象名.next()//返回的是紧跟的jQuery对象

<script type="text/javascript"> 
//操作属性
//获取 
function getField(){ 
	//获取元素对象 
	var obj=$("#uname"); 
	//获取
	alert(obj.attr("type")+":"+obj.attr("name")+":"+obj.attr("i d")+":"+obj.attr("value")); alert(obj.val()); 
	} 
	//修改 
	function operField(){ 
	//获取元素对象 
		var obj=$("#uname"); 
		//修改 
		obj.attr("type","button") 
	}
}

3.jQuery操作元素的样式和内容

操作元素内容：

获取：
元素对象.html() 返回元素的所有内容包括HTML标签
元素对象.text() 返回所有的文本内容，不包括HTML标签

修改
元素对象.html(“新的内容”) 会覆盖原有内容，解析HTML标签
元素对象.text(“新的内容”) 覆盖原有内容，不解析HTML标签

注意：
如果是追加则使用
元素对象.html(元素对象.html()+“新的内容”)
元素对象.text(元素对象.text()+“新的内容”)

<script type="text/javascript"> 
//操作元素内容
//获取 
function getData(){ 
//获取元素对象 
	var obj=$("#showdiv"); 
	//获取元素内容
	alert(obj.html());
	//返回元素的所有内容包括HTML标签
	alert(obj.text());
	//返回所有的文本内容，不包括HTML标签
} 
//修改 
function operData(){ 
//获取元素对象 
var obj=$("#showdiv"); 
//修改元素内容
obj.html(obj.html()+"<i>后端知识马上就开始了，你的人生巅峰就要到了</i>");//会覆盖原有内容，解析HTML标签
obj.text(obj.text()+"<i>后端知识马上就开始了，你的人生巅峰就要到了</i>");//会覆盖原有内容，不解析HTML标签
}
</script> 

操作元素样式

添加:
元素对象.css(“样式名”,“样式值”);
元素对象.css({“样式名”:“样式值”,“样式名”:“样式值”,“样式名”:“样式值”,…})

修改
元素对象.css(“样式名”,“新的样式”);
注意:
也可以元素对象名.addClass(“类选择器名”);

<script type="text/javascript"> 
//操作元素样式
//添加 
function addCss(){ 
	//获取元素对象 
	var obj=$("#showdiv"); 
	//添加样式
	//基本写法 
	// obj.css("border","solid 1px"); 
	// obj.css("width","200px"); 
	// obj.css("height","200px"); 
	// obj.css("background-color","orange"); 
	//高级写法 
	obj.css({"border":"solid 1px","width":"200px","height":"200px","background-color":"oran ge"}) }
	//修改 
	function updateCss(){ 
	//获取元素对象 
	var obj=$("#showdiv"); 
	//修改
	obj.css("background-color","darkcyan");
} 
//添加 
function addClass(){ 
	//获取元素对象 
	var obj=$("#showdiv"); 
	//使用类选择器添加 
	obj.addClass("commom"); 
}
</script>

4.jQuery操作元素的文档结构

操作文档结构：修改，添加，删除

内部插入：
元素对象名.append(“HTML代码”) 追加(创建新的节点并追加)
元素对象名.appendTo(“选择器”) 将制定的元素移动并追加到指定的元素中(将别的节点移动到追加)
元素对象名.prepend(“HTML代码”) 在前面追加(创建新的节点并追加)
元素对象名.prependTo(“选择器”) 将制定的元素移动并在前面追加到指定的元素中(将别的节点移动到在前面追加)

外部插入:
元素对象名.after(“HTML代码”) 在元素之后添加
元素对象名.before(“HTML代码”) 在元素之前添加
元素对象名.insertAfter(“选择器”) 将指定的节点移动到指定的元素后
元素对象名.insertBefore(“选择器”) 将指定的节点移动到指定的元素前

包裹：
- 参照API
替换：
- replace()
删除：
- empty() remove() detach()
克隆：
- clone() clone(true)

<script type="text/javascript"> 
//操作文档结构：
	//内部插入 
	//append 
function testAppend(){
	//获取元素对象 
	var obj=$("#div01"); 
	//内部插入--追加
	obj.append("<span>聪明</span>"); 
	//obj.append($("#div02+span"));
} 
//appendTo 
function testAppendTo(){ 
	//获取元素对象 
	$("#div02+span").appendTo("div"); 
} 
//prepend 
function testPrepend(){ 
	//获取元素对象 
	var obj=$("#div01"); //内部插入--追加
	obj.prepend("<span>帅气</span>");
}
//外部插入 
//after 
function testAfter(){ 
	//获取元素对象
	$("#div01").after("<span>大家对他的印象:</span>"); 
}
//before 
function testBefore(){ 
	//获取元素对象
	$("#div01").before("<span>请选择印象标签:</span>"); 
} 
//insertAfter 
function testInsertAfter(){ 
	//将指定的节点移动到指定的元素后面 
	$("#div02+span").insertAfter("#div01");
}
//替换 
function testReplace(){ 
	$("#div01 span").replaceWith("<b>哈哈</b>");
} 
/*------------------------------------------------------------------------------*/
function operSpanCss(){ 
//获取元素对象 
	$("#div01 span").css("background-color","#FFF5A8"); 
	$("#div01 span").css("font-size","20px"); 
	$("#div01 span").css("padding","5px"); 
}
//案例 
function moveSpan(){ 
	$("#div01 span").click(function(){ 
		$(this).clone().appendTo("#div02"); 
	}) 
}
</script>

5.jQuery中的事件(重点)

<!-- <html> -->
	<head>
		<title>操作事件</title>
		<meta charset="UTF-8"/>
		<!--引入jQuery文件-->
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<!--
			jQuery动态操作事件 
				元素对象.bind("事件名",fn)//动态的给指定的元素对象追加指定的事件及其监听的函数。
				注意：
					js中的是一次添加，多次添加时覆盖的效果
					jQuery是追加的效果，可以实现给一个事件添加不同的监听函数。
				元素对象.unBind("事件名")//移除指定的元素对象的指定事件
					注意：js方式添加的事件不能移除。
				元素对象.one("事件名",fn)//给指定的元素对象添加一次性事件，事件被触发执行一次即失效。
					注意：可以给事件添加多个一次函数，unBind可以用来解绑
				页面载入事件
					$(document).ready(fn);
					页面载入成功后会调用传入的函数对象
					注意：
						此方式可以给页面载入动态的增加多个函数对象，不会被覆盖。
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			//js动态添加事件
				function testThing(){
					//获取元素对象
					var btn=document.getElementById("btn2");
					//添加事件
					btn.onclick=function(){
						alert("我是js方式");
					}
				}
			//jquery
				//测试bind绑定
				function testBind(){
					$("#btn2").bind("click",function(){alert("我是bind绑定单击事件")});
					$("#btn2").bind("click",function(){alert("我是bind绑定单击事件2w2222")});
				}
				//测试unBind解绑
				function testUnfBind(){
					$("#btn3").unbind("click");
					
				}
				//测试one
				function testOne(){
					$("#btn3").one("click",function(){alert("我是one")});
				}
			//页面载入事件
				//js方式
					window.onload=function(){
						alert("我是js方式页面加载");
					}
					window.onload=function(){
						alert("我是js方式页面加载2222");
					}
				//jquery方式
					$(document).ready(function(){
						alert("我是jQuery");
					})
					$(document).ready(function(){
						alert("我是jQuery22222");
					})
					
		</script>
	</head>
	<body>
		<h3>操作事件</h3>
		<input type="button" name="" id="" value="测试js动态添加事件" onclick="testThing()"/>
		<input type="button" name="" id="" value="测试jquery动态添加事件--bind" onclick="testBind()"/>
		<input type="button" name="" id="" value="测试jquery动态解绑事件--unbind" onclick="testUnfBind()"/>
		<input type="button" name="" id="" value="测试jquery动态解绑事件--one" onclick="testOne()"/>
		<hr />
		<input type="button" name="" id="btn" value="测试js" />
		<input type="button" name="btn2" id="btn2" value="测试jQuery-bind" />
		<input type="button" name="btn2" id="btn3" value="测试jQuery-one" />
		
	</body>
</html>