jquery-选择器

最新推荐文章于 2024-06-08 19:06:47 发布

月迷津渡丶

最新推荐文章于 2024-06-08 19:06:47 发布

阅读量453

点赞数

分类专栏： Web 文章标签： jquery

Web 专栏收录该内容

145 篇文章 0 订阅

订阅专栏

jQuery选择器分为几类：

基本选择器
层次选择器
过滤选择器

简单过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
表单对象属性过滤选择器

4.表单选择器

基础选择器

选择器功能返回值
#id 根据给定的id匹配一个元素单个元素
element 根据给定的元素名匹配所有元素元素集合
.class 根据给定的类匹配元素元素集合
* 匹配所有元素元素集合
selector1,selectorN 将每一个选择器匹配到的元素合并后一起返回元素集合

选择器	功能	返回值
#id	根据给定的id匹配一个元素	单个元素
element	根据给定的元素名匹配所有元素	元素集合
.class	根据给定的类匹配元素	元素集合
*	匹配所有元素	元素集合
selector1,selectorN	将每一个选择器匹配到的元素合并后一起返回	元素集合

$(function(){ //id匹配元素
	    $("#divOne").css("display","none");
	})
	$(function(){ //元素名匹配元素
    	    $("div span").css("display","none");
	})
	$(function(){ //类匹配元素
	    $(".clsFrame .clsOne").css("display","none");
	})
	$(function(){ //匹配所有元素
	    $("*").css("display","none");
	})
	$(function(){ //合并匹配元素
	    $("#divOne,span").css("display","none");
	})

//$(document).ready(function(){}); 简写：$(function(){});

jQuery层次选择器

选择器功能返回值
ancestor descendant 根据祖先元素匹配所有的后代元素元素集合
parent > child 根据父元素匹配所有的子元素元素集合
prev + next 匹配所有紧接在prev元素后的相邻元素元素集合
prev ~ siblings 匹配prev元素之后的所有兄弟元素元素集合

选择器	功能	返回值
ancestor descendant	根据祖先元素匹配所有的后代元素	元素集合
parent > child	根据父元素匹配所有的子元素	元素集合
prev + next	匹配所有紧接在prev元素后的相邻元素	元素集合
prev ~ siblings	匹配prev元素之后的所有兄弟元素	元素集合

$(function(){ //匹配后代元素
    $("div span").css("display","none");//隐藏div中所有的<span>标记
})
$(function(){ //匹配子元素
    $("div>span").css("display","none");//隐藏div中子span标记
})
$(function(){ //匹配后面元素
    $("#divMid + div").css("display","none");//隐藏id为divMid元素后的下一个div
    $("#divMid").next().css("display","none");
})
$(function(){ //匹配所有后面元素
    $("#divMid ~ div").css("display","none");//隐藏id为divMid元素后的所有div
    $("#divMid").nextAll().css("display","none");
})
$(function(){ //匹配所有相邻元素
    $("#divMid").siblings("div").css("display","none");//隐藏id为divMid元素的所有相邻div
})

jQuery 简单过滤选择器

选择器功能返回值
first()或 :first 获取第一个元素单个元素
parent >last() 或 :last 获取最后一个元素单个元素
:not(selector) 获取除给定选择器外的所有元素元素集合
:even 获取所有索引值为偶数的元素，索引号从0开始元素集合
:odd 获取所有索引值为奇数的元素，索引号从0开始元素集合
:eq(index) 获取指定索引值得元素，索引号从0开始单个元素
:gt(index) 获取所有大于给定索引值的元素，索引号从0开始元素集合
:lt(index) 获取所有小于给定索引值的元素，索引号从0开始元素集合
:header 获取所有标题类型的元素，如h1、h2...... 元素集合
:animated 获取正在执行动画效果的元素元素集合

