整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

jquery事件处理有哪些-乐字节前端

jquery事件处理有哪些-乐字节前端

eady加载事件

?

Query基础笔记及面试题

1. jQuery 是什么?

2. 为什么要使用 jQuery?

3. jQuery 入口函数

1. jQuery与JavaScript加载模式对比

2. jQuery 其他写法

3. 解决$符号冲突问题

1. 释放 $ 使用权

2. 自定义访问符号

4. jQuery 核心函数

5. jQuery 对象

1. jQuery 对象的本质

6. jQuery 静态方法

1. 什么是静态方法

2. jQuery.holdReady()

3. each 方法

4. map 方法

5. trim 方法

6. isWindow 方法

7. isArray 方法

8. isFunction 方法

7. jQuery 选择器

1. 基础选择器

2. 层次选择器

3. 内容过滤选择器

1. :empty

2. :parent

3. :contains(text)

4. :has(selector)

8. jQuery 属性操作

1. 属性与属性节点

1.什么是属性?

2.如何操作属性?

3.什么是属性节点?

4.如何操作属性节点?

5.属性和属性节点有什么区别?

2. 属性节点方法

1. attr 方法

2. removeAttr 方法

3. prop 方法

4. removeProp 方法

5. attr方法和prop方法区别

9. jQuery Class 操作

1. jQuery Class 类操作

1. addClass

2. removeClass

3. toggleClass

2. jQuery 文本值操作

1. html

2. text

3. val

3. jQuery CSS 样式

1. css 方法

2. width 方法

3. height 方法

4. jQuery 元素位置

1. offset 方法

2. position 方法

5. jQuery scroll 方法

1. scrollTop 方法

2. scrollLeft 方法

10. jQuery 事件

1. 事件绑定

2. 事件解绑

3. 事件坐标

4. 事件冒泡

1. 什么是事件冒泡

2. 阻止事件冒泡

5. 默认行为

1. 什么是默认行为

2. 阻止默认行为

6. 自动触发事件

1. 什么是自动触发事件

2. 自动触发方式

7. 自定义事件

1. 什么是自定义事件

2. 自定义事件的条件

8. 事件命名空间

1. 什么是事件命名空间

2. 添加事件命名空间的条件

3. 事件命名空间注意点(面试题)

9. 事件委托

1. 什么是事件委托

2. 事件委托的好处

3. jQuery 中添加事件委托

10. 移入移出事件

1. mouseenter/mouseleave

2. mouseover/mouseout

3. hover

11. jQuery 动画效果

1. 显示,隐藏动画

1. show

2. hide

3. toggle

4. 注意点

2. 展开,收起动画

1. slideDown

2. slideUp

3. slideToggle

3. 淡入,淡出动画

1. fadeIn

2. fadeOut

3. fadeToggle

4. fadeTo

4. 自定义动画

1. animate

5. 动画队列

6. 动画相关方法

1. delay

2. stop

12. jQuery 文档处理

1. 添加节点

1. 内部插入

2. 外部插入

2. 删除节点

3. 替换节点

4. 复制节点

5. 包裹节点

6. 遍历节点

13. jQuery 面试题

1. 为什么要使用jQuery?jquery有哪些好处?

2. jQuery能做什么?

3. jQuery 库中的 $() 是什么?

4. $(document).ready() 是个什么函数?为什么要用它?

5. (document).ready()方法和window.onload有什么区别?

6. jQuery中.get()提交和.post()提交的区别

7. jQuery中有哪些方法可以遍历节点?

8. $(this) 和 this 关键字在 jQuery 中有何不同?

9. 使用 CDN 加载 jQuery 库的主要优势是什么 ?

10. 如何使用从服务器获取一个复杂数据(对象)?

11. 在使用选择器的时要注意的地方?

12. 有哪些查询节点的选择器?

13. jQuery是如何处理缓存的? ( 要处理缓存就是禁用缓存 )

