• JQuery


    jQuery语法实例

    $(this).hide()  隐藏当前的 HTML 元素。

    $("p").hide() 隐藏所有<p>元素。

    $(".test").hide() 隐藏所有 class="test" 的元素。

    $("#test").hide() 隐藏 id="test" 的元素。

    jQuery 选择器

    元素选择器

    $("p")选取<p>元素。

    $("p.intro")选取所有 class="intro"的<p>元素。

    $("p#demo")选取所有 id="demo"de <p>元素。

    属性选择器

    $("[href]")选取所有带有 href 属性的元素。

    $("[href='#']")选取所有带有 href 值等于“#”的元素。

    $("[href!='#']")选取所有带有 href 值不等于“#”的元素。

    $("[href$='.jpg']")选取所有带有 href 值以“.jpg” 结尾的元素。

    CSS 选择器

    实例:

    jQuery 效果

    隐藏(hide)/显示(show)

    淡入(fadein)/淡出(fadeout)

    语法

    fadeIn

    实例:

    fadeOut

    语法

    实例:

    fadeToggle

    语法

    实例:

    fadeTo

    语法

    实例:

    滑动(slither)

    flideDown 向下

    语法

    实例:

    flideUp  向上

    语法

    实例:

    flideToggle  切换

    语法

    实例:

    动画(animate)

    自定义

    语法

    必需的 params 参数定义形成动画的 CSS 属性。

    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是动画完成后所执行的函数名称。

    下面的例子演示 animate() 方法的简单应用;它把 <div> 元素移动到左边,直到 left 属性等于 250 像素为止:

     实例:

    操作多个属性

    实例:

    提示:可以用 animate() 方法来操作所有 CSS 属性吗?

    是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。

    同时,色彩动画并不包含在核心 jQuery 库中。

    如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。

    使用相对值 

    实例:

    使用队列功能

    实例1

    实例2

    停止动画(stop)

    语法

    可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

    可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

    因此,默认地,stop() 会清除在被选元素上指定的当前动画。

    下面的例子演示 stop() 方法,不带参数:

    实例:

    回收函数(Callback)

    语法

    callback 参数是一个在 hide 操作完成后被执行的函数。

    错误(没有 callback)

    正确(有 callback)

    链接(Chaining)

    在相同的元素上运行多条 jQuery 命令,一条接着另一条。

    例子1

    下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色,然后向上滑动,然后向下滑动:

    添加多个方法调用

    列子2

  • 相关阅读:
    当前网页调用其他网页
    保护自己的网页不被放入框架
    保护网页源码
    页面的后退、刷新、前进
    妙味——拖拽+碰撞+重力
    运行代码
    妙味——弹性运动
    IE css bug及解决方案参考
    妙味——布局转换的应用
    [LeetCode][JavaScript]Count Complete Tree Nodes
  • 原文地址:https://www.cnblogs.com/ynavigatorqcarsauto/p/6020764.html
Copyright © 2020-2023  润新知