`
BlueFuture
  • 浏览: 51814 次
  • 性别: 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()可以遍历诸如数组及一般的对象。
     

Js代码 复制代码
  1. $("span").click(function () {   
  2.       $("li").each(function(i){   
  3.            $(this).toggleClass("example");   
  4.       });   
  5. });  
$("span").click(function () {
      $("li").each(function(i){
           $(this).toggleClass("example");
      });
});



[2] size( )       Returns: Number
     
      说明:  返回jQuery对象中元素的个数。该方法和jQuery对象的length属性返回相同的结果。然而,该方法的执行效率没有length属性高,所以建议用length属性。
     

Js代码 复制代码
  1. $(document.body).click(function () { $(document.body).append($("<div>"));   
  2. var n = $("div").size();   
  3. $("span").text("There are " + n + " divs." + "Click to add more.");}).click();    
  4. // trigger the click to start  
$(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对象中元素的个数。
     

Js代码 复制代码
  1. $(document.body).click(function () {   
  2.      $(document.body).append($("<div>"));   
  3.      var n = $("div").length;   
  4.      $("span").text("There are " + n + " divs." +   
  5.                     "Click to add more.");   
  6.    }).trigger('click'); // trigger the click to start  
 $(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()中的选择器。
     

Js代码 复制代码
  1. $("ul")   
  2.  .append("<li>" + $("ul").selector + "</li>")   
  3.  .append("<li>" + $("ul li").selector + "</li>")   
  4.  .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");  
 $("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两个属性对于插件开发人员来说非常有用。
     

Js代码 复制代码
  1. $("ul")   
  2.  .append("<li>" + $("ul").context + "</li>")   
  3.  .append("<li>" + $("ul", document.body).context.nodeName + "</li>");  
 $("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对象
     

Js代码 复制代码
  1. $("p").eq(1).css("color""red")  
 $("p").eq(1).css("color", "red")



[7] get( )        Returns: Array<Element>
     
      说明:  使用所有匹配的DOM元素。不同于jQuery,它返回的是一个元素数组。用来代替jQuery内置函数来操作匹配的元素本身,这个方法非常好用。
     

Js代码 复制代码
  1. function disp(divs) {   
  2.       var a = [];   
  3.       for (var i = 0; i < divs.length; i++) {   
  4.         a.push(divs[i].innerHTML);   
  5.       }   
  6.       $("span").text(a.join(" "));   
  7.     }   
  8.        
  9.     disp( $("div").get().reverse() );  
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 将被作用的元素的下标。
      说明:  在匹配的元素集合中指定一个元素。
     

Js代码 复制代码
  1. $("*", document.body).click(function (e) {   
  2.       e.stopPropagation();   
  3.       var domEl = $(this).get(0);   
  4.       $("span:first").text("Clicked on - " + domEl.tagName);   
  5.     });  
$("*", 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对象中第一个元素的下标。
     

Js代码 复制代码
  1. $("div").click(function () {   
  2.       // this is the dom element clicked   
  3.       var index = $("div").index(this);   
  4.       $("span").text("That was div index #" + index);   
  5.     });  
$("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 ...

    Jquery学习手册

    2、jQuery Object Accessors jQuery.index(element),返回该jQuery对象在集合中的索引 jQuery.each(function),遍历jQuery对象集合,在每个对象上执行function函数,function callback(index, domElement){this}; ...

    accessors-smart-2.4.7-API文档-中文版.zip

    赠送jar包:accessors-smart-2.4.7.jar; 赠送原API文档:accessors-smart-2.4.7-javadoc.jar; 赠送源代码:accessors-smart-2.4.7-sources.jar; 赠送Maven依赖信息文件:accessors-smart-2.4.7.pom; 包含翻译后...

    accessors-smart-1.2.jar

    accessors-smart-1.2.jar

    accessors-smart-1.1.jar

    accessors-smart-1.1.jar,

    accessors-smart-1.2-API文档-中文版.zip

    赠送jar包:accessors-smart-1.2.jar; 赠送原API文档:accessors-smart-1.2-javadoc.jar; 赠送源代码:accessors-smart-1.2-sources.jar; 赠送Maven依赖信息文件:accessors-smart-1.2.pom; 包含翻译后的API文档...

    accessors-smart-2.4.7-API文档-中英对照版.zip

    赠送jar包:accessors-smart-2.4.7.jar; 赠送原API文档:accessors-smart-2.4.7-javadoc.jar; 赠送源代码:accessors-smart-2.4.7-sources.jar; 赠送Maven依赖信息文件:accessors-smart-2.4.7.pom; 包含翻译后...

    accessors-smart-1.2-API文档-中英对照版.zip

    赠送jar包:accessors-smart-1.2.jar; 赠送原API文档:accessors-smart-1.2-javadoc.jar; 赠送源代码:accessors-smart-1.2-sources.jar; 赠送Maven依赖信息文件:accessors-smart-1.2.pom; 包含翻译后的API文档...

    Laraboot: Laravel 5 For Beginners

    Laravel 5.2 初学者指南 Laraboot: Laravel 5 For Beginners Bill Keck ...This version was published on 2016-04-04 This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing ...

    jmockdata拓展 1.支持LocalDateTime等, 2.支持lombok的@Accessors(chain = true)

    1.2.支持lombok的@Accessors(chain = true) 2.1.首先这是3.1.0 目前的最新版 不支持java8 所以我拓展了一部分 如果有需要请留言继续拓展 之后发email发您 2.2然后支持lombok的@Accessors(chain = true) 如果未...

    hibernate_reference中文文档.pdf

    4.1.4. 为持久化字段声明访问器(accessors)和是否可变的标志(mutators) (可选) .............................................................. 53 4.2. 实现继承(Inheritance) ............................

    iOS 4 编程(英文版)

    2. Object-Based Programming 3. Objective-C Objects and Messages 4. Objective-C Classes 5. Objective-C Instances 6. Anatomy of an Xcode Project 7. Nib Management 8. Documentation 9. Life Cycle of a ...

    hibernate3.6 文档(pdf 格式)

    截至 2011-08-29 官方公布的最新 hibernate 文档,此为英文版,配套中文版下载地址:http://download.csdn.net/source/3557584。 详细信息: 版本:3.6.3.Final,作者:Gavin King, Christian Bauer, Max Rydahl ...

    uvm 学习文档

    学习uvm必看的书。 1. Overview.............................................................................................................................................. 1 1.1 Introduction to UVM......

    postGIS 用户手册

    1 Introduction 1 1.1 Project Steering Committee . . . . . . . . ....1.2 Contributors Past and Present ....1.3 More Information ....2.1 Short Version ....2.2 Requirements ....2.3 Getting the Source ....

    ZendFramework中文文档

    Fetching a Row as an Object 10.3. Zend_Db_Profiler 10.3.1. Introduction 10.3.2. Using the Profiler 10.3.3. Advanced Profiler Usage 10.3.3.1. Filter by query elapsed time 10.3.3.2. Filter by ...

    accessors-smart-1.2.jar中文-英文对照文档.zip

    注:下文中的 *** 代表文件名中的组件名称。 # 包含: 中文-英文对照文档:【***-javadoc-API文档-中文(简体)-英语-对照版.zip】 jar包下载地址:【***.jar下载地址(官方地址+国内镜像地址).txt】 ...

    accessors-smart-2.4.7.jar中文-英文对照文档.zip

    注:下文中的 *** 代表文件名中的组件名称。 # 包含: 中文-英文对照文档:【***-javadoc-API文档-中文(简体)-英语-对照版.zip】 jar包下载地址:【***.jar下载地址(官方地址+国内镜像地址).txt】 ...

    accessors-smart-2.3.1.jar中文-英文对照文档.zip

    注:下文中的 *** 代表文件名中的组件名称。 # 包含: 中文-英文对照文档:【***-javadoc-API文档-中文(简体)-英语-对照版.zip】 jar包下载地址:【***.jar下载地址(官方地址+国内镜像地址).txt】 ...

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

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

Global site tag (gtag.js) - Google Analytics