选择器	功能	返回值
first()或 :first	获取第一个元素	单个元素
parent >last() 或 :last	获取最后一个元素	单个元素
:not(selector)	获取除给定选择器外的所有元素	元素集合
:even	获取所有索引值为偶数的元素，索引号从0开始	元素集合
:odd	获取所有索引值为奇数的元素，索引号从0开始	元素集合
:eq(index)	获取指定索引值得元素，索引号从0开始	单个元素
:gt(index)	获取所有大于给定索引值的元素，索引号从0开始	元素集合
:lt(index)	获取所有小于给定索引值的元素，索引号从0开始	元素集合
:header	获取所有标题类型的元素，如h1、h2......	元素集合
:animated	获取正在执行动画效果的元素	元素集合

$(function(){ //增加第一个元素的类别
    $("li:first").addClass("GetFocus");
})
$(function(){ //增加最后一个元素的类别  
    $("li:last").addClass("GetFocus"); 
})
$(function(){ //增加去除所有与给定选择器匹配的元素类别
    $("li:not(.NotClass)").addClass("GetFocus");//
})
$(function(){ //增加所有索引值为偶数的元素类别，从0开始计数
    $("li:even").addClass("GetFocus"); //
})
$(function(){ //增加所有索引值为奇数的元素类别，从0开始计数
    $("li:odd") .addClass("GetFocus"); // 
})
$(function(){ //增加一个给定索引值的元素类别，从0开始计数
    $("li:eq(1)").addClass("GetFocus"); // 
})
$(function(){ //增加所有大于给定索引值的元素类别，从0开始计数
    $("li:gt(1)").addClass("GetFocus"); // 
})
$(function(){ //增加所有小于给定索引值的元素类别，从0开始计数
    $("li:lt(4)").addClass("GetFocus"); // 
})
$(function(){ //增加标题类元素类别
    $("div h1").css("width","238"); // 
    $(":header").addClass("GetFocus"); // 
})
$(function(){ //增加动画效果元素类别
    animateIt();
    $("#spanMove:animated").addClass("GetFocus"); // 
})
function animateIt() {//动画效果
    $("#spanMove").slideToggle("slow",animateIt);
}

.NotClass{
	width:60px;
	height:23px;
	line-height:23px;
	float:left;
	border-top:solid 1px #eee;
	border-bottom:solid 1px #eee
}
.GetFocus{
	width:58px;
	border-bottom:solid 1px #666;
	background-color:#eee
}

内容过滤选择器

选择器功能返回值
:contains(text) 获取包含给定文本的元素元素集合
:empty 获取所有不包含子元素或者文本的空元素元素集合
:has(selector) 获取含有选择器所匹配的元素的元素元素集合
:parent 获取获取含有子元素或者文本的元素元素集合

选择器	功能	返回值
:contains(text)	获取包含给定文本的元素	元素集合
:empty	获取所有不包含子元素或者文本的空元素	元素集合
:has(selector)	获取含有选择器所匹配的元素的元素	元素集合
:parent	获取获取含有子元素或者文本的元素	元素集合

$(function(){ //显示包含给定文本的元素
    $("div:contains('Div')").css("display","block");
})
$(function(){ //显示所有不包含子元素或者文本的空元素  
    $("div:empty").css("display","block"); 
})
$(function(){ //显示含有选择器所匹配的元素
    $("div:has(span)").css("display","block");//显示含有span标记的元素
})
$(function(){ //显示含有子元素或者文本的元素
    $("div:parent").css("display","block"); 
})

可见性过滤选择器

选择器功能返回值
:hidden 获取所有不可见元素，或者type为hidden的元素元素集合
:visible 获取所有的可见元素元素集合

选择器	功能	返回值
:hidden	获取所有不可见元素，或者type为hidden的元素	元素集合
:visible	获取所有的可见元素	元素集合

$(function(){ //增加所有可见元素的类别
    $("span:hidden").show()
    $("div:visible").addClass("GetFocus");
})
$(function(){ //增加所有不可见元素类别
    $("span:hidden").show().addClass("");
})

.GetFocus{
	border:solid 1px #ccc;
	background-color:#eee
}

<span style="display:none">Hidden</span>	
<div>Visible</div>

属性过滤选择器

