JQ中的一些备注

Closest

.closest()

closest( selector )

.closest( selector )

.closest( selector, [ context ] )

closest( selectors, [ context ] )

.closest( selectors, [ context ] )

.closest( selector ) 返回： jQuery

从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。

version added: 1.3.closest( selector )

selector一个用于匹配元素的选择器字符串。

version added: 1.4.closest( selector, [ context ] )

selector一个用于匹配元素的选择器字符串。

contextDOM元素在其中一个匹配的元素可以被发现。如果没有上下文在当时的情况下通过了jQuery设置将被使用。

version added: 1.6.closest( jQuery object )

jQuery object一个用于匹配元素的jQuery对象。

version added: 1.6.closest( element )

element一个用于匹配元素的DOM元素。

鉴于一个jQuery对象，表示一个DOM元素的集合，.closest()方法允许我们能够通过搜索这些元素和DOM树，并在他们的祖先从匹配的元素构造一个新的jQuery对象。.parents()和.closest()方法类似，它们都在DOM树遍历了。两者之间的差异，尽管细微，是重要的：

.closest()
.parents()

开始于当前元素
开始于父元素

向上遍历DOM树，直到它找到一个匹配的供选择
向上遍历DOM树到文档的根元素，每个祖先元素加入到临时集合，而是一个选择器，过滤器的基础上，如果一个是该集合提供

返回的jQuery对象包含零个或一个元素
返回的jQuery对象包含零个，一个或多个元素

  <ul id="one" class="level-1">
    <li class="item-i">I</li>
    <li id="ii" class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

假设我们从项目 A开始执行一个搜索<ul>：

$('li.item-a').closest('ul')
  .css('background-color', 'red');

这将改变level-2 <ul>的颜色，因为当向上遍历DOM树时，这是第一次遇到的匹配元素。

假设我们是一个搜索<li>元素来代替：

$('li.item-a').closest('li')
  .css('background-color', 'red');

这将改变一个列表项A的颜色。.closest()方法开始从元素本身开始前进了DOM树的遍历，项目A时停止匹配选择。

我们可以传递一个DOM元素作为上下文在其中搜索最近的元素的。

var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII)
  .css('background-color', 'red');
$('li.item-a').closest('#one', listItemII)
  .css('background-color', 'green');

这将改变level-2 <ul>的颜色

这将改变level-2 <ul>的颜色,因为它既是项目A的第一个<ul>祖先又是项目II的一个后裔。它将不会改变level-1 <ul>的颜色，因为它不是项目II的后裔。

Example:

显示什么样的事件委托能用closest完成。closest 列表元素或者其后代被点击进行切换一个黄色的背景。

