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

jquery选择器1

JS脚本 2010/8/22 16:10:44  点击:不统计


继续jquery学习,第三课jquery选择器1,通过选择器根据不同条件选择出不同的元素或者元素数组。
公共代码:
<!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"><!--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>
1.基础选择符
(1)$("#idname");获取唯一ID 元素对象。这个针对于ID属性。获取DI为idname的唯一元素
例如:$("#foraspcn"); 获取结果就是id为foraspcn的div元素
(2)$("element"); 获取element元素数组,element可以任意标签名
举例:$("p");将获取p元素的所有集合。结果:<p>网站制作学习网</p><p class="wwwforaspcn">jquery第三课,jquery选择器</p>
(3)$(".classname");获取所有类名为classname的元素。
举例:$(".wwwforaspcn");获取所有类名(class)为wwwforaspcn的元素;结果:<p class="wwwforaspcn">jquery第三课,jquery选择器</p>
(4)$("*"); 获取页面所有元素。这个就不在多解释了
(5)$("selector,selector2,..");多个选择器,可以选择div,p,classname 等全部元素,用","隔开
(6).first(); 获取元素数组中第一个元素
举例$("p").first();即获取<p>网站制作学习网</p>
(7).last();获取元素数组中最后一个元素
举例:举例$("p").last();即获取<p class="wwwforaspcn">jquery第三课,jquery选择器</p>
(8):not(); 选择器$("element:not(condetion)"); 选出element中去除不匹配condetion的元素;
$("div:not(:#foraspcn)");结果;<div>http://www.forasp.cn/</div>
(9):even; 匹配所有索引值为偶数的元素,从 0 开始计数,获取的为奇数行
$("p:even");获取的是第一个p,第三个p等奇数段
(10):odd; 匹配所有索引值为奇数的元素,从 1 开始计数,获取的为偶数行
$("p:old");获取的是第二个p,第四个p等奇数段
(11):eq(index);:gt(index);It(index); index表示索引,其中eq表示等于index的元素,gt表示大于index的元素不包括自己,lt表示小于自己的index的元素。
举例$("p:eq(0)");获取第一个p元素, $("p:gt(0)");获取第二个以及以后的元素,$("p:lt(1)");获取第一个p元素,即索引小于1的元素。
(12):header; 匹配如 h1, h2, h3之类的标题元素;
$("p:header");获取所有段落中的h1-h6的元素。
(13):animated;返回正在执行动画的元素数组。
$("div:not(:animated)");表示没有执行动画的div元素,$("div:animated") 表示正在执行动画的元素。
2.层级选择符。原载于:http://www.forasp.cn/
(1)$("father son"); 获取father元素下的所有son元素。
$("body p");将获取body中的所有p院所
(2)$("father > son"); 仅在father元素子元素中的所有son元素,不包括father平级的son元素,父级的元素和孙子级元素。仅是子元素。
$("div > p");仅指div子元素的所有p :<p>网站制作学习网1</p>
(3)$("element + next"); 表示所有element紧接着的next的元素。同级元素。不能有隔断。
$("p + input"); 结果<input name="apple" />
(4)$("element ~ slibings"); 表示所有elemnt元素平级的slibings元素
$("div ~ p");结果<p class="wwwforaspcn">jquery第三课1,jquery选择器</p>
3.内容选择符
(1):contians('text');表示获取包含有text文本的所有元素
$("p:contains('网站制作学习网')"); 表示所有含有"网站制作学习网"内容的p元素。
(2):empty;表示所有不包含子元素和文本的空元素
$("p:empty");获取所有<p></p>这样的元素。
(3):has(element); 表示包含element的元素。
$("div:has(p)");表示所有含所有p的div元素。<div id="foraspcn"><p>网站制作学习网1</p><lable><p>网站制作学习网</p></lable></div>
(4):parent; 与:empty;想对,表示含有任何子元素或者文本内容的元素。
4。可见性选择符
(1):hidden; 表示获取所有不可见的元素。
$("input:hidden");表示获取所有type=hidden的元素。
$("div:hidden");表示获取所有div style="display:none";的元素。
(2):visible;表示获取所有可见的元素,与hidden想对。

继续jquery选择符,请看第四节jquery选择器2

·上一篇:jquery数据缓存 >>    ·下一篇:jQuery操作Frame(iframe)网页框架 >>
推荐文章
最新文章