美文网首页
关于JQuery

关于JQuery

作者: 拾柒_aab0 | 来源:发表于2019-11-17 14:48 被阅读0次

    jQuery到底是什么呢?

    jQuery 是一个 JavaScript 库。
    jQuery 极大地简化了 JavaScript 编程。
    jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库。

    JQuery语法

    jQuery 语法
    jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

    基础语法是:$(selector).action()

    美元符号定义 jQuery
    选择符(selector)“查询”和“查找” HTML 元素
    jQuery 的 action() 执行对元素的操作
    示例
    $(this).hide() - 隐藏当前元素

    $("p").hide() - 隐藏所有段落

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

    $("#test").hide() - 隐藏所有 id="test" 的元素

    提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。
    文档就绪函数
    您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

    $(document).ready(function(){
    
    --- jQuery functions go here ----
    
    });
    

    jQuery hide() 和 show()

    通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:

    例:

     $("#hide").click(function(){
     $("p").hide();
     });
    
    $("#show").click(function(){
    $("p").show();
    });
    

    语法:
    $(selector).hide(speed,callback);

    $(selector).show(speed,callback);

    jQuery toggle()

    通过 jQuery,可以使用 toggle() 方法来切换 hide() 和 show() 方法。

    显示被隐藏的元素,并隐藏已显示的元素:
    语法:
    $(selector).toggle(speed,callback);
    可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

    jQuery 效果 - 滑动

    jQuery 滑动方法
    通过 jQuery,您可以在元素上创建滑动效果。

    jQuery 拥有以下滑动方法:

    slideDown()
    slideUp()
    slideToggle()
    jQuery slideDown() 方法
    jQuery slideDown() 方法用于向下滑动元素。

    语法:
    $(selector).slideDown(speed,callback);
    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

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

    下面的例子演示了 slideDown() 方法:

    实例

    $("#flip").click(function(){
    $("#panel").slideDown();
    });
    

    jQuery slideUp() 方法
    jQuery slideUp() 方法用于向上滑动元素。

    语法:
    $(selector).slideUp(speed,callback);
    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

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

    下面的例子演示了 slideUp() 方法:

    实例

    $("#flip").click(function(){
    $("#panel").slideUp();
    });
    

    相关文章

      网友评论

          本文标题:关于JQuery

          本文链接:https://www.haomeiwen.com/subject/hvupictx.html