jQuery P1

发布于 2024-11-06  41 次阅读

什么是 jQuery ？

jQuery 是一个 JavaScript 函数库。

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

jQuery 库包含以下功能：

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

jQuery语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

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

  • 美元符号定义 jQuery
  • 选择符（selector）"查询"和"查找" HTML 元素
  • jQuery 的 action() 执行对元素的操作

实例:

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

jQuery 选择器

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

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

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

语法描述实例
$("*")选取所有元素在线实例
$(this)选取当前 HTML 元素在线实例
$("p.intro")选取 class 为 intro 的 <p> 元素在线实例
$("p:first")选取第一个 <p> 元素在线实例
$("ul li:first")选取第一个 <ul> 元素的第一个 <li> 元素在线实例
$("ul li:first-child")选取每个 <ul> 元素的第一个 <li> 元素在线实例
$("[href]")选取带有 href 属性的元素在线实例
$("a[target='_blank']")选取所有 target 属性值等于 "_blank" 的 <a> 元素在线实例
$("a[target!='_blank']")选取所有 target 属性值不等于 "_blank" 的 <a> 元素在线实例
$(":button")选取所有 type="button" 的 <input> 元素 和 <button> 元素在线实例
$("tr:even")选取偶数位置的 <tr> 元素在线实例
$("tr:odd")选取奇数位置的 <tr> 元素在线实例

jQuery事件

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：

其他常用方法

链式编程

jQuery语句执行完毕后会将元素本身返回，可进行后续jQuery方法

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

jQuery DOM 操作

三个简单实用的用于 DOM 操作的 jQuery 方法：

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标签）
  • val() - 设置或返回表单字段的值
  • 以上方法同样适用于设置元素

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

$("button").click(function(){
  alert($("#runoob").attr("href"));
});

设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容：

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值
$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

添加新的 HTML 内容

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

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

删除元素/内容

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

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

遍历

向上遍历 DOM 树

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

  • parent()
  • parents()
  • parentsUntil()

parent() 方法返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

下面的例子返回每个 <span> 元素的直接父元素：

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

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

下面的例子返回所有 <span> 元素的所有祖先：

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

jQuery parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

$(document).ready(function(){
$("span").parentsUntil("div");
});

向下遍历 DOM 树

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

  • children()
  • find()

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。

jQuery find() 方法

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

jQuery 遍历 - 同胞(siblings)

  • siblings() 除自己外所有同级元素（同胞）
  • next() 下一个同级元素
  • nextAll() 所有跟随元素
  • nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。
  • prev() 与上述三方法类似 但是返回前置元素
  • prevAll()
  • prevUntil()

jQuery 遍历- 过滤

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

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

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

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

not() 方法返回不匹配标准的所有元素。提示：not() 方法与 filter() 相反。

又活了一天，已经很努力了。