JQuery-Is () method

Source: Internet
Author: User

Definition and Usage:

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. Returns ' false ' if no element is met, or if the expression is not valid. "Note:" in jquery 1.3, all expressions are supported. In previous releases, a complex expression, such as a hierarchy selector (such as +, ~ and >), would always return true

Detailed Description:
Unlike other filtering methods,. is () does not create a new JQuery object. Instead, it allows us to detect the contents of a JQuery object without modifying it. This is often useful inside callback, such as event handlers.

For example, suppose we have a list where two items contain child elements, you can add a click handler to the <ul> element, and then limit the code to trigger only if the list item itself, not the child element, is clicked.

1<! DOCTYPE html>234<script type= "Text/javascript" src= "/jquery/jquery.js" ></script>56 7<body>8<ul>9<li>list <strong>item 1</strong></li>Ten<li><span>list Item 2</span></li> One<li>list Item 3</li> A</ul> -  -<script> the$ ("ul"). Click (function(event) { -   var$target =$ (event.target); -   if($target. Is ("Li") ) { -$target. CSS ("Background-color", "Red"); +   } - }); +</script> A  at</body> -
View Code

When you click on the word "list" in the first list item or any word in the third list item, the clicked list item is set to the red background. However, when a user clicks on any word in Item 1 or the second list item in the first list item, there is no change, because in this case, the objective of the event is <strong> is <span>.
  Note: for selector expression strings with a positional selector, such as: First,: GT () or: Even, positional filtering is for the JQuery object passed to. is (), not for the containing document. So for the above HTML, such as $ ("Li:first"). The expression of IS ("Li:last") returns True, but $ ("Li:first-child"). Is ("Li:last-child") returns false.

Using functions

The second use of this method is to evaluate an expression that is based on a function rather than a related element of the selector. For each element, if the function returns True, then. is () also returns True. For example, here is a slightly more complex HTML fragment,

You can add a click handler to each <li> to calculate the number of <li> internal <strong> elements that are clicked:

1<! DOCTYPE html>234<script type= "Text/javascript" src= "/jquery/jquery.js" ></script>56 7<body>8<ul>9<li><strong>list</strong> Item 1-one Strong tag</li>Ten<li><strong>list</strong> Item <strong>2</strong>- One<span>strong tags</span></li> A<li>list Item 3</li> -<li>list Item 4</li> -<li>list Item 5</li> the</ul> -  -<script> -$ ("Li"). Click (function() { +   var$li = $ ( This), -Iswithtwo = $li. Is (function() { +       return$ (' strong ', This). length = = 2; A     }); at   if(iswithtwo) { -$li. CSS ("Background-color", "green"); -}Else { -$li. CSS ("Background-color", "Red"); -   } - }); in</script> -  to</body> +
View Code

The IS () function compares common uses:

1     //whether it is hidden2$ (' #test '). Is (': Visible '));3     //determines whether the INPUT element is selected4$ (' input[name=chknochecked] '). Is (': Checked '));5     //whether it is the first child element6$( This). Is (": First-child");7     //whether to include the. Blue,.red class8$( This). is (". blue,.red");9     //does the text contain the word Peter ?Ten$( This). Is (": Contains (' Peter ')");
View Code

Reference:

JQUERY is ()

JQuery traversal-is () method

JQuery-Is () method

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.