JQuery is of function usage 3 cases

2020-03-30 02:51:14
OfStack

JQuery provides the is () method to easily determine whether an element is visible, hidden, or selected.

One, determine whether the element is hidden

The following HTML div element is hidden:


<!doctype html>
<html>
<head>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
</head>
<body>
    <div id="test" style="display:none"> You can't see me </div>
<span ></span>
    <script type="text/javascript">
$('span').html('test div is visible? ' + $('#test').is(':visible'));
    </script>
</body>
</html>

Check whether the checkbox is checked

In jquery, xx. Is (':checked') can be used to determine whether the checkbox and radiobutton are checked or not. Test the HTML as follows


<!doctype html>
<html>
<head>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
</head>
<body>
<p>
    <input type="checkbox" name="chkChecked" checked="checked"/> chkChecked
    <input type="checkbox" name="chkNoChecked" /> chkNoChecked
</p>
<span ></span>
    <script type="text/javascript">
$('span').html('chkChecked checked? ' + $('input[name=chkChecked]').is(':checked') + '<br/> '
    +'chkNoChecked checked? ' + $('input[name=chkNoChecked]').is(':checked') );
    </script>
</body>
</html>

Third, determine whether a style is being used


<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is Function is introduced </title>
  <style>  //Set some basic styles
  div { width:60px; height:60px; margin:5px; float:left;
      border:4px outset; background:green; text-align:center;
      font-weight:bolder; cursor:pointer; }
  .blue { background:blue; }  //Style 1
  .red { background:red; }//Styles 2,
  span { color:white; font-size:16px; }
  p { color:red; font-weight:bolder; background:yellow;
      margin:3px; clear:left; display:none; }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script> //Note that the official jQuery footsteps library is used here
</head>
<body>
  <div></div>  //Notice that the first div appears here
<div class="blue"></div>//Notice that the second div appears
<div></div>//Notice that the third div appears
<div class="red"></div>//Notice that the fourth div appears
<div><br/><span>Peter</span></div>//Notice that the fifth div appears
<div class="blue"></div>//Notice that the sixth div appears
<p> </p>
<script>
  $("div").one('click', function () {   //$(" div "). One  Is for attaching an event to the div element,
//You can also attach multiple events such as click or mouseout to perform something at the same time
    if ($(this).is(":first-child")) { //The is function is in action, is(":first-child") represents
   //Determines whether this div is the first div to appear
      $("p").text("It's the first div."); //The difference between text and HTML is whether HTML markup is supported
  //If you put an alert in there, it won't work
    } else if ($(this).is(".blue,.red")) {  //Determines whether the div has a blue or red class
      $("p").text(" This is a blue one or a red one div");
    } else if ($(this).is(":contains('Peter')")) { //Determine whether the word Peter is in div
      $("p").text("It's Peter!");
    } else {
      $("p").html("It's nothing <em>special</em>.");
    }
    $("p").hide().slideDown("slow"); //This is an animation. Slowly bring up the content of p
    $(this).css({"border-style": "inset", cursor:"default"});
  });
</script>
</body>
</html>