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 ...
随机推荐
- tLinux 2.2下安装Mono 4.8
Tlinux2.2发行版基于CentOS 7.2.1511研发而成,内核版本与Tlinux2.0发行版保持完全一致,更加稳定,并保持对Tlinux2.0的完全兼容.Mono 4版本要求CentOS 7 ...
- 首个threejs项目-前端填坑指南
第一次使用threejs到实际项目中,开始的时候心情有点小激动,毕竟是第一次嘛,然而做着做着就感受到这玩意水好深,满满的都是坑,填都填不过来.经过老板20天惨无人道的摧残,终于小有成就. 因为第一次搞 ...
- so 问题来了,你现在值多少钱?
年底了一大帮人都写着年底总结,总结一年做过的事.错过的事和做错的事.增长了多少本事,找没找到女朋友……来年做好升职加薪,要么做跳槽的准备,程序猿又开始浮躁了……. so 问题来了,你现在值多少钱? 这 ...
- Extjs 让combobox写起来更简单
也已经写了很久时间的extjs ,每次都用到很多的combobox,配置很多东西觉得实在是太麻烦,所以根据常用到的情况写了一个简便的combobox,再次记录下来,以免放在某个地方忘记了找不到了. 定 ...
- Sass之坑Compass编译报错
前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上 ...
- JavaScript学习笔记(二)——闭包、IIFE、apply、函数与对象
一.闭包(Closure) 1.1.闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9:方法:找到所有的div, ...
- SQL-类型转换函数
CAST ( expression AS data_type)CONVERT ( data_type, expression,[style]) Select '您的班级编号'+ 1 错误这里+是数学 ...
- SqlServer简单数据分页
手边开发的后端项目一直以来都用的.NET MVC框架,访问数据库使用其自带的EF CodeFirst模式,写存储过程的能力都快退化了 闲来无事,自己写了条分页存储过程,网上类似的文章多的是,这里只列了 ...
- TFS 生成配置
生成
- EMD分析 Matlab 精华总结 附开源工具箱(全)
前言: 本贴写于2016年12与15日,UK.最近在学习EMD(Empirical Mode Decomposition)和HHT(Hilbert-Huang Transform)多分辨信号处理,FQ ...