JQuery选择器【JQ笔记一】 - by kiwi

1.js
var pp = document.getElementsByTagName('p');

2.jq基本选择器
$(".class_name");
$("#id_name");
$("p");
$("span, p, input.user_name");  //多选

3.层次选择器
$("div p");     // div中所有的p
$("div > p");   // 选div下span的子元素  ??不是很懂,跟上面的效果一样
$('#one + p');  //选取clss为one的p元素下一个p标签,二者貌似必须都为相同标签,测试了的  等价与  $('#one').next('p');
$("#two~div");   //选取id为two的元素后面的所有div同辈元素 $('#two').next('div');

4.基本过滤选择器
$('div:first');    //选择第一个div
$('div:last');     // 选择最后一个div
$('input:not(.className)');  //选取class不是className的input
$('input:even');   //选择索引为偶数的input
$('input:odd');   //选择索引为奇数的input
$('input:eq(1)'); //选取索引为1的input  
$('input:gt(1)');  //选择索引大于1的input,不包括1
$('input:lt(1)');  
$(':header');        //选取所有的标题元素,h1 h2 h3 ...
$('div:animated');  //选择正在执行的动画div
$(':focus');       //选择当前获取焦点的元素

5. 内容过滤选择器
$("div:contains('测试')");            //选取含有文本“测试”的div元素
$("div:empty");                 //选择不包含子元素的div元素
$("div:has(p)");       //选择含有p元素的div元素
$("div:parent");       //选择拥有子元素的div元素

6. 可见性过滤选择器
$(":hidden");   //选择所有不可见的元素
$("div:visible");  //可见的div,及只要不是hidden就ok

7. 属性过滤选择器
$('div[id]');             //   选择拥有属性id的div
$('div[title=test]');      //   选择属性title等于test的div元素
$("div[title!=test]");     //  不等于
$("div[title^=test]");     //  选择属性title以test开头的div元素
$("div[title$=test]");     //  选择属性title以test结束的div元素
$("div[title*=test]");     //选择属性title含有test的div元素
$('div[title|=en]');     //选择属性title等于en或者以en为前缀(en-test)的元素
$('div[title~="uk"]');     //
$("div[id][title$='test']");  // 拥有属性id,并且title一test结束

8. 表单对象属性过滤选择器
$("#formName :enabled");       //选择id为fromName的表单内所有可用的元素
$("#formName :disabled");      //选择id为fromName的表单内所有bu可用的元素
$("input:checked");            //选择所有勾选上的checkbox
$("select option:selected");   //选择所有选中的option

9.表单选择器
$(":input");   //所有input 包括input textarea  selext button
$(":password");   
$(":radio");  
$(":checkbox");  
$(":submit");  
$(":image"); 
$(":reset");  
$(":button");   
$(":file");  
$(":hidden");   

 

posted @ 2013-07-17 20:48  Kiwi0921  阅读(254)  评论(0编辑  收藏  举报