首页 > 代码库 > JQuery——选择元素

JQuery——选择元素

2024-07-02 04:05:57   226人阅读

　　一、$()工厂函数

　　　　在Jquery中无论哪种类型的选择符，都要从一个$()开始，在这个函数接受CSS选择符作为参数，返回包含页面对应元素的Jquery对象。

　　　　基本的选择符：

　　　　　　　　选择符　　　　　　CSS中　　　　　　Jquery中　　　　　　　　　　说明

　　　　　　　　标签名　　　　  　　P{}　　　　　　　$(‘P‘)　　　　　　　取得文档中所有的段落

　　　　　　　　　ID　　　　　　#some-id{}　　 $(‘#some-id‘)　　　　  取得文档中ID为some-id的一个元素

　　　　　　　　   类　　　　      .some-class{}   $(‘.some-class‘)　　　  取得文档中类为some-class的所有元素

 

　　二、CSS选择符

　　　　1.子元素组合符（>）

$(document).ready(function(){

$(‘#selected-play > li‘).addClass(‘horizontal‘);

});

　　　  代码说明：　选择ID是selected-play的元素的子元素（>）中所有的列表项（li）

　　　　

 

　　　  2.非顶级的项，使用否定式伪类选择符（:not）

$(document).ready(function(){
    $(‘#selected-plays > li ‘).addClass(‘horizontal‘);
    $(‘#selected-plays li :not(.horizontal)‘).addClass(‘sub-level‘);
});

　　　  代码说明：　先为ID是selected-play的元素的子元素（>）中所有的列表项（li）添加一个CSS的horizontal类

　　　　　　　　　  然后选择ID是selected-play的元素的li元素下，没有horizontal类的元素，然后添加一个sub-level类

　　　　

 

　　　 3.属性选择符（例如：选择图像的alt属性）　　

$(‘ img[alt] ‘)

　　　　在属性选择符中，使用一种从正则表达式中借鉴来的通配符语法：

　　　　　　以^表示在字符串的开始

$(‘a[href^="mailto:"]‘).addClass(‘mailto‘);//选择a标签的href属性把以"mailto:"开头的链接都添加一个mailto的样式

　　　　　　以$表示在字符串的结尾

$(‘a[href$=".pdf"]‘).addClass(‘pdflink‘); //选择a标签的href属性把以".pdf"结尾的链接都添加一个pdflink的样式

　　　　　　以*表示要匹配的值可以在任意位置

$(‘a[href*="henry"]‘).AddClass(‘henrylink‘); //选择a标签的href属性把以"henry"的值出现在任意位置的链接添加henrylink样式

　　　　　　以!表示要对值取反

　　　　

 

　　　　4.自定义选择符（跟CSS中的伪类选择语法相同，以冒号开头(:)）

　　　　　注：在JavaScript中数组采用从0开始的编号方式，而在CSS中是从1开始　　　

　　　　：eq()选择符

$(‘div.horizontal:eq(1)‘) //从div中带有horizontal类的集合中选择第2项

 

　　　　：odd选择符，选择偶数项

$(‘tr:odd‘).addClass(‘alt‘);//选择tr中偶数项，添加样式

　　　　:even选择符，选择奇数项

$(‘tr:even‘).addClass(‘alt‘);//选择tr中奇数项，添加样式

　　　　:nth-child()是Jquery中唯一从1开始计数的选择符

　　　　:contains()选择符区分大小写，如果$(‘td:contains(henry)‘)中字母"h"变大写"H"，则不会选择任何单元格

　　　　

　　　　5.连缀

$(‘td:contains(Henry)‘).parent().find(‘td:eq(1)‘)
    .addClass(‘highlight‘).end().find(‘td:eq(2)‘)
    .addClass(‘highlight‘);

　　　　上面的代码可以改写成7行，这样改写可读性更高

$(‘td:contains(henry)‘) //取得包含henry的所有单元格
.parent()                      //取得它的父元素   
.find(‘td:eq(1)‘)            //在父元素中查找第2个单元格
.addClass(‘highlight‘)   //为该单元格添加highlight类
.end()                          //回复到包含henry的单元格的父元素中
.find(‘td:eq(2)‘)            //在父元素中查找第3个单元格
.addClass(‘highlight‘); //为该单元格添加highlight类

 

 


联系
我们