jQuery

介绍

jQuery是一个快速、简洁的JavaScript框架，宗旨是写得少，做的多。
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

大致为：选择器，文档处理，属性操作，类操作，遍历，事件，动画，Ajax，存储等。

jQuery选择器

基本选择器
#id id匹配
.class 类匹配
Element 元素名匹配
∗ 匹配所有元素
E1,E2,E3 分组匹配
层次选择器
$(“E1 E2”) 选择E1下所有E2
$(“E1> E2”) 选择E1下的子E2,的元素
$(“E1+ E2”) 选择E1后紧相邻的
$(“E1~ E2”) 选择E1之后的所有
补充说明：
( “ E 1 + E 2 ” ) 可以用 (“E1 + E2”)可以用 (“E1+E2”)可以用(E1).next(E2)代替
( “ E 1 E 2 ” ) 可以用 (“E1 ~ E2”)可以用 (“E1 E2”)可以用斜体样式(E1).nextAll(E2)代替
过滤选择器
- 通过特定的过滤规则来筛选出需要的DOM元素，以冒号(:)开头。
- 3.1 基本过滤选择器
  :first
  :last
  :not(E1) 去除所有E1选择器匹配的元素
  :even 偶数
  :odd 奇数
  :eq(index) 索引值是index
  :gt(index) 索引值大于index的元素
  :lt(index) 索引值小于index的元素
  :header 所有标题元素
  :animated 正在执行动画的所有元素
- 3.2 内容过滤选择器
  :contains(text) 含有text文本内容的元素
  :empty 不包含子元素或文本的空元素
  :has(E1) 包含有(E1选择器匹配的元素) 的所有元素
  :parent 含有子元素或文本的元素
- 3.3 可见性过滤选择器
  :hidden 所有不可见元素
  :visible 所有可见元素
- 3.4 属性过滤选择器
  [attribute] 拥有此属性的元素
  [attribute=value] 属性值为value的元素
  [attribute!=value] 属性值不为value的元素
  [attribute^=value] 属性值以value开始的元素
  [attribute$=value] 属性以value值结束的元素
  [attribute*=value] 属性中含有value的元素
  [A1][A2]…A[N] 用属性选择器合并成一个复合属性选择器。满足多个条件。
- 3.5 子元素过滤选择器
  :nth-child(index/even/odd) 父元素下的第index素或奇偶元素
  :first-child 每个父元素的第1个子元素
  :last-child 每个父元素的最后1
  :only-child 某个元素是它父元素中惟一的子元素, 将会被匹配. 如果元素中含有其他元素,则不会被匹配
  :nth-child()
- 3.6 表单对象属性过滤选择器
  :enabled 所有可用元素
  :disabled 所有不可用元素
  :checked 所有被选中的元素(单选框,复选框)
  :selected 所有被选中的选项元素(下拉列表)
表单选择器
:input 匹配所有元素
:text 所有单行文本框集合元素 $(“:text”)
:password 所有密码框集合元素 $(“:password”)
:radio 所有单选框集合元素 $(“:radio”)
:checkbox 所有复选框集合元素 $(“:checkbox”)
:submit 匹配所有提交按钮集合元素 $(“:submit”)
:image 匹配所有图像按钮集合元素 $(“:image”)
:reset 匹配所有重置按钮集合元素 $(“:reset”)
:button 匹配所有按钮集合元素 $(“:button”)
:file 匹配所有文件域集合元素 $(“:file”)
:hidden 匹配所有不可见元素集合元素 $(“:hidden”)

文档处理

