jquery 学习笔记

来源：互联网发布：藏宝阁交易数据异常编辑：程序博客网时间：2024/05/01 09:56

学习jquery的事件操作

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jquerytest</title></head><body> <p>hello  world 我是第一个p</p> <p class="dada">hello  world 我的是二个p</p> <p class="dada">hello  world 我的是二个p</p> <p class="dada">hello  world 我的是二个p</p> <p>hello  world 我的是二个p</p> <p id="test">hello  world 我的是二个p</p> <div id="one">  <h2>one artic</h2> </div> <div id="two"> <h2>two artic</h2> </div> <div id="three"> <h2>three artic</h2> </div> <div id="four"> <h2>four artic</h2> <input> </div> <button>按钮</button>   <script src="js/jquery.js"></script>   <script>       //1,加载完dom节点后就会执行这个方法//     $(document).ready(function () {//      $('button').click(function () {//          $('.dada').hide();//      });//     });   //2,也可以使用这个方法    $(function () {          $('p').click(function () {              $('p').hide();          });          //鼠标进入的时候mouseenter()触发的事件          $('#test').mouseenter(function () {              alert('we are famuly');          });         //离开的时候触发这个mouseleave()事件          $('.dada').mouseleave(function () {              alert('we are family yes');          });         $('#one').mousedown(function () {             alert('welcome one');         });         //鼠标点击和离开的时候触发的事件         $("#one").mouseup(function(){            alert("Mouse up over one!");            });         $('#two').hover(function () {             alert('hello two')         },function () {             alert('hello two left')         });        $('#four input').focus(function () {            $(this).css('background-color','#00ffff');        });        //上下这两个方法是 input有焦点个失去焦点会调用的两个方法        $('#four input').blur(function () {            $(this).css('background-color','#ffff00');        });    });   </script></body></html>

0 0