zoukankan      html  css  js  c++  java
  • JQuery笔记

    <head>
    <script src="jquery.js"></script>
    </head>

    在 HTML5 中,不必在 <script> 标签中使用 type="text/javascript"。

    -----------------------------------------------------------------------------------

    <h2 id="test">This is a heading</h2>
    <p>This is a paragraph.</p>
    <p id="test">This is another paragraph.</p>

    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide();
      });
    });
    </script>

    注意,上面的html中h2和p拥有相同的id “test",这时我们在点击按钮button的时候,只会隐藏掉h2元素,p元素保持不动,可以看出,理论上id是不应该重复的。

    <h2 class="test">This is a heading</h2>
    <p class="test">This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">Click me</button>

    <script type="text/javascript">
    $(document).ready(function()
    {
      $("button").click(function()
      {
      $(".test").hide();
      });
    });
    </script>

    而在上面的这段代码中,h2和p均会被隐藏,因为h2和p元素均属于”test"类

    以上,两点形成对比,也是符合逻辑的,id作为标识一般不允许重复,而多个不同的html元素可以同时包含在一个类中。

    -----------------------------------------------------------------------------------

    jQuery 语法

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

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

    • 美元符号定义 jQuery
    • 选择符(selector)“查询”和“查找” HTML 元素
    • jQuery 的 action() 执行对元素的操作

    -----------------------------------------------------------------------------------

    有关于选择器

    $(this).hide() - 隐藏当前元素

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

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

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

  • 相关阅读:
    CentOS7中使用yum安装Nginx的方法
    Flask&&人工智能AI --4
    Flask&&人工智能AI --3
    Flask&&人工智能AI --2
    Flask&&人工智能AI --1
    Linux--8
    Linux--7
    django 请求生命周期
    Linux--6 redis订阅发布、持久化、集群cluster、nginx入门
    Node.js Addons翻译(C/C++扩展)
  • 原文地址:https://www.cnblogs.com/SharpL/p/4576486.html
Copyright © 2011-2022 走看看