2009.11.17——jquery(2)

本文详细介绍了jQuery中的选择器使用方法,包括基本选择器、位置选择器、自定义选择器等,帮助读者掌握如何高效地选取网页元素。
2009.11.17——jquery(2)
2.1 jquery选择器
$("p a") 获取在<p>元素内的一组<a>元素
$()函数是jQuery()函数的别名 返回特别的JavaScript对象,包含与选择器相匹配的DOM元素数组

$("div.notLongForThisWorld").fadeOut();//让带有css类notLongForThisWorld的所有<div>元素呈现淡出效果

jQuery命令引用这类方法的特征是,当完成一个操作(比如说淡出操作)后,它们返回相同的一组元素,提供给下一个操作。比如我们在淡出后再增加一个css类
$("div.notLongForThisWorld").fadeOut().addClass("removed");
可以无限的链接下去,因为每一册函数都作用在最初的选择器相匹配的全部元素上了,没有必要循环遍历元素数组。

$("#ele").html("Hello World"); //id选择器 只有一个元素与选择器匹配
<==>
$("#ele")[0].innerHTML = "Hello World";

jQuery的一些选择器
$("p:even");//所有偶数的<p>元素
$("tr:nth-child(1)");//每个表格的第一行
$("table tr:nth-child(even)");//每个表格的偶数行

2.2
一些基本的选择器:
a----所有的连接元素
#sid----id为sid的元素
.ss----css类是ss的元素
a#sid.ss----id为sid,拥有css类ss的链接元素
p a.ss----拥有css类ss,在<p>元素内部声明的链接元素 中间那个空格是后代选择器
**********
子选择器
**********

p > a
只匹配作为<p>元素的!直接子节点!的链接

***********
特性选择器
***********

a[href^=http://]
匹配包含以http://开头的href值的所有链接 ^脱节符号 匹配出现在某个值的开头
a[href$=.pdf]
匹配以.pdf结尾的所有链接
a[href*=iteye.com]
匹配包含iteye.com的链接
form[method]
匹配拥有method特性的<form>元素
input[type=text]
匹配type特性值为text的<input>元素 其实就是单行的文本字段

************
容器选择器
************

li:has(a) 匹配包含<a>元素的所有<li>元素

li a 匹配<li>元素里的所有<a>元素

2.3
*************
通过位置选择
*************
a:first/a:last
匹配页面上的第一个/最后一个<a>元素
p:odd
匹配序数为奇数的<p>元素
p:even
匹配序数为偶数的<p>元素 //注意:这个序数是从0开始的
li:last-child/li:first-child
匹配父元素的最后一个li子节点/第一个li子节点
td:nth-child(n)
第n个匹配元素,n从1开始

2.4
**************
自定义选择器
**************

:animated 选择当前处于动态控制之下的元素(动画和特效)
:button 选择任何按钮(<==> input[type=submit/reset/button]])
:checkbox 选择复选框按钮(<==> input[type=checkbox])
:checked 选择已被选中的复选框和单选按钮
:contains(foo)选择包含文本foo的元素
:disabled 选择界面上已经禁用的表单元素
:enabled 选择界面上已经启用的表单元素
:file 选择所有文件元素(<==> input[type=file])
:header 选择标题元素(<h1>...<h6>)
:hidden 选择隐藏元素
:image 选择表单图像元素(<==>input[type=image])
:input 选择表单元素(<input>,<select>,<textarea>,<button>)
:not(filter) 对指定的筛选器取反
:parent 选择拥有后代节点的元素,排除空元素
:password 选择口令元素(<==> input[type=password])
:radio 选择单选按钮元素(<==> input[type=radio])
:reset 选择复位按钮元素(<==> input[type=reset]或botton[type=reset])
:selected 选择以选中的选项元素
:submit 选择提交按钮元素(button[type=submit]或input[type=submit])
:text 选择文本字段元素(input[type=text])
:visible 选择可见元素

**********
not筛选器
**********
input:not(:checkbox)
匹配所有不是checkbox的<input>元素
注意:1.input与:not之间不能有空格
2.not后面的括号里面只能跟筛选选择器,即以:和[开头的选择器
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值