zoukankan      html  css  js  c++  java
  • 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);
  • 相关阅读:
    低效代码的危害
    使用datetime来控制timer的问题
    redis for windows
    log4net支持用日期加时间指定文件名
    防止数据丢失的解决方法
    RabbitMQ默认情况下不保证每次都把消息传递
    UnitTest和Developer
    spring+eureka+zuul
    新工具解决消息丢失的bug
    java_if_else__的应用1
  • 原文地址:https://www.cnblogs.com/SCAU-gogocj/p/13246067.html
Copyright © 2011-2022 走看看