jQuery查找节点并获取节点属性的方法

jQuery作为一种流行的JavaScript库，提供了许多方法用于查找节点并获取节点属性。在本篇攻略中，将详细介绍这些方法。

查找节点

选择器

通过选择器可以快速定位到需要的节点，常用的选择器有以下几种：

• #id：选择拥有指定id属性的元素；
• .class：选择拥有指定class属性的元素；
• element：选择指定元素名的所有元素；
• element.class：选择指定元素中拥有指定class属性的元素。

以下是一个示例：

<div id="foo" class="bar">Hello World!</div>

通过选择器可以获取这个节点的内容：

var content = $('#foo').text();
console.log(content);

输出结果为：Hello World!

遍历

在有些情况下，我们需要通过某个元素来查找其它元素，这时我们可以使用遍历方法。

• children()：选择当前元素下面的直接子元素；
• find()：选择当前元素下面的所有后代元素。

以下是一个示例：

<div>
  <span>Hello World!</span>
</div>

通过遍历方法可以获取这个节点的内容：

var content = $('div').find('span').text();
console.log(content);

输出结果为：Hello World!

获取节点属性

除了获取节点的文本内容，常见的需求还有获取节点属性。jQuery 提供了以下方法用于获取节点属性：

• attr()：获取指定属性的值；
• prop()：获取指定属性的 Boolean 值（如 checked、selected 等）；
• css()：获取指定样式属性的值。

以下是一个示例：

<a href="https://www.google.com/" target="_blank">Google</a>

通过 attr() 方法可以获取这个节点的 href 属性：

var href = $('a').attr('href');
console.log(href); // https://www.google.com/

通过 text() 方法可以获取这个节点的文本内容：

var text = $('a').text();
console.log(text); // Google

通过 prop() 方法可以获取这个节点的 target 属性：

var target = $('a').prop('target');
console.log(target); // _blank

通过 css() 方法可以获取这个节点的 font-size 样式属性：

var fontSize = $('a').css('font-size');
console.log(fontSize); // 16px

以上就是 jQuery 查找节点并获取节点属性的方法的完整攻略，希望对您有所帮助。