Jquery 总结

$()共有4种:

1. $(“选择器”) 查找DOM元素，并包装进jQuery对象中
2. $(DOM元素对象) 不用查找，直接将DOM元素包装进jQuery对象中
3. $(HTML片段) 创建新元素
4. $(function(){ … }) 绑定DOMContentLoaded事件处理函数，在DOM内容加载后就自动提前执行！

1. 引入jQuery.js: 2种

(1). 引入项目本地jquery.js文件:

<script src="js/jquery-1.11.3.js">

(2). 引入CDN网络中共享的jquery.js文件:

<script src="官方提供的CDN上jquery.js文件地址">

2. 创建jQuery类型子对象: 2种

(1). 只有jQuery类型子对象才能使用jQuery家简化版函数。

DOM家元素对象无权直接使用jQuery家简化版函数。
所以只要使用jQuery家简化版函数，都要先创建jQuery家子对象，其中保存一个要操作的DOM元素对象。

(2). 如何:2种

:
a. 查找DOM元素对象，并保存进新创建的jQuery对象中:
var $jq子对象=$(“选择器”)
b. 不查找，直接将DOM元素对象保存进新创建的jQuery对象中:
var $jq子对象=$(DOM元素对象)

3. 原理:

(1). $=jQuery=new jQuery
(2). jq子对象其实是一个类数组对象，可保存找到的多个DOM元素对象
(3). 对jq子对象调用简化版函数，会被自动翻译为对应的原生DOM的方法和属性。
所以jQuery中的所有简化版函数效果和DOM中原生方法和属性效果一样。
jQuery中的this、e、e.target等，和DOM中的完全一样！

4. jQuery简化版函数3大特点:

(1). 自带for循环: 对整个jquery子对象调用一次简化版函数，等效于对jQuery子对象中保存的每个DOM元素对象分别调用一次对等的DOM原生方法或属性——不用自己写for循环
(2). 一个函数两用: 调用函数时:
a. 没给新值作为参数，默认执行获取旧值的操作
b. 给了新值作为参数，自动切换为执行修改操作
(3). 多数函数都会返回正在操作的.前的主语jq对象——链式操作。

5. 查找元素:

(1). jQuery支持用所以CSS3选择器查找
(2). jQuery新增选择器: (css中不能用)
a. 基本过滤: (下标从0开始)
:first :last :eq(i) :lt(i) :gt(i) :even :odd
b. 内容过滤:
:contains(文本) :has(选择器) :parent :empty
c. 可见性过滤:
:visible :hidden(只能选择display:none和input type=“hidden”)
d. 表单元素过滤:
:input :text :password :radio :checkbox … …
(3).用节点间关系查找: 2大类关系, 8个函数
a. 父子关系：3个函数:
$元素.parent()
$元素.children(“选择器”)
$元素.find(“选择器”)
b. 兄弟关系：5个
$元素.prev()
$元素.prevAll(“选择器”)
$元素.next()
$元素.nextAll(“选择器”)
$元素.siblings(“选择器”)

6. 修改元素: 3种:

修改中的所有函数，都是一个函数两用！

(1). 内容: 3种:

a. 原始HTML内容: 
$元素.html("新HTML内容") 代替.innerHTML
b. 纯文本内容:    
$元素.text("纯文本内容") 代替.textContent
c. 表单元素的值:  
$元素.val("新值") 代替.value

(2). 属性: 3种:

a. 字符串类型的HTML标准属性:2种: 
1). $元素.attr("属性名","新属性值")
代替 元素.getAttribute()和setAttribute()
2). $元素.prop("属性名", bool值) 
代替 元素.属性名=bool值
b. bool类型的HTML标准属性: 只有1种
$元素.prop("属性名", bool值) 
代替 元素.属性名=bool值
c. 自定义扩展属性:只有一种: 
$元素.attr("属性名","新属性值")
代替 元素.getAttribute()和setAttribute()
反过来总结: 
$元素.attr()可修改一切字符串类型的属性(字符串类型HTML标准属性+自定义扩展属性)
$元素.prop()可修改一切可用.访问的属性(所有HTML标准属性)

(3). 样式:

a. 获取或修改单个css属性: 只有1种
$元素.css("css属性名", "属性值")
获取属性值时被翻译为getComputedStyle(元素)
修改属性值时被翻译为.style.css属性=属性值
b. 使用class批量修改样式: 
$元素.addClass("class名")
$元素.removeClass("class名")
$元素.hasClass("class名")
$元素.toggleClass("class名")

修改相关的函数都可同时修改多个属性值:
$元素.attr或prop或css({
属性名:“属性值”,
… : …
})

7. 添加删除替换克隆元素:

(1). 添加新元素: 2步

