zoukankan      html  css  js  c++  java
  • web基础之JQuery

    什么是 jQuery ?

    jQuery是一个JavaScript函数库。

    jQuery是一个轻量级的"写的少,做的多"的JavaScript库。

    (值得一提的是jQuery很多操作也是操作dom,我们应该避免减少的操作dom)

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

    实例:

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

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

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

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

    • 文档就绪事件

      您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

      $(document).ready(function(){ // 开始写 jQuery 代码... });

      这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。

    jQuery 选择器

    jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

    jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素

    jQuery 中所有选择器都以美元符号开头:$()。

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

    #id 选择器

     $("#test").hide();

    .class 选择器

     $(".test").hide();

     事件:

    比如

    $("p").click(function(){
        // 动作触发后执行的代码!!
    });

    设置内容和属性

    val() 方法返回或设置被选元素的值。

    元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

    如果该方法未设置参数,则返回被选元素的当前值。

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("#test1").text("Hello world!");
      });
      $("#btn2").click(function(){
        $("#test2").html("<b>Hello world!</b>");
      });
      $("#btn3").click(function(){
        $("#test3").val("RUNOOB");
      });
    });
    </script>
    </head>
    
    <body>
    <p id="test1">这是一个段落。</p>
    <p id="test2">这是另外一个段落。</p>
    <p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
    <button id="btn1">设置文本</button>
    <button id="btn2">设置 HTML</button>
    <button id="btn3">设置值</button>
    </body>
    </html>

    添加新的 HTML 内容

    我们将学习用于添加新内容的四个 jQuery 方法:

    • append() - 在被选元素的结尾插入内容
    • prepend() - 在被选元素的开头插入内容
    • after() - 在被选元素之后插入内容
    • before() - 在被选元素之前插入内容

    jQuery append() 方法

    jQuery append() 方法在被选元素的结尾插入内容(仍然在该元素的内部)。

    实例

    $("p").append("追加文本");

    删除元素/内容

    如需删除元素和内容,一般可使用以下两个 jQuery 方法:

    • remove() - 删除被选元素(及其子元素)
    • empty() - 从被选元素中删除子元素

    jQuery remove() 方法

    jQuery remove() 方法删除被选元素及其子元素。

    实例

    $("#div1").remove();
     

    jQuery 操作 CSS

    jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:

    • addClass() - 向被选元素添加一个或多个类
    • removeClass() - 从被选元素删除一个或多个类
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("h1,h2,p").addClass("blue");
        $("div").addClass("important");
      });
    });
    </script>
    <style type="text/css">
    .important
    {
        font-weight:bold;
        font-size:xx-large;
    }
    .blue
    {
        color:blue;
    }
    </style>
    </head>
    <body>
    
    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <p>这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <div>这是一些重要的文本!</div>
    <br>
    <button>为元素添加 class</button>
    
    </body>

    jQuery 遍历


    什么是遍历?

    向上遍历 DOM 树

    这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:

    • parent()
    • parents()
    $(document).ready(function(){
      $("span").parent();
    });

    向下遍历 DOM 树

    下面是两个用于向下遍历 DOM 树的 jQuery 方法:

    • children()
    • find()
    $(document).ready(function(){
      $("div").children();
    });

    在 DOM 树中水平遍历

    有许多有用的方法让我们在 DOM 树进行水平遍历:

    • siblings()返回被选元素的所有同胞元素。
    • next()返回被选元素的下一个同胞元素
    • nextAll()返回被选元素的所有跟随的同胞元素。
    • nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素
    • prev()
    • prevAll()
    • prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞之前元素遍历,而不是之后元素遍历)。

    jQuery 遍历- 过滤

    缩小搜索元素的范围

    三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。

    其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

    jQuery first() 方法

    first() 方法返回被选元素的首个元素。

    下面的例子选取首个 <div> 元素内部的第一个 <p> 元素:

    实例

    $(document).ready(function(){ $("div p").first(); });

    jQuery last() 方法

    last() 方法返回被选元素的最后一个元素。

    下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素:

    实例

    $(document).ready(function(){ $("div p").last(); });

    jQuery filter() 方法

    filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

    下面的例子返回带有类名 "url" 的所有 <p> 元素:

    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
       $("p").filter(".url").css("background-color","yellow");
    });
    </script>
    </head>
    <body>
    
    <h1>欢迎访问我的主页</h1>
    <p>菜鸟教程 (index 0).</p>
    <p class="url">http://www.runoob.com (index 1)。</p>
    <p>google (index 2).</p>
    <p class="url">http://www.google.com (index 3)。</p>
    
    </body>
    </html>
  • 相关阅读:
    中国石油昆仑加油卡
    157 01 Android 零基础入门 03 Java常用工具类01 Java异常 01 异常介绍 02 异常内容简介
    156 01 Android 零基础入门 03 Java常用工具类01 Java异常 01 异常介绍 01 Java常用工具类简介
    155 01 Android 零基础入门 02 Java面向对象 07 Java多态 07 多态知识总结 01 多态总结
    154 01 Android 零基础入门 02 Java面向对象 07 Java多态 06 内部类 05 匿名内部类
    153 01 Android 零基础入门 02 Java面向对象 07 Java多态 06 内部类 04 方法内部类
    152 01 Android 零基础入门 02 Java面向对象 07 Java多态 06 内部类 03 静态内部类
    151 01 Android 零基础入门 02 Java面向对象 07 Java多态 06 内部类 02 成员内部类
    150 01 Android 零基础入门 02 Java面向对象 07 Java多态 06 内部类概述 01 内部类概述
    149 01 Android 零基础入门 02 Java面向对象 07 Java多态 05 接口(重点)07 接口的继承
  • 原文地址:https://www.cnblogs.com/yangj-Blog/p/13042214.html
Copyright © 2011-2022 走看看