jquery 学习笔记

最新推荐文章于 2025-02-25 09:51:17 发布

原创最新推荐文章于 2025-02-25 09:51:17 发布 · 239 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

工作笔记专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个使用jQuery进行事件操作的示例，包括按钮点击、鼠标悬停、输入框聚焦等事件处理，展示了如何通过简单的代码实现元素的隐藏、背景色变化等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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