jQuery学习笔记2

搬砖第二天

• 政府后台管理系统改版找模板
• 获得了力软代码，看不懂不明白，研究中
• 继续学习jQuery

jQuery 获取/设置内容和属性

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值
• attr() - 设置属性设置/改变属性值。

jQuery 添加/删除元素

添加元素

• append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）。
• prepend() 方法在被选元素的开头插入内容。
• after() 方法在被选元素之后插入内容。
• before() 方法在被选元素之前插入内容。
  • after() 和 before() 方法能够通过参数接收无限数量的新元素。
  • 可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

  例：   var txt1 = "<p>1111<p>" //使用html创建元素
        var txt2 = $("<a><a>").text("jquery创建");// 使用 jQuery 创建元素
        // 使用 DOM 创建元素
        var txt3 = document.createElement("big")
        txt3.innerHTML = "jQuery";
        $(".box2").after(txt1,txt2,txt3);

删除元素

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

  • remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

    例：$("div").remove(".box1");
    

• empty() 方法删除被选元素的子元素。

jQuery 操作 CSS

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

jQuery 尺寸

注意：设置了 box-sizing：border-box 后，width() 获取的是 css 设置的 width 减去 padding 和 border 的值。

jQuery 遍历

向上遍历 DOM 树

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

• parent() - 返回被选元素的直接父元素。
• parents() - 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
• parentsUntil() - 返回介于两个给定元素之间的所有祖先元素。

向下遍历 DOM 树

• children() - 返回被选元素的所有直接子元素。
• find() - 返回被选元素的后代元素，一路向下直到最后一个后代。

在 DOM 树中水平遍历

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

• siblings() - 返回被选元素的所有同胞元素。
• next() - 返回被选元素的下一个同胞元素。
• nextAll() - 返回被选元素的所有跟随的同胞元素。
• nextUntil() - 返回介于两个给定参数之间的所有跟随的同胞元素。
• prev()、prevAll()、prevUntil() - 返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）

缩小搜索元素的范围

• first() - 返回被选元素的首个元素。
• last() - 返回被选元素的最后一个元素。
• eq() - 返回被选元素中带有指定索引号的元素。
• filter() - 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
• not() - 返回不匹配标准的所有元素。
  • 提示：not() 方法与 filter() 相反。