• jQuery知识点汇总


    $(this) 当前 HTML 元素

    $("p") 所有 <p> 元素

    $("p.intro") 所有 class="intro" 的 <p> 元素

    $(".intro") 所有 class="intro" 的元素

    $("#intro") id="intro" 的元素

    $("ul li:first") 每个 <ul> 的第一个 <li> 元素

    $("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性

    $("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

    $(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)

    $(selector).click(function) 触发或将函数绑定到被选元素的点击事件

    $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件

    $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件

    $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

    $(selector).hide(speed,callback);

    $(selector).show(speed,callback);

    可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是隐藏或显示完成后所执行的函数名称。除非设置了 speed 参数,否则不能设置该参数。

    下面的例子演示了带有 speed 参数的 hide() 方法:

    toggle() $(selector).toggle(speed,callback,switch)如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

    fadeIn() $(selector).fadeIn(speed,callback)方法使用淡入效果来显示被选元素,假如该元素是隐藏的。

    fadeOut() $(selector).fadeOut(speed,callback)方法使用淡出效果来隐藏被选元素,假如该元素是隐藏的。

    fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

    fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)

    slideDown() $(selector).slideDown(speed,callback)方法通过使用滑动效果,显示隐藏的被选元素。

    slideUp() $(selector).slideUp(speed,callback)通过使用滑动效果,隐藏被选元素,如果元素已显示出来的话。

    slideToggle() $(selector).slideToggle(speed,callback)方法通过使用滑动效果(高度变化)来切换元素的可见状态。

    如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。

    animate({})

    $(selector).animate({params},speed,callback);

    必需的 params 参数定义形成动画的 CSS 属性。

    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是动画完成后所执行的函数名称。

    css("color","red")

    css({"background-color":"yellow","font-size":"200%"})

    text() - 设置或返回所选元素的文本内容

    html() - 设置或返回所选元素的内容(包括 HTML 标记)

    val() - 设置或返回表单字段的值

    attr()

    attr({

          "href" : "http://www.knowbyoo.com",

          "title" : "PHP教程"

        })

    addClass()被选元素添加一个或多个类。$(selector).addClass(class)

    removeClass()方法从被选元素移除一个或多个类(如果没有规定参数,则该方法将从被选元素中删除所有类)$(selector).removeClass(class)

    toggleClass() 对设置或移除被选元素的一个或多个类进行切换。 $(selector).toggleClass(class,switch) class

    必需。规定添加或移除 class 的指定元素。

    如需规定若干 class,请使用空格来分隔类名。

    switch 可选。布尔值。规定是否添加或移除 class。

    parent() 方法返回被选元素的直接父元素

    parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)

    parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

    children()找到类是class的所有元素的子元素.children(selector)注意:.children() 不返回文本节点;如果需要获得包含文本和注释节点在内的所有子节点,请使用 .contents()。

    find().find(selector)方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。

    siblings()方法返回被选元素的所有同胞元素

    next()方法返回被选元素的下一个同胞元素

    nextAll()方法返回被选元素的所有跟随的同胞元素。

    nextUntil()方法返回介于两个给定参数之间的所有跟随的同胞元素。

    prev()

    prevAll()

    prevUntil()prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。

    first() 方法返回被选元素的首个元素。

    last() 方法返回被选元素的最后一个元素。

    eq() 方法返回被选元素中带有指定索引号的元素。

    filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。$(document).ready(function(){

      $("p").filter(".intro").css("background-color","yellow");

    });

    not() 方法返回不匹配标准的所有元素。

    提示:not() 方法与 filter() 相反。

    on() 方法

    多个事件绑定同一个函数

    $(document).ready(function(){

      $("p").on("mouseover mouseout",function(){

        $("p").toggleClass("intro");

      });

    });

    多个事件绑定不同函数

    $(document).ready(function(){

      $("p").on({

        mouseover:function(){$("body").css("background-color","lightgray");},  

        mouseout:function(){$("body").css("background-color","lightblue");}, 

        click:function(){$("body").css("background-color","yellow");}  

      });

    });

    append() - 在被选元素的结尾插入内容

    prepend() - 在被选元素的开头插入内容

    after() - 在被选元素之后插入内容

    before() - 在被选元素之前插入内容

    remove() - 删除被选元素(及其子元素)

    empty() - 从被选元素中删除子元素

  • 相关阅读:
    算法训练 素因子去重
    vs2013配置opencv2.4.9
    vs2013配置opencv2.4.9
    运用map并于执行期指定排序准则
    运用map并于执行期指定排序准则
    vs2013错误解决方法
    vs2013错误解决方法
    win8.1系统vs2013中boost 1.55.0的安装
    win8.1系统vs2013中boost 1.55.0的安装
    Vector的小知识点
  • 原文地址:https://www.cnblogs.com/mumusen/p/6678050.html
Copyright © 2020-2023  润新知