Jquery事件

在JS里加事件

<input type="button" value="测试" onclick="test()"/>跟一个函数名

<body>

<input type="button" value="测试" onclick="test()"/>

</body>

<script type="text/javascript">

function test()

{

  alert("aa");

}

</script>

用Jquery做点击事件

<script src="jquery-1.11.2.min.js"></script>

</head>

<body>

<input type="button" value="测试" onclick="test()" />

<input type="button" value="测试2" id="btn" />

</body>

<script type="text/javascript">

/*function test()

{

  alert("aa");

}*/

$(document).ready(function(e){

    //先找元素   加了个点击事件Jquery里面就是click

    //没有函数名的方法叫匿名函数

    $("#btn").click(function(){

          alert("第二个按钮");

        }) 

});

</script>

JS里面是onclick

但在Jquery里就是click

funcion()没有函数名的方法叫做匿名函数

以上就是Jquery里加事件的一种方式

不是在元素里面加了，而是根据选择器找到这个元素然后点click方法来加一个事件

这是加事件的方式

如果想给页面里面多个元素加事件然后知道点击了谁

<script src="jquery-1.11.2.min.js"></script>

</head>

<body>

<input type="button" value="测试" onclick="test()" />

<input type="button" value="测试2" id="btn" />

<input type="button" value="测试3" class="btn" />

<input type="button" value="测试4" class="btn" />

<input type="button" value="测试5" class="btn" />

</body>

<script type="text/javascript">

$(document).ready(function(e){

    //根据class找，找到3个按钮,加一个点击事件

    $(".btn").click(function(){

            //要知道点击了谁，选取当前点击的这个元素

            //原先的this关键字写在onclick里面是传递本身

            //这的this写在时间里面 代表了谁过来触发了点击事件，this就代表谁

            alert($(this).val());

        })

});

</script>

原先的this关键字写在onclick里面是传递本身

这的this写在时间里面 代表了谁过来触发了点击事件，this就代表谁

Jquery里面当然还支持挂事件动态的挂事件或是移除事件

用挂事件按钮和移除事件的按钮来动态的控制事件

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

<input type="button" value="测试事件" id="ceshi" />

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

</body>

<script type="text/javascript">

$(document).ready(function(e){

    //动态的挂事件  点击给测试事件按钮挂一个事件

    $("#gua").click(function(){

        //bind方法用于挂事件，是为了以后能移除，用click以后移除不了

        $("#ceshi").bind("click",function(){

              alert("挂上了事件");

            });  //bind 是绑定的一个方法，这个方法里面需要两个参数:1.事件名称 2.事件要执行什么代码,用个匿名函数

        })

        //点击给测试事件按钮移除点击事件

        $("#yichu").click(function(){

            $("#ceshi").unbind("click");//unbind叫做解绑

            })

});

</script>

bind 用于挂事件是一种绑定的方法

unbind是解绑

练习：

1.全选练习

<body>

<br />

<div><input type="checkbox" id="qx" />全选</div>

<br />

<input type="checkbox" class="ck" />济南

<input type="checkbox" class="ck" />淄博

<input type="checkbox" class="ck" />青岛

<input type="checkbox" class="ck" />泰安

<input type="checkbox" class="ck" />烟台

</body>

先做一个全选按钮，再一个列表框

如果JS是扔在页面最下方可以不用写

$(doucment).ready(function(e){});

接下来用Jquery来写一下全选

<script src="jquery-1.11.2.min.js"></script>

</head>

<body>

<br />

<div><input type="checkbox" id="qx" />全选</div>

<br />

<input type="checkbox" class="ck" />济南

<input type="checkbox" class="ck" />淄博

<input type="checkbox" class="ck" />青岛

<input type="checkbox" class="ck" />泰安

<input type="checkbox" class="ck" />烟台

</body>

<script type="text/javascript">

//js做法，比较繁琐也会有bug

function xuan()

{

    var a = document.getElementById("qx");

    var ck = document.getElementsByClassName("ck");

    for(var i=;i<ck.length;i++)

    {

       if(a.checked)

       {

          ck[i].setAttribute("checked","checked");

       }

       else

       {

         ck[i].removeAttribute("checked");

       }

    }

}

//用Jquery做

    $("#qx").click(function(){

        var xz = $(this).prop("checked");

        alert(xz);

        })

</script>

这里用prop 不用attr 凡是涉及到checkbox radio button涉及到复选框，单选按钮的时候，不用attr是有Bug的

//用Jquery做

    $("#qx").click(function(){

        var xz = $(this).prop("checked");//布尔型数据

        $(".ck").prop("checked",xz);  //改个属性

        })

这样就实现全选

2.页面很多DIV方块，点击哪个换哪个颜色

<script src="jquery-1.11.2.min.js"></script>