<!DOCTYPE html>
<html>
<head>
  <style>
  li { margin: 3px; padding: 3px; background: #EEEEEE; }
  li.hilight { background: yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
<script>

    $(document).bind("click", function (e) {
      $(e.target).closest("li").toggleClass("hilight");
    });
</script>

</body>
</html>

Demo:

Example: 传递一个jQuery对象给closest. closest 列表元素或者其后代被点击进行切换一个黄色的背景。

<!DOCTYPE html>
<html>
<head>
  <style>
  li { margin: 3px; padding: 3px; background: #EEEEEE; }
  li.hilight { background: yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
  <ul>
    <li><b>Click me!</b></li>
    <li>You can also <b>Click me!</b></li>
  </ul>
<script>
  var $listElements = $("li").css("color", "blue");
  $( document ).bind("click", function( e ) {
    $( e.target ).closest( $listElements ).toggleClass("hilight");
  });
</script>

</body>
</html>

Demo:

.closest( selectors, [ context ] ) 返回： Array

从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。

version added: 1.4.closest( selectors, [ context ] )

selector一个用于匹配元素的选择器字符串。

contextDOM元素在其中一个匹配的元素可以被发现。如果没有上下文在当时的情况下通过了jQuery设置将被使用。

这种方法主要是为了内部使用或插件作者。

Example:

Show how event delegation can be done with closest.

<!DOCTYPE html>
<html>
<head>
  <style></style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <ul><li></li><li></li></ul>
<script>var close = $("li:first").closest(["ul", "body"]);
        $.each(close, function(i){
  $("li").eq(i).html( this.selector + ": " + this.elem.nodeName );
});</script>

</body>
</html>

Filter

.filter( selector ) 返回： jQuery

筛选出与指定表达式匹配的元素集合。

version added: 1.0.filter( selector )

selector选择器字符串，用于确定到哪个前辈元素时停止匹配。

version added: 1.0.filter( function(index) )

function(index)一个作为每个集合中的元素测试的函数。this是当前的DOM元素。

version added: 1.4.filter( element )

element一个匹配当前元素集合的元素。

version added: 1.4.filter( jQuery object )

jQuery object现有匹配当前元素集合的jQuery对象。

如果一个jQuery对象表示一个DOM元素的集合，.filter()方法构造了一个新的jQuery对象的子集。所提供的选择器是对每个元素进行测试;选择匹配的所有元素将包含在结果中。

考虑一个页面上一个简单的列表：

<ul>
  <li>list item 1</li>
	<li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

我们可以在列表项目上设置此方法：

  $('li').filter(':even').css('background-color', 'red');

该调用的结果是项目的1，3，和5的背景给为红色，因为他们选择匹配（记得:even 和 :odd使用基于0的索引）。

使用过滤函数

这种方法的第二种形式允许我们使用一个函数，而不是一个选择器来过滤元素，对于每个元素，如果函数返回true ，该元素将被包含在筛选集合中;否则，将被排除在外。假设我们有一个HTML片段：

<ul>
  <li><strong>list</strong> item 1 -
    one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> -
    two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

我们可以选择列表项，然后过滤它们的内容：

$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');

此代码只有第一个列表项将改变，因为它仅包含一个标记。用过滤函数，this是指依次的每个DOM元素。这个参数传递给函数告诉我们该DOM元素在匹配的jQuery对象集合内的索引。

我们还可以拿index传递给贯穿函数，这表明基于0的元素的位置在匹配的元素中未滤过的:

$('li').filter(function(index) {
  return index % 3 == 2;
}).css('background-color', 'red');

这对代码将会导致第三和第六列表项背景变为红色，因为它使用模运算符（ % ）选择每一个项目和index值，除以3时，有一个剩余2 。

Examples:

Example: Change the color of all divs then put a border around only some of them.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width:60px; height:60px; margin:5px; float:left; 
        border:2px white solid;}
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <div></div>

  <div class="middle"></div>
  <div class="middle"></div>
  <div class="middle"></div>
  <div class="middle"></div>

  <div></div>
<script>

    $("div").css("background", "#c8ebcc")
            .filter(".middle")
            .css("border-color", "red");
</script>

</body>
</html>

Demo:

Example: Selects all paragraphs and removes those without a class "selected".

$("p").filter(".selected")

Example: Selects all paragraphs and removes those that aren't of class "selected" or the first one.

$("p").filter(".selected, :first")

Example: Change the color of all divs then put a border to specific ones.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width:60px; height:60px; margin:5px; float:left; 
        border:3px white solid; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>

  <div id="fourth"></div>
  <div id="fifth"></div>
  <div id="sixth"></div>
<script>
    $("div").css("background", "#b4b0da")
            .filter(function (index) {
                  return index == 1 || $(this).attr("id") == "fourth";
                })
            .css("border", "3px double red");

</script>

</body>
</html>

Demo:

Example: Remove all elements that have a descendant ol element

$("div").filter(function(index) {
   return $("ol", this).length == 0;
 });

Prop

prop()

.prop( propertyName ) 返回： String

获取在匹配的元素集中的第一个元素的属性值。

version added: 1.6.prop( propertyName )

propertyName要得到的属性的名称

.prop()方法只获得第一个匹配元素的属性值。元素的一个属性没有设置，或者如果没有匹配的元素。它返回undefined值。为了让每个元素单独的值，使用一个循环结构的如jQuery .each()或.map()方法。

attributes和properties之间的差异在特定情况下是很重要。jQuery 1.6之前 ，.attr()方法有时检索时考虑到了一些属性的属性值，这可能导致不一致的行为。在jQuery 1.6， .prop()方法提供了一种明确检索属性值，同时.attr()检索的属性而已。

例如，考虑一个DOM元素的HTML标记中定义的<input type="checkbox" checked="checked" /> ，并假设它是一个JavaScript变量命名的elem ：

elem.checked
true (Boolean)

$(elem).prop("checked")
true (Boolean)

elem.getAttribute("checked")
"checked" (String)

$(elem).attr("checked")(1.6+)
"checked" (String)

$(elem).attr("checked")(pre-1.6)
true (Boolean)

根据W3C的表单规范，在checked属性是一个布尔属性，这意味着如果属性相应的属性就为真，例如，属性没有值或空字符串值。首选的跨浏览器兼容的方法来确定一个复选框被选中的是检查一个“truthy”的元素的使用以下一个属性值：

if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )

另一方面，代码if ( $(elem).attr("checked") )，将获得一个属性，它不改变该复选框被选中和选中。它只是用来存储默认或选中属性的初始值。

其他注意事项:

在Internet Explorer之前的版本9，使用.prop()设置DOM元素的属性值以外的任何一个简单的原始（数字，字符串或布尔）如果DOM元素之前从文档中不删除该属性（使用.removeProp()),可能导致内存泄漏。为了安全地设置对象无泄漏内存值对DOM，使用.data()

Example:

Checked属性显示一个复选框，因为它的变化和属性。

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin: 20px 0 0 }
  b { color: blue; }
