jquery slowly Bites (iv)

1.eq (Index|-index) gets the nth element

Negative number: An integer that indicates the position of the element, starting from the last element in the collection. (1 count)

$("p").eq(1)Gets the second element of a match

$("p").eq(-2)Gets the second element of a reciprocal match

2. $(‘li‘).first() //Get first element

$(‘li‘).last()Get last Element

$ (this). Hasclass ("protected") and $ (this). is (". protected") equal//checks whether the current element contains a particular class, and if so, returns True.

3.filter (EXPR|OBJ|ELE|FN)//Filters out a collection of elements that match the specified expression.

$("p").filter(".selected")//保留带有select类的元素

$("p").filter(".selected, :first")//Preserve the first and the elements with a select class

$("p").filter(function(index) { return $("ol", this).length == 0; });//Preserves elements in child elements that do not contain ol.

4.is (EXPR|OBJ|ELE|FN)//detects a collection of matching elements based on a selector, DOM element, or JQuery object, and returns true if at least one of the elements conforms to the given expression.

$("input[type=‘checkbox‘]").parent().is("form")Returns true because the INPUT element's parent element is a FORM element.

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

$("li").click(function() {
  var $li = $(this),
    isWithTwo = $li.is(function() {
      return $(‘strong‘, this).length === 2;
    });
  if ( isWithTwo ) {
    $li.css("background-color", "green");
  } else {
    $li.css("background-color", "red");
  }
});

5.map (callback)//convert a set of elements to another array (whether or not an array of elements)

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

6.has (Expr|ele)//preserve elements containing specific descendants, removing elements that do not contain the specified descendants.

<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

$(‘li‘).has(‘ul‘).css(‘background-color‘, ‘red‘);

7.not (EXPR|ELE|FN)//delete an element that matches a specified expression

$("p").not( $("#selected")[0] )

8.slice (Start, [end])//Select a matching subset

$("p").slice(0, 1).wrapInner("<b></b>");//wrapInner是在元素内部嵌套入HTML标签
$("p").slice(0, 2).wrapInner("<b></b>");

9.children ([expr])//Gets a collection of elements that contain all the child elements of each element in the matching element collection.

$("div").children()//获取所有子元素
$("div").children(".selected")//获取带有具体类的元素

10.closest (expr|object|element) (expr|object|element)//start with the element itself, and step back to the ancestor element and return the first matching element.

The main differences between closest and parents are:

1, the former from the current element start matching search, the latter from the parent element to match the search;

2, the former step up search, until the matching elements are found to stop, the latter has been looking up until the root element, and then put these elements into a temporary collection, and then with the given selector expression to filter;

3, the former returns 0 or 1 elements, which may contain 0, 1, or more elements.

$("li:first").closest(["ul", "body"]);

Shows how to use Clostest to complete an event delegate.

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

11.find (Expr|obj|ele) This function is a good way to find out the descendant elements of the element being processed.

$("p").find("span")

12.next ([expr])//Gets a collection of elements that contain a matching set of elements that are immediately behind each element in the next sibling element.

$("p").next()

$("p").next(".selected")

13.nextAll ([expr])//Find all sibling elements after the current element

$("div:first").nextAll().addClass("after");

14.nextUntil ([Exp|ele][,fil])//finds all sibling elements after the current element until the matching element is encountered.

$ ("#term-1"). Nextuntil (TERM3, "DD"). CSS ("Color", "green");

15.parent ([expr])//Gets a collection of elements containing the unique parent element for all matching elements

$("p").parent()

$("p").parent(".selected")

16.parents ([expr])//Gets a collection of elements containing the ancestor elements of all matching elements (without the root element). You can filter by an optional expression.

$("span").parents()

$("span").parents("p")

17.parentsUntil ([Expr|element][,filter])//Find all the parent elements of the current element until the matching element is encountered

18.prev ([expr])//Gets a collection of elements that contain a matching set of elements for each element immediately preceding the previous sibling element.

$("p").prev()

$("p").prev(".selected")

19.prevAll ([expr])//Find all sibling elements before the current element

$("div:last").prevAll().addClass("before");

20.prevUntil ([Exp|ele][,fil])//Find all sibling elements before the current element until the matching element is encountered.

$(‘#term-2‘).prevUntil(‘dt‘).css(‘background-color‘, ‘red‘);

21.siblings ([expr])//Gets a collection of elements that contain all unique sibling elements of each element in the matching element collection. You can filter by using an optional expression.

$("div").siblings(".selected")

22.add (Expr|ele|html|obj[, con])//Adds an element that matches an expression to a jquery object. This function can be used to concatenate the result set of an element that matches two expressions respectively.

<p>Hello</p><span>Hello Again</span>

$("p").add("span")

[ <p>Hello</p>, <span>Hello Again</span> ]

<p>Hello</p>

  $("p").add("<span>Again</span>")

[ <p>Hello</p>, <span>Hello Again</span> ]

<p>Hello</p><p><span id="a">Hello Again</span></p>

  $("p").add(document.getElementById("a"))

[ <p>Hello</p>, <p><span id="a">Hello Again</span></p>, <span id="a">Hello Again</span> ]

23.andSelf()//加入先前所选的加入当前元素中

Starting with jQuery1.8, the. Andself () method has been labeled obsolete and should be used in jQuery1.8 and later versions. Addback ().

$("div").find("p").andSelf().addClass("border");

24.contents ()//Finds all child nodes (including text nodes) within the matching element. If the element is an IFRAME, find the document content

$("p").contents().not("[nodeType=1]").wrap("<b/>");

$("iframe").contents().find("body").append("I‘m in an iframe!");

25.end ()//go back to a recent "destructive" operation. That is, the list of matched elements changes to the previous state.

<p><span>Hello</span>,how are you?</p>

$("p").find("span").end()

[ <p><span>Hello</span> how are you?</p> ]

jquery slowly Bites (iv)