<style type="text/css">

.aa{ width:200px; height:200px; float:left; margin:5px; background-color:#F03}

</style>

</head>

<body>

<br />

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

</body>

鼠标点击哪个方块哪个变色，但是只有一个是选中的，不光是点击后换色，也要让其他的还原

</body>

<script type="text/javascript">

$(".aa").click(function(){

       //所有元素背景色变成回原来的

       $(".aa").css("background-color","#F03");

      //通过this找到点击了谁

      $(this).css("background-color","#FC0");

     })

</script>

如果在继续加效果，鼠标移上的效果，鼠标的效果把点击的效果覆盖，该如继续？

</body>

<script type="text/javascript">

$(".aa").click(function(){

       //所有元素背景色变成回原来的

       $(".aa").removeAttr("xz");

       $(".aa").css("background-color","#F03");

      //通过this找到点击了谁

      $(this).attr("xz","");//在这项选中之前要把其他的清掉

      $(this).css("background-color","#FC0");

     })

$(".aa").mousemove(function(){

     //所有元素背景色变成回原来的

       $(".aa").css("background-color","#F03");

      //鼠标放上

      $(this).css("background-color","#0FF");

      //属性筛选，找到属性下的该元素改下背景色

       $("[xz='1']").css("background-color","#FC0");

    })

</script>

这样就实现了在页面很多DIV方块，点击哪个换哪个颜色

Jquery事件的更多相关文章

JQuery选择器JQuery 事件
JQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...
HTML Select 标签选择后触发jQuery事件代码实例
页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...
jquery事件核心源码分析
我们从绑定事件开始,一步步往下看: 以jquery.1.8.3为例,平时通过jquery绑定事件最常用的是on方法,大概分为下面3种类型: $(target).on('click',function( ...
解密jQuery事件核心 - 委托设计（二）
第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中对于没有特殊事件特有监听方法和普通事件都用ad ...
解密jQuery事件核心 - 模拟事件（四）
前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...
深入学习jQuery事件对象
× 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值前面的话在触发DOM上的某个事件时,会产生一个事件对象event, ...
深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
jquery 事件冒泡的介绍以及如何阻止事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...
jQuery源代码学习之九—jQuery事件模块
jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...
jQuery事件总结
blur() 触发或绑定blur事件.$("input").blur(function(){ $("input").css("background-c ...

随机推荐

XSS
XSS的含义 XSS(Cross Site Scripting)即跨站脚本.跨站的主要内容是在脚本上. 跨站脚本跨站脚本的跨,体现了浏览器的特性,可以跨域.所以也就给远程代码或者第三方域上的代码提供 ...
expect用法
1. ［#!/usr/bin/expect］这一行告诉操作系统脚本里的代码使用那一个shell来执行.这里的expect其实和linux下的bash.windows下的cmd是一类东西. 注意: ...
Jexus 5.8.2 正式发布为Asp.Net Core进入生产环境提供平台支持
Jexus 是一款运行于 Linux 平台,以支持 ASP.NET.PHP 为特色的集高安全性和高性能为一体的 WEB 服务器和反向代理服务器.最新版 5.8.2 已经发布,有如下更新: 1,现在大 ...
.NET Core系列： 2 、project.json 这葫芦里卖的什么药
.NET Core系列 : 1..NET Core 环境搭建和命令行CLI入门介绍了.NET Core环境,本文介绍.NET Core中最重要的一个配置文件project.json的相关内容.我们可 ...
CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
移动端1px边框
问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（73）-微信公众平台开发-消息管理
系列目录前言回顾上一节,我们熟悉的了解了消息的请求和响应,这一节我们来建立数据库的表,表的设计蛮复杂你也可以按自己所分析的情形结构来建表必须非常熟悉表的结果才能运用这张表,这表表的情形涵盖比较 ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（65）-MVC WebApi 用户验证 (1)
系列目录前言: WebAPI主要开放数据给手机APP,其他需要得知数据的系统,或者软件应用,所以移动端与系统的数据源往往是相通的. Web 用户的身份验证,及页面操作权限验证是B/S系统的基础功能, ...
9、委托、事件、Lambda
开始关于委托,肯定是要有问题的. 第一个问题,委托用来干什么? 看.net中的表述:在.net平台下,委托类型用来定义和相应应用程序中的回调.(回调?处理内存中两个实体双向通信的一种技术.) 第 ...
APEX:对object中数据进行简单处理？
在Salesforce中,常常要对各种数据进行处理,已满足业务逻辑.本篇文章会介绍如何实现从object获取数据,然后将取得的数据进行一系列简单处理. 第一步:SongName__c 是一个新建的ob ...

Jquery事件

Jquery事件的更多相关文章

随机推荐

热门专题