Jquery事件
Posted 喜气洋洋得意
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery事件相关的知识,希望对你有一定的参考价值。
一、Jquery加事件
Jquery第一个事件:页面加载完成事件
没有方法名的函数叫逆名函数;
把方法交给函数的方式叫作委托或代理;
//页面加载完成
$(document).ready();
//把方法作为参数给它
$(document).ready(function(e) { //e代表事件数据,可以写可以不写
});
例子:给三个div加事件
<script src="jquery-1.11.2.min.js"></script> </head> <body> <div class="aa" bs="1" style="width:100px; height:100px; background-color:red">11111</div> <div class="aa" bs="2" style="width:100px; height:100px; background-color:blue">22222</div> <div class="aa" bs="3" style="width:100px; height:100px; background-color:purple">33333</div> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { //1.给三个div加点击事件 $(".aa").click(function(e) { alert("hello world");
//2.取三个div里的值
$(".aa").click(function(e) { alert($(this).text());
//3.取三个div里属性值
$(".aa").click(function(e) {
alert($(this).attr("bs"));
// 4.给三个div统一加改变属性事件
$(".aa").click(function(e) {
$(".aa").css("background-color","red");
$(this).css("background-color","green");
});
}); }); </script>
二、Jquery挂事件
<script src="jquery-1.11.2.min.js"></script>
</head><body>
<div id="a1" style="width:100px; height:100px; "></div>
<input type="text" id="p1" />
<input type="button" id="b1" value="挂事件" />
<input type="button" id="b2" value="移除事件" />
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {
//给三个div加点击事件
$("#b1").click(function(){
$("#a1").bind("click",function(){
alert("我是挂上的事件");
});
});
$("#b2").click(function(){
$("#a1").unbind("click");
});
});
</script>
以上是关于Jquery事件的主要内容,如果未能解决你的问题,请参考以下文章
Visual Studio 2012-2019的130多个jQuery代码片段。
markdown 在WordPress中使用jQuery代码片段