初识jQuery的案例

简介: 初识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>
相关文章
|
6月前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
|
JavaScript 前端开发
Javascript知识【jQuery属性操作&案例:重写复选框操作】
Javascript知识【jQuery属性操作&案例:重写复选框操作】
|
5月前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
35 0
|
6月前
|
JavaScript 前端开发
JavaScript-jQuery的使用 + JS的案例
JavaScript-jQuery的使用 + JS的案例
48 0
|
6月前
|
XML 前端开发 JavaScript
jQuery与javascript的区别+案例 锋芒毕露
jQuery与javascript的区别+案例 锋芒毕露
|
6月前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
|
6月前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
|
6月前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
|
6月前
|
JavaScript
jquery选择器案例分享
jquery选择器案例分享
|
6月前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
54 0