jQuery

是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

特点：

具有独特的链式语法和短小清晰的多功能接口；

具有高效灵活的css选择器，并且可对CSS选择器进行扩展；

拥有便捷的插件扩展机制和丰富的插件。

兼容各种主流浏览器，

选择器       $

id           -- $( " #div1 ")

class      -- $( " . div2 " )         选择所有的 class 定位

首个        --$( " .div2:first ")  

尾个        --$( " .div2:last ")

等于        --$( " .div2:eq(2)" )                   选第三个class=div2 的元素

--$( " .div2 ").eq(2)                   选第三个class=div2 的元素

大于        --$( " .div2:gt(0)")                      选索引是 0 后面的class=div2 的元素

小于        --$( " .div2:lt(4)")                       选索引是 4 前面的class=div2 的元素

排除        --$( " .div2:not(.div2:eq(3))")    选除索引是 3 的所有class=div2 的元素

奇数        --$( " .div2:odd")                         选所有奇数的class=div2 的元素

偶数        --$( " .div2:even")                        选所有偶数的class=div2 的元素

属性名        --$( " .div2[id]")                        选有 id 属性的class=div2 的元素

属性名、值   --$( " .div2:[id=d1]")                选有 id 属性 且 id="d1" 的class=div2 的元素

文字           --$( " .div2:contains('11')")       选内容有 11 字符的class=div2 的元素

子元素        --$( " .div2:has( '#div3' )")        选包含 div3  的class=div2 的元素

动画

 show(),hide() 

--隐藏、显示

 slideDown(),slideUp() 

-- 上、下（卷帘门效果）

 fadeIn(),fadeOut() 

-- 淡入淡出

-- 改变的是 opacity 这个属性

 animate({left:"300px",top:"300px"},3000,function(){回调函数}) 

-- 滑动、渐变

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="js/jquery-1.7.2.min.js"></script>

    <title></title>

    <style type="text/css">

        .div1 {

            position: relative;

            width: 100px;

            height: 50px;

            background-color: red;

            float: left;

            margin-left: 20px;

        }

        .div2 {

            position: absolute;

            width: %;

            height: 0px;

            top: 50px;

            background-color: green;

        }

    </style>

</head>

<body>

    <div class="div1">

        <div class="div2"></div>

    </div>

    <div class="div1">

        <div class="div2"></div>

    </div>

    <div class="div1">

        <div class="div2"></div>

    </div>

    <div class="div1">

        <div class="div2"></div>

    </div>

    <div class="div1">

        <div class="div2"></div>

    </div>

</body>

</html>

<script type="text/javascript">

    $(".div1").mouseover(function () {

        var aaa = $(this).children(".div2:eq(0)");

        aaa.stop().animate({ height: "300px" }, , function () {

            aaa.css("background-color", "blue");    //回调函数，动画执行完后执行 背景色变为绿色

        });

    });

    $(".div1").mouseout(function () {

        var aaa = $(this).children(".div2:eq(0)");     //stop() 停止之前所有的动画--消除动画积累

        aaa.stop().animate({ height: "0px" }, , function () {

            aaa.css("background-color", "green");

        });

    });

</script>

下拉菜单

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="js/jquery-1.7.2.min.js"></script>

    <script src="js/jquery.color.js"></script>

    <title></title>

    <style type="text/css">

        #div1 {

            width: 200px;

            height: 200px;

            background-color: #0171c2;

            font-size: 25px;

            font-family: 微软雅黑;

            color: yellow;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

        <div id="div1">

            按钮

        </div>

    </form>

</body>

</html>

<script type="text/javascript">

    $("#div1").mouseover(function () {

        $(this).animate({ backgroundColor: "black", color: "white" }, );

    });

    $("#div1").mouseout(function () {

        $(this).animate({ backgroundColor: "#0171c2", color: "yellow" }, );

    });

                    //  要引入jquery.color

</script>

字体，颜色渐变

 stop(true) 

-- 停止动画，防止动画积累：

