zoukankan      html  css  js  c++  java
  • 常用jQuery方法

    1.对类进行操作的方法

    hasClass() 方法检查被选元素是否包含指定的 class。

    addClass() 方法向被选元素添加一个或多个类。

    removeClass() 方法从被选元素移除一个或多个类。

    2.遍历元素的方法

    (1)子元素   

    children()方法获取匹配元素的子元素,所有的子元素(向下遍历一级)  .children(selector)

    find() 方法获得当前元素的后代,(向下遍历所有的后代).find(selector)

    eq()方法给匹配元素index。从0开始,$('li').eq(0).css('background-color', 'red'),如果提供负数,则指示从集合结尾开始的位置,而不是从开头开始$('li').eq(-2).css('background-color', 'red');

    (2)同级元素

    prevAll() 获取匹配元素前面的所有同胞元素。.prevAll(selector)

    prev() 获得匹匹配元素上一个同胞元素(仅上一个).prev(selector)

    next() 获取匹配元素下一个同胞元素,(仅下一个).next(selector)

    nextAll()获取匹配元素后面所有同胞元素  .nextAll(selector)

    siblings() 获取匹配元素的所有同级元素,.siblings(selector

    (3)父级元素

    parent() 获得匹配元素的父级,向上遍历一级;.parent(selector) 如果应用这个选择器,则将通过检测元素是否匹配该选择器对元素进行筛选。

    parents() 获得匹配元素的祖先元素;从最近的父元素向上的顺序匹配元素;元素是按照从最近的父元素向外的顺序被返回的;.parents(selector)

    closest() 方法获取匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。

    .parents() 和 .closest() 方法类似,它们都沿 DOM 树向上遍历。两者之间的差异尽管微妙,却很重要:

    .closest().parents()
    从当前元素开始 从父元素开始
    沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止。 沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选。
    返回包含个或个元素的 jQuery 对象 返回包含个、个或个元素的 jQuery 对象

    (4) each()遍历

    each() 方法规定为每个匹配元素规定运行的函数。

    输出每个 li 元素的文本:

    $("button").click(function(){
      $("li").each(function(){
        alert($(this).text())
      });
    });

    3.元素操作

    append() 方法在被选元素的结尾(仍然在内部)插入指定内容。$(selector).append(content)

    appendTo()刚好相反,内容在方法前面,它都将被插入到目标容器的末尾。$('<p>Test</p>').appendTo('.inner');

    remove() 方法移除被选元素,包括所有文本和子节点。(remove()已经将DOM中的匹配元素删除,但是并没有将它从jquery对象中删除。他的数量不变,只是不在dom中显示)

    attr() 方法设置或返回被选元素的属性值。

    css() 方法返回或设置匹配的元素的一个或多个样式属性。

    trigger()函数用于在每个匹配元素上触发指定类型的事件。trigger("click") <a>标签的链接是特例

    blur()当元素失去焦点时发生 blur 事件。$(selector).blur(function)

    html() 方法返回或设置被选元素的内容 (inner HTML)。(包括HTML标签)

    text() 方法方法设置或返回被选元素的文本内容。(仅文本)

    val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

    size() 方法返回被 jQuery 选择器匹配的元素的数量。$(selector).size()

    last() 获取匹配元素最后一个元素。

    bind() 方法为被选元素绑定一个或多个事件。

    on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

    自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。

    注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

    提示:如需移除事件处理程序,请使用 off() 方法。

    提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。

    4. 元素效果

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

    fadeOut() 方法使用淡出效果来隐藏被选元素,假如该元素是显示的。

    hide()如果被选的元素已被显示,则隐藏该元素。 

    show()如果被选元素已被隐藏,则显示这些元素:

    slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。

    slideUp通过使用滑动效果,隐藏被选元素,如果元素已显示;
    slideDown() 方法通过使用滑动效果,显示隐藏的被选元素。
    5.键盘鼠标操作
    keydown() 方法触发 keydown 事件,

    完整的 key press 过程分为两个部分:1. 按键被按下;2. 按键被松开。当按钮被按下时,发生 keydown 事件。

    $("#goPageS").on('keydown',function(event)  {

      var lKeyCode = (navigator.appname=="Netscape")?event.which:event.keyCode;//浏览器兼容

          if ( lKeyCode == 13 ){ //回车键       

              goToS();    }

    })

    6.元素选择(位置选择器

    $("a+b") 紧跟在a元素后的b元素——a元素与b元素是兄弟关系。等同于next()方法

    $("A~B")  A元素之后的所有兄弟元素B。等同于nextAll()方法

     b:nth-child(index) 第index个与b匹配的元素(从1开始计数)

     b:nth-child(even) 第偶数个与b匹配的元素(从1开始计数)

     b:nth-child(odd) 第奇数个与b匹配的元素(从1开始计数)

     b:nth-child(2n+2) 第2n+2个与b匹配的元素(从1开始计数),n为自然数

     b:nth-last-child() 同:nth-child(),从最后一个元素开始计数

     b:first-child 第1个与b匹配的元素

     b:last-child 最后一个个与b匹配的元素

    :only-child 作为其父元素唯一一个子元素的元素

     b:nth-of-type() 同:nth-child(),只计同类元素

     b:nth-last-of-type() 同:nth-last-child(),只计同类元素

     b:first-of-type() 同:first-child(),只计同类元素

     b:last-of-type() 同:last-child(),只计同类元素

     b:only-of-type() 没有同名元素的元素

    属性选择器

    [attr|="value"] attr属性值等于value或value后跟一个连字符(-)的元素

    [attr~="value"] attr属性值是空格分隔的字符串,其中一个字符串值是value的元素

    [attr*="value"] attr属性值包含value字符串的元素

    [attr$="value"] attr属性值以value结尾的元素

    [attr^="value"] attr属性值以value开头的元素

    [attr!="value"] attr属性值不为value的元素

    表单选择器

    :input   所有<input>、<textarea>、<select>和<button>元素

    :text   type=”text”的<input>元素

    :password   type=”password”的<input>元素

    :file   type=”file”的<input>元素

    :radio   type=”radio”的<input>元素

    :checkbox   type=”checkbox”的<input>元素  

    :submit   type=”submit”的<input>元素

    :image  type=”image”的<input>元素

    :reset   type=”reset”的<input>元素

    :button   type=”button”的<input>元素

    :enabled  启用的表单元素

    :disabled  禁用的表单元素

    :checked  选中的复选框和单选按钮

    :selected   选中的<option>元素

  • 相关阅读:
    [译]理解Javascript的异步等待
    [译]为什么我要离开gulp和grunt转投npm脚本的怀抱
    [译]代码审查的重要性
    [译]转译器: 今日大不同
    猴年马月都到了
    关于“我是谁”的思考
    ASP.net MVC基础
    利用Spring.Net技术打造可切换的分布式缓存读写类
    JQuery WEB前段开发
    Javascript——说说js的调试
  • 原文地址:https://www.cnblogs.com/hudandan/p/5908505.html
Copyright © 2011-2022 走看看