jquery添加光棒效果的各种方式以及简单动画复杂动画
一、基本过滤器
语法 | 描述 | 返回值 |
:first | 选取第一个元素 | 单个元素 |
:last | 选取最后一个元素 | 单个元素 |
:not(selector) | 选取去除所有与给定选择器匹配的元素 | 集合元素 |
:even | 选取索引是偶数的所有元素(index 从0开始) | 集合元素 |
:odd | 选取索引是奇数的所有元素(index 从0开始) | 单个元素 |
:eq(index) | 选取索引等于index的元素 | 集合元素 |
:gt | 选取索引大于index的元素 | 集合元素 |
:lt | 选取索引小于index的元素 | 集合元素 |
:header | 选取所有标题元素,如h1~h6 | 集合元素 |
:focus | 选取当前获取焦点的元素 | 集合元素 |
二、可见性过滤选择器
选择器 | 描述 | 返回值 |
:visible | 选取所有可见的元素 | 集合元素 |
:hidden | 选取所有隐藏的元素 | 集合元素 |
三、绑定事件与移除事件
为匹配的元素一次性绑定或移除一个或多个事件时,可以使用绑定事件方法bind()和移除事件方法unbind()
eg:实现光棒效果

//绑定事件 bind unbind $(function () {
$("li").bind("mouseover", function () {
$(this).css("background","pink"); }).bind("mouseout", function () {
$(this).css("background", ""); }); //移除事件
$("li").unbind("mouseover mouseout"); })

补充:也可使用on off、live die、delegate undelegate方案实现绑定 移除事件
四、jQuery中的动画
1、简单动画
① 控制元素显示与隐藏
show()、hide()
②改变元素透明度
fadeIn()、fadeOut()
③改变元素高度
slideUp()和slideDown()
eg:实现淡入淡出效果

<title></title>
<script src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function () {
$("#btnIn").click(function () {
$("img").slideDown("slow"); });
$("#btnOut").click(function () {
$("img").slideUp("slow"); }); }) </script>
</head>
<body>
<img src="img/images/iocns.gif" />
<input type="button" value="淡入" id="btnIn"/>
<input type="button" value="淡出" id="btnOut"/>
</body>

2、复杂动画<animate>

<title></title>
<style type="text/css">
div {
height:20px;
border:1px solid red;
} </style>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery-migrate-1.2.0.js"></script>
<script type="text/javascript"> $(function () {
$("[type=button]").click(function () { $("div").animate({
width: "70%",
height: "300%",
borderWidth: 10 }).animate({
fontSize:"50px" }, {queue:false,duration:5000}) }) }) </script>
</head>
<body>
<div>我是div</div>
<input type="button" value="样式"/>
</body>

jquery添加光棒效果的各种方式以及简单动画复杂动画的更多相关文章
- Jquery实现光棒效果
<script type="text/javascript"> $(function () { var $bac; $("#d1 tr").hove ...
- 使用javaScript和JQuery制作经典面试题:光棒效果
使用javaScript与jQuery添加CSS样式的区别和步骤 使用javaScript制作光棒效果 --首先是javaScript <script> $(function () { v ...
- asp.net操作GridView添删改查的两种方法 及 光棒效果
这部份小内容很想写下来了,因为是基础中的基础,但是近来用的比较少,又温习了一篇,发现有点陌生了,所以,还是写一下吧. 方法一:使用Gridview本身自带的事件处理,代码如下(注意:每次操作完都得重新 ...
- webform 光棒效果,删除操作弹出确定取消窗口
鼠标移入onmouseover和鼠标移出onmouseout,代码里没大写我这也就不大写了.那首先,我们得获取Class为tr_item里的所有东西,也就是项标签里的数据.然后呢,我们定义一个oldC ...
- HTML——JAVASCRIPT——光棒效果
光棒效果:建立一个表格,鼠标放到哪一行,哪一行的颜色就改变,鼠标离开那一行,那一行的颜色就恢复到原来的颜色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- HTML7常用的类型刮刮乐 光棒效果
常用的类型: 1.数学: Math.ceil():天花板数 Math.floor():地板数 Math.round():四舍五入取整数 Math.random():生成0-1之间的随机数 2.日期 ...
- jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画
地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...
- JavaScript--------------------jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){alert( ...
- 用js写出光棒效应的两种方法与jquery的两中方法
<script src="js/jQuery1.11.1.js" type="text/javascript"></script> &l ...
随机推荐
- js资源加载优化
互联网应用或者访问量大的应用,对js的加载优化是不可少的.下面记录几种优化方法 CDN + 浏览器缓存 CDN(content delivery network)内容分发网络, 最传统的优化方式.其 ...
- JavaScript 经典实例收集整理
跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(t ...
- 通过GP加载卫星云图-雷达图-降雨预报图
# ---------------------------------------------------------------------------# MeteorologicalImageLo ...
- IOS客户端Coding项目记录(六)
1:获取某一行的坐标 UITableViewCell *cell = [_myTableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow: ...
- 我的Android六章:Android中SQLite数据库操作
今天学习的内容是Android中的SQLite数据库操作,在讲解这个内容之前小编在前面有一篇博客也是讲解了SQLite数据库的操作,而那篇博客的讲解是讲述了 如何在Window中通过DOM来操作数据库 ...
- Real-Time Rendering读书辩疑琐记
At Page 707,5th paragrah.it write:If a normal vector is stored as three 32-bit floats,it has enough ...
- 创建android Notification
说明:根据项目选择的基础sdk,选择不同的创建Notification的方法1 在android sdk 3.0 之前直接通过 new Notification的方法直接创建通知对象 2 在andro ...
- ASP.NET features need application service database support
搭建的web程序出现如上图所示的错误 原因程序使用以下ASP.NET 特性 Membership (the SqlMembershipProvider class). Role management ...
- 正确的选择log级别
开发一个应用,日志的重要性不言而喻.然而有时会发现日志中会出现大量的垃圾日志.所谓垃圾日志,就是不需要知道的日志,或者这些日志对于应用查看.跟踪没有什么作用.也正是(但不仅仅是)出于这些问题的考量,常 ...
- Nginx状态码499
1.问题描述 140.207.202.187 - - [18/May/2016:10:30:58 +0800] "POST/v3/violations HTTP/1.1" 499 ...