14. 在jquery中你有没有编写过插件,插件有什么好处?你编写过那些插件?它应该注意那些?

由于答案部分太长了,就不一一给大家演示了,想要获取面试资料答案可以关注我,私信回复“资料”即可免费获取

文档处理

jQuery中对dom元素进行操作。

属性/方法

描述

append(content|fn)

向每个匹配的元素内部追加内容。$("p").append("<b>Hello</b>");向所有段落中追加一些HTML标记。


appendTo(content)

把所有匹配的元素追加到另一个指定的元素中。使用这个方法是颠倒了常规的$(A).appendTo(B)的操作,即不是把B追加到A中,而是把A追加到B中。

$("p").appendTo("div");把所有段落追加到div元素中


prepend(content|fn)

向每个匹配的元素内部前置内容。$("p").prepend("<b>Hello</b>");向所有段落中前置一些HTML标记代码。


prependTo(content)

把所有匹配的元素前置到另一个、指定的元素元素集合中。使用这个方法是颠倒了常规的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。$("p").prependTo("#foo"); 把所有段落追加到ID值为foo的元素中。


after(content|fn)

在每个匹配的元素之后插入内容。$("p").after("<b>Hello</b>");在所有段落之后插入一些HTML标记代码。


before(content|fn)

在每个匹配的元素之前插入内容。$("p").before("<b>Hello</b>");在所有段落之前插入一些HTML标记代码。


