mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-18 15:00:23 +00:00
139 lines
No EOL
5.3 KiB
HTML
139 lines
No EOL
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
|
<div class="ui-page">
|
|
<div class="ui-header">
|
|
<h1>.is()</h1>
|
|
|
|
</div>
|
|
<div class="ui-content ui-body ui-body-c" id="is1">
|
|
<h2 class="jq-clearfix roundTop section-title">
|
|
<span class="name">.is( selector )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Boolean">Boolean</a></span>
|
|
</h2>
|
|
<div class=" entry-details">
|
|
<p class="desc"><strong>Description: </strong>Check the current matched set of elements against a selector and return true if at least one of these elements matches the selector.</p>
|
|
<ul class="signatures"><li class="signature" id="is-selector">
|
|
<h4 class="name">
|
|
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.is( selector )</h4>
|
|
<p class="arguement"><strong>selector</strong>A string containing a selector expression to match elements against.</p>
|
|
</li></ul>
|
|
<div class="longdesc">
|
|
<p>Unlike the other filtering and traversal methods, <code>.is()</code> does not create a new jQuery object. Instead, it allows us to test the contents of a jQuery object without modification. This is often useful inside callbacks, such as event handlers.</p>
|
|
<p>Suppose we have a list, with two of its items containing a child element:</p>
|
|
<pre>
|
|
<ul>
|
|
<li>list <strong>item 1</strong></li>
|
|
<li><span>list item 2</span></li>
|
|
<li>list item 3</li>
|
|
</ul>
|
|
</pre>
|
|
<p>We can attach a click handler to the <ul> element, and then limit the code to be triggered only when a list item itself, not one of its children, is clicked:</p>
|
|
<pre>$('ul').click(function(event) {
|
|
if ($(event.target).is('li') ) {
|
|
$(event.target).css('background-color', 'red');
|
|
}
|
|
});</pre>
|
|
<p>Now, when the user clicks on the word list in the first item or anywhere in the third item, the clicked list item will be given a red background. However, when the user clicks on item 1 in the first item or anywhere in the second item, nothing will occur, because in those cases the target of the event would be <code><strong></code> or <code><span></code>, respectively.
|
|
</p>
|
|
</div>
|
|
<h3>Examples:</h3>
|
|
<div id="entry-examples" class="entry-examples">
|
|
<div id="example-0">
|
|
<h4>Example: <span class="desc">Shows a few ways is() can be used inside an event handler.</span>
|
|
</h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
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; }
|
|
.red { background:red; }
|
|
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-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
<div></div>
|
|
<div class="blue"></div>
|
|
<div></div>
|
|
<div class="red"></div>
|
|
|
|
<div><br/><span>Peter</span></div>
|
|
<div class="blue"></div>
|
|
<p>&nbsp;</p>
|
|
<script>
|
|
$("div").one('click', function () {
|
|
if ($(this).is(":first-child")) {
|
|
$("p").text("It's the first div.");
|
|
} else if ($(this).is(".blue,.red")) {
|
|
$("p").text("It's a blue or red div.");
|
|
} else if ($(this).is(":contains('Peter')")) {
|
|
$("p").text("It's Peter!");
|
|
} else {
|
|
$("p").html("It's nothing <em>special</em>.");
|
|
}
|
|
$("p").hide().slideDown("slow");
|
|
$(this).css({"border-style": "inset", cursor:"default"});
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div>
|
|
<div id="example-1">
|
|
<h4>Example: <span class="desc">Returns true, because the parent of the input is a form element</span>
|
|
</h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>div { color:red; }</style>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
<form><input type="checkbox" /></form>
|
|
|
|
<div></div>
|
|
<script>
|
|
|
|
var isFormParent = $("input[type='checkbox']").parent().is("form")
|
|
$("div").text("isFormParent = " + isFormParent);
|
|
</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div>
|
|
<div id="example-2">
|
|
<h4>Example: <span class="desc">Returns false, because the parent of the input is a p element</span>
|
|
</h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>div { color:red; }</style>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
<form><p><input type="checkbox" /></p></form>
|
|
|
|
<div></div>
|
|
<script>
|
|
var isFormParent = $("input[type='checkbox']").parent().is("form")
|
|
$("div").text("isFormParent = " + isFormParent);
|
|
</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body></html> |