过滤器、绑定事件、动画

 

一、基本过滤器

语法 描述 返回值
: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添加光棒效果的各种方式以及简单动画复杂动画的更多相关文章

  1. Jquery实现光棒效果

    <script type="text/javascript"> $(function () { var $bac; $("#d1 tr").hove ...

  2. 使用javaScript和JQuery制作经典面试题：光棒效果

    使用javaScript与jQuery添加CSS样式的区别和步骤 使用javaScript制作光棒效果 --首先是javaScript <script> $(function () { v ...

  3. asp.net操作GridView添删改查的两种方法 及 光棒效果

    这部份小内容很想写下来了,因为是基础中的基础,但是近来用的比较少,又温习了一篇,发现有点陌生了,所以,还是写一下吧. 方法一:使用Gridview本身自带的事件处理,代码如下(注意:每次操作完都得重新 ...

  4. webform 光棒效果，删除操作弹出确定取消窗口

    鼠标移入onmouseover和鼠标移出onmouseout,代码里没大写我这也就不大写了.那首先,我们得获取Class为tr_item里的所有东西,也就是项标签里的数据.然后呢,我们定义一个oldC ...

  5. HTML——JAVASCRIPT——光棒效果

    光棒效果:建立一个表格,鼠标放到哪一行,哪一行的颜色就改变,鼠标离开那一行,那一行的颜色就恢复到原来的颜色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  6. HTML7常用的类型刮刮乐 光棒效果

    常用的类型: 1.数学: Math.ceil():天花板数 Math.floor():地板数 Math.round():四舍五入取整数 Math.random():生成0-1之间的随机数   2.日期 ...

  7. jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...

  8. JavaScript--------------------jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){alert( ...

  9. 用js写出光棒效应的两种方法与jquery的两中方法

    <script src="js/jQuery1.11.1.js" type="text/javascript"></script> &l ...

随机推荐

  1. 使用 jQuery Mockjax 插件模拟 Ajax 请求

    在实际的开发过程中,前端后台协商好了统一的接口,就各自开始自己的任务了.这时候我有这么一个 Ajax 请求需要从后台获取数据: $.ajax({ url: '/products/' }).done(f ...

  2. Office 365 - SharePoint 2013 Online 之应用程序开发

    1.给站点添加完Napa后,在网站内容里点击Napa,如下图: 2.创建一个新的app,如下图: 3.可以在Napa里添加新的项目,如下图: 4.添加新的文件,可以添加web页面.样式表.脚本,如下图 ...

  3. Linux学习心得之 jnlp的文件和java应用程序安全设置

    作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 jnlp的文件和java应用程序安全设置 1.前言2. jnlp的文件打开3.java应用程 ...

  4. 基于XMPP的IOS聊天客户端程序

    简介:XMPP协议是一种基于Socket长连接.以XML格式进行基本信息交换.C/S S/S多种架构的聊天协议 XMPPServer 基于XMPP协议的服务端(例如eJabber.OpenFire) ...

  5. Android studio修改Logcat颜色

    Android studio默认的Logcat配色不利于阅读,我们可以修改自定义自己的颜色配置

  6. 【代码笔记】iOS-获得现在的时间

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...

  7. 【读书笔记】iOS网络-异步请求与运行循环

    异步请求需要运行循环.当数据传递到服务器或是被客户端接收时,运行循环用于实现事件与委托对象之间的通信.异步请求在发出时,会在当前线程的运行循环上操作,这个实现细节是很重要的,因为在GCD块中或者是通过 ...

  8. [译] MYSQL索引最佳实践

    近日整理文档时发现多年前的这个文档还是蛮实用的,然后在网络搜索了一下并没有相关的译文,所以决定把它翻译过来,如有不当的地方请多包涵和指正.原文地址:https://www.percona.com/fi ...

  9. 软件工程（C编码实践篇）课程总结

    课程内容来自网易云课堂中科大孟宁老师的软件工程(C编码实践篇)课程. 课程页面 我觉得本门课程的设置非常科学,每一周课程都是基于上一周课程的进一步抽象,使得学习者能够循序渐进,逐渐加深对软件工程的理解 ...

  10. 将dll程序集添加到缓存里

    1.点击开始---所有程序---...如下图 并以管理员身份运行. 2.输入命令行 gacutil.exe /i D:\Word\CRS_BPM_Sln\SourceCode\BPM\Referenc ...