现在位置首页 / 前端开发 /正文

jQuery DOM选择查询初学者指南

作者: IT小兵 | 2013年12月17日| 热度:℃ | 评论: |参与:

作为前端开发或者是设计师,在日常的项目中一定会遇到Document Object Model,也就是我们日常所说的 文本对象模型。近几年来,在DOM中选择元素并且使用Javascript动态的应用已经变得越来越广泛。所以我们需要有良好的知识,处理DOM元素以避免冲突,优化性能。jQuery是Javascript中最常用的一种类库,它具有先进的DOM选择和过滤特点,本文我们将给大家介绍怎样使用jQuery过滤DOM元素。

 介绍ID、Class、和数据属性(Data Attributes)

 通常我们在DOM树中使用html标签,ID,class和数据属性(data-)来选择元素,许多开发者都习惯用HTML标签来选择元素,但是初学者通常滥用ID CLASS 和 data- ,他们并不明白这三者都适合在何种情况下使用,下面我们就分别说说这三者使用的情况。

ID:元素特有的属性,就像我们的身份证号码,每个人的都不一样,所以不同的元素不能使用相同的ID名,通常我们在jQuery中使用ID来选择元素。

Class:用于使用CSS样式的元素,当元素不能使用ID名被选择时,就可以使用class来选择。

Data-attribute: 被用于定义一个元素私有的数据,我们可以在一个元素使用多个数据属性来储存数据

栗子一:选择文档中特定元素

通常我们使用ID来选择元素,例如我们通常遇到的表单验证就是很好的例子,下面是jQuery代码:

$(" # elementID”).val();

 这种方法适合文档中唯一的元素,就是不会重复的元素。

栗子二:选择多个元素使用class

通常当我们想选择一类元素时,就要使用class来选择,class不同于ID只能选择一个元素,它是可以选择具有相同类名的所有元素。

假设我们有一个记录列表,用户数据如下面的HTML代码,有一个删除按钮,用户可以通过点击删除记录。

<table>    <tr><td>Mark</td><td><input type=’button’ class=’user_data’ value=’Delete’ /></td></tr>    <tr><td>John</td><td><input type=’button’  class=’user_data’  value=’Delete’ /></td></tr>    <tr><td>Mike</td><td><input type=’button’ class=’user_data’  value=’Delete’  /></td></tr></table>

因为其中的数据需要相同的属性,因此我们不能使用ID选择器来筛选元素,下面我们来看看怎样使用class来过滤元素

var rows = $(“.user_data”);

 上面的代码表示选择类别为.user_data的元素,就是上面三个<input>元素,下面再看看怎样使用按钮单击删除一行.user_data

$(“.user_data”).click(function(){    $(this).parent().parent().remove();});

使用class来选择元素,这种技术很实用,所以大家一定要好好掌握。

栗子三:使用多个class选择元素

网站和一些应用程序依赖于javascript提供高度动态的客户端功能,这样的项目中,我们就可以使用大量的class和ID来选择元素。

假设我们有一个列表的用户记录,需要在客户端过滤基于角色。 我们可以定义CSS类角色简化过滤过程。 在这种情况下,考虑下面的代码片段。

<ul>    <li class=’role-developer role-designer’ >Mark</li><li class=’role-developer ’ >Simon</li><li class=’role-developer role-manager’ >Kevin</li></ul>

假设用户需要开发者和设计师,在这种情况下,我们就可以使用多个class类,如下面的代码所示。

var selected_users = $('.role-developer.role-designer');

我们可以根据需要,选择任意数量不同的class,每个class名之间不能有空格,不然代码表达的语义就发生了变化。如果这样写的话

var selected_users = $('.role-developer .role-designer');

上面这串代码表示只选择了.role-developer内部的.role-designer元素,所以,选择多个类的时候中间千万不能加空格。

栗子四:使用数据属性data-attribute来选择元素

HTML5 引入自定义数据属性,我们可以定义数据相关的HTML元素。 这些数据属性有一定的约定和被认为是私人数据。 现在我们可以存储数据相关的任何元素使用数据属性,而不是让一些AJAX请求到服务器。 让我们看看我们如何使用数据属性来代替CSS类选择元素实现栗子2

$( "input[data-type=’user_data’]" ).click(function(){    $(this).parent().parent().remove();});

 上面的代码就使用了数据属性来选择元素,data-type="user_data"就相当于class中的类名。

jQuery提供先进的属性选择器支持自定义数据属性,所以我们一般要有限考虑选择自定义属性。

假设我们有用户电子邮件存储自定义属性和我们想要选择用户在邮件基于某些条件。 考虑下面的代码片段使用数据属性。

<ul>    <li data-email=’mark@gmail.com’   data-type=’userdata’ >Mark</li>    <li data-email=’kevin@yahoo.com’  data-type=’userdata’ >Kevin</li>    <li data-email=’peter@gmail.uk’ data-type=’userdata’ >Peter</li></ul>

上面那几个元素都包含有data-email这个数据属性,下面我们来选择其中包含“gmail”的元素

$( "input[data-email *=’gmail’]" );

 选择元素中以“uk”结尾的email地址

$( "input[data-email $=’.uk’]" );

 选择元素中不含“@”符号

$( "input[data-email !=’@’]" );

 使用数据属性可以局部筛选元素,相比CSS选择更加灵活。

使用数据属性来选择元素,有一下几种方法,用上面那个栗子来说明

[data-email = 'mark@gmail.com']    <!--选择数据属性为“mark@gmail.com”的元素[data-email != 'mark@gmail.com']   <!--选择数据属性不为“mark@gmail.com”的元素[data-email ^='m']                           <!--选择数据属性以“m“开始的元素[data-email $= '.com']                      <!--选择数据属性以“.com”结尾的元素[data-email *='@']                           <!--选择数据属性包含“@”的元素

栗子五:使用多数据属性来选择

和例子三里的方式类似,这里使用多数据属性来选择:

$( "input[data-type=’userdata’][data-email !=’@’]" );

结尾:

本文的目的是向初学者介绍ID、Class、数据属性(data-)三者对于jQuery选择元素分别的作用。下面我们再来总计一下:

1.文档中特定的唯一元素使用ID来选择;

2.选择多个元素使用class或者数据属性,而不能使用ID

3.区分你的class定义的是样式还是功能

4.在场景复杂的项目中尽量使用数据属性来选择元素


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询