zoukankan      html  css  js  c++  java
  • jquery简单事件举例

    jquery事件相对于js来说要简单一些,尤其是代码的数量明显更简略,下面是jquery事件的两个例子,一个是全选事件,一个是导航栏的鼠标移上移除事件:

    一、全选事件:

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../../../phpstudy/WWW/jquery-3.2.0.min.js"></script>
    <title>无标题文档</title>
    </head>
    
    <body>
    <h1>全选效果</h1>
    <div><input type="checkbox" value="qx" id="qx" /> 全选</div>
    <br />
    <div>
    <input type="checkbox" value="1" class="ck" /> 路飞
    <input type="checkbox" value="1" class="ck" /> 索隆
    <input type="checkbox" value="1" class="ck" /> 山治
    <input type="checkbox" value="1" class="ck" /> 娜美
    <input type="checkbox" value="1" class="ck" /> 乌索普
    <input type="checkbox" value="1" class="ck" /> 弗兰奇
    </div>
    </body>
    <script type="text/javascript">
    
    $("#qx").click(function(){
            
            //找到全选按钮的选中状态
            //var xz = $(this)[0].checked;
            var xz = $(this).prop("checked");
            
            //改变所有的checkbox选中状态
            $(".ck").prop("checked",xz);        
        })
    
    </script>
    </html>

    二、导航栏的鼠标移上移除事件

    <style>
    .a{
        50px;
        height:20px;
        float:left;
        margin:10px;    
    }
    </style>
    <script src="jquery-3.2.0.min.js"></script>
    </head>
    
    <body>
    <div class="a">首页</div>
    <div class="a">史记</div>
    <div class="a">汉书</div>
    <div class="a">后汉书</div>
    <div class="a">三国志</div>
    
    
    
    </body>
    <script>
    $(".a").mouseover(function(){
        $(this).css("background-color","#666")//点击后变为灰色
    })
    $(".a").mouseout(function(){
        $(this).css("background-color","#FFF")//移除后变为白色
    })    
    </script>
    </html>
  • 相关阅读:
    Openlayers2中vector扩展FeatureLayer
    点图层叠加与事件响应
    geoserver服务wfs之GetFeature
    Echart在Openlayers的应用-航班的炫光特效
    Echart在Openlayers的应用-热力图
    Echart在Openlayers的应用
    WMS图例展示
    Java新手锻炼
    Java动手又动脑
    java递归问题小程序
  • 原文地址:https://www.cnblogs.com/mengshenshenchu/p/6842398.html
Copyright © 2011-2022 走看看