网站制作学习网JS脚本→正文:jquery选择器2
字体:

jquery选择器2

JS脚本 2010/8/24 8:38:37  点击:不统计

原载于:文章来源:www.forasp.cn网站制作学习

继续jquery学习,第四课jquery选择器2,通过选择器根据不同条件选择出不同的元素或者元素数组。
公共代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script language="javascript" src="jquery-1.4.2.min.js"></script><!--引入jquery框架,目前jquery-1.4.2.min.js是最高版本-->
<script language="javascript">$(function(){
<!--jquery文档处理代码区-->
});</script>
</head>
<body>
<div id="foraspcn">
<p>网站制作学习网1</p>
<lable><p>网站制作学习网</p></lable>
</div>
<p class="wwwforaspcn">jquery第三课1,jquery选择器</p>
<input name="apple" />
<input name="flower" checked="checked" />
<div>http://www.forasp.cn/</div>
</body>
<html>
5.属性选择符
(1)[attribute];返回包含attribute属性的元素。
$("div[id]");表示拥有id属性的div。结果:<div id="foraspcn"><p>网站制作学习网1</p><lable><p>网站制作学习网</p></lable></div>
(2)[attribute=value];返回包含attribute属性并且属性值等于value的元素;
$("p[id='wwwforaspcn']"); 结果:<p class="wwwforaspcn">jquery第三课1,jquery选择器</p>
(3)[attribute!=value];返回包含attribute属性并且不等于value的元素
$("div[id!='foraspcn']").text();结果:<div>http://www.forasp.cn/</div>
(4)[attribute^=value];返回包含attribute属性并且开始值等于value的元素
$("p[id='wwwforasp']"); 结果:<p class="wwwforaspcn">jquery第三课1,jquery选择器</p>
(5)[attribute$=value];返回包含attribute属性并且结束值等于value的元素
$("p[id$='cn']"); 结果:<p class="wwwforaspcn">jquery第三课1,jquery选择器</p>
(6)[attribute*=value];返回包含attribute属性并且值包含value的元素
$("p[id$='cn']"); 结果:<p class="wwwforaspcn">jquery第三课1,jquery选择器</p>原文章%77w%77%2Ef%6F%72%61%73%70%2E%63n
(7)[attribute$=value][attribute$=value][attribute$=value]...;返回多重选择下包含attribute属性并且结束值等于value的元素
$("p[id$='cn'][id^='wwwforasp']"); 结果:<p class="wwwforaspcn">jquery第三课1,jquery选择器</p>
6 子元素选择器
(1):nth-child(condition);查找元素中符合condition的所有元素,condition可以有Event奇数行,odd偶数行,2n2的倍数行,3n+1 3的倍数加1行等的。
$("div p:nth-child(3n)");表示在所有div元素下的所有3的倍数的p元素
(2):first-child;查找父级目录下的所有子级目录下的第一个元素
$("div p:first-child");表示查找所有div下的第一个p元素。
(3):last-child;查找所有父级目录下所有最后一个元素
$("div p:last-child");表示查找所有div下的最后一个p元素。
(4):only-child;查询所有父级目录下的所有只有一个子元素的子元素。
$("div p:only-child");d所有div只含有一个p的所有p元素。
7。表单选择器。
(1):input; 获取所有的input的标签元素
$(":input");获取所有的input标签元素
(2):text;获取所有input type=text的标签元素
$(":text"); 获取所有input等于text元素。
(3):checkbox; 获取所有input type=checkbox的标签元素;
$(":checkbox"); 获取所有的type等于checkbox的复选框标签元素。
(4):submit; 获取所有input type=submit的元素
$(":submit"); 获取所有type等于submit的提交标签元素。
(5):image; 获取所有input type= image 的标签元素。
$("image"); 获取了所有type=image的标签元素。
(6):radio; 获取所有input type=radio的单选标签元素;
$(":radio"); 获取所有的type等于radio的复选框标签元素。
(7):reset; 获取所有input type=reset的重置标签元素;
$(":reset"); 获取所有的type等于reset的重置标签元素。
(8):button; 获取所有input type=button的按钮标签元素;
$(":reset"); 获取所有的type等于reset的按钮标签元素
(9):file; 获取所有input type=file的文件域标签元素。
$(":file"); 获取所有input type=file的文件元素。
(10):hidden; 匹配所有不可见元素,或者type为hidden的元素
$(":hidden");匹配所有不可见元素,或者type为hidden的元素
8.表单对象属性。
(1):enable; 获取所有的可以使用的标签元素。
$(":enable");获取所有的可以使用的标签元素
(2):disable; 获取所有不可用的标签元素。
$(":disable");获取所有的不可用的标签元素。
(3):checked; 获取所有选中的radio元素。
$(":checked");获取所有已经选中的radio元素。
(4):selected; 匹配所有选中的option元素
$("select option:selected");获取所有select选中的option元素

这节课就到这里。以上讲解了所有的jquery选择器


http://%77%77%77%2E%66%6F%72%61%73%70%2E%63%6E
<%77w%77%2Ef%6F%72p%73%70%2Ec%6E>

·上一篇:jquery选择器1 >>    ·下一篇:jQuery操作Frame(iframe)网页框架 >>
推荐文章
最新文章