您的位置:首页 > Web前端 > JQuery

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: