jQuery内容学习总结2

类操作

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){})

可以遍历指定的元素集合，通过回调函数返回遍历元素的序列号

事件

1. 加载事件
   (相当于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页面打开是无效的。