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

Jquery事件

时间:2017-05-12 09:35:41      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:bin   value   sed   move   匿名函数   jquer   2.0   body   例子   

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

 

Jquery事件

标签:bin   value   sed   move   匿名函数   jquer   2.0   body   例子   

原文地址:http://www.cnblogs.com/zhaohui123/p/6843863.html

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