在学习jQuery前务必要有xhtml、css、xml、Javascript的基础,否则很难进行下去。本文参考了《Learning jQuery》和《jQuery 1.3中文参考》。强烈建议去下载这份手册,弄得不错,很方便。最近我就稍微看一下《Learning jQuery》,然后参照着《jQuery 1.3中文参考》做了几个实例,很轻松,jQuery比想象中的简单,用起来很顺手。下面进入正题。
jQuery中基本的操作就是选择文档中的某一部分,这是通过$()函数完成的。$()是jQuery的工厂函数,又称选择器。$()支持css、xpath的选择符,同时还有自定义选择符。$()函数会消除使用for遍历一组元素的需求,因为放到圆括号中的任何元素都将自动执行循环遍历,然后存在一个jQuery对象中。例如:
基本
$(‘p’) 会取得文档中的所有段落。
$(‘#id’) 会取得文档中对应id的一个元素。
$(‘.class’) 会取得文档中带有class类的所有元素。
$('*') 取得所有元素
层级
$(‘form input’) 取得form下的所有后代是input的元素
$(‘#play > li’) 选择id为play的元素下的子元素是li的元素
$(‘#play + input) 选择紧接在id为play的元素后的所有input元素
$(‘#play ~ input’) 选择紧接在id为play的元素后的相邻的input元素
自定义选择符
基本
$(‘tr:first’) 取得第一个tr元素
$(‘tr:last’) 取得最后一个tr元素
$(‘#play li:not(.abc)’) 选择id为play的后代元素中所有的列表项li,并且没有abc类
$(‘tr:even’) 匹配索引为偶数的所有tr元素
$(‘tr:odd’) 匹配索引为奇数的所有tr元素
$(‘tr:eq(1)’) 取得第二个tr元素(数组是从0开始的)
$(‘tr:gt(0)’) 取得索引比0大的所有元素
$(‘tr:lt(2)’) 取得索引比2小的所有元素
$(‘tr:header’) 取得如h1、h2、h3之类的标题所有元素
$(‘:animated’) 取得正在执行动画效果的所有元素
$(‘tr:hidden’) 取得所有隐藏的元素(css中”display:none”、表单中type=”hidden”)
$(‘tr:visible’) 取得所有可见的元素
内容
具体查询api,不再赘述
:contains :empty :has :parent
子元素
:nth-child :first-child :last-child :only-child
表单
:input :text :password :radio :checkbox :submit :image :reset :button :file :hidden
表单对象的属性
:enabled :disabled :checked :selected
属性
$(a[title]’)选择带有title属性的链接(1.3中title前不再需要加@)
$(“input[name=’newsletter’]”).attr(“checked”, true) 匹配给定的属性是某个特定值的元素
$(“input[name!=’newsletter’]”).attr(“checked”, true) 匹配所有不含有指定的属性,或者属性不等于特定值的元素。
$(“input[name^=’news’]”) 匹配给定的属性是以某些值开始的元素
$(“input[name$=’letter’]”) 匹配给定的属性是以某些值结尾的元素
$(“input[name*=’man’]”) 匹配给定的属性是以包含某些值的元素
$(“input[id][name$=’man’]”) 复合属性选择器,需要同时满足多个条件时使用。