1.Radio
$("#Radio1:checked").val()--根据Id获取值$("input[name=rdoSex]:checked").val()--根据name获取值$("#Radio1").is(":checked")--根据id判断是否选中
2.table表格样式设置
$("#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 | 匹配给定的类名 | 集合元素 | $(“.”) |
E | 匹配给定的标签名 | 集合元素 | $(“div”) |
* | 匹配所有元素 | 集合元素 | $(“*’) |
E, .class, E… | 匹配给定的集合 | 集合元素 | $(“span, .ti”) |
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)处理一维数组
var arr1 = ["a", "b", "c"]; $.each(arr1, function (i, val) { alert(i);//0 1 2 alert(val);//a b c });
2)处理二维数组
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
});
对此二位数组的处理稍作变更之后 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,2alert(val)将输出为a,aa,aaa,b,bb,bbb,c,cc,ccc
3)each处理json数据,这个each就有更厉害了,能循环每一个属性
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元素
$.each("元素集合", function (index, ele) {index:从0开始的索引ele:$(ele)表示当前对象})