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事件的主要内容,如果未能解决你的问题,请参考以下文章

原生js如何绑定a连接点击事件?

jQuery应用 代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段(转)