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