鼠标点击事件:

<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. Ubuntu下使用nvm

    写在前面:刚写着写着博客就跨年了,希望新的一年大家万事如意,一切向"前"看! 安装 wget -qO- https://raw.githubusercontent.com/crea ...

  2. [高并发]Java高并发编程系列开山篇--线程实现

    Java是最早开始有并发的语言之一,再过去传统多任务的模式下,人们发现很难解决一些更为复杂的问题,这个时候我们就有了并发. 引用 多线程比多任务更加有挑战.多线程是在同一个程序内部并行执行,因此会对相 ...

  3. C语言 · 矩形面积交

    问题描述 平面上有两个矩形,它们的边平行于直角坐标系的X轴或Y轴.对于每个矩形,我们给出它的一对相对顶点的坐标,请你编程算出两个矩形的交的面积. 输入格式 输入仅包含两行,每行描述一个矩形. 在每行中 ...

  4. HTML 事件(一) 事件的介绍

    本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...

  5. [APUE]标准IO库(下)

    一.标准IO的效率 对比以下四个程序的用户CPU.系统CPU与时钟时间对比 程序1:系统IO 程序2:标准IO getc版本 程序3:标准IO fgets版本 结果: [注:该表截取自APUE,上表中 ...

  6. iOS开发之Masonry框架源码深度解析

    Masonry是iOS在控件布局中经常使用的一个轻量级框架,Masonry让NSLayoutConstraint使用起来更为简洁.Masonry简化了NSLayoutConstraint的使用方式,让 ...

  7. spring注解源码分析--how does autowired works?

    1. 背景 注解可以减少代码的开发量,spring提供了丰富的注解功能.我们可能会被问到,spring的注解到底是什么触发的呢?今天以spring最常使用的一个注解autowired来跟踪代码,进行d ...

  8. SQLServer 版本之八大方法搞清 "我是谁"

    你正在使用 SQL Server 的哪个版本? 贴士:作为一个SQL Server数据库管理者或维护.支持人员,应该会经常问自己这样一个问题:我当前SQL Server版本号是?当前版本已经有的累计更 ...

  9. OpenLiveWriter代码插件

    1.OpenLiveWriter安装 Windows Live Writer在2012年就停止了更新,Open Live Writer(以下简称OLW)是由Windows Live WriterWri ...

  10. servlet 简介,待完善

    什么是Servlet?① Servlet就是JAVA 类② Servlet是一个继承HttpServlet类的类③ 这个在服务器端运行,用以处理客户端的请求 Servlet相关包的介绍--javax. ...