鼠标点击事件:

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

<input type="button" value="挂事件" id="gua" />
<input type="button" value="测试事件" id="ceshi" />
<input type="button" value="移除事件" id="yichu" />

点击事件找到点击元素:

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

$(".btn").click(function(){
			//alert("事件加上了");
			alert($(this).val());
		})

});

挂事件:

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

	//点击给测试事件按钮挂一个事件
	$("#gua").click(function(){
			//bind方法用于挂事件
			$("#ceshi").bind("click",function(){
					alert("挂上了事件");
				});

		})

	//点击给测试事件按钮移除点击事件
	$("#yichu").click(function(){
			$("#ceshi").unbind("click");
		})

});

  

Jquery的鼠标全选事件:

body代码

<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" /> 香港

  

js代码:

$("#qx").click(function(){
		//var xz = $(this)[0].checked;
		var xz = $(this).prop("checked");
		$(".ck").prop("checked",xz);
	})

  

鼠标点击背景色改变,其他背景色复原:

body:

<div class="aa"></div>*9

js代码:

$(".aa").click(function(){
		//所有元素背景色变成原来的
		$(".aa").css("background-color","#3F6");
		//找到点击了谁
		$(this).css("background-color","red");
	})

  

鼠标移上事件:

js:

$(".aa").mousemove(function(){
		//所有元素背景色变成原来的
		$(".aa").css("background-color","#3F6");
		//找到
		$(this).css("background-color","yellow");
	})

 

如果想要鼠标点击和移上事件同时有,而且不冲突:

$(".aa").click(function(){
		//所有元素背景色变成原来的
		$(".aa").removeAttr("xz");
		$(".aa").css("background-color","#3F6");
		//找到点击了谁
		$(this).attr("xz","1");
		$(this).css("background-color","red");
	})

$(".aa").mousemove(function(){
		//所有元素背景色变成原来的
		$(".aa").css("background-color","#3F6");
		//找到
		$(this).css("background-color","yellow");
		$("[xz='1']").css("background-color","red");
	})

  

 

Jquery(1)的更多相关文章

  1. 强大的JQuery(二)--动画效果

    上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图 ...

  2. 从零开始,DIY一个jQuery(2)

    在上篇文章我们简单实现了一个 jQuery 的基础结构,不过为了顺应潮流,这次咱把它改为模块化的写法,此举得以有效提升项目的可维护性,因此在后续也将以模块化形式进行持续开发. 模块化开发和编译需要用上 ...

  3. 从零开始,DIY一个jQuery(1)

    从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅途,在整个系列的实践中,我们会把 jQuery 的主要功能模块都了解和实现一遍. 这会是一段很长的历程,但也会很有意思 —— 作为前端领域的 ...

  4. 锋利的JQuery(五)

    jQuery与Ajax: load: load(url)   $("#resText").load("test.html")  加载所有元素 load(url ...

  5. 强大的JQuery(一)--基础篇

    JQuery是一个优秀的Javascript框架,是轻量级的js库,使用jQuery将极大的提高编写javascript代码的效率,,让写出来的代码更加优雅,更加健壮. 学好了jquery,我们相当于 ...

  6. Python开发【第十三篇】:jQuery(二)

    http://www.bubuko.com/infodetail-1438296.html 处理完毕需要整理贴进来 Python之路[第十三篇]jQuery案例-Form表单&插件及扩展   ...

  7. 从零开始学习jquery (二)

    前面我们了解到了如何获取使用jquery,下面我们主要看看jquery的一些语法.基本的语法 $(selector).action(). 美元符号定义 jQuery 选择符(selector)&quo ...

  8. JQuery(上)

    1.流行的JavaScript类库   --  框架.插件 )为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数 ...

  9. JQuery(下)

    26.jQuery 中的 DOM 操作 )DOM(Document Object Model—文档对象模型):一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件 ) ...

  10. 【学习笔记】锋利的jQuery(四)AJAX

    一.load()方法 /* *如果没有参数传递,采用GET方式传递 *如果有参数,则自动转换成POST方式传递 *无论Ajax是否请求成功,请求完成后回调函数触发 */ load("test ...

随机推荐

  1. NodeJs之child_process

    一.child_process child_process是NodeJs的重要模块.帮助我们创建多进程任务,更好的利用了计算机的多核性能. 当然也支持线程间的通信. 二.child_process的几 ...

  2. RecyclerView使用大全

    RecylerView介绍 RecylerView是support-v7包中的新组件,是一个强大的滑动组件,与经典的ListView相比,同样拥有item回收复用的功能,这一点从它的名字recyler ...

  3. ES5对Array增强的9个API

    为了更方便的对Array进行操作,ES5规范在Array的原型上新增了9个方法,分别是forEach.filter.map.reduce.reduceRight.some.every.indexOf ...

  4. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  5. 通过 floating IP 访问 VIP - 每天5分钟玩转 OpenStack(126)

    前面我们是直接用 curl 测试 VIP,在更为真实的场景中通常会使用 floating IP 访问 VIP. 下面我们给 VIP 关联一个 floating IP,再进行测试. 访问 Project ...

  6. Win.ini和注册表的读取写入

    最近在做打包的工作,应用程序的配置信息可以放在注册表文件中,但是在以前的16位操作系统下,配置信息放在Win.ini文件中.下面介绍一下Win.ini文件的读写方法和注册表的编程. 先介绍下Win.i ...

  7. Redis的简单动态字符串实现

    Redis 没有直接使用 C 语言传统的字符串表示(以空字符结尾的字符数组,以下简称 C 字符串), 而是自己构建了一种名为简单动态字符串(simple dynamic string,sds)的抽象类 ...

  8. 动手做第一个Chrome插件

    Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...

  9. 前端自动化构建工具gulp记录

    一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...

  10. Node.js npm 详解

    一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...