a. 使用HTML片段批量创建新元素: 
$(`HTML片段`)
b. 将新元素添加到DOM树: 5种方式，10个函数 
1). 末尾追加: 
$父元素.append($新元素)
$新元素.appendTo($父元素)
2). 开头插入: 新增: 
$父元素.prepend($新元素) 
$新元素.prependTo($父元素)
3). 插入到一个现有元素之前: 
$现有元素.before($新元素)
$新元素.insertBefore($现有元素)
4). 插入到一个现有元素之后: 
$现有元素.after($新元素)
$新元素.insertAfter($现有元素)
5). 替换现有元素: 
$现有元素.replaceWith($新元素)
$新元素.replaceAll($现有元素)

(2). 删除元素: $元素.remove()
(3). 克隆元素: $元素.clone()
(4). 判断一个元素是否具有什么特征: $元素.is(“选择器”)

8. 事件绑定:

(1). 标准写法:
$元素.on(“事件名”, 事件处理函数)
$元素.off(“事件名”, 原事件处理函数)
(2). 简写: $元素.事件名(事件处理函数)
(3). 事件委托:
$父元素.on("事件名","选择器",function()...this指向e.target...)(4).页面加载后自动执行:a.先$(document).ready(function(){})
简写: $(function()...)b.后$(window).load(function(){ … })
(5). 鼠标事件:
mouseenter代替mouseover
mouseleave 代替mouseout
简写: .hover(处理函数1,处理函数2)
等于: .mouseenter(处理函数1)
.mouseleave(处理函数2)
(6). 模拟触发:
a. 标准: $元素.trigger(“事件名”)
b. 如果属于常用事件列表，可简写为:
$元素.事件名()

9. 动画:

(1). 简单动画: 3种固定效果
a. 显示隐藏:
.show() .hide() . toggle()
b. 淡入淡出:
.fadeIn() .fadeOut() .fadeToggle()
c. 上滑下滑:
.slideUp() .slideDown() .slideToggle()
(2). 万能动画:
$元素.animate({
css属性: 目标值
},动画持续时间,function(){
动画播放结束自动执行
})
(3). 排队和并发:
a. 放在一个animate()中的多个css属性并发变化
b. 放在一个元素的多个animate()中的多个css属性排队变化
(4). 停止动画:
a. 只停止当前一个动画
$元素.stop()
b. 停止队列中所有动画
$元素.stop(true)
(5). 选择器匹配正在播放动画的元素: :animated

10. 类数组对象操作:

(1). 遍历查找结果中每个DOM元素对象:
$查找结果.each(function(i,domElem)...)(2).查找一个DOM元素在整个查找结果中的下标位置vari=$查找结果.index(要找的DOM元素)

11. 添加自定义函数:

(1). 添加jQuery.fn.自定义函数=function(){ … }
(2). 调用: $jq对象.自定义函数()

12. 封装自定义插件:

(1). 封装:

a. 将css提取到独立的插件.css文件中
b. 在独立js文件中为jquery原型对象添加自定义插件函数
jQuery.prototype.自定义插件函数=function(){
	//自动做2件事: 
		//1. 为插件所在元素及其子元素自动添加class
		//2. 将原网页中插件所需的事件绑定代码剪切到插件函数中
}

(2). 使用自定义插件:

a. 引入jquery.js，插件.js，插件.css
b. 按插件要求编写HTML内容，不用加任何class
c. 在自定义js中，查找插件所在元素，调用自定义插件函数

13. 发送ajax请求:

$.ajax({
url:“服务器端接口地址”,
type:“get或post”,
data:{ 参数名: 参数值, … },
dataType:“json”,
success:function(result){
//result就是服务器端返回的结果
//不用自己调JSON.parse()
}
})

14. 跨域:

(1). 同源策略(CORS): 浏览器只允许当前网页中的ajax请求使用自己网站的资源，禁止ajax请求使用其他网站的资源。
(2). 解决: cors方式：只靠服务器端就能完成:
res.writeHead(200,{
… …
“Access-Control-Allow-Origin”: “http://客户端网页所在网址”
})
(3). 结果: 服务器端将响应结果中的寄件人地址伪装成和客户端网页所在地址一致，就可骗过浏览器cors策略的检查，让ajax顺利使用其他网站服务器端返回的结果数据了。
(4). 问题: 服务器端必须知道客户端网站的域名或ip地址，受局限。
(5). 解决: JSONP方式，服务器端无需知道任何客户端的IP或域名，没有局限。
a. 客户端提前定义处理数据的函数: function 函数名(形参){ … }
b. 客户端不要用ajax或xhr发送请求，改为用<script src="接口地址">发送请求
c. 服务器端将要返回的数据，拼接进一条字符串格式的js函数调用语句中，然后返回整条包含数据的函数调用语句。函数名与客户端提前定义的处理函数名保持一致
d. 结果: <script>收到服务器端返回的函数调用语句后，立刻执行，自动调用第一步已经定义好的处理函数并将拼接在函数调用语句中的数据，传给处理函数的形参变量。