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. python运算符优先级

    下面这个表给出Python的运算符优先级,从最低的优先级(最松散地结合)到最高的优先级(最紧密地结合).这意味着在一个表达式中,Python会首先计算表中较下面的运算符,然后在计算列在表上部的运算符. ...

  2. hdmi中深度色彩像素打包

    4个色彩像素包模式:24- 30- 36- 48- 不同模式下tmds时钟与与像素的比是位宽与24的比值 . 24 bit mode: TMDS clock = 1.0 x pixel clock ( ...

  3. linux上安装zookeeper

    本文先讲述Linux下单机版的安装流程,集群的配置后续再补上.关于Zookeeper的基本介绍和原来在本文不做更多介绍,可以自行查找.本文的操作流程相对简单,仅做备忘而已. 第一步  安装JDK:   ...

  4. git-创建新项目

    1.一般第一次使用git,需要进行全局设置,如果下次创建新项目或者fork别人的项目,则不需要再进行设置:但是如果想要提交到不同的代码管理网站,则需要再设置,比如现在我的是在gitlab.com上进行 ...

  5. Linux-程序包管理

    Linux上的软件安装有2种形式:源码.二进制文件,源码需要在编译环境下编译安装,二进制可以直接安装. 1.程序包管理器 rpm 程序包管理器能够将目标二进制格式(也就是从源码编译好的二进制文件,包括 ...

  6. 批量插入数据, 将DataTable里的数据批量写入数据库的方法

    大量数据导入操作, 也就是直接将DataTable里的内容写入到数据库 通用方法: 拼接Insert语句, 好土鳖 1. MS Sql Server:   使用SqlBulkCopy 2. MySql ...

  7. What does git fsck stand for?

    fsck -> File System ChecK https://stackoverflow.com/questions/21151945/what-does-git-fsck-stand-f ...

  8. 了解Java基本数据类型的取值范围

    拿byte类型做栗子 一个字节是8位二进制数,然后最高位会用来作为符号位.正数计算机是存的原码,负数是存的补码. 也就说byte正数最大是0111 1111,转化为十进制是:127(这就是byte的上 ...

  9. Linux pwn入门教程(0)——环境配置

    作者:Tangerine@SAINTSEC 0×00前言 作为一个毕业一年多的辣鸡CTF选手,一直苦于pwn题目的入门难,入了门更难的问题.本来网上关于pwn的资料就比较零散,而且经常会碰到师傅们堪比 ...

  10. interface中定义default方法和static方法

    interface的default方法和static方法 接口中可以定义static方法,可通过接口名称.方法名()调用,实现类不能继承static方法: 接口中可以定义default方法,defau ...