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. 第33章：MongoDB-索引--GridFS存储文件

    ①简介 GridFS是MongoDB用来存储大型二进制文件的一种存储机制.特别适合用在存储一些不常改变,但是经常需要连续访问的大文件的情况. ②GridFS的优点 1:能够简化技术栈,如果已经使用了M ...

  2. 1.1初识python

    1.目前大量的公司都在使用python,功能强大很是牛逼! 2.运维要懂开发,做个全栈的工程师贼牛逼 3.python是一个解释型语言,编译型和解释型的区别是: ①编译型语言由编译器(Compiler ...

  3. Re:uxul

    Re: Unbelieveable eXperience of University Life

  4. UBUNTU14.0.4安装eclipse

    jdk工具下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 点击这个下载 ...

  5. [ 9.29 ]CF每日一题系列—— 765B字符串规律

    Description: 遇到了ogo可以变成***如果ogo后面有go统统忽略,输出结果 Solution: 哎如果我一开始对题意的解读如上的话,就不会被整的那么麻烦了 Code: #include ...

  6. day13_雷神_前端01

    #前端 html 服务器端返回的就是一个字符串,浏览器根据html规则去渲染这个字符串. html 是超文本标记语言,相当于定义统一的一套规则,大家都遵守它,这样就可以让浏览器根据标记语言的规则去解释 ...

  7. 如何将uniurlframe中html调用delphi的函数

    uniGUI总群中台中cmj朋友为我们总结了如下内容,对于利用delphi+uniGUI开发应用,可以说是精品,必须掌握. 一句话,如何在html与delphi间交互代码,是最好的答案. [Clien ...

  8. WITH RECOMPILE和OPTION(RECOMPILE)区别仅仅是存储过程级重编译和SQL语句级重编译吗

    在考虑重编译T-SQL(或者存储过程)的时候,有两种方式可以实现强制重编译(前提是忽略导致重编译的其他因素的情况下,比如重建索引,更新统计信息等等), 一是基于WITH RECOMPILE的存储过程级 ...

  9. .net core mvc发布项目到IIS上出现500错误

    如题,我把.net core mvc项目以应用程序方式挂到IIS默认网站下,结果出现了如下错误:HTTP Error 500.0 - ANCM In-Process Handler Load Fail ...

  10. poj3280

    将给定字符串用最小代价(添加,删除)变为回文串. dp:dp[i][j]表示将i-j变为回文串的最小代价. 若s[i]==s[j],则dp[i][j]=dp[i+1][j-1] 否则,若s[i+1]- ...