jQuery选择器
2013-01-26 16:57
351 查看
<script language="javascript"> $("#b").click(function(){ /*基本选择器*/ //1、选取id=mydiv的元素 $("#mydiv"); //2、选取所有div标签元素 $("div"); //3、选取CSS样式为class="mini"的元素 $(".mini"); //4、选取所有元素 $("*"); //5、选取id=mydiv和class="mimi"的元素 $("#mydiv,.mini"); /*层次选择器*/ //选取body内所有的div标签 $("body div"); //选取body内的子div元素 $("body > div"); //选取id=mydiv的下一个div元素 $("#mydiv + div"); //选取id=mydiv的元素后面的所有div兄弟元素 $("#mydiv ~ div"); //选取与id=mydiv元素同辈的所有元素 $("#mydiv").siblings(); //选取与id=mydiv元素同辈的所有input兄弟元素 $("#mydiv").siblings("input"); /*过滤选择器,以“:”为标志*/ /*基础过滤选择器*/ //选取第一个div、 $("div:first"); $("div:eq(0)"); //选取最后一个div $("div:last"); //选取class不为mini的所有div $("div:not(.mini)"); //选取索引值为偶数的div,索引值从0开始 $("div:even"); //选取索引值为奇数的div $("div:odd"); //选取索引值大于3的div $("div:gt(3)"); //选取索引值等于3的div $("div:eq(3)"); //选取索引值小于3的div $("div:lt(3)"); //选取所有的标题元素,诸如h1,h2,h3等 $(":header"); //选取当前正在执行动画的所有元素 $(":animated"); /*内容过滤选择器,主要体现在它所包含的子元素和文本内容上*/ //选取含有文本“di”的div元素,查找被标签围起来的文本内容 $("div:contains('di')"); //选取不包含子元素或者文本元素的div空元素 $("div:empty"); //选取含有class为mini元素的div,记:不包括子元素 $("div:has(.mini)"); //选取含有子元素或者文本元素的idv $("div:parent"); //选取不含有文本“di”的div元素 $("div:not(:contains('di'))"); }); /*可见度过滤选择器 意思就是input元素的type属性为“hidden”或者CSS中display:none的元素都会被匹配到*/ //选取所有可见的div $("div:visible"); //选取所有不可见的div,并用jquery中的show()方法将他们显示出来 $("div:hidden"); $("div:hidden").show(); //选取所有的文本隐藏域,返回的是一个数组,并遍历 $("input:hidden"); /*使用each(function(index,domEle))函数遍历, index:遍历的对象的索引值 domEle:遍历的对象 例如有如下文本隐藏与: <input type="hidden" value="hidden_1"/> <input type="hidden" value="hidden_2"/> <input type="hidden" value="hidden_3"/> <p>这是p1</p> <p>这是p2</p> <p>这是p3</p> 方式一遍历: var $hid=$("input:hidden"); $hid.each(function(index,domEle){ //DOM方式,this==domEle alert(this.value); alert(domEle.value); //jquery方式 alert($(this).val()); alert($(domEle).val()); alert(index);//弹出0 1 2 }); 方式二遍历:全局函数遍历jQuery.each(object,[callback]); var $p=$("p"); $.each($p,function(index,domEle){ alert($(domEle).html()); //alert($(this).text()); }); */ /*属性过滤选择器*/ //选取含有属性title的div $("div[title]"); //选取属性title值等于test的div $("div[title='test']"); //选取属性title值不等于test的div(没有属性title的也被选中) $("div[title!='test']"); //选取含有属性title,但属性title值不等于test的div $("div[title][title!='test']"); //选取属性title以te开头的div $("div[title^='te']"); //选取属性title以est结尾的div $("div[title$='est']"); //选取属性title值含有es的div $("div[title*='es']"); //选取有属性id的div,然后在结果中选取属性title值含有es的div $("div[id][title*='es']"); /*子元素过滤选择器*/ //选取每个class为one的div父元素下的第二个子元素 $("div[class=one] > :nth-child(2)");//索引值从1开始 //选取每个class为one的div父元素下的第一个子元素 $("div[class=one] > :first-child"); //选取每个class为one的div父元素下的最后一个元素 $("div[class=one] > :last-child"); //如果class为one的div父元素下的仅仅只有一个子元素,那么选取选取这个子元素 $("div[class=one] > :only-child"); /*表单对象属性过滤选择器*/ //使用jQuery的val()方法改变表单内可用的input元素的值 //为每一个文本框设置值 $("input:enabled").each(function(index,domEle){ $(this).val("dddddd"); }); //整体为文本框设置统一的值 $("input:enabled").val("dddddd"); //使用jQuery的val()方法改变表单内不可用的input元素的值 $("input:disabled").val("dddddd"); //使用jQuery的length属性获取多选框中选中的个数 $("input[type=checkbox]:checked").length; //使用jQuery的text()获取下拉选框中选中的内容 $.each($("select option:selected"),function(index,domEle){ alert($(this).text()); }); /*表单选择器*/ $(":input"); $(":text"); $(":password"); $(":radio"); $(":checkbox"); $(":submit"); $(":image"); $(":reset"); $(":button"); $(":file"); $(":hidden"); </script>