jQuery 入门

最新推荐文章于 2025-06-19 14:35:59 发布

原创最新推荐文章于 2025-06-19 14:35:59 发布 · 581 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文详细解析jQuery作为JavaScript库在动态网页开发中的核心优势，包括获取页面元素、修改外观、实现动态效果、无刷新获取信息及抽象浏览器不一致性等方面。文章深入介绍了jQuery的基本操作、选择符应用、事件处理以及与CSS的交互，同时分享了如何通过选择符精准定位DOM元素，以及如何利用自定义选择符和基于表单的选择符进行更复杂的选择与操作。此外，文章还讨论了如何为特定单元格添加样式，以及在不同表格间正确应用样式的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery的优点：

取得页面元素

修改外观，与css相比它提供了跨浏览器的标准解决方案，因为浏览器对css不支持完全相同的标准
为页面提供动态效果
无须刷新即可从服务器获取信息

抽象浏览器的不一致性

jQuery是一个js库，并且因为js是解释型语言，所以使用它不必进行编译或构建，我们只需引入该库文件的位置。正如字面意思所述query是“查询的意思”，jQuery重点放在从HTML页面里获取元素并对其进行操作。

JQuery基本操作就是选择文档中的某一部分，通过$()结构完成。
为了进行操作的分离，我们仅仅在js文件中添加所有行为
$(document).ready()结构预订DOM加载完成后（不必等待图像加载完成）触发的函数调用

选择符
jQuery利用CSS选择符的能力，让我们在DOM中快捷而轻松的获取元素或元素集合
我们通过各种选择符和方法取得的结果集合始终都会被包装在一个jQuery对象绑定事件。

选择符      CSS            jQuery
标签名       p             $('p')
ID        #some-id      $('#some-id')
class     .someclass    $('.some-class)

属性选择符
$('a[herf^=http][href*=herry]').addClass('henrylink');href属性既以http开头且任意位置又包含henry的所有链接添加一个henrylink类

每隔一行为表格添加样式

自定义选择符与CSS中伪类选择符语法相同，选择符以一个冒号开始

$('div.horizontal:eq(1)') 匹配的带有horizontal类的div集合中选择第2项。 eq(1)取得集合中第2个元素
$('div:nth-child(1)') 取得的是第1个元素
$('div:first-child')  取得第1个子代元素

:eq(),:odd,:even,选择符都是使用js内置从0开始的编号方式，第一行编号为0（偶数），第二行编号为1（奇数）

$('tr:odd').addClass('alt'); 奇数行添加类alt。

但是上面有个问题就是当有多个表格时，如果当前表格最后一行为非alt类效果，那么下一个表格的第一行就会出现alt类的效果。跟我们所认为的从0开始编行，效果相反。解决办法是用:nth-child()选择符，它接受一个数值（表第几个子元素），even,odd为参数

$('tr:nth-child(odd)').addClass('alt');

:contains()选择符,它是区分大小写的。

$('td:contains(Henry)').addClass('highlight'); 得到的是单元格个引用，而不是当前的元素

基于表单的选择符

:text :checkbox :radio :image
:submit :reset :password :file    type属性值为选择符名称
:input                            输入字段，文本去，选择列表和按钮元素
:button                           按钮元素或type属性值为button的输入元素
:enabled                          启用的表单元素
:disabled                         禁用的表单元素
:checked                          勾选的单选按钮或复选框
:selected                         选择的选项元素

filter()方法，可以接受筛选函数，然后利用它的隐式迭代能力，迭代前面所有匹配的元素，然后基于元素测试函数的返回值。

$('tr').filter(':odd').addClass('alt')   <=> $('tr:odd').addClass('alt');

为特定单元格添加样式

$('td:contains(Henry)').next().addClass('highlight');              下一个单元格
$('td:contains(Henry)').nextAll().addClass('highlight');           该元素中Henry单元格后面的
$('td:contains(Henry)').nextAll().andSelf.addClass('highlight');   包括自己
$('td:contains(Henry)').parent().children().addClass('highlight'); 同一组元素

访问DOM元素

var myTag = $('#my-element').get(0);         //访问对象集的第一个元素
var myTag = $('#my-element')[0];   
var myTag = $('#my-element').get(0).tagName; //得到相应的标签名

注意点：注意明确我们到底是得到的单元格的引用还是元素的引用。
隐式迭代 implicit iteration
连缀chaining