内部插入
append / appendto 向后追加
prepend / prependto 向前追加（最上边）world!”)
html( )
:获取匹配元素集合中第一个元素的HTML内容并返回字符串
text()方法
获取匹配元素集合中每个元素的内容并返回字符串
val()方法
元素的值通过 value 属性设置的。多用于 input 元素。
外部插入
before / insertBefore
此方法将参数指定的内容插入到匹配元素集合中的每个元素之前，并返回jQuery对象。
删除
remove()方法
移除被选元素，包括所有文本和子节点
detach()方法
移除被选元素，包括所有文本和子节点detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。
empty()方法
从被选元素移除所有内容，包括所有文本和子节点。
替换
replaceWith()方法
用指定的 HTML 内容或元素替换被选元素
例：$(“p”).replaceWith(“Hello world!”);
复制
.clone()方法
例： ( “ b o d y “ ) . a p p e n d ( (“body”).append( (“body”).append((“p”).clone());
包装
1.wrap()方法
例：$(“p”).wrap(“

单个p

“);
2.wrapAll()方法
$(selector).wrapAll(wrapper) 在指定的 HTML内容或元素中放置所有被选的元素
3.unwrap()方法
$(selector).unwrap() 删除被选元素的父元素
4.wrapInner()方法
$(selector).wrapInner(wrapper)使用指定的HTML 内容或元素，来包裹每个被选元素中的所有内容

属性操作

元素属性操作

获取/设置
attr()方法
设置或获取被选元素的属性值/自定义属性返回属性值
获取属性例： ( “ i m g “ ) . a t t r ( “ w i d t h “ ) ; 设置属性例： (“img”).attr(“width”); 设置属性例： (“img”).attr(“width”);设置属性例：(“img”).attr({“width”:“180”,‘height’:‘150’}); – 大号变为json对象
prop() 方法
设置或返回被选元素的属性和值（计算过的）
删除属性
removeAttr()方法
从被选元素中移除属性例：$(“p”).removeAttr(“id”)
removeProp() 方法
移除由 prop() 方法设置的属性。
- 样式属性操作
  1. 设置样式
  CSS()方法 ：计算过的样式
  设置或返回被选元素的一个或多个样式属性。
  $(“p”).css(“background-color”) #获得
  $(“p”).css(“background-color”,‘red’)#设置
  2. 位置
  offset()方法
  返回或设置匹配元素相对于文档的偏移（位置）
  $(selector).offset().left/top 获取
  $(selector).offset({x:100,y:100}), 设置自动设置成了定位
  position()
  返回匹配元素相对于父元素的位置（偏移）
  此方法只对可见元素有效。
  scrollLeft()
  返回或设置匹配元素的滚动条的水平位置
  $(“div”).scrollLeft(100);
  scrollTop()
  返回或设置匹配元素的滚动条的垂直位置
  $(“div”).scrollTop(100);
  3. 尺寸
  width()
  返回或设置匹配元素的宽度
  innerWidth()
  返回元素的宽度,该方法包含padding，但不包含 border 和margin
  outerWidth()
  返回元素的高度,包含 padding 和border
  outerWidth(true)
  返回元素的高度,包含 padding 和border 和margin

类操作

1. 添加类   addClass()
    向被选元素添加一个或多个类。
    例子：$("p:first").addClass("intro");
2. 移除类    removeClass()
    从被选元素移除一个或多个类。
    例子：$("p").removeClass("intro");
3. toggleClass()
    有就删除，没有就添加
    例子：$("p").toggleClass("main");
4.  检查是否含有    hasClass()
    检查被选元素是否包含指定的class
    例子:alert($("p:first").hasClass("intro"));

遍历

$.each(遍历对象，function( index,遍历对象中的元素){ })
- 1. 向上遍历
parent()
返回被选元素的直接父元素。
parents()
返回被选元素的所有祖先元素，可以加区间
$(“span”).parents(“ul”); 返回所有元素的所有祖先并且它是

元素
parentsUntil()
法返回介于两个给定元素之间的所有祖先元素。
$(“#big2”).parentsUntil(“#big0”).css(“background-color”,“green”);
- 2. 向下遍历
children()
方法返回被选元素的所有直接子元素
find()
返回被选元素的后代元素，一路向下直到最后一个后代。
$(“div”).find(“*“); 返回div所有后代
- 3. 水平(同级)
1.siblings()
返回被选元素的所有同胞元素。
2.next()
法返回被选元素的下一个同胞元素。
3.nextAll()
返回被选元素的所有跟随的同胞元素。
4.nextUntil()
返回介于两个给定参数之间的所有跟随的同胞元素。
不包括匹配的元素本身
5.prev(), prevAll() & prevUntil()
上一个与前面用法一样，方向相反

过滤

1**. first()**
返回被选元素的首个元素
2. last()
返回被选元素的最后一个元素
3. eq()
返回被选元素中带有指定索引号的元素
eg: ( “ d i v “ ) . e q ( 3 ) . c s s ( “ b a c k g r o u n d − c o l o r “ , “ g r e e n “ ) ; ∗ ∗ 4. f i l t e r ( ) ∗ ∗ 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回例如： (“div”).eq(3).css(“background-color”,”green”); **4. filter()** 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回例如： (“div”).eq(3).css(“background−color”,”green”);∗∗4.filter()∗∗允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回例如：(“.parent div”).filter(“:odd”).css(“color”,“red”);
5. not()
返回不匹配标准的所有元素
get方法与eq方法
get()返回dom eq()返回Jquery
区别：eq返回的是一个jquery对象 get返回的是一个html 对象数组
each()
$(selector).each(function(index){})
可以遍历指定的元素集合，通过回调函数返回遍历元素的序列号

事件

加载事件
(相当于js中的onload)
全写 ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) 简写 (document).ready(function(){}) 简写 (document).ready(function())简写(function(){}) ，，写法二$(()=>{ })
- onload和ready区别
  1.执行时间
  window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
  $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
  2.编写个数不同
  window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
  $(document).ready()可以同时编写多个，并且都可以得到执行
  3.简化写法
  window.onload没有简化写法
  ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) 可以简写成 (document).ready(function(){})可以简写成 (document).ready(function())可以简写成(function(){});
事件类型
blur、focus、load、resize、scroll、
unload、click、dblclick、mousedown、
mouseup、mousemove、mouseover、
mouseout、mouseenter、mouseleave、
change、select、submit、keydown、
keypress、keyup、error等。
事件绑定
bind
bind(type、[data]、function)
Type为事件类型
data为方法传递的参数,可以忽略.
function是用来绑定的处理函数.
例如：为id为hot 的div的元素绑定单击事件。
$(“#hot”).bind(“click”,function(){
alert(“层被点击”);
})
on
$(selector).on(event,childselector,data,function)
bind跟on绑定事件的区别：
on 阻止了事件冒泡
绑定单个事件
bind(“事件名”,function(){})
on(“事件名”,function(){})
绑定多个事件
on({“事件名1”:function(){},”事件名2”:function()
{}})
一次绑定多个事件
$(“div”).bind(“mouseover mouseout”,function(){
$(this).toggleClass(“over”);
})
一次性绑定事件
one(“事件名”,function(){})
hover()
合成事件，方法触发
hover(enter,leave)
用于模拟光标悬停事件.当光标移动到元素上时,
会触发指定的第一个函数,当光标移出这个元素
时,触发指定的第二个函数.
4. 常见事件
mouseenter 进入
mouseleave 离开
与js区别
mouseenter事件和mouseover的区别关键点就是：冒泡的方式处理问题mouseover 会冒泡，触发父节点的mouseover事件
mouseenter 只会在绑定它的元素上被调用，而不会在后代节点上被触发
事件移除
unbind
$(“#pos”).unbind(“click”);
off
off(“事件名”)
6. 事件冒泡
冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。
阻止事件冒泡的方法
在绑定的事件中加入event参数并在函数中增加ent.stopPropagation()调用就可以阻止事件冒泡。也可以使用return false阻止冒泡。
event.preventDefault();
作用是阻止默认行为
7. 模拟事件
$(“seletor”).trigger(“event”)
会触发默认行为
$(“seletor”).triggerHandler(“event”)
不会触发默认行为
实现通过一个事件去操作另一个事件的执行，为了调用自定义的事件（通常与bind或者on事件合作）
模拟操作可以使用trigger()方法来完成。
例如：
$(“#pos”).click(function(){
$(“#btn”).trigger(“click”);//模拟操作触发的#btn
的click事件.
})
模拟事件可以实现传参数给操作的事件
**trigger(type [,data])**方法有两个参数,
第一个参数是要触发的事件类型,第二个参数是传递给事件处理函数的附加数据,以数组的形式传递.
$(“#btn”).bind(“click”,function(event,mes,mes2)
{
alert(mes+”,”+mes2);
})
$(“#btn”).trigger(“click”,[“Hello”,”World!”]);
注意:在事件绑定时的event参数是不可
以省略的.但在调用时可以不指定。

动画

1，隐藏、显示
    $("p").hide();
    $("p").show();
    $("p").toggle();
2，淡入、淡出
    $("p").fadeIn();
    $("p").fadeOut();
    $("p").fadeTo();
    例:$("p").fadeTo(1000,0.4);
    $("p").fadeToggle();
3，划入、划出
    $("p").slideDown();
    $("p").slideUp();
    $("p").slideToggle();
4，自定义动画
    提供easing参数swing开头结尾慢,中间快 （默认）linear （匀速）
     $("div").animate({left:'250px'}，
     3000,"linear",callback);
     $(“#pos”).animate({left:”+=20px”,height:”+=20px”},fast   function(){ });
5，停止动画
    $("p").stop();
        停止第一个动画
    $("p").stop(stopAll,goToEnd);
        停止所有动画
            eg：$("p").stop(true,true);
        stopAll  ：   true
        是否停止全部    
        gotoEnd   ：       true
是否允许完成当前的动画
6，延迟动画
    $("p").delay("slow").fadeIn();
        eg：delay(1000)
     $(selector).delay(duration)
7，判断元素是否处于动画状态
    $(“#ele”).is(“:animated”)
    说明：动画是顺序执行的。

AJAX

function AJAX(path) {
$.ajax({
    type: 'get',
    url: path,
    dataType: 'jsonp',
    success: function(data) {
    console.log('请求成功！', data)
},
    error: function() {
    console.log('请求失败！')
    }
})
}
AJAX('https://apis.map.qq.com/output=jsonp');
异步方法
    .done( )
    .fali( )
    .always( )
    .then( )

存储

cookie
    使用插件
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.cookie.js"></script>

三种方式：

添加一个”会话cookie”
$.cookie(‘the_cookie’, ‘the_value’);
创建一个cookie并设置有效时间为 7天
$.cookie(‘the_cookie’, ‘the_value’, { expires: 7 });
创建一个cookie并设置 cookie的有效路径
$.cookie(‘the_cookie’, ‘the_value’, { expires: 7, path: ‘/’ });
读取cookie
$.cookie(‘the_cookie’);
删除cookie
$.cookie(‘the_cookie’, null); //通过传递null作为cookie的值即可
可选参数
$.cookie(‘the_cookie’,‘the_value’,{
expires:7,
path:’/’,
domain:‘jquery.com’,
secure:true
}）
expires：（Number|Date）有效期；设置一个整数时，单位是天；也可以设置一个日期对象作为Cookie的过期日期；
path：（String）创建该Cookie的页面路径；
domain：（String）创建该Cookie的页面域名；
secure：（Booblean）如果设为true，那么此Cookie的传输会要求一个安全协议，例如：HTTPS；