jQuery整理笔记2----jQuery选择整理
2023-09-27 14:27:02 时间
一个、基本的选择
1、ID选择器
JavaScript提供了原生方法实如今DOM中选择指定ID值得元素。
使用方法例如以下：
var element=document.getElementById("id");
jQuery简化了其操作： var $element=$("#id");
实际上就是 jQuery对javaScript进行了一下包装，jQuery的ID选择方法在运行效率上要低于JavaScript的原生方法。
2、类型选择器
跟ID选择器一样，JavaScript相同提供了原生的方法用来在DOM中选择指定类型的元素。
var elements=document.getElementByTagName(tagName"");
jQuery对其包装后的简化方法是 var $elements=$("tagName");
3、类选择器
JavaScript没有提供内置的类选择方法，我们能够自己为其拓展一个。代码例如以下：
document.getElementsByClassName=function(className){
var el=[],
_el=document.getElementsByTagName("*"); //获取全部元素
for(var i=0;i<_el.length;i++){
if(_el[i]==className){
el[el.length]=_el[i];
}
}
return el;
}
以下举个样例，一个页面有4个div,通过JavaScript使div1和div3的前景色设置成红色，通过jQuery将div2和div4的前景色设置成蓝色
<div class="red"></div>
<div class="red">div1</div>
<div class="blue">div2</div>
<div class="red">div3</div>
<div class="blue">div4</div>
代码例如以下 实例2-1：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
document.getElementsByClassName=function(className){
var el=[],
_el=document.getElementsByTagName("*"); //获取全部元素
for(var i=0;i<_el.length;i++){
if(_el[i].className==className){
el[el.length]=_el[i];
}
}
return el;
}
window.onload=function (){
var redDiv= document.getElementsByClassName("red");
for(var i=0;i<redDiv.length;i++){
redDiv[i].style.color="red";
}
};
$(function(){
$(".blue").css("color","blue");
})
</script>
</head>
<body>
<div id="" class="red">
div1
</div>
<div id="" class="blue">
div2
</div>
<div id="" class="red">
div3
</div>
<div id="" class="blue">
</div>
</body>
</html>
上述样例能够看得到jQuery的写法要相对简单一些。并且jQuery已经是一个成熟的框架了，它内部封装的类选择器方法要比咱们自己定义的效率高。
4、通配选择器（"*"）
该选择器能够匹配上下文中的全部元素，以下演示样例将选择body下的全部元素
实例2-2：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
$("body *").css("color","red");
$("div *").css("color","blue");
})
//-->
</script>
</head>
<body>
<div id="" class="">
div1
<span class="">div下的span</span>
<table>
<tr>
<td>div下的table</td>
</tr>
</table>
</div>
</br>
<span class="">span1</span>
</br>
<textarea name="" rows="3" cols="80">textarea1</textarea>
<table>
</br>
<tr>
<td>table1</td>
</tr>
</table>
</body>
</html>
5、分组选择器
jQuery支持CSS的分组选择器，通过这样的方式能够扩大选择器的选择范围，同一时候增强jQuery选择器的应用能力。选个多组元素能够通过逗号分隔符来分隔多个不同的选择器。
，这些选择器能够是随意类型的。也能够是复合选择器。
实例2-3：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("h2,#wrap,span.red,[title='text']").css("color","red");//分别选择了元素h2、id为wrap的、span下的class为red的、title为text的
})
</script>
</head>
<body>
<h2>H2</h2>
<div id="wrap" class="">
DIV
</div>
<div id="" class="red">
DIV_CLASS_RED
</div>
<span class="red">SPAN</span>
<p title="text">P</p>
</body>
</html>
二、层级选择器
层级选择器就是依据HTML文档结构中节点之间的包括或者并列关系，决定匹配元素的一种方法。
1、关系选择器
| 选择器 | 说明 |
|---|---|
| ancestor descendant |
在给定祖先元素下匹配全部后代元素。ancestor，表示不论什么有效选择器，descendant表示用以匹配元素的选择器，而且它是第一个选择器的后代元素。比如：$("form input")能够匹配表单下的全部input元素。 |
| parent>child |
在给定父元素下匹配全部子元素。perent表示不论什么有效选择器。descendant表示用以匹配元素的选择器。而且它是第一个选择器的后代元素。 比如：$("table>tr")能够匹配table下的全部tr元素 |
| prev + next |
匹配全部紧接在prev元素后的next元素。prev表示不论什么有效选择器。next表示一个有效选择器而且紧接着第一个选择器 。 比如：$("lable + input")匹配全部跟在lable后面的input元素 |
| prev ~ siblings |
匹配prev元素之后的全部siblings元素。prev表示不论什么有效选择器，siblings表示一个选择器，而且它是作为prev选择器的同辈。 比如：$("form ~ input")匹配全部跟form元素同辈的input元素。
|
通过上面的表格我们不一定能全然明确这几个选择器的细节地方，还是写个实例演示一下。
实例2-4：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 关系选择器演示实例 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
$("div").css("border","solid 1px red"); //控制全部div元素的边框宽度为1 颜色为红色
$("div>div").css("margin","2em"); //控制div下属的全部子div缩进两个中文字符
$("div div").css("background","#ff0"); //控制一级div下属的全部div元素的背景色为#ff0
$("div div div").css("background","#f0f"); //控制第三层div背景色为#f0f
$("div + p").css("margin","2em"); //控制与div相邻的p元素缩进两个中文字符，仅仅匹配div后面紧接着那个p元素
$("div:eq(1) ~ p").css("background","blue"); //控制页面第二个div（eq(1)代表取第二个)之后全部的与第二个div同辈的p元素的背景色为蓝色
})
//-->
</script>
</head>
<body>
<p>段落文本10</p>
<div id="" class="">一级div元素
<div id="" class="">二级div元素
<div id="" class="">三级div元素
</div>
<p>段落文本31</p>
<p>段落文本32</p>
</div>
<p>段落文本21</p>
<p>段落文本22</p>
</div>
<p>段落文本11</p>
<p>段落文本12</p>
</body>
</html>
2、子元素选择器
这个写个实例吧。
实例2-5：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
//$("ul li:nth-child(1)").css("background","#ff6") //匹配每一个ul元素下的第一个li元素，可能匹配0个或者多个
//$("ul li:nth-child(3n+2)").css("background","#6ff") //匹配每一个ul元素下第3n+2个li元素，n取值为0，1,2。.......
//$("ul li:first-child").css("color","red"); //匹配每一个ul元素下的第一个li元素
//$("ul li:first").css("color","red"); //匹配第一个ul元素下的第一个li元素 跟上面的那个是有差别的
//$("ul li:last-child").css("color","blue"); //匹配每一个ul元素下的最后一个li元素
//$("ul li:last").css("color","red"); //匹配最后一个ul元素下的最后一个li元素
$("ul li:only-child").css("color","red") //假设li元素是ul元素下的唯一子元素(仅仅有一个li元素,没有其它元素)，
//那么能够匹配。否则不可匹配
})
//-->
</script>
<body>
<ul>
<li>列表11</li>
<li>列表12</li>
<li>列表13</li>
<li>列表14</li>
<li>列表15</li>
<li>列表16</li>
</ul>
<ul>
<li>列表21</li>
<li>列表22</li>
<li>列表23</li>
<li>列表24</li>
<li>列表25</li>
<li>列表26</li>
</ul>
</body>
</html>
注意：
A、:nth-child(even) :nth-child(odd) //各自是匹配偶数位元素和奇数位元素 能够用2n和2n+1替代
B、我们用过的eq(n)选择器是从0開始计数的。而刚刚整理的那些选择器是从1開始计数的，使用的时候要注意
三、过滤选择器
过滤选择器主要通过特定的过滤表达式来筛选特殊需求的DOM元素，过滤选择器与CSS的伪类选择器语法格式同样，即以冒号作为前缀标识符。依据需求的不同，过滤选择器又能够分为定位过滤器、内容过滤器、可见过滤器。
以下分别介绍：
1、定位过滤器
定位过滤器主要通过编号和排位筛选特定位置上的元素，或者过滤掉特定元素.
以上效果实现代码 实例2-6：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
$("tr:first").css("color","red"); //设置第一行字体为红色
$("tr:eq(0)").css("font-size","20px"); //设置第一行字体大小为20像素 font-size:20px
$("tr:last").css("color","blue"); //设置最后一行字体为蓝色
$("tr:even").css("background","#ffd"); //设置偶数行背景色为#ffd
$("tr:odd").css("background","#dff"); //设置技术行背景色为#dff
$("tr:gt(3)").css("font-size","14px"); //设置从第五行開始全部的字体大小为14px
$("tr:lt(4)").css("font-size","14px"); //设置1-4行字体大小为14px
})
//-->
</script>
</head>
<body>
<table>
<tr>
<th>选择器</th>
<th>说 明</th>
</tr>
<tr>
<td>:first</td>
<td>匹配找到的第一个元素。比如。$("tr:first")表示匹配表格的第一行</td>
</tr>
<tr>
<td>:last</td>
<td>匹配找到的最后一个元素，比如。$("tr:last")表示匹配表格的最后一行</td>
</tr>
<tr>
<td>:not</td>
<td>去除全部与给定选择器匹配的元素。比如，$("input:not(:checked)")能够匹配全部未选中的input元素</td>
</tr>
<tr>
<td>:even</td>
<td>匹配全部索引值为偶数的元素，从0開始计数。比如$("tr:even"),能够匹配表格的偶数行</td>
</tr>
<tr>
<td>:odd</td>
<td>上面是偶数，这个是奇数</td>
</tr>
<tr>
<td>:eq</td>
<td>匹配一个给定索引值的元素，比如。$("tr:eq(0)")能够匹配第一个tr</td>
</tr>
<tr>
<td>:gt</td>
<td>匹配全部大于给定索引值的元素。从0開始计数。比如，$("tr:gt(0)")能够匹配表格的第二行以及后面的行</td>
</tr>
<tr>
<td>:lt</td>
<td>上面是大于，这个是小于，eq就相当于等于呗</td>
</tr>
<tr>
<td>:header</td>
<td>匹配如h1\h2\h3类标题元素</td>
</tr>
<tr>
<td>:animated</td>
<td>匹配全部正在运行动画效果的元素</td>
</tr>
</table>
</body>
</html>
2、内容过滤器
内容过滤器主要依据匹配元素所包括的的子元素或者文本内容进行过滤。主要有四种方式：
| 选择器 | 说 明 |
|---|---|
| :contains | 匹配包括给定文本的元素。比如，$("div:contains('图片')") 匹配全部包括文本"图片"的div元素 |
| :has | 匹配含有选择器所匹配的元素的元素。比如，$("div:has(p)")匹配全部包括p元素的div元素 |
| :empty | 匹配全部不包括子元素或者文本的空元素 |
| :parent | 匹配含有子元素或者文本的元素。与empty相互相应 |
实例2-7：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
$("li:empty").text("空内容"); //匹配空li元素
$("div ul:parent").css("background","#ff1");//匹配div下包括的不为空的ul元素
$("h2:contains('标题')").css("color","red");//匹配包括文本内容"标题"的h2元素
$("p:has(span)").css("color","blue"); //包括span元素的p元素
})
//-->
</script>
</head>
<body>
<div id="" class="">
<h2>标题</h2>
<p>段落文本1</p>
<p><span>段落文本2</span></p>
<ul>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
运行效果例如以下：
3、可见过滤器
可见过滤器就是依据元素的可见或者隐藏来进行匹配的
| 选择器 | 说 明 |
|---|---|
| :hidden | 匹配全部不可见元素，或者type为hidden的元素 |
| :visible | 匹配全部可见元素 |
实例2-8：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
$("p:odd").hide();
$("p:odd").css("color","red");
$("p:visible").css("color","blue");
$("p:hidden").show();
})
//-->
</script>
</head>
<body>
<p>段落文本1</p>
<p>段落文本2</p>
<p>段落文本3</p>
<p>段落文本4</p>
</body>
</html>
运行效果：
四、属性选择器
属性选择器通常是依据元素的属性和其值作为过滤的条件来匹配对应的DOM元素
1、七种属性选择器
| 选择器 | 说 明 |
|---|---|
| [attribute] | 匹配包括给定属性的元素，比如。$("div[id]") 匹配全部包括id属性的div元素 |
| [attridute=value] | 匹配属性等于特定值的元素。属性值的引號大多数是可选的，假设属性值包括"]"时，须要加引號以避免冲突。 |
| [attridute!=value] | 跟上面的相相应。非常好理解 |
| [attridute^=value] | 匹配给定的属性是以某些值開始的元素，比如，$("input[name^='text']")表示全部name属性值是以text開始的input元素 |
| [attridute$=value] | 匹配给定的属性是以某些值结尾的元素。跟上面的相相应 |
| [attridute*=value] | 匹配给定的属性是包括某些值得元素 |
| [selector1][selector2][selector3] | 复合属性选择器。须要同一时候满足多个条件时使用，比如。$(input[name*='text'][id])表示匹配全部name属性值包括text的且包括id属性的input元素。 |
2、使用属性选择器演示样例
看一个演示样例。在这个演示样例中将依据超链接文件的类型，分别为不同类型的文件加入图标。
实例2-8
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
var $a1=$("a[href$=pdf]");
$a1.html($a1.attr("href")+"<img src='images/pdf.jpg'/>");
var $a2=$("a[href$=rar]");
$a2.html($a2.attr("href")+"<img src='images/rar.jpg'/>");
var $a3=$("a[href$=jpg],[href$=bmp]");
$a3.html($a3.attr("href")+"<img src='images/jpg.jpg'/>");
var $a4=$("a[href^='http']");
$a4.html($a4.attr("href")+"<img src='images/html.jpg'/>");
})
//-->
</script>
</head>
<body>
<a href="1.pdf">超链接</a><br>
<a href="2.rar">超链接</a><br>
<a href="3.jpg">超链接</a><br>
<a href="4.bmp">超链接</a><br>
<a href="http://www.baidu.com">超链接</a>
</body>
</html>
运行前后效果：
五、表单选择器
表单是页面中使用频率较高的元素之中的一个，可是非常多表单域都是使用input元素来定义的，为了方便用户可以灵活操作表单。jQuery专门定义了表单选择器。使用表单选择器可以方便地获取表单中某类表单域对象。
1、基本表单选择器
| 选择器 | 说 明 |
|---|---|
| :input | 匹配全部input、textarea、select和button元素 |
| :text | 匹配全部单行文本框 |
| :password | 匹配全部password框 |
| :radio | 匹配全部单选button |
| :checkbox | 匹配全部复选框 |
| :submit | 匹配全部提交button |
| :image | 匹配全部图像域 |
| :reset | 匹配全部重置button |
| :button | 匹配全部普通button |
| :file | 匹配全部文件域 |
| :hidden | 匹配全部隐藏域 |
以下看一个表单实例
实例2-9：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
$("#form1 :text").val("改动后的文本域");
$("#form1 :password").val("改动后的密码域");
$("#form1 :checkbox").val("改动后的复选框");
$("#form1 :radio").val("改动后的单选框");
$("#form1 :image").val("改动后的图像域");
$("#form1 :file").val("改动后的文件框");
$("#form1 :hidden").val("改动后的隐藏域");
$("#form1 :button").val("改动后的普通button");
$("#form1 :submit").val("改动后的提交button");
$("#form1 :reset").val("改动后的重置button");
})
//-->
</script>
</head>
<body>
<form id="form1" method="post" >
<input type="text" name="" value="文本域"><br>
<input type="password" name="" value="密码域"><br>
<input type="checkbox" name="" value="复选框">复选框<br>
<input type="radio" name="" value="单选button">单选button<br>
<input type="image" src="" value="图像域"><br>
<input type="file" src="" value="文件域"><br>
<input type="hidden" name="" value="隐藏域"><br>
<input type="button" value="普通button" onclick=""><br>
<input type="submit" value="提交button" onclick=""><br>
<input type="reset" value="重置button" onclick=""><br>
</form>
</body>
</html>
处理前后效果图：
注意：$("#form1 text") 在form1后面有一个空格
2、高级表单选择器
除了简单的表单域选择器外，jQuery还依据表单域中特有的属性定义了4个表单属性选择器，这些选择器与基础表单选择器不同。它们能够选择不论什么类型的表单域，由于它主要依据表单属性来选择。
| 选择器 | 说 明 |
|---|---|
| :enabled | 匹配全部可用元素 |
| :disabled | 匹配全部不可用元素 |
| :checked | 匹配全部被选中的元素（复选框、单选button等，不包含select的option） |
| :selected | 匹配全部选中的option元素 |
实例2-10：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
$("#form1 :disabled").val("不可用");
$("#form1 :enabled").val("可用");
$("#form1 :checked").removeAttr("checked");
$("#form1 :selected").removeAttr("selected");
})
//-->
</script>
</head>
<body>
<form id="form1" method="post" >
<input type="text" name="" disabled="disabled" value="文本域"><br>
<input type="text" disabled="disabled" value="文本域"><br>
<input type="text" value="文本域"><br>
<input type="checkbox" name="" value="复选框" checked="checked">复选框<br>
<input type="radio" name="" value="单选button">单选button<br>
<select name="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
</select>
</form>
</body>
</html>
前后效果：
版权声明：本文博客原创文章，博客，未经同意，不得转载。
相关文章
- Asp.Net Mvc jQuery Unobtrusive Validation input tag必须是在form里面
- jQuery Ajax calls and the Html.AntiForgeryToken()
- jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象
- jquery遍历的json有两层list时的解决方法
- underscore vs jquery
- jquery prop and attr
- Web 在线文件管理器学习笔记与总结（6）jQuery UI 预览图片
- 【漏洞复现】jQuery-1.7.2 版本任意文件下载漏洞复现
- 《众妙之门——JavaScript与jQuery技术精粹》——第2章 复查JavaScript 代码的启示2.1 简介
- 《jQuery Mobile快速入门》—— 2.7 总结
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.22 小结
- 《jQuery Cookbook中文版》——1.10 创建、操作和插入DOM元素
- jquery 事件小事例
- webpack中引用jQuery的四种方式
- vue学习笔记十：Vue中引入jquery
- vue学习笔记八：Jquery VS Vue之全局属性对照
- vue学习笔记三：Jquery VS Vue之差异比较概览
- jQuery 取选中的radio的值方法
- jQuery获取循环中的选中单选按钮radio的值
- jquery工具
- jQuery多库共存问题解决方法
- jquery 弹出框效果