</style>
  <script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
  
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>

<script>
$("input").change(function() {
  var $input = $(this);
  $("p").html(".attr('checked'): <b>" + $input.attr('checked') + "</b><br>"
              + ".prop('checked'): <b>" + $input.prop('checked') + "</b><br>"
              + ".is(':checked'): <b>" + $input.is(':checked') ) + "</b>";
}).change();
</script>

</body>
</html>

Demo:

.prop( propertyName, value ) 返回： jQuery

设置为匹配的元素设置一个或更多的属性。

version added: 1.6.prop( propertyName, value )

propertyName要设置的属性的名称

value一个值来设置属性值。
version added: 1.6.prop( map )

map一个用于设置的对象 {属性:值} 对 .
version added: 1.6.prop( propertyName, function(index, oldPropertyValue) )

propertyName要设置的属性的名称

function(index, oldPropertyValue)用来设置返回值的函数。接收到集合中的元素和属性的值作为参数旧的索引位置。在函数中，关键字this指的是当前元素。

.prop()方法是一种方便的方式来设置属性的函数值，尤其是当设置多个属性或通过使用返回值。一般在不影响性能的改变属性的序列化的HTML DOM元素的动态。例子包括value属性的input元素， disabled属性的inputs和按钮，或checked属性的复选框。大多数情况下， .prop()应该用于设置 disabled 和 checked，而不是.attr()方法。.val()方法应该用于获取值。

$("input").prop("disabled", false);
$("input").prop("checked", true);
$("input").val("someValue");

还要注意的是.removeProp()方法不应该被用来设置这些属性为false。一旦本地财产被删除，不能再次添加。见.removeProp()获取更多信息。

其他注意事项：

在Internet Explorer之前的版本9，使用.prop()设置DOM元素的属性值以外的任何一个简单的原始（数字，字符串或布尔）如果DOM元素之前从文档中不删除该属性（使用.removeProp()),可能导致内存泄漏。为了安全地设置对象无泄漏内存值对DOM，使用.data()

Example:

禁用页面上的所有复选框。

<!DOCTYPE html>
<html>
<head>
  <style>
  img { padding:10px; }
  div { color:red; font-size:24px; }
</style>
  <script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
  <input type="checkbox" checked="checked" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox"  checked="checked" />
<script>
$("input[type='checkbox']").prop({
  disabled: true
});
</script>
</body>
</html>

posted @ 2013-02-01 01:47 花儿笑弯了腰阅读(435) 评论(0) 收藏举报

刷新页面返回顶部

JQ中的一些备注

Closest

.closest()

.closest( selector ) 返回： jQuery

version added: 1.3.closest( selector )

version added: 1.4.closest( selector, [ context ] )

version added: 1.6.closest( jQuery object )

version added: 1.6.closest( element )

Example:

显示什么样的事件委托能用closest完成。closest 列表元素或者其后代被点击进行切换一个黄色的背景。

Demo:

Example: 传递一个jQuery对象给closest. closest 列表元素或者其后代被点击进行切换一个黄色的背景。

Demo:

.closest( selectors, [ context ] ) 返回： Array

version added: 1.4.closest( selectors, [ context ] )

Example:

Show how event delegation can be done with closest.

Filter

.filter( selector ) 返回： jQuery

version added: 1.0.filter( selector )

version added: 1.0.filter( function(index) )

version added: 1.4.filter( element )

version added: 1.4.filter( jQuery object )

使用过滤函数

Examples:

Example: Change the color of all divs then put a border around only some of them.

Demo:

Example: Selects all paragraphs and removes those without a class "selected".

Example: Selects all paragraphs and removes those that aren't of class "selected" or the first one.

Example: Change the color of all divs then put a border to specific ones.

Demo:

Example: Remove all elements that have a descendant ol element

Prop

prop()

Contents:

.prop( propertyName ) 返回： String

version added: 1.6.prop( propertyName )

其他注意事项:

Example:

Checked属性显示一个复选框，因为它的变化和属性。

Demo:

.prop( propertyName, value ) 返回： jQuery

version added: 1.6.prop( propertyName, value )

version added: 1.6.prop( map )

version added: 1.6.prop( propertyName, function(index, oldPropertyValue) )

其他注意事项：

Example:

禁用页面上的所有复选框。

公告