jQuery 【选择器】【动画】的更多相关文章

  1. JQuery 选择器

    选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...

  2. jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html

    我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...

  3. 二、jquery选择器

    在jquery库中,可以通过选择器实现DOM元素快捷选择这一重要的核心功能. 1.选择器的优势 (1)代码更简单 由于在jquery库中,封装了大量可以通过选择器直接调用的方法或函数,使编写代码更加简 ...

  4. jquery 选择器(name,属性,元素)大全

    jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...

  5. 我人生中的jQuery选择器

    Jquery选择器 一.Jquery选择器简介 JavaScript只是一种运行于客户端,可以被客户端浏览器解析的一段代码.它和java没有任何关系.JavaScript简称JS.jQuery是对JS ...

  6. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  7. jquery选择器总结 转自（永远的麦子）

    jQuery选择器总结 阅读目录 1, 基本选择器? 2, 层次选择器? 3, 过滤选择器? 4, 表单选择器? jQuery选择器共有四大类,分别为基本选择器,层次选择器,过滤选择器和表单选择器.下 ...

  8. 精通jQuery选择器

    虽然jQuery上手简单,相比于其他库学习起来较为简单,但是要全面掌握,却不轻松.因为它涉及到网页开发的方方面面,提供的方法和内部变化有上千种之多.初学者常常感到,入门很方便,提高很困难.本文的目标是 ...

  9. jQuery-认识JQuery，jQuery选择器

    认识JQuery: 1.window.onload与$(document).ready()的区别 window.onload $(document).ready() 执行时机 必须等待网页中的所有内容 ...

  10. jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

随机推荐

  1. [转]Ubuntu16.04下ralink rt3290驱动安装

    出处:https://askubuntu.com/questions/253632/how-do-i-get-a-ralink-rt3290-wireless-card-working 解决为问题:L ...

  2. java_io

    JAVA IO流(一)参考文章:http://ifeve.com/java-io-network/,并发编程网原创文章,转载请注明: 转载自并发编程网 – ifeve.com本文链接地址: Java ...

  3. 循环结构-for,while,do-while

    for,while,do-while >完整的循环应该包含以下四个部分: 初始化语句:初始化工作,在循环体开始之前执行 条件表达式:一个boolean表达式,决定是否执行循环体 循环体:反复执行 ...

  4. ansible hosts文件编写，简单使用测试（普通用户、sudo用户、root用户登录权限测试）

    一.配置文件修改: 1.备份原配置文件: cp /etc/ansible/hosts /etc/ansible/hosts.bak 2.修改hosts配置文件: cat <<EOF> ...

  5. LeNet,AlexNet,GoogleLeNet,VggNet等网络对比

    CNN的发展史 上一篇回顾讲的是2006年Hinton他们的Science Paper,当时提到,2006年虽然Deep Learning的概念被提出来了,但是学术界的大家还是表示不服.当时有流传的段 ...

  6. 基于Docker+Jenkins+Gitlab搭建持续集成环境

    随着DevOps理念和敏捷理念的发展,我们希望通过自动化技术,加快项目的迭代.尤其是当使用微服务方案后,面临在大量的项目构建和部署工作,借助于jenkins的持续集成,可以快速把应用打包成docker ...

  7. 第30节：Java基础-内部类

    内部类 // 外部类 class Demo{ private int num = 3; // 定义内部类 class Int{ void show(){ System.out.println(&quo ...

  8. 关于No mapping found for HTTP request with URI...

    当你看到这篇博客,说明你已经像我一样快疯了!但是还好..找到了!!! 网上的那些东西真心看了更闹心,因为还没解决... 原因一.访问路径确实错了,导致Dispatcher找不到给你传达的地方,修改下领 ...

  9. 导入Excel文件

    选择文件 #region //获取路径 string FilePath = ""; //选择文件 OpenFileDialog openFileDialog1 = new Open ...

  10. C# datagridview分页功能

    winform开发是或多或少都会接触datagridview控件,如果数据量大,那么必须使用分页功能,但是datagridview自身并没有分页,所以我们要自己实现.在网上搜了一些发现没有太适合自己的 ...