• Day17-JS-jQuery


    (本文参考菜鸟教程,感谢菜鸟教程)

    一、添加元素

    二、删除元素

    三、获取并设置 CSS 类

    四、css() 方法

    五、jQuery 尺寸

    六、遍历

    七、Ajax

    八、其他

    一、添加元素

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

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

    案例一:用append 添加多个元素内容

    function appendText(){
                    var txt1 = "<p>文本。</p>";
                    var txt2 = $("<p></p>").text("文本。");
                    var txt3 = document.createElement("p");
                    txt3.innerHTML = "文本。";
                    $("body").append(txt1 , txt2 ,txt3);
                }

    多种创建txt的形式

    二、删除元素

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

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

     当使用 remove 的时候

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

    效果图:(直接把div包括里面的东西全部都清空了)

    使用empty的时候

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

     只是把里面的东西搞死了,而外部的div的结构和样式都是还存在的

    remove()可以接受参数,该参数可以是任何 jQuery 选择器的语法。下面就是把class="italic" 的所有 <p> 元素全部删掉了

    $("p").remove(".italic");

     三、获取并设置 CSS 类

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

    • addClass() - 向被选元素添加一个或多个类
    • removeClass() - 从被选元素删除一个或多个类
    • toggleClass() - 对被选元素进行添加/删除类的切换操作
    • css() - 设置或返回样式属性

    ①案例一:addClass方法

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                .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>
            <script src="../js/jquery-3.5.1.min.js"></script>
            <script>
                $(function(){
                    $("button").click(function(){
                        $("h1,h2,p").addClass("blue");
                        $("div").addClass("important");
                    });
                });
            </script>
        </body>
    </html>
    View Code

    removeClass方法

     

     其实都是一样的套路的

     四、css() 方法

    css() 方法设置或返回被选元素的一个或多个样式属性。

     

    设置 CSS 属性

     

     

     五、jQuery 尺寸

    通过 jQuery,很容易处理元素和浏览器窗口的尺寸。

    jQuery 提供多个处理尺寸的重要方法:

    • width()
    • height()
    • innerWidth()
    • innerHeight()
    • outerWidth()
    • outerHeight()

     这几个元素都是可以直接返回值的

    其中一个注意点:

    六、遍历

    ①祖先(向上遍历DOM树)

    • parent()   : parent() 方法返回被选元素的直接父元素
    • parents() :parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)
      • 也可以通过对parents添加参数,比如“ul”也就是向上找所有ul标签的祖先 
    • parentsUntil()  :  parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

    ②后代 (向下遍历DOM树)

    • children()  :该方法只会向下一级对 DOM 树进行遍历。
    • find()         :一路向下直到最后一个后代。

    ③同胞(在DOM树种遍历有和这个元素相同父元素的元素)

    ==也就是进行水平遍历

    • siblings()
    • next()
    • nextAll()
    • nextUntil()
    • prev()
    • prevAll()
    • prevUntil()

    ④过滤

    缩小搜索元素的范围

    三个最基本的过滤方法是:first(), last() 和 eq()

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

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

    3、eq() 方法返回被选元素中带有指定索引号的元素。

    索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素(索引号 1)

    4、

    5、not()方法刚号和filter是相反的

    小的案例:

     七、Ajax

      1、load方法

    load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

    语法:

    $(selector).load(URL,data,callback);
  • 相关阅读:
    三数之和
    罗马数字与整数
    Oracle 开启或关闭归档
    Oracle RMAN scripts to delete archivelog
    Oracle check TBS usage
    Oracle kill locked sessions
    场景9 深入RAC运行原理
    场景7 Data Guard
    场景4 Data Warehouse Management 数据仓库
    场景5 Performance Management
  • 原文地址:https://www.cnblogs.com/SCAU-gogocj/p/13246067.html
Copyright © 2020-2023  润新知