Jquery事件

一、jquery常用的事件

click(),dbclick()    

focus(),blur()    

change()    

keydown(),keypress(),keyup()  

mousedown(),mouseup()    mouseenter(),mouseleave()  mouseover(),mouseout()  mousemove()

二、jquery挂事件

$（“p”）.bind("事件名称”，要执行的匿名函数)

$（“p”）.unbind("事件名称”)

三、jquery实现全选功能(重点是属性用.prop()，不用.attr())

<script src="jquery-3.2.0.min.js"></script>
<title>无标题文档</title>
</head>

<body>
</body>
<script type="text/javascript">
var arr = new Array(2,3,4);

//JSON
var a = {"one":"111",
         "two":"222",
         "three":arr,
         "four":{"hello":"你好"}
         };//元素名：值
//alert(a["one"]);//方法一取值
//alert(a.four.hello);//方法二取值

//遍历JSON数据
for(var k in a)
{
    alert(a[k]);
}

</script>
</html>

例子1

<script src="jquery-3.2.0.min.js"></script>
<title>无标题文档</title>
</head>

<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;
        var xz = $(this).prop("checked");
        
        //改变所有的checkbox选中状态，用prop代替attr，解决了之前用js写出现的bug,但是在源代码中查不到
        $(".ck").prop("checked",xz);        
    })

</script>
</html>

例子2

<script src="jquery-3.2.0.min.js"></script>
<title>无标题文档</title>
<style type="text/css">
.d{ width:150px; height:150px; margin:5px; background-color:red; float:left}
</style>
</head>

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

$(".d").mouseover(function(){
        //让所有的DIV变成红色
        $(".d").css("background-color","red");
        //让选中的变为绿色
        $(this).css("background-color","blue");
    })
    
$(".d").mouseout(function(){
        //让所有的DIV变成红色
        $(this).css("background-color","red");
    })

</script>
</html>

 

posted @ 2017-05-12 08:51  ChrissZhao  阅读(178)  评论(0)  编辑  收藏  举报