码迷,mamicode.com
首页 > Web开发 > 详细

Jquery事件

时间:2017-01-04 00:18:13      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:type   点击   att   ceshi   box   ext   ++   log   cli   

<body>

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

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

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

</body>
<script type="text/javascript">

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

$(document).ready(function(e) {
    
    $("#btn").click(function(){
            alert("第二个按钮");
        })
        
    $(".btn").click(function(){
            //alert("事件加上了");
            alert($(this).val());
        })
    
    
    //点击给测试事件按钮挂一个事件
    $("#gua").click(function(){
            //bind方法用于挂事件
            $("#ceshi").bind("click",function(){
                    alert("挂上了事件");
                });
            
        })
        
    //点击给测试事件按钮移除点击事件
    $("#yichu").click(function(){
            $("#ceshi").unbind("click");
        })
    
});

</script>
点击事件
<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>

全选按钮:

<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");
        }
    }
}         //js 有bug
*/ $(
"#qx").click(function(){ //var xz = $(this)[0].checked; var xz = $(this).prop("checked"); $(".ck").prop("checked",xz); }) </script>

 

Jquery事件

标签:type   点击   att   ceshi   box   ext   ++   log   cli   

原文地址:http://www.cnblogs.com/1358-com/p/6246680.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!