JQ-总结

-----------------------------------------------------------------------------jQuery----------------------------------------------------------------------------------
1:-为什么要用jQuery?
	短小、精悍，写起来简单，省事儿，开发效率高
2:-什么是jQuery?
	类似Python里面的模块
	库/插件
3:-如何使用jQuery?
	- 1. 导入 <script src="jquery-3.2.1.js"></script>     import re
	- 2. jQuery.xxxxx  --> $()    re.xxxx
	- 3. 兼容性好
4:-JS和jQuery的关系
	- jQuery就是JS写的
	- JS是基础，jQuery是工具
5:jQuery知识点：
	- HTML：
	- CSS:
	- JS:
		动起来--->给GDP戴上绿帽子--->让八级哥和GDP比长短--->找到比翔哥还短的人--->在全班找不仅短还细的人--->找到谁， 然后让谁做什么--->找到标签，修改标签
-------------------------------------------------------------------------选择器-----------------------------------------------------------------------------------
一：基本选择器
		1- ID选择器-------------------------------$("#id的值")
		2- 类选择器（class）----------------------$(".class的值")
		3- 标签选择器(html标签)-------------------$("标签的名字")
		4- 所有标签-------------------------------$("*")
		5- 组合选择器-----------------------------$("xx,xxx")
二：层级选择器
		1- 从一个标签的子子孙孙去找---------------$("ancestor descendant")------------------$("父亲 子子孙孙")
		2- 从一个标签的儿子里面找-----------------$("parent>child")-------------------------$("父亲>儿子标签")
		3- 找紧挨着的标签-------------------------$("prev+next")next=(下一个)---------------$("标签+下面紧挨着的那个标签")
		4- 找后面所有同级的-----------------------$("prev~siblings")------------------------$("翔哥~女人")prev=(上一个)siblings=(兄弟姐妹)
		5- 找...包含的...标签---------------------$("...:has('...')")
		6- 找...的第一个...-----------------------$("...>...:first")
						   -----------------------$("...>...").first
		7- 找...的最后的...-----------------------$("...>...:last")
						   -----------------------$("...>...").last
		8- 找...标签下...没有被选中...------------$("... input:not(:checked)")
										jQuery对象：
											- 用jQuery选择器查出来的就是jQuery对象
											- jQuery对象，他就可以使用jQuery方法，不能使用DOM的方法
											- DOM对象和jQuery对象转换：
												- $(".c1")[0] --> DOM对象
												- $(DOM对象)
---------------------------------------------------------------------------筛选器--------------------------------------------------------------------------------
一：写在引号里面的
		$(" :first") -------------------------------获第一个取元素
		$(" :last")---------------------------------获取最后一个元素
		$(" :not('')")------------------------------不是......
		$(" :even")---------------------------------偶数
		$(" :odd")----------------------------------奇数
		$(" :eq")-----------------------------------获取n个元素
		$(" :focus")--------------------------------焦点元素
二：内容
		$(" :contains('内容')")---------------------匹配包含给定文本的元素
		$(" :empty")--------------------------------匹配所有不包含子元素或者文本的空元素
		$(" :has('')")------------------------------匹配含有选择器所匹配的元素的元素-------$("div:has(p)").addClass("test");
		$(" :parent")  ***** 区别于$("").parent()---匹配含有子元素或者文本的元素