insertAfter(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面。$("p").insertAfter("#foo");把所有段落插入到一个元素之后。与 $("#foo").after("p")相同


insertBefore(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的前面。使用这个方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。$("p").insertBefore("#foo");把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。


wrap(html|ele|fn)


把所有匹配的元素用其他元素的结构化标记包裹起来。

$("p").wrap("<div class='wrap'></div>"); 把所有的段落用一个新创建的div包裹起来


unwrap()

这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。

$("p").unwrap(); 把所有段落的父元素直接移除


wrapAll(html|ele)

将所有匹配的元素用单个元素包裹起来。$("p").wrapAll("<div></div>");用一个生成的div将所有段落包裹起来


wrapInner(html|ele|fn)

将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。$("p").wrapInner("<b></b>");把所有段落内的每个子内容加粗


replaceWith(content|fn)

将所有匹配的元素替换成指定的HTML或DOM元素。

$("p").replaceWith("<b>Paragraph. </b>");把所有的段落标记替换成加粗的标记。


replaceAll(selector)

用匹配的元素替换掉所有 selector匹配到的元素。

$("<b>Paragraph. </b>").replaceAll("p");把所有的段落标记替换成加粗标记


empty()

删除、清空匹配的元素集合中所有的子节点。$("p").empty();把所有段落的子元素(包括文本节点)删除


remove([expr])

从DOM中删除所有匹配的元素。$("p").remove();从DOM中把所有段落删除


clone([Even[,deepEven]])

克隆匹配的DOM元素并且选中这些克隆的副本。(传入参数布尔值(true 或者 false)指示事件处理函数是否会被复制。)

$("b").clone().prependTo("p");克隆所有b元素(并选中这些克隆的副本),然后将它们前置到所有段落中。



2 筛选

jQuery中对dom元素进行筛选判断。

属性/方法

描述

first()

first() 获取第一个元素。

$('li').first()


last()

last() 获取最后个元素。

$('li').last()


is(expr|obj|ele|fn)

根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合,或者表达式无效,都返回false。

$("input[type='checkbox']").parent().is("form");由于input元素的父元素是一个表单元素,所以返回true。


has(expr|ele)

保留包含特定后代的元素,去掉那些不含有指定后代的元素。.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。

$('li').has('ul').css('background-color', 'red');给含有ul的li加上背景色


find(e|o|e)

搜索所有与指定表达式匹配的元素。

$("p").find("span");从所有的段落开始,进一步搜索下面的span元素。


parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合。

$("p").parent(".selected");查找段落的父元素中每个类名为selected的父元素。


siblings([expr])

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

$("div").siblings();找到每个div的所有同辈元素。


3 样式

jQuery中对dom元素进行样式上的操作。

属性/方法

描述

addClass(class|fn)

为每个匹配的元素添加指定的类名 $("p").addClass("selected"); 为匹配的元素加上 'selected' 类


removeClass([class|fn])

从所有匹配的元素中删除全部或者指定的类 $("p").removeClass("selected"); 从匹配的元素中删除 'selected' 类


toggleClass(class|fn[,sw])

如果存在(不存在)就删除(添加)一个类。$("p").toggleClass("selected"); 为匹配的元素切换 'selected' 类


hasClass(class)

检查元素是否含有某个特定的类,如果有,则返回true。

$("div").hasClass("protected")


css(name|pro|[,val|fn])

访问匹配元素的样式属性 $("p").css("color") 取得第一个段落的color样式属性的值。$("p").css("color","red"); 将所有段落字体设为红色


height/width([val|fn])

取得匹配元素当前计算的高/宽度值(px)

$("p").height();$("p").width();


offset([coordinates])

获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效

var p=$("p:last");

var offset=p.offset();

p.html( "left: " + offset.left + ", top: " + offset.top );


4 事件

jQuery中dom元素事件的操作。

属性/方法

描述

on(eve,[sel],[data],fn)1.7+

在选择元素上绑定一个或多个事件的事件处理函数

$("p").on("click", function(){

alert( $(this).text() );

});


off(eve,[sel],[fn])1.7+

在选择元素上移除一个或多个事件的事件处理函数。off() 方法移除用.on()绑定的事件处理程序

$("p").off( "click", "**" )


bind(type,[data],fn)

为每个匹配元素的特定事件绑定事件处理函数。

$(document).bind('mousemove',function(e){

$("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);

});


unbind(t,[d|f])

bind()的反向操作,从每一个匹配的元素中删除绑定的事件。如果没有参数,则删除所有绑定的事件。

$("p").unbind( "click" )


one(type,[data],fn)

为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。

$("p").one("click", function(){

alert( $(this).text() );

});


hover([over,]out)

一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

$("td").hover(

function () {

$(this).addClass("hover");

},

function () {

$(this).removeClass("hover");

}

);

事件冒泡:事件在dom文档中,会逐层往上触发。如点击了div里面的一个p元素,那么div及其上层元素的click也会被触发。如要阻止事件的冒泡可以在里层的元素的事件方法中return false。


5 效果

jQuery中对dom元素进行样式上的操作。

属性/方法

描述

show([s,[e],[fn]])

显示隐藏的匹配元素。

$("p").show() 显示所有段落


hide([s,[e],[fn]])

隐藏显示的元素。

$("p").hide() 隐藏所有段落


slideDown([s],[e],[fn])

通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。

$("p").slideDown("slow"); 用600毫秒缓慢的将段落滑下


slideUp([s,[e],[fn]])

通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。

$("p").slideUp("slow");用600毫秒缓慢的将段落滑上


slideToggle([s],[e],[fn])

通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。

$("p").slideToggle("slow");用600毫秒缓慢的将段落滑上或滑下


fadeIn([s],[e],[fn])

通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。$("p").fadeIn("slow");用600毫秒缓慢的将段落淡入


fadeOut([s],[e],[fn])

通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。

$("p").fadeOut("slow");用600毫秒缓慢的将段落淡出


fadeTo([[s],o,[e],[fn]])

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。

$("p").fadeTo("slow", 0.66);用600毫秒缓慢的将段落的透明度调整到0.66,大约2/3的可见度


fadeToggle([s,[e],[fn]])

通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。

$("p").fadeToggle("slow");用600毫秒缓慢的将段落淡入/出


animate(p,[s],[e],[fn])1.8*

用于创建自定义动画的函数。