jQuery的元素选取:
描述 示例 返回
根据给定的id匹配一个元素 $(#test)选取id为test的元素 单个元素
根据给定的类名匹配元素 $(".test")选取所有class为test的元素 集合元素
根据给定的元素名匹配元素 $("p")选取所有的<p>元素 集合元素
匹配所有元素 $("*")选取所有的元素 集合元素
以下是根据id匹配元素的一个例子
<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//下面存在两个同id名的元素,由于根据id名只能返回一个元素,所以jQuery会默认取一个
alert($("#test1").html());
});
</script>
</head>
<body>
<a id="test1" href="http://www.google.com">google</a>
<a id="test1" href="http://www.yahoo.com">yahoo</a>
</body>
</html>
以下是根据类名匹配元素的例子
<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//会弹出2
alert($(".test").length);
});
</script>
</head>
<body>
<a class="test" href="http://www.google.com">google</a>
<a class="test" href="http://www.yahoo.com">yahoo</a>
</body>
</html>
层次选择器:以下是四个层次选择器
选择器:$("ancestor descendant")
描述:选取ancestor元素里的所有descendant(后代)元素
返回:集合元素
示例:$("div span")选取<div>里的所有的<span>元素
选择器:$("parent>child")
描述:选取parent元素下的child(子)元素,与$("ancestor descendant")有区别,$("ancestor descendant")取
的是所有后代元素
返回:集合元素
示例:$("div>span")选取<div>元素下元素名是<span>的子元素
选择器:$('prev+next')
描述:选取紧接在prev元素后的next元素
返回:集合元素
示例:$('.one+div')选取class为one的下一个<div>元素
注意:此选择器可以用next方法代替,如$('.one').next('div')
选择器:$('prev~siblings')
描述:选取prev元素之后的所有siblings(兄弟)元素
返回:集合元素
示例:$('#two~div')选取id为two的元素后面的所有<div>兄弟元素,即平级的元素
注意:此选择器可以用nextAll方法代替,如$('#two').nextAll('div')
此外还有一个siblings'方法,它将返回所有前后的兄弟节点,如$('#two').nextAll('div'),上面的方法只返回之
后的兄弟节点。
过滤选择器:
分享到:
相关推荐
本文实例讲述了jQuery中:focus选择器用法。分享给大家供大家参考。具体分析如下: 此选择器能够匹配当前获取焦点的元素。 语法结构: 代码如下:$(“:focus”) :focus选择器一般需要和其他选择器配合使用,例如和类...
Jquery选择器; 基本选择器;jQuery选择器;jQuery选择器; 层级选择器;jQuery选择器;;; 筛选选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器; 排他思想;jQuery选择器;jQuery...
Jquery选择器,Jquery选择器Jquery选择器Jquery选择器Jquery选择器Jquery选择器
jQuery时间选择器点击选择小时分钟代码
日期选择器:jquery datepicker的使用 日期选择器:jquery datepicker的使用 日期选择器:jquery datepicker的使用
本文实例讲述了jQuery中:animated选择器用法。分享给大家供大家参考。具体分析如下: 此选择器匹配所有正在执行动画效果的元素。 可以使用animate()方法创建自定义动画。 语法结构: 代码如下:$(“:animated”) 此...
教程结构:1:强悍的选择器,2:DOM操作,3:事件和动画,4:Ajax应用。5:插件。 本教程如有不正确之处,请各位大虾多多指正。 本压缩包包含jquery最新的库,jquery文档,jquery学习文档(原创),jquery案例,...
本文实例讲述了jQuery中:input选择器用法。分享给大家供大家参考。具体分析如下: 此选择器匹配所有的input元素。例如:<input type=”text” />等等 语法结构: 代码如下:$(“:input”) 实例代码: 代码如下:...
本文实例讲述了jQuery中:lt选择器用法。分享给大家供大家参考。具体分析如下: 此选择器匹配所有小于给定索引值的元素。 索引值最小是从0开始的。 语法结构: 代码如下:$(“:lt(index)”) 此选择器一般也要和其他...
jquery 城市选择器代码
jQuery插件之三:日期选择器DatePicker jQuery插件之三:日期选择器DatePicker jQuery插件之三:日期选择器DatePicker
本文实例讲述了jQuery中:button选择器用法。分享给大家供大家参考。具体分析如下: 此选择器能够选取所有按钮。 语法结构: 代码如下:$(“:button”) 实例代码: 代码如下: <!DOCTYPE html> <html> <...
jQuery date_input日期选择器 发一JQUERY插件jQuery date_input,是日期选择器..... 这个选择器是我已经修改过的,官方下载的选择界面是英文的,然后我把它又汉化了一下..根据中国国情,又修改了日期格式!! 效果图演示...
jquery的核心在于他的标签的选择器,打开jquery的文档你会发现,里面的选择器占据了很大的一部分的比例,
1:教程概述 2:配置站点 3:jquery缩写 4:基本选择器1 5:基本选择器2 6:基本选择器3 7:基本选择器4 8:层次选择器1 9:层次选择器2 10:层次选择器3 11:层次选择器4 12:过滤选择器1 13:过滤选择器2 14:过滤选择器3 15:...
jquery 选择器 描述
本文实例讲述了jQuery中:hidden选择器用法。分享给大家供大家参考。具体分析如下: 此选择器能够匹配所有不可见元素,或者type为hidden的元素。 语法结构: 代码如下:$(“:hidden”) 此选择器一般也要和其他选择器...
ColorPicker基于强大的jQuery,使用方便、配置简单,同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中,兼容各大浏览器。
本文实例讲述了jQuery中:disabled选择器用法。分享给大家供大家参考。具体分析如下: 此选择器能够选取所有禁用的表单元素。 语法结构: 代码如下:$(“:disabled”) 此选择器一般也要和其他选择器配合使用,比如类...