Of Stack

JQuery filter element operation summary

  • 2020-03-30 00:39:23
  • OfStack

1: eq(index) method

To get the NTH element, the position of this element is calculated from 0. The syntax is as follows: eq(index)

Gets the third table and sets its background color to "#FCF" with the following code: $("td").eq(2).css("background", "#FCF");


2: filter(expr) method

To filter out the set of elements that match the specified expression, to narrow the range of matches, to separate multiple expressions with commas, so that the relations between multiple expressions are "or",

The syntax is: filter(expr)

$(" input "). The filter (the "sel"). The CSS (" backgroud ", "# FCF");   // selects the input element with the class attribute value sel and sets its background color

$(" input "). The filter (" the sel, : first "). The CSS (" background ", "# FCF");   // select the input element with the class attribute value or select the first element in the current field and set their background color,

The expressions are separated by commas


3: filter(fn) method

Used to filter out a collection of elements that match the return value of the specified function, which internally evaluates each object once (for example, $:each). If the called function returns false, the element is removed,

Otherwise it will remain. The syntax is as follows: filter(fn) 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>filter(fn) usage </title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
   $(document).ready(function(){
      $("p").filter(function(index){
        return $("ol", this).length == 0;
    }).css("color", "blue");
   })
</script>
</head>
<body>
     <p>
       <ol>
           <li>Hello</li>
       </ol>
     </p>
     <p>How are you?</p>
</body>
</html>

Assume that there is no ol element in the child element and set the font color of the element to blue.

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201311/1332863314_6641.png ">

4: has(expr) method

Used to preserve elements that contain specific descendants and to remove those that do not, this method recreates a set of matching objects from a given jQuery object, with the provided selector testing each of the original ones

The descendants of those objects, the objects with matching descendants will be preserved, the syntax is as follows:

From the (expr) 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>has(expr) usage </title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
   $(document).ready(function(){
      $("li").has("ul").css("color", "red");
   })
</script>
</head>
<body>
    <ul>
       <li id="menu_li">
          <ul id="menu_ul">
              <li> news </li>
              <li> Web page </li>
              <li> know </li>
          </ul>
       </li>
       <li> The body of the </li>
       <li> At the end </li>
    </ul>
</body>
</html>

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201311/1332863260_3101.png ">

5: hasClass (class)

Checks to see if the current element contains a particular class, and returns true if so 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hasClass usage </title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
   $(document).ready(function(){
     $("div").click(function() {
     if($(this).hasClass("protected")) {
      $(this).css("border", "1px solid blue");
     }
   });
   })
</script>
</head>
<body>
   <div class="protected">div The element </div>
   <div>div Element 2 </div>
</body>
</html>

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201311/1332863220_8153.png ">

6: map(callback) method

The map(callback) method is used to convert a set of elements to another array (whether it is an array of elements or not). This function can be used to create a list of values, attributes, CSS styles, or other special forms.

Both can be easily set up with $.map(). The syntax is as follows:

The map (the callback)

Related articles: