Jquery权威指南

1.Radio

<input id="Radio1" name="rdoSex" type="radio" value="男" />
$("#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 匹配给定的类名 集合元素 $(“.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)处理一维数组

 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,2
alert(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)表示当前对象
})
原文地址:https://www.cnblogs.com/cnki/p/5315211.html