20151227:Jquery元素选取及取值<转>
一:常用的选择器: $("#id") //通过ID //返回单个元素 $("div") //通过标签 $(".cls") //类选择器 $("div.cls") //标签加类选择器 $("*") //选取所有的元素 $(this) //自己 $("div,p,a") //取得所有标签的集合 $("div p") //div下的所有<p>,不管几层 [子孙] $("div>p") //获取最直接的p [儿子] $("div+p") //兄弟节点中下面的第一个元素 [弟弟] //相当于.next(); $("div~p") //层的所有下面的兄弟节点 //相当于.nextAll(); 二:常用的过滤器: :eq(): 索引//第1个元素 $('p:eq(0)') :not():不满足"选择器"的元素 :first:第一个 :last:最后一个 :animated:所有正在执行动画的元素 :contains(text):选择含有文本text的元素 //有没有引号一样效果 :empty:选择不包含元素或者文本的空元素 //<div></div>测试通过,换行应该也算字符,不能被选择 (浏览器的问题,CSS的问题) :has(selector):选择包含匹配元素的元素 :parent:选择含有子元素或文本的元素 :hidden:选取所有不可见元素 $(":hidden") //包括display:none的元素 :visible:选取所有可见元素 $("div:visible") :checked:选中的 :selecetd:选中的 [id] :选取拥有id属性的元素 //("div[style]").hide(2000);测试没通过//("div[id]").hide(2000);测试通过 [id=text]:选取id为text的元素 [id!=text]:选取id不为text的元素 [id^=t]:选取id以t开头的元素 [id$=t]:选取id以t结束的元素 [id*=text]:选取id含有text的元素 三:选取元素: 关于Dom对象和Jquery对象:后者是对前者的封装 $("#sel"):取id为sel的Jquery对象,实际返回的是个数组。 $("#sel")[0]:是取id为sel的Jquery对象里面封装的DOM对象,也就是该元素本身。 $(".class"):是取class为class的Jquery对象的集合 四:获得select的选中值: $("#sel").val():获得select的选中项值。 五:遍历class名相同的checkbox,获得多个checkbox选中值: var ck = $(".check"); for(var i=0; i <ck.length; i++) { if(ck.eq(i)[0].checked==true) { alert(ck.eq(i).val()); } } 六:遍历class名相同的radiobutton,获得多个radiobutton选中值: var ck = $(".radio"); for(var i=0; i <ck.length; i++) { if(ck.eq(i)[0].checked==true) { alert(ck.eq(i).val()); } }
本文转载自李老师