鼠标点击事件:

<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. SQLSERVER走起 APP隆重推出

    SQLSERVER走起 APP隆重推出 为方便大家查看本微信公众以前推送的文章,QQ群里面的某位SQLSERVER重度爱好者开发了<SQLSERVER走起>的APP 以供大家一起交流 网页 ...

  2. setAttribute()

    ●节点分为不同的类型:元素节点.属性节点和文本节点等.   ●getElementById()方法将返回一个对象,该对象对应着文档里的一个特定的元素节点.   ●getElementsByTagNam ...

  3. javaScript的原型继承与多态性

    1.prototype 我们可以简单的把prototype看做是一个模版,新创建的自定义对象都是这个模版(prototype)的一个拷贝 (实际上不是拷贝而是链接,只不过这种链接是不可见,给人们的感觉 ...

  4. UWP开发之Mvvmlight实践九:基于MVVM的项目架构分享

    在前几章介绍了不少MVVM以及Mvvmlight实例,那实际企业开发中将以那种架构开发比较好?怎样分层开发才能节省成本? 本文特别分享实际企业项目开发中使用过的项目架构,欢迎参照使用!有不好的地方欢迎 ...

  5. PHP类和对象之重载

    PHP中的重载指的是动态的创建属性与方法,是通过魔术方法来实现的.属性的重载通过__set,__get,__isset,__unset来分别实现对不存在属性的赋值.读取.判断属性是否设置.销毁属性. ...

  6. Could not evaluate expression

    VS15 调试变量不能显示值,提示:Could not evaluate expression 解决办法: 选择"在调试时显示运行以单击编辑器中的按钮"重启VS即可. 可参考:Vi ...

  7. spring boot 实战:我们的第一款开源软件

    在信息爆炸时代,如何避免持续性信息过剩,使自己变得专注而不是被纷繁的信息所累?每天会看到各种各样的新闻,各种新潮的技术层出不穷,如何筛选出自己所关心的? 各位看官会想,我们是来看开源软件的,你给我扯什 ...

  8. Log4net - 规则简介

    参考页面: http://www.yuanjiaocheng.net/CSharp/csharprumenshili.html http://www.yuanjiaocheng.net/entity/ ...

  9. 使用po模式读取豆瓣读书最受关注的书籍,取出标题、评分、评论、题材 按评分从小到大排序并输出到txt文件中

    #coding=utf-8from time import sleepimport unittestfrom selenium import webdriverfrom selenium.webdri ...

  10. Java之多态(二)

    package test05;import test06.Car1;public class DuoTai_Test02 { /**多个对象,一个形态 * Tiger.Lion.Snake → Ani ...