鼠标点击事件:

<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. 从直播编程到直播教育:LiveEdu.tv开启多元化的在线学习直播时代

    2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...

  2. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  3. C# 在腾讯的发展

    本文首发我的微信公众号"dotnet跨平台", 内容得到大家热烈的欢迎,全文重新发布在博客,欢迎转载,请注明出处. .NET 主要的开发语言是 C# , .NET 平台泛指遵循EC ...

  4. ASP.NET路由模型解析

    大家好,我又来吹牛逼了 ~-_-~ 转载请注明出处:来自吹牛逼之<ASP.NET路由模型解析> 背景:很多人知道Asp.Net中路由怎么用的,却不知道路由模型内部的运行原理,今天我就给大家 ...

  5. Web性能优化:图片优化

    程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到 ...

  6. 使用JSONObject.fromObject的时候出现“There is a cycle in the hierarchy”异常 的解决办法

    在使用JSONObject.fromObject的时候,出现“There is a cycle in the hierarchy”异常.   意思是出现了死循环,也就是Model之间有循环包含关系: ...

  7. 07.LoT.UI 前后台通用框架分解系列之——强大的文本编辑器

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  8. 重撸JS_1

    1.声明 用 var 或 let 声明的未赋初值的变量,值会被设定为undefined(译注:即未定义值,本身也是一个值) 试图访问一个未初始化的变量会导致一个 ReferenceError 异常被抛 ...

  9. 模拟AngularJS之依赖注入

    一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...

  10. 8、Struts2 运行流程分析

    1.流程分析: 请求发送给 StrutsPrepareAndExecuteFilter StrutsPrepareAndExecuteFilter 询问 ActionMapper: 该请求是否是一个 ...