jQuery基础

引入jQuery文件，一般引入min版，没有源码

<script type="text/javascript" src="jquery/jquery-2.1.3.min.js"></script>

• jQuery对象和dom节点的互转

• jquery对象转dom

   1.jQuery对象[0]
   2.jQuery对象.get(0)
  

• dom节点转jQuery对象

   $(dom)
  

• 选择器

<script type="text/javascript">
		$(function(){
			/* 
			我们学习jQuery选择器有什么作用？
			答：学习选择器的目的，就是获取jQuery对象，当你获取到jQuery对象之后，我们就可以调用对应的方法
				#id       id选择器          根据id获取jQuery对象(单个)
				element   元素选择器       根据标签名获取jQuery对象(多个)
				.class    类型选择器      根据类型名获取jQuery对象(多个)  ----了解(前端人员来说用的少)
				selector1,selector2,selectorN  组合选择器  根据多个选择器组合在一起(多个)
			*/
			//根据id获取jQuery对象
			var mydiv = $("#mydiv");
			console.debug(mydiv);
			//根据元素匹配多个jQuery对象
			var divs = $("div");
			console.debug(divs);
			//根据类型匹配多个jQuery对象
			var hobbies = $(".hobbies");
			console.debug(hobbies);
			//组合选择器匹配多个jQuery对象
			var elements = $("#mydiv,input,a");
			console.debug(elements);
		});
</script>

• 层次匹配

$(function(){
			/* 
			层级选择器：
				ancestor descendant  在给定的祖先元素下匹配所有的后代元素
				parent > child       在给定的祖先元素下匹配所有的子元素
				prev + next          匹配所有紧接在 prev 元素后的 next 元素
				prev ~ siblings      匹配 prev 元素之后的所有 siblings 元素
			 */
			 //匹配form元素表单下所有的input元素标签(匹配子孙级别的)
			 var inputs = $("form input");
			 //匹配form元素表单下所有的input元素标签(只匹配子级别的)
			 inputs = $("form>input");
			 //匹配所有input元素标签并且紧挨着label的
			 inputs = $("label+input");
		});

• jQuery循环

/*
				jQuery循环迭代的语法格式：
						$.each(数组/多个值,function(i,o){
							i:循环次数的索引
							o:列表中的具体元素
						});
			*/

• jQuery注册事件

/**
				jquery注册事件方式1语法格式：
					jquery对象.事件名(function(){	
					})
				jquery注册事件方式2语法格式：
					jquery对象.bind("事件名",function(){
					})
				jquery注册事件方式3语法格式:（老师推荐使用，因为兼容性最好，功能最强大---因为支持事件冒泡）
					jquery对象.on("事件名",[选择器],function(){
					})
				jquery注册事件方式4语法格式：
					jquery对象.one("事件名",function(){
					});
				特点：一次生效之后，自动注销事件
				注销事件的语法格式：
					jquery对象.off();
			*/

• clone()浅克隆clone(true)深克隆

/* 
				clone():浅克隆，仅仅克隆表面，不克隆事件
				clone(true):深克隆，不仅仅克隆表面，还要克隆事件
			 */
			//动态添加按钮，注册事件
			$("#btn").on("click",function(){
				//获取input标签拥有code属性(获取第一个)，满足条件的 进行克隆,再追加到id为filediv的容器中
				$("input[code]:first").clone(true).appendTo($("#filediv"));
			});

• 事件冒泡

/* 
			$("input[code]").on("click",function(){
				alert("注册成功!");
			})
			这种注册方式，只会在加载结构的时候，满足条件的才会注册事件，动态追加的，就没法注册成功
			怎么解决呢？
			答：我们可以使用事件冒泡
			*/
			//我要给id为filediv下面的input标签并且拥有code属性的元素，注册一个点击事件
			$("#filediv").on("click","input[code]",function(){
				alert("注册成功!!");
			})
		});

• 操作文本常用方法txt、html

/* 
			在jquery中操作文本常用方法：
					text: 和以前原生js，innerText是一样的，  
							获取指定标签中的纯文本，
							设置指定标签中的值，如果设置有html代码，是不会被浏览器所解析的，只会当成一个纯文本进行展示
							
					html: 和以前原生js，innerHtml是一样的
						  获取指定标签中的内容
						  设置指定标签中的值，如果有设置html代码，它是能被浏览器所解析的
			 */
			 var text = $("#mydiv").text();
			 console.debug(text);
			
			$("#mydiv").text("<h2>我只会当纯文本进行展示哦</h2>");
			
			/* 
				html用法和text用法一模一样
					取值：html()
					设置值:html("<h1>的多方似懂非懂胜多负少</h1>") 是能被浏览器所解析
			
			*/

• json和字符串相互转换

/*
		JSON字符串转JSON对象有3种方式：
			1.使用eval转          eval("("+jsonStr+")");    你的json字符串不是标准的我也能转
	
			2.使用JSON.parse(jsonStr);       我只能转标准的json字符串
			
			3.使用jquery的方式转        $.parseJSON(jsonStr);  它是基于第二种的实现，只能转标准的json字符串
			(推荐使用它)
			
			何为标准json字符串呢？
			答： key必须用"" 引起来       value只要是字符串，必须用""引起来
			
	*/