jQuery选择器–Web前端框架开发技术

2023-10-31 理论教育版权反馈

【摘要】：在正式学习jQuery 选择器之前，先看几组用传统的JavaScript 方法获取页面中的元素，然后给元素添加行为事件的例子。在元素下获取元素。获取所有name 为“check”的多选框。然而在jQuery 中.类似的这些操作则是非常简洁。jQuery 选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。为了能更清晰、直观地讲解选择器.首先需要设计一个简单的页面，里面包含各种

元素和元素，然后使用jQuery 选择器来匹配元素并调整它们的样式。

在正式学习jQuery 选择器之前，先看几组用传统的JavaScript 方法获取页面中的元素，然后给元素添加行为事件的例子。

示例l：给页中的所有<p>元素添加onclick 事件。

步骤实现如下：

(1)获取所有的<p>元素

(2)对<p>元素进行循环(因为获取的是数组对象)

(3)给每个<p>元素添加行为事件

JavaScript 代码如下：

示例2：使一个特定的表格隔行变色。

HTML 代码如下：

步骤实现如下：

(1)根据表格id 获取表格。

(2)在表格内获取<tbody>元素。

(3)在<tbody>元素下获取<tr>元素。

(4)循环输出获取的<tr>元素。

(5)对<tr>元素的索引值除以2 并取模，然后根据奇偶设置不同的背景色。(www.chuimin.cn)

JavaScript 代码如下：

示例3：对多选框进行操作，输出选中的多选框的个数。

HTML 代码如下：

实现步骤如下：

(1)新建一个空数组。

(2)获取所有name 为“check”的多选框。

(3)循环判断多选框是否被选中，如果被选中则添加到数组里。

(4)获取输出按钮，然后为按钮添加onclick 事件，输出数组的长度即可。

JavaScript 代码如下：

上面的几个例子都是用传统的 JavaScript 方法进行操作，中间使用了getElementByld()、getElementsByTagName()和getElementsByName()等方法，然后动态地给元素添加行为或者样式。这些虽然都是JavaScript 中最简单的操作，但不断重复使用getElementById()和getElementsByTagName0 等冗长而难记的名称，使越来越多的开发人员开始厌倦这种枯燥的写法，并且有时候为了获取网页中的某个元素，需要编写很多的getElementById()和getElementsByTagName()方法。然而在jQuery 中.类似的这些操作则是非常简洁。

下面学习如何使用jQuery 获取这些元素。

jQuery 选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。在下面的章节中将分别用不同的选择器来查找HTML 代码中的元素并对其进行简单的操作。为了能更清晰、直观地讲解选择器.首先需要设计一个简单的页面，里面包含各种<div>元素和<span>元素，然后使用jQuery 选择器来匹配元素并调整它们的样式。

新建一个空白页面，输入以下HTML 代码：

然后用CSS 对这些元素进行初始化大小和背景颜色的设置，CSS 代码如下：

jQuery选择器–Web前端框架开发技术

相关推荐