选择器功能返回值
[attribute] 获取包含给定属性的元素元素集合
[attribute=value] 获取等于给定的属性是某个特定值得元素元素集合
[attribute!=value] 获取不等于给定的属性是某个特定值得元素元素集合
[attribute^=value] 获取给定的属性是以某些值开始的元素元素集合
[attribute$=value] 获取给定的属性是以某些值结尾的元素元素集合
[attribute*=value] 获取给定的属性是以包含某些值得元素元素集合
[selector1][selector2][selectorN] 获取满足多个条件的复合属性的元素元素集合

选择器	功能	返回值
[attribute]	获取包含给定属性的元素	元素集合
[attribute=value]	获取等于给定的属性是某个特定值得元素	元素集合
[attribute!=value]	获取不等于给定的属性是某个特定值得元素	元素集合
[attribute^=value]	获取给定的属性是以某些值开始的元素	元素集合
[attribute$=value]	获取给定的属性是以某些值结尾的元素	元素集合
[attribute*=value]	获取给定的属性是以包含某些值得元素	元素集合
[selector1][selector2][selectorN]	获取满足多个条件的复合属性的元素	元素集合

$(function(){ //显示所有包含id属性的元素 
    $("div[id]").show();
})
$(function(){ //显示所有属性title的值是"A"的元素  
    $("div[title='A']").show(); 
})
$(function(){ //显示所有属性title的值不是"A"的元素  
    $("div[title!='A']").show(); 
})
$(function(){ //显示所有属性title的值是"A"开始的元素  
    $("div[title^='A']").show(); 
})
$(function(){ //显示所有属性title的值是"C"结束的元素  
    $("div[title$='C']").show(); 
})
$(function(){ //显示所有属性title的值中含有"B"的元素  6
    $("div[title*='B']").show(3000); 
})
$(function(){ //显示所有属性title的值中含有"B"且属性id的值是“divAB”的元素   
    $("div[id='divAB'][title*='B']").show(); 
})

子元素过滤选择器

选择器功能返回值
:nth-child(eq|even|odd|index) 获取每个元素下的特定元素，索引号从1开始元素集合
:first-child 获取每个父元素下的第一个子元素元素集合
:last-child 获取每个父元素下的最后一个子元素元素集合
:only-child 获取每个父元素下的仅有一个子元素元素集合

选择器	功能	返回值
:nth-child(eq\|even\|odd\|index)	获取每个元素下的特定元素，索引号从1开始	元素集合
:first-child	获取每个父元素下的第一个子元素	元素集合
:last-child	获取每个父元素下的最后一个子元素	元素集合
:only-child	获取每个父元素下的仅有一个子元素	元素集合

$(function(){ //增加每个父元素下的第2个子元素类别 
    $("li:nth-child(2)").addClass("GetFocus");
})
$(function(){ //增加每个父元素下的第1个子元素类别  
    $("li:first-child").addClass("GetFocus"); 
})
$(function(){ //增加每个父元素下的最后一个子元素类别  
    $("li:last-child").addClass("GetFocus"); 
})
$(function(){ //增加每个父元素下只有一个子元素类别  
    $("li:only-child").addClass("GetFocus"); 
})

<ul>
	  <li>item 1-0</li>
	  <li>item 1-1</li>
	  <li>item 1-2</li>
	  <li>item 1-3</li>
	</ul>
	<ul>
	  <li>item 2-0</li>
	  <li>item 2-1</li>
	  <li>item 2-2</li>
	  <li>item 2-3</li>
	</ul>
	<ul>
	  <li>item 3-0</li>
	</ul>

表单对象属性过滤选择器

选择器功能返回值
:enabled 获取表单中所有属性为可用的元素元素集合
:disabled 获取表单中所有属性为不可用的元素元素集合
:checked 获取表单中所有被选中的元素元素集合
:selected 获取表单中素有被选中option的元素元素集合

选择器	功能	返回值
:enabled	获取表单中所有属性为可用的元素	元素集合
:disabled	获取表单中所有属性为不可用的元素	元素集合
:checked	获取表单中所有被选中的元素	元素集合
:selected	获取表单中素有被选中option的元素	元素集合