三：可见性
		$(" :hidden)隐藏的--------------------------匹配所有不可见元素，或者type为hidden的元素
		$(" :visible")可见的------------------------匹配所有的可见元素
四：属性
		input[name]  -------------------------------有name属性的input
		input[type='password']----------------------类型是password的input标签
五：表单
			:input---------------$(":input")------------配所有 input, textarea, select 和 button 元素
			:password-------------.........-------------匹配所有密码框
			:checkbox-------------.........-------------匹配所有复选框
			:radio----------------.........-------------匹配所有单选按钮
			:submit---------------.........-------------匹配所有提交按钮
			:button---------------.........-------------匹配所有按钮
			:image----------------.........-------------匹配所有图像域
			:file-----------------.........-------------匹配所有文件域
			:text-----------------.........-------------匹配所有的单行文本框
			:reset----------------.........-------------匹配所有重置按钮
	表单对象属性
			:enable(有效)---------------$("input:enabled")----匹配所有可用元素
			:disable(无效)--------------................------匹配所有不可用元素
			:checked--------------------................------匹配所有选中的被选中元素(复选框、单选框等，select中的option)，
																对于select元素来说，获取选中推荐使用 :selected
			:selected------------$("select option:selected")---匹配所有选中的option元素

-----------------------------------------------------------------筛选(写在信号外面当方法用的)--------------------------------------------------------------------
1:过滤
	$("").first()--------------------------------------------从...筛选出第一个
	$("").parent()-------------------------------------------从...筛选出父级
	$("").eq()-------------$("p").eq(1)----------------------从...筛选出第n个
	.hasClass()------------$(this).hasClass("protected")
	last()---------------------------------------------------从...筛选出最后一个
	filter()---------------$("p").filter(".selected")--------筛选出与指定表达式匹配的元素集合。

2:查找
	.children()------------$("div").children()---------------取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
	.find()----------------$("p").find("span")---------------搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
	.next()----------------$("p").next()---------------------取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
	.nextAll()----$("div:first").nextAll().addClass("after");------查找当前元素之后所有的同辈元素。可以用表达式过滤
	.nextUntil()--$('#term-2').nextUntil('dt').css('background-color', 'red');----查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
	.parent()--------------$("p").parent()-------------------取得一个包含着所有匹配元素的唯一父元素的元素集合。
	.parents()-------------$("span").parents("p")------------取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
	.parentsUntil()--------$('li.item-a').parentsUntil('.level-1')--查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

							.css('background-color', 'red');
	.prev()----------------$("p").prev()---------------------取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
	.prevAll()-------------$("div:last").prevAll().addClass("before");--查找当前元素之前所有的同辈元素
	.prevUntil()-----------$("div:last").prevAll().addClass("before");--查找当前元素之前所有的同辈元素
	.siblings()------------$("div").siblings()---------------取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
----------------------------------------------------------------------属性-----------------------------------------------------------------------------------------
一:属性
	1:attr(name|pro|key,val|fn)---------------------------设置或返回被选元素的属性值。
		- 一个参数 获取属性的值
		- 两个参数 设置属性的值
		- 点击加载图片
	2:removeAttr(name)------------------------------------从每一个匹配的元素中删除一个属性
		- 删除属性的值
	3:prop(n|p|k,v|f)  属性的返回值是布尔类型-------------获取在匹配的元素集中的第一个元素的属性值
	4:removeProp(name)------------------------------------用来删除由.prop()方法设置的属性集
		- 删除属性的值
二：循环
	1：each
		- $.each(数组/对象, function(i, v){})

		- $("div").each(function(){})
三：CSS 类
	1：addClass(class|fn)---------------------addClass("has-error")-------------------为每个匹配的元素添加指定的类名。
						----------------------$('ul li:last').addClass(function() {return 'item-' + $(this).index();});
	2：removeClass([class|fn])----------------$("p").removeClass("selected");---------从所有匹配的元素中删除全部或者指定的类。
	3：toggleClass(class|fn[,sw])-------------$("p").toggleClass("selected");---------如果存在（不存在）就删除（添加）一个类。
			(切换，有就去掉，没有就加上)

四：HTML代码/文本/值(没有参数就是获取对应的值)(有参数就是设置对应的值)
	1:html([val|fn])-------------------------$('p').html();---------------------------取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
			加 html标签
			.	html("<span>老师，我好饿。</span>")
	2:text([val|fn])------------------------$('p').text();----------------------------取得所有匹配元素的内容。
			加文本
			.text("老师，我好饿。")
	3:val([val|fn|arr])---------------------$("input").val();-------------------------获得匹配元素的当前值
			- input
				- 获取的是输入的内容
			- checkbox
				- 获取的是value值
			- select
				- 单选 就是获取值
				- 多选 得到的是一个数组，设置的时候也要是数组

----------------------------------------------------------------------CSS--------------------------------------------------------------------------------------------
一：CSS
	1：css(name|pro|[,val|fn])------------$("p").css("color","red");-------------------访问匹配元素的样式属性。
			.css()
				- .css("color")  -> 获取color css值
				- .css("color", "#ff0000") -> 设置值
				- .css({"color": "#cccccc", "border": "1px solid #ff0000"})  -> 设置多个值
				- .css(["color", "border"])  -> 获取多个值
	2:jQuery.cssHooks------------------------------------------------------------------直接向 jQuery 中添加钩子，用于覆盖设置或获取特定 CSS 属性时的方法，
					-------------------------------------------------------------------目的是为了标准化 CSS 属性名或创建自定义属性。
二：位置
	1：offset([coordinates])--------$("p:last").offset({ top: 10, left: 30 });--------------------------------获取匹配元素在当前视口的相对偏移。
				.offset
					- 获取相对位置
					- 比较的对象是 html
	2：position()-------------------$("p:last").html( "left: " + position.left + ", top: " + position.top );--获取匹配元素相对父元素的偏移。
				.position
					- 获取相对已经定位的父标签的位置
					- 比较的是最近的那个做过定位的祖先标签
	3：scrollTop([val])-------------$("div.demo").scrollTop(300);---------------------------------------------获取匹配元素相对滚动条顶部的偏移
				scrollTop([val])
					- 返回顶部
	4：scrollLeft([val])------------$("div.demo").scrollLeft(300);--------------------------------------------获取匹配元素相对滚动条左侧的偏移。
三：尺寸
	1：height([val|fn])-------------$("p").height(20);--------------------------------------------------------取得匹配元素当前计算的高度值（px）。
	2：width([val|fn])--------------$("p").width(20);---------------------------------------------------------取得第一个匹配元素当前计算的宽度值（px）。
	3：innerHeight()----------------$("p:last").text( "innerHeight:" + p.innerHeight() );---------------------获取第一个匹配元素内部区域高度（包括补白、不包括边框）。
	4：innerWidth()-----------------$("p:last").text( "innerWidth:" + p.innerWidth() );-----------------------获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。
	5：outerHeight([soptions])------$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
									--------------------------------------------------------------------------获取第一个匹配元素外部高度（默认包括补白和边框）。
	6：outerWidth([options])--------$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
									--------------------------------------------------------------------------获取第一个匹配元素外部宽度（默认包括补白和边框）。
---------------------------------------------------------------------文档处理------------------------------------------------------------------------------------
一：内部插入(加粗)
	1：append(content|fn)--> 往后加-------------$("p").append("<b>Hello</b>");-----------------------向每个匹配的元素内部追加内容。
		------------------------------------------->A.append(B)把B添加到A的后面------------------------------------------------------
	2：appendTo(content)--> 往后加--------------$("p").appendTo("div");------------------------------把所有匹配的元素追加到另一个指定的元素元素集合中。
		------------------------------------------->A.append(B)把A添加到B的后面------------------------------------------------------
	3：prepend(content|fn)--> 往前加------------$("p").prepend("<b>Hello</b>");----------------------向每个匹配的元素内部前置内容
		------------------------------------------->A.prepend(B)把B添加到A的前面------------------------------------------------------
	4：prependTo(content)--> 往前加-------------$("p").prependTo("#foo");----------------------------把所有匹配的元素前置到另一个、指定的元素元素集合中。
		--------------------------------------------A.prependTo(B) -> 把A添加到B的前面-----------------------------------------------------
二：外部插入(加粗)
	1：after(content|fn)--------------$("p").after("<b>Hello</b>");------------------------在每个匹配的元素之后插入内容。
		after(content|fn)   --> 往后加 -------------A.after(B)--> 把B添加到A的后面
	2：before(content|fn)-------------$("p").before("<b>Hello</b>");-----------------------在每个匹配的元素之前插入内容。
							--> 往前加--------------A.before(B)--> 把B添加到A的前面
	3：insertAfter(content)-----------$("p").insertAfter("#foo");--------------------------把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
							--> 往前加--------------A.before(B)--> 把A添加到B的前面						A.insertAfter(B)	--> 把A添加到B的后面
	4：insertBefore(content)----------$("p").insertBefore("#foo");-------------------------把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
三：包裹
	1：wrap(html|ele|fn)--------------$("p").wrap("<div class='wrap'></div>");-------------把所有匹配的元素用其他元素的结构化标记包裹起来。
													A.wrap(B)  --> B包A
	2：unwrap()-----------------------$("p").unwrap()--------------------------------------这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。
													unwrap()- 不要加参数					匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。
	3：wrapAll(html|ele)--------------$("p").wrapAll("<div></div>");-----------------------将所有匹配的元素用单个元素包裹起来
	4：wrapInner(html|ele|fn)---------$("p").wrapInner("<b></b>");-------------------------将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
四：替换
	1：replaceWith(content|fn)--------$("p").replaceWith("<b>Paragraph. </b>");------------将所有匹配的元素替换成指定的HTML或DOM元素
													A.replaceWith(B)  --> B替换A
	2：replaceAll(selector)-----------$("<b>Paragraph. </b>").replaceAll("p");-------------用匹配的元素替换掉所有 selector匹配到的元素。
													A.replaceAll(B)   --> A替换B
五：删除
	1：empty()------------------------$("p").empty();--------------------------------------删除匹配的元素集合中所有的子节点----清空 内部清空
	2：remove([expr])-----------------$("p").remove();-------------------------------------从DOM中删除所有匹配的元素-----------删除 整体都删除
	3：detach([expr])-----------------$("p").detach();-------------------------------------从DOM中删除所有匹配的元素-----------剪切  多保存在变量中，方便再次使用
六：复制
	clone([Even[,deepEven]])-------$("b").clone().prependTo("p");-----------------------克隆匹配的DOM元素并且选中这些克隆的副本。

--------------------------------------------------------------------------动画------------------------------------------------------------------------------------------
一：基本
	1:show([s,[e],[fn]])----------------$("p").show()------------------------------------显示隐藏的匹配元素。
	2:hide([s,[e],[fn]])----------------$("p").hide()------------------------------------隐藏显示的元素
	3:toggle([s],[e],[fn])--------------$('td).toggle();---------------------------------用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件
二：滑动
	1:slideDown([s],[e],[fn])-----------$("p").fadeIn("slow");---------------------------通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
																					  -这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
	2:slideUp([s,[e],[fn]])-------------$("p").slideUp("slow");--------------------------通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
	3:slideToggle([s],[e],[fn])---------$("p").slideToggle("slow");----------------------通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
三：淡入淡出
	1:fadeIn([s],[e],[fn])
	2:fadeOut([s],[e],[fn])
	3:fadeTo([[s],o,[e],[fn]])
		- 淡出到0.66透明度
	4:fadeToggle([s,[e],[fn]])
		- .fadeToggle(3000, function () {
            alert("真没用3");
        });
四：自定义
	animate(p,[s],[e],[fn])1.8*
		- css属性值都可以设置
		- 女朋友变小（漏气）

----------------------------------------------------------------------事件处理---------------------------------------------------------------------------------------
一：之前绑定事件的方式：
	1. onclick=clickMe();  function clickMe() {}
	2. ele.onclick = function(){}
	3. ele.addEventListener("click", function(){})

二：jQuery绑定事件的方式：
	1. $(ele).on("click", function(){})
	2. $("tbody").delegate(".btn-warning", "click", function(){})
	3. $("tbody").on("click",".btn-warning",function(){})  我们要用的事件委派

三：常用事件
	1:blur([[data],fn])----------------$("p").blur();-----------------------------------------当元素失去焦点时触发 blur 事件。
	2:focus([[data],fn])---------------$(document).ready(function(){--------------------------当元素获得焦点时，触发 focus 事件
									  $("#login").focus();
									});
									- 获取焦点
									- 搜索框例子
	3:change([[data],fn])--------------("input[type='text']").change( function() {------------当元素的值发生改变时，会发生 change 事件。
										  // 这里可以写些验证代码
									 });
		- select
	4:click([[data],fn])----------------$("p").click( function () { $(this).hide(); });--------触发每一个匹配元素的click事件
		- 点击
	5:dblclick([[data],fn])-------------$("p").dblclick( function () { alert("Hello World!"); });---当双击元素时，会发生 dblclick 事件
		- 双击
	6:scroll([[data],fn])---------------$("div").scroll(function() {
										  $("span").text(x+=1);-------------------------------当用户滚动指定的元素时，会发生 scroll 事件
		- 滚动							  });
	7:submit([[data],fn])--------------$("form").submit( function () {--------------------------当提交表单时，会发生 submit 事件
									  return false;
		-提交							} );
		error([[data],fn])
----不常用-------------------
	focusin([data],fn)----------------------------当元素获得焦点时，触发 focusin 事件。
	focusout([data],fn)---------------------------当元素失去焦点时触发 focusout 事件。
	keydown([[data],fn])--------------------------当键盘或按钮被按下时，发生 keydown 事件。
	keypress([[data],fn])-------------------------当键盘或按钮被按下时，发生 keypress 事件。
	keyup([[data],fn])----------------------------当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
	mousedown([[data],fn])------------------------当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
	mouseenter([[data],fn])-----------------------当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
	mouseleave([[data],fn])-----------------------当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。
	mousemove([[data],fn])------------------------当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
	mouseout([[data],fn])-------------------------当鼠标指针从元素上移开时，发生 mouseout 事件
	mouseover([[data],fn])------------------------当鼠标指针位于元素上方时，会发生 mouseover 事件
	mouseup([[data],fn])--------------------------当在元素上放松鼠标按钮时，会发生 mouseup 事件。
	resize([[data],fn])---------------------------当调整浏览器窗口的大小时，发生 resize 事件
	select([[data],fn])---------------------------当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
	unload([[data],fn])---------------------------在当用户离开页面时，会发生 unload 事件。
四：页面载入
	ready(fn)
		$(document).ready(function(){
			// 在这里写你的代码...
		});
		文档树加载完之后绑定事件（绝大部分情况下）
		$(document).ready(function(){
			// 绑定事件的代码
			....
		})
	简写：
		$(function($){
			// 绑定事件的代码
			....
		});
----------------------------------------------------------------------------jQuery扩展---------------------------------------------------------------------------
	$.xxx()

		$.extend({
			"GDP": function () {
				console.log("戴小红花");
			}
		});

		- 给jQuery添加扩展
		- $.GDP()

	$("").xxx()

		$.fn.extend({
			"BJG": function () {
				console.log("英语八级就是好！");
			}
		})

		- 给jQuery对象添加扩展
		- $(":input").BJG()

	保存函数（func1）私有
	(function(jq){
		// 搞事情
		$.fn.extend({
			"BJG": function () {
			func1();
				console.log("英语八级就是好！");
			}
		});
		function func1() {
			// 搞小事情
			。。。。
		}
	})(jQuery);
-----------------------------------------------------------------------------常用插件--------------------------------------------------------------------------------
	- Sweet Alert
	- jQuery lazyload
		- 懒加载图片
	- Font Awesome
		- 字体图标
	- Toastr
		- 通知栏的插件