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 ...
随机推荐
- 事务日志已满,原因为“ACTIVE_TRANSACTION”
汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 异常处理汇总-数据库系列 http://www.cnblogs.com/dunitia ...
- SQL Server 无法连接到服务器。SQL Server 复制需要有实际的服务器名称才能连接到服务器。请指定实际的服务器名称。
异常处理汇总-数据库系列 http://www.cnblogs.com/dunitian/p/4522990.html SQL性能优化汇总篇:http://www.cnblogs.com/dunit ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(64)-补充WebApi与Unity注入-配置文件
系列目录 上一篇演示了WebApi利用Unity注入 很多人问我如何用配置文件来配置注入,本节演示如何利用配置文件来注入,道理是一样的,跳转到上一节下载源码一起来动手! 1.打开源码定位到文件Depe ...
- 算法与数据结构(十六) 快速排序(Swift 3.0版)
上篇博客我们主要聊了比较高效的归并排序算法,本篇博客我们就来介绍另一种高效的排序算法:快速排序.快速排序的思想与归并排序类似,都是采用分而治之的方式进行排序的.快速排序的思想主要是取出无序序列中第一个 ...
- ASP.NET Core 中文文档 第四章 MVC(4.5)测试控制器逻辑
原文: Testing Controller Logic 作者: Steve Smith 翻译: 姚阿勇(Dr.Yao) 校对: 高嵩(Jack) ASP.NET MVC 应用程序的控制器应当小巧并专 ...
- css常用hack
原文地址:css常用hack 突然想起今天早上在CNZZ看到的统计数据,使用IE6.7的用户比例还真多,看到之后我的心都碎了.微软都放弃了为毛还有这么多人不死心? 所以说,IE下的兼容还是得做的. – ...
- UWP简单示例(三):快速开发2D游戏引擎
准备 IDE:VisualStudio 2015 Language:VB.NET/C# 图形API:Win2D MSDN教程:UWP游戏开发 游戏开发涉及哪些技术? 游戏开发是一门复杂的艺术,编码方面 ...
- animate.css(第三方动画使用方法)
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...
- maven 快照
大型应用软件一般由多个模块组成,一般它是多个团队开发同一个应用程序的不同模块,这是比较常见的场景.例如,一个团队正在对应用程序的应用程序,用户界面项目(app-ui.jar:1.0) 的前端进行开发, ...
- SQL-日期函数
GETDATE() :取得当前日期时间 DATEADD (datepart , number, date ),计算增加以后的日期.参数date为待计算的日期:参数number为增量:参数datepar ...