类操作
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(“backgroundcolor”,“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(){});
2.事件类型
blur、focus、load、resize、scroll、
unload、click、dblclick、mousedown、
mouseup、mousemove、mouseover、
mouseout、mouseenter、mouseleave、
change、select、submit、keydown、
keypress、keyup、error等。
3.事件绑定
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 只会在绑定它的元素上被调用，而不会在后代节点上被触发
4.事件移除
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>
三种方式：
1.添加一个"会话cookie"
$.cookie(‘the_cookie’, ‘the_value’);
2.创建一个cookie并设置有效时间为 7天
$.cookie(‘the_cookie’, ‘the_value’, { expires: 7 });
3.创建一个cookie并设置 cookie的有效路径
$.cookie(‘the_cookie’, ‘the_value’, { expires: 7, path: ‘/’ });
4.读取cookie
$.cookie(‘the_cookie’);
5.删除cookie
$.cookie(‘the_cookie’, null); //通过传递null作为cookie的值即可
6.可选参数
$.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；
注意：cookie是基于域名来储存的。要放到测试服务器上或者本地localhost服务器上才会生效。cookie具有不同域名下储存不可共享的特性。单纯的本地一个html页面打开是无效的。
