Jquery事件

時間 2019-11-08

標籤 jquery 事件欄目 JQuery 简体版

原文原文鏈接

<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>

全選按鈕：javascript

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。