jQuery is()函数的用法实例详解-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

jQuery is()函数的用法实例详解

Jun 19, 2017 pm 02:22 PM

jquery fungsi Contoh penggunaan Penjelasan terperinci

jquery中的is()方法可以判断元素是否可见，是否隐藏，是否选中。

下面我们分别举例介绍。

一、判断元素是否隐藏
如下html中的p元素是隐藏的：

&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src=&quot;jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p id=&quot;test&quot; style=&quot;display:none&quot;&gt;你看不到我&lt;/p&gt;
&lt;span &gt;&lt;/span&gt;
    &lt;script type=&quot;text/
javascript
&quot;&gt;
$(&#39;span&#39;).html(&#39;test p is visible? &#39; + $(&#39;#test&#39;).is(&#39;:visible&#39;));
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

二、判断checkbox是否选中
jquery中可以通过xx.is(':checked')判断checkbox，radiobutton是否是选中状态，如下测试html

&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src=&quot;jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;
    &lt;input type=&quot;checkbox&quot; name=&quot;chkChecked&quot; checked=&quot;checked&quot;/&gt; chkChecked
    &lt;input type=&quot;checkbox&quot; name=&quot;chkNoChecked&quot; /&gt; chkNoChecked
&lt;/p&gt;
&lt;span &gt;&lt;/span&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
$(&#39;span&#39;).html(&#39;chkChecked checked? &#39; + $(&#39;input[name=chkChecked]&#39;).is(&#39;:checked&#39;) + &#39;&lt;br/&gt; &#39;
    +&#39;chkNoChecked checked? &#39; + $(&#39;input[name=chkNoChecked]&#39;).is(&#39;:checked&#39;) );
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

三、判断是否使用了某个样式

&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;is函数介绍&lt;/title&gt;
  &lt;style&gt;  //设置一些基本样式
  p { width:60px; height:60px; margin:5px; float:left;
      border:4px outset; 
background
:green; text-align:center;
      
font-weight
:bolder; cursor:pointer; }
  .blue { background:blue; }  //样式1
  .red { background:red; }//样式2
  span { color:white; font-size:16px; }
  p { color:red; font-weight:bolder; background:yellow;
      margin:3px; clear:left; display:none; }
  &lt;/style&gt;
  &lt;script src=&quot;jquery-1.9.1.js&quot;&gt;&lt;/script&gt; //注意 这里使用的是jQuery官方的脚步库
&lt;/head&gt;
&lt;body&gt;
  &lt;p&gt;&lt;/p&gt;  //注意这里出现了第一个p
&lt;p class=&quot;blue&quot;&gt;&lt;/p&gt;//注意这里出现了第2个p
&lt;p&gt;&lt;/p&gt;//注意这里出现了第3个p
&lt;p class=&quot;red&quot;&gt;&lt;/p&gt;//注意这里出现了第4个p
&lt;p&gt;&lt;br/&gt;&lt;span&gt;Peter&lt;/span&gt;&lt;/p&gt;//注意这里出现了第5个p
&lt;p class=&quot;blue&quot;&gt;&lt;/p&gt;//注意这里出现了第6个p
&lt;p&gt; 脚本学堂，www.jbxue.com。&lt;/p&gt;
&lt;script&gt; 
  $(&quot;p&quot;).one(&#39;click&#39;, function () {   //$(&quot;p&quot;).one  代表对p元素附加一个事件，
//还能附加多个事件 譬如click或者mouseout时同时执行一些事情
    if ($(this).is(&quot;
:first-child
&quot;)) { //is函数发挥作用了，is(&quot;:first-child&quot;) 代表 
   //判断此p是否第一个出现的p
      $(&quot;p&quot;).text(&quot;It&#39;s the first p.&quot;); //text和html区别在于是否支持html标记
  // 此时你在里面写个 alert是不会执行的
    } else if ($(this).is(&quot;.blue,.red&quot;)) {  //判断该p是否 具有blue或者red的 class
      $(&quot;p&quot;).text(&quot;这是个蓝色或者红色的p&quot;);
    } else if ($(this).is(&quot;:contains(&#39;Peter&#39;)&quot;)) { //判断p中是否存在Peter这个词
      $(&quot;p&quot;).text(&quot;It&#39;s Peter!&quot;);
    } else {
      $(&quot;p&quot;).html(&quot;It&#39;s nothing &lt;em&gt;special&lt;/em&gt;.&quot;);
    }
    $(&quot;p&quot;).hide().slideDown(&quot;slow&quot;); //这是一个动画效果。慢慢展现p的内容
    $(this).css({&quot;
border-style
&quot;: &quot;inset&quot;, cursor:&quot;default&quot;});
  });
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

Atas ialah kandungan terperinci jQuery is()函数的用法实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn