JQuery #查素 #修改 #添加/删除/替换 #事件 #动画 #类数组对象操作 #添加自定义函数 #封装自定义插件 #ajax

简单介绍以下JQuery

1.JQuery还是在执行DOM增删改查+事件绑定
2.为什么用：简单,JQ几乎没有浏览器兼容问题
3.何时：以前的项目几乎所有都是JQ实现的
4.问题：虽然对步骤进行了简化,但是没有简化流程,只有PC端,没有移动端
5.未来：JQ用的越来越少 但是我们还是要了解

如何使用

1.将jQuey.js文件下载到项目本地文件夹中，然后在页面中使用<script src="js/jquery.js">方式引入
问题: jquery.js文件只部署在一个地方的服务器上。距离服务器不同远近的用户，访问同一个文件的速度和体验受到距离影响差距很大
2.用CDN网络: 不把jQuery.js文件下载到项目本地文件夹
	a. 什么是CDN网络:全球多个服务器组成一个共享的网络 可根据用户所在的位置，智能选择对应的服务器为用户下载资源
	b. 几乎所有外网都有JQ的CDN网址

JQuery的原理

1.引入后就是一种引入新的类型,都是由构造函数和原型对象组成;

2.问题：jQuery.prototype中所有的简化版函数，都是为了执行DOM操作的
  解决:只要想用jQuery家简化版函数操作DOM元素，都需要先用jQuery构造函数创建一个jQuery家的子对象

3.问题: 事件绑定时 我们调用的是click()函数，不是onclick；获取或修改元素内容时，我们调用的html()函数，不是innerHTML
  解决: 其实，我们对jquery子对象调用简化版函数时，jQuery对象在底层都会悄悄的将jQuery简化版函数，自动翻译为DOM标准的属性或函数。所以，最终作用到DOM元素上的还是以前我们学过的DOM的属性和函数

4.问题: 每次创建jquery类型的子对象，都要写new jQuery()
  解决: 创建jQuery子对象的标准写法: var jq对象=$("选择器")

5.问题:jquery也能查找元素对象保存在变量中，如何能明显区分变量中保存的是jQuery对象，还是DOM元素对象？
  解决:凡是$()找到的元素对象，在保存到变量时，变量名一律以$开头！比如: var $btn1=$("#btn1");

6.问题: this能不能继续调用jQuery家的简化版函数？
  原因: 因为this指向的是jQuery对象中保存的DOM元素对象，所以this本质上是DOM，不能用jQuery家简化版函数
  解决: var $this=$(this);

查找元素

1.JQuery 支持使用所有CSS3选择器查找元素
2.JQuery 扩展出了个别的选择器 

(1)基本过滤器：
包括: 
		:first  选择整个查找结果中第一个元素
		:last   选择整个查找结果中最后一个元素
		:even  选择整个查找结果中下标为偶数位置的元素
		:odd   选择整个查找结果中下标为奇数位置的元素
		:eq(i)  选择整个查找结果中下标等于i位置的一个元素
		:lt(i)   选择整个查找结果中下标<i位置的所有元素
		:gt(i)   选择整个查找结果中下标>i位置的所有元素
		
(2)内容过滤：(根据元素内容中的关键词来匹配元素)
		:contains(关键词)  选择内容中包含指定关键词的元素
		:has(选择器) 选择包含符合选择器要求的子元素的父元素
	    :empty  选择没有任何内容的空元素
		:parent  :empty的反义词，选择内容不为空的元素
		
(3)可见性过滤：(根据元素是否可见，来选择不同的元素)
		:visible   可见
		:hidden    不可见
		在网页中要隐藏元素有4种手段: 
		1). <div id="d1" style="display: none">lorem</div>
  		2). <div id="d2" style="visibility: hidden">lorem</div>
  		3). <div id="d3" style="opacity: 0">lorem</div>
  		4). <input id="d4" type="hidden" name="aa" value="bb"/>
	d. 但是: :hidden只能找到其中2种: 
		display:none 和  <input type=hidden">
		
(4)表单元素过滤选择器: (专门用于选择不同类型的表单元素的选择器)
	    :input 选择一个表单中所有的表单元素(input  select  button  textarea) 
			:input : 可选择所有种类的表单元素
			input : 只是css中一个普通的元素选择器，只能选择input元素。
		2). :text   :password    :radio   :checkbox ... ...
			每种input的type属性值都对应着一个专门的选择器
		   :text 只选择<input type="text">的文本框
		   :radio 只选择<input type="radio">的单选按钮

二. 按节点间关系查找:
1. 父子关系：3个函数(.parent()   .children()    .find() )
	(1). 获得一个元素的父元素: 
	a. DOM中: .parentElement
	b. jq中: .parent()


	(2). 获得一个元素下的所有直接子元素
	a. DOM中: .children //只能获得所有直接子元素，无法有选择的筛选部分想要的子元素
	b. jq中: .children("选择器") 

	(3). 获得一个元素下第一个直接子元素: 
	a. DOM中: .firstElementChild
	b. jq中:  .children(":first-child")
	
	(4). 获得一个元素下最后一个直接子元素
	a. DOM中: .lastElementChild
	b. jq中: 没有提供对应的函数
	
2. 兄弟关系：
	(1). 前一个兄弟: 
	a. DOM中: .previousElementSibling
	b. jq中: .prev();
	c. 问题: prev()只能选择前一个元素，无法选择之前所有兄弟
	d. 解决: prevAll()，可以选择当前元素之前所有兄弟元素

	(2). 下一个兄弟: 
	a. DOM中: .nextElementSibling
	b. jq中: .next();
	c. 问题: next()只能选择下一个元素，无法选择之后所有兄弟
	d. 解决: nextAll()，可以选择当前元素之后所有兄弟元素
	(3). 问题: nextAll()和prevAll()只能要么选之前的元素，要么选之后的元素，无法选除自己之外的所有元素
	(4). 解决: jq中新增了.siblings()，专门选择除自己之外的其余所有平级的兄弟元素

修改元素

修改内容：获取或修改元素开始标签到结束标签之间的原始的HTML片段
	text() - 设置或返回所选元素的文本内容
	html() - 设置或返回所选元素的内容（包括 HTML 标记）
	val() - 设置或返回表单字段的值

修改属性：
(1)字符串类型的HTML标准属性：
	a. DOM中: 2种: 
		1). 旧核心DOM: .getAttribute()，.setAttribute()
		2). HTML DOM