美文网首页
jQuery 查缺补漏

jQuery 查缺补漏

作者: 戒惜舍得 | 来源:发表于2017-11-20 21:12 被阅读4次

eq

.eq( index )Returns: jQuery
Description: Reduce the set of matched elements to the one at the specified index.

Given a jQuery object that represents a set of DOM elements, the .eq() method constructs a new jQuery object from one element within that set. The supplied index identifies the position of this element in the set.

Consider a page with a simple list on it:

<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>
</ul>

We can apply this method to the set of list items:

$( "li" ).eq( 2 ).css( "background-color", "red" );
The result of this call is a red background for item 3. Note that the supplied index is zero-based, and refers to the position of the element within the jQuery object, not within the DOM tree.

index

.index()Returns: Integer
Description: Search for a given element from among the matched elements.

Return Values

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

If .index() is called on a collection of elements and a DOM element or jQuery object is passed in, .index() returns an integer indicating the position of the passed element relative to the original collection.

If a selector string is passed as an argument, .index() returns an integer indicating the position of the first element within the jQuery object relative to the elements matched by the selector. If the element is not found, .index() will return -1.

append

.append( content [, content ] )Returns: jQuery
Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements.

version added: 1.0.append( content [, content ] )
content
Type: htmlString or Element or Text or Array or jQuery
DOM element, text node, array of elements and text nodes, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.
content
Type: htmlString or Element or Text or Array or jQuery
One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or jQuery objects to insert at the end of each element in the set of matched elements.
version added: 1.4.append( function )
function
Type: Function( Integer index, String html ) => htmlString or Element or Text or jQuery
A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert at the end of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, this refers to the current element in the set.
The .append() method inserts the specified content as the last child of each element in the jQuery collection (To insert it as the first child, use .prepend()).

The .append() and .appendTo() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With .append(), the selector expression preceding the method is the container into which the content is inserted. With .appendTo(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.

Consider the following HTML:

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

You can create content and insert it into several elements at once:

$( ".inner" ).append( "<p>Test</p>" );
Each inner <div> element gets this new content:

<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>
  </div>
</div>

length

lengthReturns: Integer
Description: The number of elements in the jQuery object.

version added: 1.0length
The number of elements currently matched. The .size() method will return the same value.


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>length demo</title>
  <style>
  body {
    cursor: pointer;
  }
  div {
    width: 50px;
    height: 30px;
    margin: 5px;
    float: left;
    background: green;
  }
  span {
    color: red;
  }
  </style>
  <script src="jquery-1.10.2.js"></script>
</head>
<body>
  <span></span>
  <div></div>
<script>
$( document.body )
  .click(function() {
    $( document.body ).append( $( "<div>" ) );
    var n = $( "div" ).length;
    $( "span" ).text( "There are " + n + " divs." +
      "Click to add more.");
  })
  // Trigger the click to start
  .trigger( "click" );
</script>
 
</body>
</html>


第一个打印是2个div每点击一下就是多加一个div

相关文章

  • jQuery 查缺补漏

    eq .eq( index )Returns: jQueryDescription: Reduce the set...

  • 查缺补漏

    计算机本科研究生相关课程参加开源项目spring源码

  • 查缺补漏

    查缺补漏是学习中最通俗的方法,知道自己哪方面知识点薄弱,就针对性的去学习,假以时日的去练习,就能攻克难点,薄弱知识...

  • 查缺补漏

    一.表格常用样式 vertical-align: 垂直方向的对齐方式middle top bottom bor...

  • 查缺补漏

  • Promise 查缺补漏

    promise 中 resolve 参数为一个 promise 时 p1是一个 Promise,3 秒之后变为re...

  • JavaScript查缺补漏

    语法 每个语句以;结束,语句块用{...}。但是,JavaScript并不强制要求在每个语句的结尾加; 第一种是=...

  • 查缺补漏 如饥似渴

    为了讲好Servlet,从头到尾的看视频,完整的扫描知识点,把之前缺少的、遗漏的都补上,从未如此踏实充足。就像搭积...

  • 质量查缺补漏

    ?? ????????????????????????? ????????????????????????? ??...

  • vue查缺补漏

    Object.defineProperty有缺陷,就是无法监控到对象属性临时添加的属性,必须使用VUE.set($...

网友评论

      本文标题:jQuery 查缺补漏

      本文链接:https://www.haomeiwen.com/subject/slybvxtx.html