JQuery常用API整理

mouseover与mouseenter

不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

mouseout与mouseleave

不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
demo演示:http://output.jsbin.com/vakowipuke

append与appendTo (仍然在内部)

  • append 向每个匹配的元素内部追加内容。
    $("div").append("<p>" + hello + "</p>") 将p标签加入页面div后面
  • appendTo 把所有匹配的元素追加到另一个指定的元素元素集合中。
    $("<p>" + hello + "</p>").appendTo("div")
    结果:<div>加在我后面<p>hello</p></div>

prepend与prependTo (仍然在内部)

  • prepend 向每个匹配的元素内部前置内容。
    $("div").prepend( "<p>" + hello + "</p>" ) 将p标签加入页面div前面
  • 把所有匹配的元素前置到另一个、指定的元素元素集合中。
    $("<p>" + hello + "</p>").prependTo("div")
    结果:<div><p>hello</p>加在我后面</div>

after与insertAfter (在外部) / before与insertBefore

  • 在每个匹配的元素之后插入内容。
    $("div").after( "<p>" + hello + "</p>" )
  • 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
    $("<p>" + hello + "</p>").after( "div" )
    结果:<div>加在我后面</div><p>hello</p>

parent与parents

prev与prevAll (前面) / next与nextAll (后面)

  • prev 取得一个包含匹配的元素集合中每一个元素紧邻的 前一个 同辈元素的元素集合。
  • prevAll 查找当前元素之前所有的同辈元素。
    demo演示:http://jsbin.com/kobebiqodi/edit?html,output

width与innerWidth与outerWidth

  • width 取得第一个匹配元素当前计算的宽度值。即(width)
  • innerWidth 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。即(width+padding)
  • outerWidth获取第一个匹配元素外部宽度(默认包括补白和边框)。即(width+padding+border)
  • outerWidth(true)参数为true时。即(width+padding+border+margin)
    demo演示:http://jsbin.com/decufodesa/1/edit?html,output
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 750评论 0 9
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,467评论 0 44
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,203评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,394评论 0 2
  • Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img...
    扑克脸_457e阅读 599评论 0 1