初识jQuery的案例-阿里云开发者社区

初识jQuery的案例

2022-11-27 83

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 初识jQuery的案例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
      $(function(){
        /*按钮的单击事件*/
        $("#btn").click(function(){
          /*单击按钮添加div1_style样式*/
          $("#div1").addClass("div1_style");
        });
        /*单击div1*/
        $("#div1").click(function(){
          /*给div2添加div2_style样式*/
          $("#div2").addClass("div2_style")
        });
        /*单击h2标题的收*/
        $("h1").click(function(){
          $("h1").css("background","red").next().css("display","block");
        });
        /*测试next方法，是紧邻同级元素的下一个，下下个不包括*/
        $(".test_next li").click(function(){
          $(".test_next_li1").next().css("color","red");
        });
        /*单击图片在图片外边显示边框*/
        $(".img1").click(function(){
          $(this).css("border","2px solid black");
        })
        /*使用js获取dom_test元素*/
        var dom_test = document.getElementById("dom_test");
        //转换成jquery元素
        var $dom_test  = $(dom_test);
        //单击他的时候改变字体颜色
        $("#dom_test").click(function(){
          $dom_test.css("color","red");
        });
        /*默认惊喜是隐藏的，鼠标悬浮的时候显示*/
        $("#show_test2").hide();
        $("#show_test1").hover(function(){
          $("#show_test2").show();
        },function(){
          $("#show_test2").hide();
        });
      })
    </script>
    <style type="text/css">
      .div1_style{
        width: 200px;
        height: 200px;
        background: red;
      }
      .div2_style{
        width: 200px;
        height: 200px;
        background: green;
      }
      p{
        display: none;
      }
      #show_test1{
        width: 150px;
        height: 150px;
        border-radius: 50% 50%;
        background: red;
      }
      #show_test2{
        width: 100px;
        height: 100px;
        background: greenyellow;
      }
    </style>
  </head>
  <body>
    <div id="div1">
      div1
    </div>
    <div id="div2">
      div2
    </div>
    <button id="btn">按钮</button>
    <br/>
    <h1>什么是受益人？</h1>
    <p>
      <strong>解答：</strong>
      受益人是所有的人积分看电视剧什么的深白名单额等，等等的接口上多久爱好讲课的撒。的罕见的设计导航萨克和风刀霜剑开户费的手机号发动机书法家看电视
    </p>
    测试next方法
    <ul class="test_next">
      <li class="test_next_li1">第1个li</li>
      <li class="test_next_li2">第2个li</li>
      <li class="test_next_li3">第3个li</li>
    </ul>
    单击图片，在图片的外围显示边框：<br />
    <img src="img/img1.jpg" class="img1"/>
    DOM对象转换测试：<br />
    <span id="dom_test">DOM对象</span>
    测试show方法和hide方法
    <br />
    <div id="show_test1">
      悬浮上去显示惊喜
    </div>
    <div id="show_test2">
      惊喜！
    </div>
  </body>
</html>

初识jQuery的案例

热门文章

最新文章

相关课程

相关电子书