欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

jQuery 遍历 - is() 方法

jQuery 遍历参考手册

实例

返回 false,因为 input 元素的父元素是 p 元素:

  var isFormParent = $("input[type='checkbox']").parent().is("form");
  $("div").text("isFormParent = " + isFormParent);

亲自试一试

定义和用法

is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true。

语法

.is(selector)
参数描述
selector字符串值,包含匹配元素的选择器表达式。

详细说明

与其他筛选方法不同,.is() 不创建新的 jQuery 对象。相反,它允许我们在不修改 jQuery 对象内容的情况下对其进行检测。这在 callback 内部通常比较有用,比如事件处理程序。

假设我们有一个列表,其中两个项目包含子元素:

<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>

您可以向 <ul> 元素添加 click 处理程序,然后把代码限制为只有当列表项本身,而非子元素,被点击时才进行触发:

$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
});

亲自试一试

现在,当用户点击的是第一个列表项中的单词 "list" 或第三个列表项中的任何单词时,被点击的列表项会被设置为红色背景。不过,当用户点击第一个列表项中的 item 1 或第二个列表项中的任何单词时,都不会有任何变化,这是因为这上面的情况中,事件的目标分别是 <strong> 是 <span>。

请您注意,对于带有位置性选择器的选择器表达式字符串,比如 :first、:gt() 或者 :even,位置性筛选是针对传递到 .is() 的 jQuery 对象进行的,而非针对包含文档。所以对于上面的 HTML 来说,诸如 $("li:first").is("li:last") 的表达式返回 true,但是 $("li:first-child").is("li:last-child") 返回 false。

使用函数

该方法的第二种用法是,对基于函数而非选择器的相关元素的表达式进行求值。对于每个元素来说,如果该函数返回 true,则 .is() 也返回 true。例如,下面是稍微复杂的 HTML 片段:

<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>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

您可以向每个 <li> 添加 click 处理程序,以计算在被点击的 <li> 内部 <strong> 元素的数目:

$("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");
  }
});

亲自试一试


来自 http://www.w3school.com.cn/jquery/traversing_is.asp


定义和用法

根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。
如果没有元素符合,或者表达式无效,都返回'false'。 '''注意:'''在jQuery 1.3中才对所有表达式提供了支持。在先前版本中,如果提供了复杂的表达式,比如层级选择器(比如 + , ~ 和 > ),始终会返回true

语法


  1. is(expr|obj|ele|fn)
参数描述
expr字符串值,包含供匹配当前元素集合的选择器表达式。
jQuery object现有的jQuery对象,以匹配当前的元素。
element一个用于匹配元素的DOM元素。
function(index)一个函数用来作为测试元素的集合。它接受一个参数index,这是元素在jQuery集合的索引。在函数, this指的是当前的DOM元素。

例子 1

由于input元素的父元素是一个表单元素,所以返回true。


  1. # HTML 代码:
  2. <form><input type="checkbox" /></form>
  3. # jQuery 代码:
  4. $("input[type='checkbox']").parent().is("form")

结果:


  1. true

例子 2

判断点击li标签增加背景色为红色,如果点击的是第2个strong,当前的li增加背景色为绿色


  1. # HTML 代码:
  2. <ul>
  3. <li><strong>list</strong> item 1 - one strong tag</li>
  4. <li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li>
  5. <li>list item 3</li>
  6. </ul>
  7. # jQuery 代码:
  8. $("li").click(function() {
  9. var $li = $(this),
  10. isWithTwo = $li.is(function() {
  11. return $('strong', this).length === 2;
  12. });
  13. if ( isWithTwo ) {
  14. $li.css("background-color", "green");
  15. } else {
  16. $li.css("background-color", "red");
  17. }
  18. });

例子 3

下面是 is() 函数比较常用的用法


  1. // 是否是隐藏的
  2. $('#test').is(':visible');
  3. // 判断input元素是否被选中
  4. $('input[name=chkNoChecked]').is(':checked');
  5. // 是否是第一个子元素
  6. $(this).is(":first-child");
  7. // 是否包含.blue,.red的class
  8. $(this).is(".blue,.red");
  9. // 文本中是否包含Peter这个词
  10. $(this).is(":contains('Peter')");

问题没有解决?建议您查阅官方文档:http://api.jquery.com/is/


来自  http://www.hi-docs.com/jquery/is.html



 

jQuery 的is用法

有一种这样的用法:
$(function() {$("#id").is(":visible"),这种用法和传统用法有什么区别吗?
 
WY吾暧 | 浏览 1104 次  2014-04-30 20:42
2015-10-17 16:25最佳答案
 

jQuery 遍历 - is() 方法

 

 

 

定义和用法

 

  is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true。

 

语法

1
.is(selector)

 

详细说明

 

  与其他筛选方法不同,.is() 不创建新的 jQuery 对象。相反,它允许我们在不修改 jQuery 对象内容的情况下对其进行检测。这在 callback 内部通常比较有用,比如事件处理程序。

假设我们有一个列表,其中两个项目包含子元素:

1
2
3
4
5
<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>

您可以向 <ul> 元素添加 click 处理程序,然后把代码限制为只有当列表项本身,而非子元素,被点击时才进行触发:

1
2
3
4
5
6
$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color""red");
  }
});
 

