`
koalaxyq
  • 浏览: 90196 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类

Jquery核心(二) $(...) jQuery Object Accessors

阅读更多
jQuery对象访问器

[1] each( callback )      Returns: jQuery
      callback :  Function 每个匹配的元素要执行的回调函数。
      说明:  让每个匹配的元素执行该回调函数。this指向匹配的DOM元素,而不是jQuery对象。另外,回调参数有一个以0开始的整型参数,可以标志运行函数的DOM元素在匹配元素集合中的下标。(用return false结束循环,用return true跳出本次循环,作用如break,continue)。本方法与$.each()不一样,$.each()可以遍历诸如数组及一般的对象。
     
$("span").click(function () {
      $("li").each(function(i){
           $(this).toggleClass("example");
      });
});


[2] size( )       Returns: Number
     
      说明:  返回jQuery对象中元素的个数。该方法和jQuery对象的length属性返回相同的结果。然而,该方法的执行效率没有length属性高,所以建议用length属性。
     
$(document.body).click(function () { $(document.body).append($("<div>"));
var n = $("div").size();
$("span").text("There are " + n + " divs." + "Click to add more.");}).click(); 
// trigger the click to start


[3] length       Returns: Number
     
      说明:  返回jQuery对象中元素的个数。
     
 $(document.body).click(function () {
      $(document.body).append($("<div>"));
      var n = $("div").length;
      $("span").text("There are " + n + " divs." +
                     "Click to add more.");
    }).trigger('click'); // trigger the click to start



[4] selector      Returns: String
     
      说明:  jQuery 1.3中新增的属性。以字符串形式返回jQuery()中的选择器。
     
 $("ul")
  .append("<li>" + $("ul").selector + "</li>")
  .append("<li>" + $("ul li").selector + "</li>")
  .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");


        * ul
        * ul li
        * div#foo ul:not([class])


[5] context      Returns: Element
     
      说明:  jQuery 1.3中新增的属性。返回jQuery()中传入参数的DOM节点上下文(如果没有传入,则下下文为document)。应与seletor属性一起使用以确定一个精确的查找对象。context与seletor两个属性对于插件开发人员来说非常有用。
     
 $("ul")
  .append("<li>" + $("ul").context + "</li>")
  .append("<li>" + $("ul", document.body).context.nodeName + "</li>");


        * [object HTMLDocument]
        * BODY


[6] eq( position )       Returns: jQuery
      position :  Number 将被选择的元素的下标。
      说明:  将匹配的元素集合减少到一个。position[ 0,length-1 ]。如果传入一个超出范围的下标,则返回一个空的jQuery对象
     
 $("p").eq(1).css("color", "red")


[7] get( )        Returns: Array<Element>
     
      说明:  使用所有匹配的DOM元素。不同于jQuery,它返回的是一个元素数组。用来代替jQuery内置函数来操作匹配的元素本身,这个方法非常好用。
     
function disp(divs) {
      var a = [];
      for (var i = 0; i < divs.length; i++) {
        a.push(divs[i].innerHTML);
      }
      $("span").text(a.join(" "));
    }
    
    disp( $("div").get().reverse() );



[8] get( index )        Returns: Element
      position :  Number 将被作用的元素的下标。
      说明:  在匹配的元素集合中指定一个元素。
     
$("*", document.body).click(function (e) {
      e.stopPropagation();
      var domEl = $(this).get(0);
      $("span:first").text("Clicked on - " + domEl.tagName);
    });


[9] index( subject )        Returns: Number
      subject :  Element,jQuery  要被查询的对象。
      说明: 返回匹配的元素在页面中的下标,以0开始的整数。如未找到匹配元素,返回-1。若传入的是一个jQuery对象,则返回jQuery对象中第一个元素的下标。
     
$("div").click(function () {
      // this is the dom element clicked
      var index = $("div").index(this);
      $("span").text("That was div index #" + index);
    });




注:原文内容请参见http://docs.jquery.com/Main_Page




-------------------------------------------------------------------------------------------------------------------------------
分享到:
评论

相关推荐

    jQuery 1.5 API 中文版

    $.jQuery( selector [, context] ), .jQuery( element ), .jQuery( elementArray ), .jQuery( jQueryObject ), .jQuery( ) $.jQuery( html [, ownerDocument] ), .jQuery( html, props ) $.jQuery( fn ) jQuery ...

    jquery1.5 参考文档

    - `$.jQuery(jQueryObject)`:创建一个jQuery对象的副本。 - `$.jQuery()`:创建一个空的jQuery对象。 #### jQuery 对象访问器 (jQuery Object Accessors) jQuery对象访问器提供了多种方法来操作和获取jQuery对象...

    jquery_1.3_cheatsheet_v1

    - **$.extend(object)**:扩展jQuery对象本身,而不是它的原型链。可以用来添加实用工具函数或配置选项。 - **Data**: - **data(name)**:获取与元素关联的数据。 - **data(name,value)**:设置与元素关联的...

    jQuery详细文档

    2. **jQuery Object Accessors**: - `jQuery.index(element)`:获取某个元素在其兄弟元素中的索引位置。 - `jQuery.each(function)`:遍历jQuery对象集合,执行指定函数。该函数接受两个参数:索引和DOM元素。 -...

    jQuery 1.2 Cheat Sheet

    - **jQueryObject Accessors:** - **each(cb):** 遍历每个元素,并对每个元素执行回调函数 `cb`。 - **size():** 返回匹配元素的数量。 - **length:** 同样表示匹配元素的数量,但它是直接属性而非方法。 - **...

    jQuery1.7.1_API中文手册

    #### 七、jQuery Object Accessors - **`index(element)`**:返回当前元素在其集合中的索引。 - **`each(function)`**:遍历当前元素集合,并在每个元素上调用指定的回调函数。 - **`size()`**:返回当前元素集合的...

    js-object-with-accessors:一些用于 JS 的 OOP 脚本。 一个提供带有访问器的基本结构,并在此基础上构建 JQuery 元素的对象包装器

    在这个项目"js-object-with-accessors"中,我们看到开发者旨在利用JavaScript的面向对象编程(OOP)特性来创建一个基础架构,该架构包含访问器(accessors),同时也为jQuery元素提供了对象包装器。下面将详细探讨这...

    JavaScript 代码规范.pdf

    函数是JavaScript的核心,应该使用函数声明或箭头函数来定义。箭头函数提供了一种更简洁的函数语法,并且不会创建自己的this上下文。 8. 箭头函数(Arrow Functions) 箭头函数是一种更简洁的函数写法,它提供了一...

    如何正确使用javascript 来进行我们的程序开发

    复杂类型包括object、array和function。在JavaScript中,原始值是不可变的,而复杂类型的值是通过引用传递的。 2. 对象(Objects) 在JavaScript中,对象是一种复合值,它可以包含多个键值对。对象可以通过字面量或...

Global site tag (gtag.js) - Google Analytics