初窥JQuery(一)jquery选择符必备知识点

139 阅读 0 评论 92 点赞

我是靠谱客的博主雪白猫咪，最近开发中收集的这篇文章主要介绍初窥JQuery(一)jquery选择符必备知识点，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本章内容根据本人在开发中常用到的选择符作为例子来进行讲解，如有更多常用的简单的例子可回复提供，参与讨论，一起学习研究，首先我们从常用的CSS选择符开始。

CSS选择符包括通配选择符、ID选择符、属性选择符、包含选择符、类选择符等，他们的基本格式为：

　　　　通配选择符：$("#ID *") 表示该元素下的所有元素。

　　　　ID选择符：$("#ID") 表示获得指定ID的元素。

　　　　属性选择符：$("input[type=text]") 表示type属性为text的所有input元素。

　　　　包含选择符：$("ul li a") 表示ul元素下所有的li元素里的所有a元素。

　　　　类选择符：$(".Class") 表示所有引用Class样式的元素。

当然这些选择符是可以配合使用的比如说：$("#ID input[type=text]")，这种写法表示指定ID元素下的type属性为text的所有input元素。在JQuery中有些细微的改动都是非常有趣的，比如$("ul li").addClass("Class")和$("ul > li").addClass("Class")，他们显示出来的效果是不同的，第一种是将ul下的所有li元素添加样式，第二种是将ul下的第一个li元素添加样式，具体更多的使用方法可以自行测试。

　　XPath选择符(自1.3版本后已经不支持，但也可了解下)所涵盖的内容不多，他们的基本格式为：

　　　　$("[@title]") 表示选择所有元素内属性带有title的元素。

　　　　$("[@title^=t]") 表示所有属性title值是以t为开头的元素。

　　　　$("[@title$=t]") 表示所有属性title值是以t为结尾的元素。
　　　 $("[@title*=t]") 表示所有属性title值是包含t的元素。

XPath选择符和CSS选择符一样，也可以配合使用，可以多个XPath选择符一起使用，也可以和CSS选择符一起使用，所以想要达到你想要的要求用JQuery方法是有很多种的。

　　自定义选择符是选择以一个冒号(：)开头的一种选择符，说到自定义选择符，那就不说到我们经常用到:gt()、:eq()、:odd、:even，这些是我们最常用到的，比如:odd和:even这两个我们通常用他来做有条纹样式的表格，使用方法相当简单，如 $("#table tr:odd").addClass("odd")和$("#table tr:even").addClass("even")只要简单的使用两行代码就可以制作出我们想要的条纹样式。

　　当然在实际开发中我们一般会使用选择符配合DOM遍历方法来进行操作，如：

　　　　 $("#table td:contains('Window窗口')").parent().find("td:gt(0)").addClass("highlight")

　　这句代码表示取得'Window窗口'单元格，再取得他的父级元素，然后找到该元素中包含的所有编号大于0的单元格。当然有些方法是可以简化的，在这里我只是为了表示JQuery的连缀效果，这种格式也是不推荐的，我本人一般是这样书写的：

　　　　 $("#table td:contains('Window窗口')")
.parent()　　　　//获取父级
.find("td")　　　//找到td元素
.not(":contains('Window窗口')") 　　//不是window窗口的元素
.addClass("highlight");　　//添加样式

将他们分开，后面标明，以便于增强可读性。

下面我提供几个在实际开发最常用的代码（由于实在太晚，扛不住了！）：

　　　　 $("input[type='text']").val(''); //清空所有文本框
$("#text input:text").val('');//清空text元素下所有文本框

　　　　//获取选中的所有CheckBox的值

　　　　 $("input:checkbox:checked").each(function() {
alert($(this).val());
});

　　　　 $("select option:selected").val()//获取选中的下拉框的值

　　　　 $("select option:selected").text()//获取选中的下拉框的文本

本人对于JQuery选择符的理解到此为止，仅供参考，欢迎感兴趣的朋友参与讨论。未完待续........

demo打包下载