首页 > 代码库 > jquery简单事件举例

jquery简单事件举例

2024-09-21 07:18:30   218人阅读

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

一、全选事件：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src=http://www.mamicode.com/"../../../phpstudy/WWW/jquery-3.2.0.min.js"></script>
<title>无标题文档</title>
</head>

<body>
<h1>全选效果</h1>
<div><input type="checkbox" value=http://www.mamicode.com/"qx" id="qx" /> 全选</div>
<br />
<div>
<input type="checkbox" value=http://www.mamicode.com/"1" class="ck" /> 路飞
<input type="checkbox" value=http://www.mamicode.com/"1" class="ck" /> 索隆
<input type="checkbox" value=http://www.mamicode.com/"1" class="ck" /> 山治
<input type="checkbox" value=http://www.mamicode.com/"1" class="ck" /> 娜美
<input type="checkbox" value=http://www.mamicode.com/"1" class="ck" /> 乌索普
<input type="checkbox" value=http://www.mamicode.com/"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{
    width:50px;
    height:20px;
    float:left;
    margin:10px;    
}
</style>
<script src=http://www.mamicode.com/"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>

 

jquery简单事件举例


联系
我们