jquery 学习笔记

最新推荐文章于 2022-09-16 14:43:31 发布

第一次看海

最新推荐文章于 2022-09-16 14:43:31 发布

阅读量214

点赞数

分类专栏：工作笔记文章标签： jquery

本文链接：https://blog.csdn.net/dengxt/article/details/52437408

版权

工作笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

学习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>