JQuery的基础学习

1.挂事件：

运用JQuery，当点击挂事件时给div加上一个点击事件，当点击移除事件按钮时则取消掉这个div上的点击事件。

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

</head>

<body>

<div id="aa"></div>

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


</body>

<script type="text/javascript">

$("#aa").css("width","100px");
$("#aa").css("height","100px");
$("#aa").css("background-color","red");


$("#gua").click(function(){
    $("#aa").bind("click",function(){
        alert("div被点击了");
    })
})


$("#yichu").click(function(){
    $("#aa").unbind("click")
})




</script>

</html>

2.运用JQuery，做全选，进行批量操作：

<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;　　　　　　　//这是用js方法写的。
        var xz = $(this).prop("checked");        //单独用jquery写就用这种方式
        
        //改变所有的checkbox选中状态
        $(".ck").prop("checked",xz);        
    })

</script>
</html>

3.当点击某一个div的时候所有div都变成红色，点的那个div变成绿色。

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

</head>

<style>
    .d{
        width: 150px;
        height: 150px;
        background-color: red;
        margin: 5px;
        float: left;
    }
</style>


<body>

<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>



</body>
<script type="text/javascript">
    
    //1.当点击某一个div的时候所有div都变成红色
    //2.点的那个div变成绿色
    
    $(".d").click(function(){
        $(".d").css("background-color","red");
        
        $(this).css("background-color","green");
    })
</script>
</html>

秒客网

JQuery的基础学习

相关文章