$(function(){ //增加表单中所有属性为可用的元素类别
    $("#divA").show();
    $("#form1 input:enabled").addClass("GetFocus");
})
$(function(){ //增加表单中所有属性为不可用的元素类别 
    $("#divA").show();
    $("#form1 input:disabled").addClass("GetFocus"); 
})
$(function(){ //增加表单中所有被选中的元素类别 
    $("#divB").show();
    $("#form1 input:disabled").addClass("GetFocus"); 
})
$(function(){ //显示表单中所有option的元素内容 
    $("#divC").show();
    $("#Span2").html("选中项是：" + $("select option:selected").text());
})

<form id="form1" style="width:244px">
	  <div id="divA">
	    <input type="text" class="clsIpt" value="可用文本框" />
	    <input type="text" class="clsIpt" value="不可用文本框" disabled="disabled"/>
	  </div>
	  <div id="divB">
	    <input type="checkbox" checked="checked" value="1" />选中
	    <input type="checkbox" value="0" />未选中
	  </div>
	  <div id="divC">
	    <select multiple="multiple">
	      <option value="0">Option 0</option>
	      <option value="1" selected="selected">Option 1</option>
	      <option value="2">Option 2</option>
	      <option value="3" selected="selected">Option 3</option>
	    </select>
	  <span id="Span2"></span>
	  </div>
	</form>

表单选择器

选择器功能返回值
:input 获取所有input、textarea、select 元素集合
:text 获取表单中所有单行文本框元素集合
:password 获取表单中所有密码框元素集合
:radio 获取表单中所有单选按钮元素集合
:checkbox 获取表单中所有复选框元素集合
:submit 获取表单中所有提交按钮元素集合
:image 获取表单中所有图像域元素集合
:reset 获取表单中所有重置按钮元素集合
:button 获取表单中所有按钮元素集合
:file 获取表单中所有文件域元素集合

选择器	功能	返回值
:input	获取所有input、textarea、select	元素集合
:text	获取表单中所有单行文本框	元素集合
:password	获取表单中所有密码框	元素集合
:radio	获取表单中所有单选按钮	元素集合
:checkbox	获取表单中所有复选框	元素集合
:submit	获取表单中所有提交按钮	元素集合
:image	获取表单中所有图像域	元素集合
:reset	获取表单中所有重置按钮	元素集合
:button	获取表单中所有按钮	元素集合
:file	获取表单中所有文件域	元素集合

$(function(){ //显示input类型元素的总数量 1
    $("#form1 div").html("表单共找出input类型元素" + 
    $("#form1 :input").length);
    $("#form1 div").addClass("div");
})
$(function(){ //显示所有文本框对象  2
    $("#form1 :text").show(); 
})
$(function(){ //显示所有密码框对象  3
    $("#form1 :password").show();
})
$(function(){ //显示所有单选按钮对象  4
    $("#form1 :radio").show(); 
    $("#form1 #span1").show();
})
$(function(){ //显示所有复选框对象  5
    $("#form1 :checkbox").show(); 
    $("#form1 #span2").show();
})
$(function(){ //显示所有提交按钮对象  6
    $("#form1 :submit").show();
})
$(function(){ //显示所有图片域对象  7
    $("#form1 :image").show(); 
})
$(function(){ //显示所有重置按钮对象  8
    $("#form1 :reset").show();
})
$(function(){ //显示所有按钮对象  9
    $("#form1 :button").show();
})
$(function(){ //显示所有文件域对象  10
    $("#form1 :file").show(3000);
})

<form id="form1" style="width:244px">
	  <input type="text" value="text" class="txt" />
	  <input type="password" value="password" class="txt" />
	  <input type="radio" /><span id="span1">radio</span>
	  <input type="checkbox" />
	  <textarea class="txt">textarea</textarea>
	  <select><option value="0">item 0</option></select>
	  <span id="span2">checkbox</span>
	  <input type="submit" value="submit" class="btn"/>
	  <input type="image" title="image" src="" class="img" />
	  <input type="reset" value="reset" class="btn" />
	  <input type="button" value="button" class="btn" />
	  <input type="file" title="file" class="txt" />
	  <div id="divShow"></div>
</form>