纯洁的小树 

采纳率:72% 擅长: 聊天软件

 

其他回答

区别在于写法比较简单了,传统的要这样判断

1
return document.getElementById('id').style.display=="none"

你可以看在jquery在教程jquery.xiamiz.com或者虾米站长等。

来自 http://zhidao.baidu.com/link?url=5n9h4cu1Fjvvvlc0Ky5Gwn7w-59aR27-7yV_dEOq2wwypOHkkjzriR7UFh-4CLYV2W4...



jQuery中is()方法用法实例

投稿:shichen2014 字体:[增加 减小] 类型:转载 时间:2015-01-06 我要评论

这篇文章主要介绍了jQuery中is()方法用法,实例分析了is()方法的功能、定义及检查匹配元素集合时的各种使用技巧,需要的朋友可以参考下

本文实例讲述了jQuery中is()方法用法。分享给大家供大家参考。具体分析如下:

此方法使用参数来检查匹配元素集合。
如果其中至少有一个元素符合这个给定的参数就返回true,否则返回false。

语法结构一:

复制代码代码如下:
$(selector).is(expr)

参数列表: 
参数描述
expr字符串值,供匹配当前元素集合的选择器表达式。

 

实例代码:

 

复制代码代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/> 
<meta name="author" content="http://www.jb51.net/" />
<title>is()函数-脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  alert($("li").parent().is("ul"))
})
</script>
</head>
<body>
<div>
  <ul>
    <li>div+css专区</li>
    <li>jQuery专区</li>
  </ul>
</div>
</body>
</html>

 

下面代码检测li元素的父元素是否是ul,如果是返回true,否则返回false。

语法结构二:

参数列表:

参数描述
element用于匹配元素的DOM元素或者jQuery元素。

 

实例代码:

实例一:

 

复制代码代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/> 
<meta name="author" content="http://www.jb51.net/" />
<title>is()函数-脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  alert($("li").parent().is(document.getElementById("parent")))
})
</script>
</head>
<body>
<div>
  <ul id="parent">
    <li>div+css专区</li>
    <li>jQuery专区</li>
  </ul>
</div>
</body>
</html>

 

实例二:

 

复制代码代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/> 
<meta name="author" content="http://www.jb51.net/" />
<title>is()函数-脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  alert($("li").parent().is($("#parent")))
})
</script>
</head>
<body>
<div>
  <ul id="parent">
    <li>div+css专区</li>
    <li>jQuery专区</li>
  </ul>
</div>
</body>
</html>

 

语法结构三:

使用函数用来遍历元素的集合。
此函数接受一个参数index,这是元素在jQuery集合的索引。函数中, this指的是当前的DOM元素。

参数列表:

参数描述
function(index)定义返回is()匹配值的函数。
index为当前元素在匹配元素集合中的索引值。

 

实例代码:

 

复制代码代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/> 
<meta name="author" content="http://www.jb51.net/" />
<title>is()函数-脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  alert($("li").parent().is(function(index){return $("ul").attr("id")=="parent"}))
})
</script>
</head>
<body>
<div>
  <ul id="parent">
    <li>div+css专区</li>
    <li>jQuery专区</li>
  </ul>
</div>
</body>
</html>

 

希望本文所述对大家的jQuery程序设计有所帮助。

您可能感兴趣的文章:

来自 http://www.jb51.net/article/59523.htm

 




jQuery 的is用法

有一种这样的用法:
$(function() {$("#id").is(":visible"),这种用法和传统用法有什么区别吗?
 
WY吾暧 | 浏览 1104 次  2014-04-30 20:42
2015-10-17 16:25最佳答案
 

jQuery 遍历 - is() 方法

 

 

 

定义和用法

 

  is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true。

 

语法

1
.is(selector)

 

详细说明

 

  与其他筛选方法不同,.is() 不创建新的 jQuery 对象。相反,它允许我们在不修改 jQuery 对象内容的情况下对其进行检测。这在 callback 内部通常比较有用,比如事件处理程序。

假设我们有一个列表,其中两个项目包含子元素:

1
2
3
4
5
<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>

您可以向 <ul> 元素添加 click 处理程序,然后把代码限制为只有当列表项本身,而非子元素,被点击时才进行触发:

1
2
3
4
5
6
$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color""red");
  }
});
 

纯洁的小树 

采纳率:72% 擅长: 聊天软件

其他回答

区别在于写法比较简单了,传统的要这样判断

1
return document.getElementById('id').style.display=="none"

你可以看在jquery在教程jquery.xiamiz.com或者虾米站长等。


普通分类: