JQuery事件

JQuery事件

 

JS添加点击事件

<input type="button" value="测试" onclick="test()" />

<script type="text/javascript">

function test()
{
    alert("aa");
}
</script>

 

JQuery添加点击事件

<input type="button" value="测试2" id="btn" />

<script type="text/javascript">

$(document).ready(function(e) {
    
    $("#btn").click(function(){
        alert("一个按钮");
        })
     });

</script>

 

给一个类添加点击事件

<input type="button" value="测试3" class="btn" />
<input type="button" value="测试4" class="btn" />
<input type="button" value="测试5" class="btn" />

<script type="text/javascript">
    
$(document).ready(function(e) {
     $(".btn").click(function(){
            alert($(this).val());    //显示当前元素的值
        })
    });
</script>

 

动态的给一个元素加事件

<input type="button" value="挂事件" id="gua" />
<input type="button" value="测试事件" id="ceshi" />
<input type="button" value="移除事件" id="yichu" />

<script type="text/javascript">
$(document).ready(function(e) {

//点击给测试事件按钮挂一个事件
    $("#gua").click(function(){
            //bind方法用于挂事件
            $("#ceshi").bind("click",function(){   //bind方法可以移除掉，click方法移除不掉
                    alert("挂上了事件");
                });
            
        })
        
//点击给测试事件按钮移除点击事件
    $("#yichu").click(function(){
            $("#ceshi").unbind("click");   //移除bind里的click方法
        })

}）；

</script>

 

例子（全选）

<body>
<br />
<div><input type="checkbox" id="qx" /> 全选</div>
<br />
<div>
<input type="checkbox" class="ck" /> 山东
<input type="checkbox" class="ck" /> 淄博
<input type="checkbox" class="ck" /> 张店
<input type="checkbox" class="ck" /> 淄川
<input type="checkbox" class="ck" /> 桓台

</div>
</body>
<script type="text/javascript">
function xuan()
{
    var a = document.getElementById("qx");
    var ck = document.getElementsByClassName("ck");
    
    for(var i=0;i<ck.length;i++)
    {
        if(a.checked)
        {
            ck[i].setAttribute("checked","checked");
        }
        else
        {
            ck[i].removeAttribute("checked");
        }
    }
}


$("#qx").click(function(){
        //var xz = $(this)[0].checked;
        var xz = $(this).prop("checked");
        $(".ck").prop("checked",xz);
    })
    

</script>
</html>

 

例子（变色）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
.aa{ width:200px; height:200px; float:left; margin:5px; background-color:#3F6}
</style>
</head>

<body>

<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>
<div class="aa">
</div>

<input type="button" value="测试" onclick="test()" />

</body>

<script type="text/javascript">

$(".aa").click(function(){
        //所有元素背景色变成原来的
        $(".aa").removeAttr("xz");
        $(".aa").css("background-color","#3F6");
        //找到点击了谁
        $(this).attr("xz","1");
        $(this).css("background-color","red");
    })

$(".aa").mousemove(function(){    
        //所有元素背景色变成原来的
        $(".aa").css("background-color","#3F6");
        //找到点击了谁
        $(this).css("background-color","yellow");
        $("[xz='1']").css("background-color","red");
    })



$(document).ready(function(e) {
    //事件要执行代码
    
});

function test()
{
    alert("aa");
}

</script>

</html>

 

posted @ 2018-03-18 23:28  桃花灬仙人  阅读(99)  评论(0)  编辑  收藏  举报