jquery学习笔记(1)

  1.首先学习了$(document).ready()与onload方法有着相同的效果。但是$(document).ready()的优先级高于onload()方法。这两种方法可以和平共处

 

<table>
    <tr>
     <th>11111</th>
     <th>22222</th>
    </tr>
    <tr>
     <td>Hery</td>
     <td>cary</td>
    </tr>
     <tr>
      <td>aa</td>
      <td>bb</td>
     </tr>
     <tr>
      <td>cc</td>
      <td>dd</td>
     </tr>
    </table>

<script type="text/javascript">
    $(document).ready(
    function(){
      $('the').parent().addClass('titleClass');
      $('tr:not(th):odd').addClass('odd');
      $('tr:not(th):even').addClass('even');
      $('tr:contains("Hery")').next().addClass('hightlight');
     }
    );

</script>

<style type="text/css">
  .odd
  {
     background-color: red; 
  }
  .even
  {
     border-color: blue;
  }

</style>

这是第一个小例子可以实现斑马线。

 

 

 

/

 

Jquery复合事件处理程序。

<script>

$(document).ready(
     function(){
       $('switcher h3').toggle(
        function(){
          $('switcher .button').addClass('hidden');
        },
        function(){
          $('switcher .button').removeClass('hidden');
        }
       );
     }
    );

 

</script>

//备注：1.switcher为id，h3,.button是一个本来就有的css样式，hidden为要加的css样式。此段的js的意思是当点击时，会出现显示和隐藏的效果。

            2.toggle()方法接收2个参数，而且这2个参数都是函数。第一次在元素单击时，会调用第一个函数，依次类推。

              函数是交替替换的。这样就实现了。

 / /

<style>

#switcher .hover{
  cursor:pointer;
  background-color:#afa;
}

</style>

<script>

$(document).ready(
 function(){
 $('#switcher .button').hover(function(){
  $(this).addClass('hover');
}),function(){
  $(this).removeClass('hover');
}
}
);

</script>

//备注：当鼠标移到到id位switcher的时候，和移走的时候效果是不一样的，动态改变样式。

 

/ /

 

stopPropagation()方法避免其他DOM元素响应事件。

unbind()方法将一种事件类型作为第一个参数，将要移除的函数作为第二个参数。

trigger()方法可以完成模拟事件的操作。比如，当装载页面的时候，也没折叠起来就可以这样：

$(document).ready(function(){$('#switcher').trigger('click')});
$('#switcher').click(toggleStyleSwitcher );
 var toggleStyleSwitcher = function(){
   $('#switcher .button').toggleClass('hidden');
};