Jquery小练习

版权声明:本文为博主原创文章,未经博主允许转载将负法律责任。 https://blog.csdn.net/ningmengbaby/article/details/82319609

练习1:点击所有的a节点,能够弹出对应的文本内容。

<script type="text/javascript" >

   $(function(){

         $("a").click(function(){

             alert($(this).text());

      });

});

</script>

注意:1.jQuery对象可以进行隐式迭代,为所选取的所有a节点都添加了onclick方法。jQuery对象本身就是一个DOM对象的数组。

            2.在方法中,this是一个DOM对象,如果想使用jQuery对象的方法,需要把其包装为jQuery对象,使用$()把this包起来。

            3.text()方法是一个读写的方法 ,不加任何参数,读取文本值

练习2:使第一个table隔行变色。

    $("table:first tr:even").css("background","#B2E0FF") ;

tr:even 选择器选取每个带有偶数 index 值的元素(比如 2、4、6)。

index 值从 0 开始,所有第一个元素是偶数 (0)。

练习3:点击button,弹出被选中的个数。

<script type="text/javascript">
             $(function(){
                $("button").click(function(){
                     alert($(":checkbox:checked").length);
                 });
              });
         </script>
 
 
   <body>
       <input type="checkbox" name="test" />
         <input type="checkbox" name="test" />
        <input type="checkbox" name="test" />
        <input type="checkbox" name="test" />
        <input type="checkbox" name="test" />
        <input type="checkbox" name="test" />
        <button>您选中的个数</button>
   </body>

猜你喜欢

转载自blog.csdn.net/ningmengbaby/article/details/82319609
今日推荐