Jquery(1)
鼠标点击事件:
<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)的更多相关文章
- 强大的JQuery(二)--动画效果
上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图 ...
- 从零开始,DIY一个jQuery(2)
在上篇文章我们简单实现了一个 jQuery 的基础结构,不过为了顺应潮流,这次咱把它改为模块化的写法,此举得以有效提升项目的可维护性,因此在后续也将以模块化形式进行持续开发. 模块化开发和编译需要用上 ...
- 从零开始,DIY一个jQuery(1)
从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅途,在整个系列的实践中,我们会把 jQuery 的主要功能模块都了解和实现一遍. 这会是一段很长的历程,但也会很有意思 —— 作为前端领域的 ...
- 锋利的JQuery(五)
jQuery与Ajax: load: load(url) $("#resText").load("test.html") 加载所有元素 load(url ...
- 强大的JQuery(一)--基础篇
JQuery是一个优秀的Javascript框架,是轻量级的js库,使用jQuery将极大的提高编写javascript代码的效率,,让写出来的代码更加优雅,更加健壮. 学好了jquery,我们相当于 ...
- Python开发【第十三篇】:jQuery(二)
http://www.bubuko.com/infodetail-1438296.html 处理完毕需要整理贴进来 Python之路[第十三篇]jQuery案例-Form表单&插件及扩展 ...
- 从零开始学习jquery (二)
前面我们了解到了如何获取使用jquery,下面我们主要看看jquery的一些语法.基本的语法 $(selector).action(). 美元符号定义 jQuery 选择符(selector)&quo ...
- JQuery(上)
1.流行的JavaScript类库 -- 框架.插件 )为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数 ...
- JQuery(下)
26.jQuery 中的 DOM 操作 )DOM(Document Object Model—文档对象模型):一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件 ) ...
- 【学习笔记】锋利的jQuery(四)AJAX
一.load()方法 /* *如果没有参数传递,采用GET方式传递 *如果有参数,则自动转换成POST方式传递 *无论Ajax是否请求成功,请求完成后回调函数触发 */ load("test ...
随机推荐
- 从直播编程到直播教育:LiveEdu.tv开启多元化的在线学习直播时代
2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...
- Angular2学习笔记(1)
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
- C# 在腾讯的发展
本文首发我的微信公众号"dotnet跨平台", 内容得到大家热烈的欢迎,全文重新发布在博客,欢迎转载,请注明出处. .NET 主要的开发语言是 C# , .NET 平台泛指遵循EC ...
- ASP.NET路由模型解析
大家好,我又来吹牛逼了 ~-_-~ 转载请注明出处:来自吹牛逼之<ASP.NET路由模型解析> 背景:很多人知道Asp.Net中路由怎么用的,却不知道路由模型内部的运行原理,今天我就给大家 ...
- Web性能优化:图片优化
程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到 ...
- 使用JSONObject.fromObject的时候出现“There is a cycle in the hierarchy”异常 的解决办法
在使用JSONObject.fromObject的时候,出现“There is a cycle in the hierarchy”异常. 意思是出现了死循环,也就是Model之间有循环包含关系: ...
- 07.LoT.UI 前后台通用框架分解系列之——强大的文本编辑器
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
- 重撸JS_1
1.声明 用 var 或 let 声明的未赋初值的变量,值会被设定为undefined(译注:即未定义值,本身也是一个值) 试图访问一个未初始化的变量会导致一个 ReferenceError 异常被抛 ...
- 模拟AngularJS之依赖注入
一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...
- 8、Struts2 运行流程分析
1.流程分析: 请求发送给 StrutsPrepareAndExecuteFilter StrutsPrepareAndExecuteFilter 询问 ActionMapper: 该请求是否是一个 ...