zoukankan      html  css  js  c++  java
  • jQuery

    一、jQuery HTML

    jQuery 拥有可操作 HTML 元素和属性的强大方法。

    jQuery DOM 操作

    jQuery 中非常重要的部分,就是操作 DOM 的能力。

    jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。

    获取属性 - attr()

    jQuery attr() 方法用于获取属性值。

    下面的例子演示如何获得链接中 href 属性的值:

    实例

    $("button").click(function(){
      alert($("#w3s").attr("href"));
    });

    设置内容 - text()、html() 以及 val()

    我们将使用前一章中的三个相同的方法来设置内容:

    • text() - 设置或返回所选元素的文本内容
    • html() - 设置或返回所选元素的内容(包括 HTML 标记)
    • val() - 设置或返回表单字段的值

    下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容:

    实例

    $("#btn1").click(function(){
      $("#test1").text("Hello world!");
    });
    $("#btn2").click(function(){
      $("#test2").html("<b>Hello world!</b>");
    });
    $("#btn3").click(function(){
      $("#test3").val("Dolly Duck");
    });

    二、jQuery 效果

    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);
    

    可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

    下面的例子演示了带有 speed 参数的 hide() 方法:

    实例

    $("button").click(function(){
      $("p").hide(1000);
    });

    jQuery toggle()

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

    显示被隐藏的元素,并隐藏已显示的元素:

    实例

    $("button").click(function(){
      $("p").toggle();
    });

    语法:

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

    可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

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

    jQuery - Chaining

    通过 jQuery,您可以把动作/方法链接起来。

    Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上)。

    提示:这样的话,浏览器就不必多次查找相同的元素。

    如需链接一个动作,您只需简单地把该动作追加到之前的动作上。

    例子 1

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

    二、

    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  • 相关阅读:
    Python学习札记(十五) 高级特性1 切片
    LeetCode Longest Substring Without Repeating Characters
    Python学习札记(十四) Function4 递归函数 & Hanoi Tower
    single number和变体
    tusen 刷题
    实验室网站
    leetcode 76. Minimum Window Substring
    leetcode 4. Median of Two Sorted Arrays
    leetcode 200. Number of Islands 、694 Number of Distinct Islands 、695. Max Area of Island 、130. Surrounded Regions 、434. Number of Islands II(lintcode) 并查集 、178. Graph Valid Tree(lintcode)
    刷题注意事项
  • 原文地址:https://www.cnblogs.com/qingxinblog/p/4128066.html
Copyright © 2011-2022 走看看