jQuery -- is() 方法

定义和用法:

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

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

  例如:假设我们有一个列表,其中两个项目包含子元素,可以向 <ul> 元素添加 click 处理程序,然后把代码限制为只有当列表项本身,而非子元素,被点击时才进行触发,

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <script type="text/javascript" src="/jquery/jquery.js"></script>
 5 </head>
 6
 7 <body>
 8 <ul>
 9   <li>list <strong>item 1</strong></li>
10   <li><span>list item 2</span></li>
11   <li>list item 3</li>
12 </ul>
13
14 <script>
15 $("ul").click(function(event) {
16   var $target = $(event.target);
17   if ( $target.is("li") ) {
18     $target.css("background-color", "red");
19   }
20 });
21 </script>
22
23 </body>
24 </html>

  当点击的是第一个列表项中的单词 "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 片段,

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <script type="text/javascript" src="/jquery/jquery.js"></script>
 5 </head>
 6
 7 <body>
 8 <ul>
 9   <li><strong>list</strong> item 1 - one strong tag</li>
10   <li><strong>list</strong> item <strong>2</strong> -
11     two <span>strong tags</span></li>
12   <li>list item 3</li>
13   <li>list item 4</li>
14   <li>list item 5</li>
15 </ul>
16
17 <script>
18 $("li").click(function() {
19   var $li = $(this),
20     isWithTwo = $li.is(function() {
21       return $(‘strong‘, this).length === 2;
22     });
23   if ( isWithTwo ) {
24     $li.css("background-color", "green");
25   } else {
26     $li.css("background-color", "red");
27   }
28 });
29 </script>
30
31 </body>
32 </html>

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‘)");

参考:

JQUERY is()

jQuery 遍历 - is() 方法

时间: 2024-07-30 12:06:16

jQuery -- is() 方法的相关文章

jquery ajax 方法及各参数详解

jquery ajax 方法及各参数详解 1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET".注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分

jQuery on()方法绑定动态元素的点击事件无响应的解决办法

$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count++; } 以上代码执行时,点击#check_all时,alert一直没反应,后在网上查资料时,才知道on前面的元素也必须在页面加载的时候就存在于dom里面, 那原话是这样的: 支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了.现在主要用on,使用on的时候

jQuery on()方法

jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法有. bind() $("p").bind("click",function(){ alert("The paragraph was clicked."); }); $("p").on("click",func

优化加载jQuery的方法

请看下面的一段代码: 1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 2 <script type="text/javascript"> 3 window.jQuery || document.write("<script src='__ADMIN_JS__/jquery-2.0.3.

jQuery AJAX 方法

jQuery AJAX 方法 AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. 下面的表格列出了所有的 jQuery AJAX 方法: 方法 描述 $.ajax() 执行异步 AJAX 请求 $.ajaxPrefilter() 在每个请求发送之前且被 $.ajax() 处理之前,处理自定义 Ajax 选项或修改已存在选项 $.ajaxSetup() 为将来的 AJAX 请求设置默认值 $.ajaxTransport() 创建处理 Ajax 数据实际传送的对象

使用jquery的方法和技巧

1.下载一个jquery.js的文件 2.引入jquery.js文件 1 <script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.2.min.js"></script> 2 <script type="text/javascript"> 3 $(function(){ 4 5 //这里面使用jquery的方法 6 7 8 }); 9 </s

jQuery.access()方法

最开始只是想了解attr方法,发现它内部调用了jQuery.access()方法.除了attr,还有prop.text.html.css.data 都是内部调用了jQuery.access()方法,可见它的重要. attr: function( name, value ) { return jQuery.access( this, jQuery.attr, name, value, arguments.length > 1 ); } prop: function( name, value ) {

jQuery offsetParent()方法

offsetParent()方法的定义和用法:此方法可以返回匹配元素所有祖先元素中第一个采用定位的祖先元素.所谓采用定位的父元素就是施加position:relative或者position:absolute(fixed)的元素.此方法仅对可见元素有效.语法结构: $(selector).offsetParent() 代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> &

使用jquery的方法和技巧2,点击多选框的jquery响应

使用jquery来控制多选框的变化 功能描述: 1.第一层 当选中后台应用(App1)时,所有多选框都被选择. 当取消选中后台应用(App1)时,所有多选框都被取消选择. 第一层的逻辑如下: 2.第二层 a.对所有亲子多选框而言 当选择帖子管理(控制器Action02)时,所有亲子多选框被选择. 当取消选择帖子管理(控制器Action02)时,所有亲子多选框被取消选择. b.对亲父级多选框:后台应用(App1)而言 当选择帖子管理(控制器Action02)时,亲父App多选框被选择. 当取消选择

jQuery attr方法修改onclick值

了通过jQuery的attr修改onclick值. 代码: var js = "alert('B:' + this.id); return false;"; var newclick = eval("(function(){"+js+"});"); $("#anchor").attr('onclick', '').click(newclick); 如果onclick事件原先有值,要先清空,再用click( eval(funct