Jquery权威指南

1.Radio

?

1 2 3 4

<input id="Radio1" name="rdoSex" type="radio" value="男" /> $("#Radio1:checked").val()--根据Id获取值 $("input[name=rdoSex]:checked").val()--根据name获取值 $("#Radio1").is(":checked")--根据id判断是否选中

2.table表格样式设置

?

1 2	$("#tableId tr:nth-child(even)").addClass("样式")--控制偶数行样式 $("#tableId tr:nth-child(odd)").addClass("样式")--控制奇数行样式

:nth-child(even) 的意思就是从第1开始的偶数元素，:even的意思是指从第0开始的偶数元素
$('table tr:nth-child(even)').css('background-color','red');

$('table tr:even').css('background-color','red');

3.Jquery选择器

1）基本选择器

选择器	描 述	返 回	示 例
#id	匹配给定的id	单个元素	$(“header”)
.class	匹配给定的类名	集合元素	$(“.test”)
E	匹配给定的标签名	集合元素	$(“div”)
*	匹配所有元素	集合元素	$(“*’)
E, .class, E…	匹配给定的集合	集合元素	$(“span, .tiPS”)

2）层次选择器

选择器	描 述	返 回	示 例
$(“ancestor descendant”)	匹配ancestor里的所有 descendant(后代)元素	集合元素	$(“body div”)
$(“parent>child”)	匹配parent下的所有 child(子)元素	集合元素	$(“div>span”)
$(“prev+next”)	匹配紧接在prev后的 next元素	集合元素	$(“.error+span”)
$(“prev~siblings”)	匹配prev后的所有 siblings元素	集合元素	$(“span~a”)

3）过滤选择器

a）基本过滤选择器

选择器	描 述	返 回	示 例
:first	匹配第一个元素	单个元素	$(“div:first”)
:last	匹配最后一个元素	单个元素	$(“span:last”)
:even	匹配索引是偶数的元素 索引从0开始	集合元素	$(“li:even”)
: odd	匹配索引是奇数的元素 索引从0开始	集合元素	$(“li:odd”)
:eq(index)	匹配索引等于index的元 素(索引从0开始)	单个元素	$(“input:eq(2)”)
:gt(index)	匹配索引大于index的元 素(索引从0开始)	集合元素	$(“input:gt(1)”)
:lt(index)	匹配索引小于index的元 素(索引从0开始)	集合元素	$(“input:lt(5)”)
:header	匹配所有h1,h2…等 标题元素	集合元素	$(“:header”)
:animated	匹配所有正在执行 动画的元素	集合元素	$(“div:animated”)

b）内容过滤选择器

选择器	描 述	返 回	示 例
:contains(text)	匹配含有文本内容text 的元素	集合元素	$(“p:contains(今天)”)
:empty	匹配不含子元素或 文本元素的空元素	集合元素	$(“p:empty”)
:has(selector)	匹配包含selector元素 的元素	集合元素	$(“div:has(span)”)
:parent	匹配含有子元素或文本 的元素	集合元素	$(“div:parent”)

c）可见性过滤选择器

选择器	描 述	返 回	示 例
:hidden	匹配所有不可见 的元素	集合元素	$(“:hidden”)
:visible	匹配所有可见元素	集合元素	$(“:visible”)

d）属性过滤选择器

选择器	描 述	返 回	示 例
[attr]	匹配拥有此属性 的元素	集合元素	$(“img[alt]“)
[attr=value]	匹配属性值为value 的元素	集合元素	$(“a[title=test]“)
[attr!=value]	匹配属性值不等于 value的元素	集合元素	$(“a[title!=test]“)
[attr^=value]	匹配属性值以value 开头的元素	集合元素	$(“img[alt^=welcome]“)
[attr$=value]	匹配属性值以value 结尾的元素	集合元素	$(“img[alt$=last]“)
[attr*=vlaue]	匹配属性值中含有 value的元素	集合元素	$(“div[title*=test]“)
[attr1][attr2]…	通过多个属性 进行匹配	集合元素	$(“div[id][title*=test]“)

d）子元素过滤选择器

选择器	描 述	返 回	示 例
:nth-child	匹配每个父元素下的 第index个子元素 索引从1开始	集合元素	$(“div:nth-child(2)”)
:first-child	匹配每个父元素的 第一个子元素	集合元素	$(“div:first-child”)
:last-child	匹配每个父元素的 最后一个子元素	集合元素	$(“div:last-child”)
: only-child	某元素是它父元素中 的唯一的子元素 则匹配它	集合元素	$(“div:only-child”)

d）表单对象属性过滤选择器

选择器	描 述	返 回	示 例
:enabled	匹配所有可用元素	集合元素	$(“form :enabled”)
:disabled	匹配所有不可用 的元素	集合元素	$(“form :disabled”)
:checked	匹配所有被选中的元素 (含单选框，复选框)	集合元素	$(“input:checked”)
:selected	匹配所有被选中的 选项元素	集合元素	$(“select :selected”)

4.表单选择器

选择器	描 述	返 回	示 例
:enabled	匹配所有可用元素	集合元素	$(“form :enabled”)
:disabled	匹配所有不可用 的元素	集合元素	$(“form :disabled”)
:checked	匹配所有被选中的元素 (含单选框，复选框)	集合元素	$(“input:checked”)
:selected	匹配所有被选中的 选项元素	集合元素	$(“select :selected”)

5.$.each用法

1）处理一维数组

?

1 2 3 4 5

var arr1 = ["a", "b", "c"];            $.each(arr1, function (i, val) {                alert(i);//0 1 2                alert(val);//a b c            });

2）处理二维数组

?

1 2 3 4

var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]             $.each(arr, function (i, item) {                 alert(i);//0 1 2                 alert(item);//输出为a，aa，aaa，b，bb，bbb，c，cc，ccc});

?

1 2 3 4 5 6 7 8 9 10

对此二位数组的处理稍作变更之后  var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]       　　$.each(arr, function(i, item){            　　$.each(item,function(j,val){        　　　　 alert(j);         　　　　alert(val);     　}); });    alert(j)将输出为0，1，2，0，1，2，0，1，2 alert(val)将输出为a，aa，aaa，b，bb，bbb，c，cc，ccc

3）each处理json数据，这个each就有更厉害了，能循环每一个属性

?

1 2 3 4 5

var obj = { one:1, two:2, three:3};       　　each(obj, function(key, val) {            　　alert(key);         　　alert(val);       　　});

这里alert(key)将输出one two three
alert(val)将输出one，1，two，2，three,3
这边为何key不是数字而是属性呢，因为json格式内是一组无序的属性-值，既然无序，又何来数字呢。
而这个val等同于obj[key]

4）ecah处理dom元素

?

1 2 3 4

$.each("元素集合", function (index, ele) { index：从0开始的索引 ele：$(ele)表示当前对象 })