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

最新推荐文章于 2021-05-21 00:12:56 发布

原创最新推荐文章于 2021-05-21 00:12:56 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #ViewUI

jQuery 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了jQuery中的关键方法，包括each()用于遍历匹配元素并执行回调函数，size()和length属性用于获取匹配元素的数量，selector属性返回选择器字符串，context属性返回DOM节点上下文，eq()用于缩小匹配元素集合，get()用于获取DOM元素，index()用于获取元素索引。

jQuery对象访问器

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

Js代码

$("span").click(function () {
$("li").each(function(i){
$(this).toggleClass("example");
});
});

$("span").click(function () {
      $("li").each(function(i){
           $(this).toggleClass("example");
      });
});

[2] size( )       Returns: Number

      说明：返回jQuery对象中元素的个数。该方法和jQuery对象的length属性返回相同的结果。然而，该方法的执行效率没有length属性高，所以建议用length属性。

Js代码

$(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

$(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代码

$(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

 $(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代码

$("ul")
.append("<li>" + $("ul").selector + "</li>")
.append("<li>" + $("ul li").selector + "</li>")
.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代码

$("ul")
.append("<li>" + $("ul").context + "</li>")
.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代码

$("p").eq(1).css("color", "red")

 $("p").eq(1).css("color", "red")

[7] get( )       Returns: Array<Element>

      说明：使用所有匹配的DOM元素。不同于jQuery，它返回的是一个元素数组。用来代替jQuery内置函数来操作匹配的元素本身，这个方法非常好用。

Js代码

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() );

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代码

$("*", document.body).click(function (e) {
e.stopPropagation();
var domEl = $(this).get(0);
$("span:first").text("Clicked on - " + domEl.tagName);
});

$("*", 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代码

$("div").click(function () {
// this is the dom element clicked
var index = $("div").index(this);
$("span").text("That was div index #" + index);
});

$("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